aiot-app/pages/pcs/components/workOrderReport.vue

<template>
	<u-popup :show="visible" :round="0" :closeOnClickOverlay="false" :zIndex="99999" @close="closePopup"
		class="u-popup-my">
		<view class="popup-content">
			<view class="popup-header">
				<text class="popup-title">{{ title }}</text>
				<view class="close-btn" @click="closePopup">×</view>
			</view>

			<scroll-view class="popup-body" scroll-y>
				<view class="page">
					<view class="card-a">
						<!-- 头部 -->
						<view class="a-header">
							<text class="a-main-title">{{ form.ruleName }}</text>
							<view class="a-sub">
								<text>📋
									{{
                    getDictValue("记录规则类型", form.recordRulesClassify)
                  }}</text>
							</view>
						</view>
						<!-- 基本信息网格 -->
						<view class="info-grid">
							<view class="info-item">
								<text class="info-label">检查时间</text>
								<uni-datetime-picker type="datetime" v-model="form.checkStartTime"
									returnType="timestamp" :disabled="title == '详情'">
									<view class="info-value">{{
                    form.checkStartTime&& dayjs(form.checkStartTime).format('YYYY-MM-DD HH:mm:ss')|| "请选择" }}</view>
								</uni-datetime-picker>
							</view>
							<view class="info-item">
								<text class="info-label">报工时间</text>

								<uni-datetime-picker type="datetime" v-model="form.checkFinishTime"
									:disabled="title == '详情'" returnType="timestamp">
									<view class="info-value">
										{{ form.checkFinishTime&& dayjs(form.checkFinishTime).format('YYYY-MM-DD HH:mm:ss')|| "请选择"}}
									</view>
								</uni-datetime-picker>
							</view>
							<view class="info-item" v-if="!form.type">
								<text class="info-label">部门</text>
								<view class="info-value" :class="{ disabled: title == '详情' }"
									@click="title != '详情' && $refs.treePicker._show()">{{ form.groupName || "请选择" }}
								</view>
							</view>
							<view class="info-item" v-if="!form.type">
								<text class="info-label">指定负责人</text>
								<view class="info-value" :class="{ disabled: title == '详情' }"
									@click="title != '详情' && $refs.selector.open()">{{
                    form.executeUsers.map((item) => item.userName).toString() ||
                    "请选择"
                  }}</view>
							</view>
							<view class="info-item" v-if="form.type">
								<text class="info-label">班组</text>
								<view class="info-value">{{ form.teamName }}</view>
							</view>
							<view class="info-item" v-if="form.type">
								<text class="info-label">执行人</text>
								<view class="info-value" :class="{ disabled: title == '详情' }"
									@click="title != '详情' && $refs.selector.open()">{{
                    form.executeUsers.map((item) => item.userName).toString() ||
                    "请选择"
                  }}</view>
							</view>
							<view class="info-item" v-if="form.type">
								<text class="info-label">场站</text>
								<view class="info-value" :class="{ disabled: title == '详情' }"
									@click="title != '详情' && (showProductLineIdPicker = true)">
									{{ form.productLineName || "请选择" }}
								</view>
							</view>
							<view class="info-item" v-if="pageName == 'productionRecords' || pageName == 'qualityTestRecords'
          "><text class="info-label">客户</text>
								<view class="info-value" :class="{ disabled: title == '详情' }"
									@click="title != '详情' && selectContactShow(17)">{{ form.contactName || "请选择" }}
								</view>
							</view>
							<view class="info-item"
								v-if="['QualityInspection', 'TransportAsh', 'HaulSlag'].includes(pageName)">
								<text class="info-label">供应商</text>
								<view class="info-value" :class="{ disabled: title == '详情' }"
									@click="title != '详情' && selectContactShow(19)">{{ form.supplierName || "请选择" }}
								</view>
							</view>
							<view class="info-item" v-if="
							            ['QualityInspection', 'TransportAsh', 'HaulSlag'].includes(pageName)
							          ">
								<text class="info-label">采购订单</text>
								<view class="info-value" :class="{ disabled: title == '详情' }" @click="openOrd">
									{{ form.purchaseOrderNo || "请选择" }}
								</view>
							</view>
							<view class="info-item" v-if="pageName == 'QualityInspection'">
								<text class="info-label">检查卸车是否到位</text>
								<view class="info-value" :class="{ disabled: title == '详情' }">

									<u-radio-group class="result-group" v-model="form.unloadCheckStatus"
										:disabled="title == '详情'">
										<u-radio label="已到位" :name="1"></u-radio>
										<u-radio label="未到位" :name="2"></u-radio>
									</u-radio-group>

								</view>
							</view>
							<view class="info-item"
								v-if="pageName == 'QualityInspection'||pageName=='TransportAsh'||pageName=='HaulSlag'">
								<view class="info-label" style="display: flex;align-items: center;">
									{{pageName=='QualityInspection'?'车辆照片':'照片'}} <u-button type="primary"
										style="width: 150rpx;margin-left: 10px;" size="small" text="拍照上传"
										v-if="title != '详情'" @click="chooseImage"></u-button>
								</view>

							</view>

						</view>
						<view style="padding-left: 30rpx;"
							v-if="pageName == 'QualityInspection'||pageName=='TransportAsh'||pageName=='HaulSlag'">

							<AlbumDeletable :urls="getUrl(form.vehiclePhotoUrl)" :singleSize="170" :multipleSize="170"
								:deletable="title != '详情'" @delete="handleDeleteImage"></AlbumDeletable>

						</view>
						<!-- 运行参数记录区 -->
						<view class="records-area">
							<view class="section-header">
								<view class="section-title">
									<text>📊 记录数据</text>
								</view>
							</view>
							<!-- 批量操作按钮放在标题下方 -->
							<view class="batch-bar" v-if="![
                'qualityTestRecords',
                'productionRecords',
                'QualityInspection',
                'HaulSlag',
                'TransportAsh'
              ].includes(pageName) && title != '详情'">
								<button class="btn btn-primary" @click="batchCheck">
									✅ 批量检查
								</button>
								<button class="btn btn-secondary" @click="batchQualified">
									🏭 批量合格
								</button>
							</view>

							<!-- 检查项列表 -->
							<view v-for="(item, idx) in form.detailList" :key="idx" class="check-item-a">
								<view class="item-row1">
									<view class="item-info">
										<text class="item-name">{{ idx + 1 }}. {{ item.paramValue }}
											{{ item.unitName ? "(" + item.unitName + ")" : "" }}</text>
									</view>
								</view>
								<view class="item-row-input" v-if="item.substanceName">
									<text class="input-label">设备</text>
									<view class="item-input"> {{ item.substanceName }}</view>
								</view>
								<!-- 描述/数量 -->
								<view class="item-row-input">
									<text class="input-label">值</text>

									<input class="item-input" v-model="item.num" type="text" placeholder="请输入数量"
										@input="setValue" :disabled="title == '详情'" />
								</view>
								<view class="item-row-input" v-if="pageName == 'qualityTestRecords'">
									<text class="input-label">执行人</text>

									<view class="info-value" style="padding: 6px 10px; flex: 1; border-radius: 28rpx"
										:class="{ disabled: title == '详情' }"
										@click="title != '详情' && itemExecuteUsers(idx, item)">{{
                      (item.checkUsers &&
                        item.checkUsers
                          .map((item) => item.userName)
                          .toString()) ||
                      "请选择"
                    }}</view>
								</view>
								<view class="item-actions" v-if="![
                'qualityTestRecords',
                'productionRecords',
                'QualityInspection',
                'HaulSlag',
                'TransportAsh'
              ].includes(pageName)">
									<u-radio-group class="result-group" v-model="item.checkStatus"
										:disabled="title == '详情'">
										<u-radio label="已检查" :name="1"></u-radio>
										<u-radio label="未检查" :name="0"></u-radio>
									</u-radio-group>
									<u-radio-group class="result-group" v-model="item.checkResult"
										:disabled="title == '详情'">
										<u-radio label="合格" :name="1"></u-radio>
										<u-radio label="不合格" :name="0"></u-radio>
									</u-radio-group>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="popup-footer">
				<u-button type="default" @click="closePopup">关闭</u-button>
				<u-button type="primary" @click="submit()" v-if="title == '报工'" :loading="loading">提交</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>

		<ba-tree-picker ref="treePicker" key="verify" :multiple="false" @select-change="searchDeptNodeClick"
			title="选择部门" :localdata="classificationList" valueKey="id" textKey="name" childrenKey="children" />
		<search-select :multiple="true" ref="selector" v-model="form.executeUsersIds" :data-list="
        executorList.map((val) => {
          return {
            text: val.name,
            value: val.id,
          };
        })
      " title="选择" @confirm="executeIdListChange">
		</search-select>
		<!-- 场站 -->
		<u-picker :show="showProductLineIdPicker" keyName="label" :columns="[
        productLineList.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        }),
      ]" @confirm="confirmProductLine" @cancel="showProductLineIdPicker = false"></u-picker>
		<search-select :multiple="true" ref="selector1" v-model="checkUsersIds" :data-list="
        (form.executeUsers &&
          form.executeUsers.map((val) => {
            return {
              text: val.userName,
              value: val.userId,
            };
          })) ||
        []
      " title="选择" @confirm="executeIdListChange1">
		</search-select>
		<orderListDialog ref="orderListDialogRef" @changeParent="orderListDialogSuccess" :radioValue='true'>
		</orderListDialog>
	</u-popup>
</template>

<script>
	const formBaseData = {
		id: null,
		workshopArea: "",
		workshopAreaId: null,
		checkFinishTime: "",
		checkStartTime: "",
		checkValidity: null,
		checkValidityUnit: "",
		checkValidityUnit: "",
		conclusion: null,
		detailList: [],
		deviceId: 0,
		deviceName: "",
		batchNo: "",
		executeMethod: 0,
		formingNum: 0,
		itemType: 0,
		produceRoutingId: 0,
		produceRoutingName: "",
		produceTaskConfigId: 0,
		produceTaskId: 0,
		produceTaskName: "",
		productCode: "",
		productModel: "",
		productName: "",
		recordRulesClassify: null,
		recordTemplateStyle: null,
		ruleId: 0,
		ruleName: "",
		reportWorkType: 0,
		specification: "",
		workOrderCode: "",
		workOrderId: 0,
		itemTaskName: "",
		brandNo: "",
		duration: null,
		// 执行人
		executeUsersIds: [],
		executeUsers: [],
		showProductLineIdPicker: false,
		// 班组id
		teamId: "",
		groupId: null,
		// 物料字段name
		pickDetails: [],
		// 本次产出明细
		outputDetails: [],
		recordRulesExecuteMethodId: null,
		recordRulesExecuteMethodName: "",
		// 	产出类型 1-原材料，2-在制品，3.BOM标准产出
		outputType: 1,
		type: 0,
		contactName: "",
		contactId: "",
		supplierId: "",
		supplierName: "",
		productLineId: null,
		productLineName: "",
		unloadCheckStatus: '',
		vehiclePhotoUrl: [],
		purchaseOrderId: '',
		purchaseOrderNo: '',
		// clientEnvironmentId: uni.getStorageSync("userInfo") &&
		// 	uni.getStorageSync("userInfo").clientEnvironmentId,
	};
	import {
		getById,
		producetaskrulerecordSaveOrUpdateAndSubmit,
	} from "@/api/recordRules/index";
	import {
		getTeamPage
	} from "@/api/pda/workOrderHandover.js";
	import {
		getUserPage,
		listOrganizations
	} from "@/api/common.js";
	import {
		toTreeData
	} from "@/utils/utils.js";
	import {
		mapGetters
	} from "vuex";
	import searchSelect from "@/pages/salesServiceManagement/accessory/components/searchSelect.vue";
	import AlbumDeletable from "@/components/AlbumDeletable/AlbumDeletable.vue";
	import orderListDialog from './OrderListDialog.vue';

	import {
		getPurchaseOrderList
	} from '@/api/purchasingManage/index.js'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				visible: false,
				executeUsersIds: [],
				imgs: [],
				title: "",
				loading: false,
				butLoading: false,
				checked: false,
				teamUserList: [],
				teamList: [],
				teamAllList: [],
				classificationList: [],
				showProductLineIdPicker: false,
				showCheckUsersIds: false,
				checkUsersIds: '',
				executorList: [],
				allTeamList: [],
				productLineList: [],
				dayjs,
				currentIndex: "",
				form: JSON.parse(JSON.stringify(formBaseData)),
			};
		},
		computed: {
			...mapGetters(["getDictValue"]),
		},
		components: {
			searchSelect,
			AlbumDeletable,
			orderListDialog
		},
		props: {
			pageName: "",
		},
		methods: {
			async open(row, type) {
				uni.$off("setSelectList");
				uni.$on("setSelectList", (data) => {
					if (data && data.length > 0) {
						this.form.contactName = data[0].name;
						this.form.contactId = data[0].id;
						this.form.supplierName = data[0].name;
						this.form.supplierId = data[0].id;

						if (['QualityInspection', 'HaulSlag', 'TransportAsh'].includes(
								this.pageName
							)) {

							this.form.purchaseOrderId = ''
							this.form.purchaseOrderNo = ''
							//来煤获取采购订单
							getPurchaseOrderList({
								pageNum: 1,
								size: 999,
								orderStatus: 2,
								partbId: data[0].id
							}).then((res) => {
								if (res.list?.length == 1) {
									this.form.purchaseOrderId = res.list[0].id;
									this.form.purchaseOrderNo = res.list[0].orderNo;
								}
							});
						}
					}
				});

				if (type == "edit") {
					this.title = "报工";
				} else {
					this.title = "详情";
				}
				this.getTreeList();
				await this.getOrderDetials(row.id);
				this.visible = true;
			},
			cancel() {
				this.form = {
					...JSON.parse(JSON.stringify(formBaseData)),
				};

				this.visible = false;
			},
			async getTreeList() {
				const data = await listOrganizations({});
				let treeList = toTreeData({
					data: data || [],
					idField: "id",
					parentIdField: "parentId",
				});
				this.classificationList = treeList;
			},
			selectContactShow(type) {
				uni.navigateTo({
					url: "/pages/saleManage/components/selectContact?isAll=" +
						false +
						"&contactType=" +
						type + '&code=' + this.getCode(),
				});
			},
			confirmProductLine(e) {
				this.form.productLineId = e.value[0].value;
				this.form.productLineName = e.value[0].label;
				this.showProductLineIdPicker = false;
			},

			closePopup() {
				this.cancel();
			},
			openOrd() {
				if (!this.form.supplierId) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请先选择供应商！`,
					});
					return;
				}
				this.$refs.orderListDialogRef.open(
					this.form.supplierId,
					//渣和灰拿委外订单
					['TransportAsh', 'HaulSlag'].includes(this.pageName) ?
					'3,4,5,6,7' :
					''
				);
			},
			orderListDialogSuccess(data) {
				this.form.purchaseOrderId = data.id;
				this.form.purchaseOrderNo = data.orderNo;
			},
			getCode() {
				let userInfo = uni.getStorageSync("userInfo")
				if (userInfo.clientEnvironmentId == 10) {
					return this.pageName == 'QualityInspection' ?
						'06mei' :
						this.pageName == 'TransportAsh' ?
						'07lafei' :
						this.pageName == 'HaulSlag' ?
						'08lazha' :
						'';
				} else {
					return '';
				}
			},
			// 获取工单详情
			async getOrderDetials(id) {
				try {
					const data = await getById(id);

					let userInfo = uni.getStorageSync("userInfo")

					if (data.type == 1) {
						//班组报工默认单前登录人
						data.executeUsers = [{
							groupId: userInfo.groupId,
							groupName: userInfo.groupName,
							teamId: null,
							teamName: '',
							userId: userInfo.userId,
							userName: userInfo.name
						}];
					}

					data.detailList = data.detailList.map((i) => {
						i.toolNames = i.tools.map((j) => j.toolName).join(",");
						if (i.checkUsers && i.checkUsers.length > 0) {
							console.log("i.checkUsers", i.checkUsers);
							i.checkUsersIds = i.checkUsers.map((j) => j.userId);
						}

						if (
							(!i.checkUsersIds || i.checkUsersIds.length == 0) &&
							data.executeUsers.length > 0
						) {
							// 默认执行人作为检查人
							i.checkUsersIds = data.executeUsers
								.filter((i) => i.userId)
								.map((j) => j.userId);
							i.checkUsers = data.executeUsers
								.filter((i) => i.userId)
								.map((j) => {
									return {
										teamId: j.teamId,
										teamName: j.teamName,
										userId: j.userId,
										userName: j.userName,
									};
								});
						}
						return i;
					});
					// this.$util.assignObject(this.form, data);
					Object.assign(this.form, data);
					this.form.vehiclePhotoUrl = this.form.vehiclePhotoUrl || [];
					this.form.unloadCheckStatus = this.form.unloadCheckStatus || 1;

					this.form.checkStartTime =
						this.form.checkStartTime ||
						dayjs(new Date()).format('YYYY-M-D HH:mm:ss');
					this.form.checkFinishTime =
						this.form.checkFinishTime ||
						dayjs(new Date()).format('YYYY-M-D HH:mm:ss');
					console.log(
						this.form.checkStartTime,
						'this.form.checkStartTime'
					);
					this.form.executeUsersIds = this.form.executeUsers
						.map((i) => i.userId)
						.filter((i) => i); // 过滤掉 undefined

					if (this.form.executeUsers.length > 0 && !this.form.type) {
						this.form.groupId = this.form.executeUsers[0]?.groupId + "";
						this.form.groupName = this.form.executeUsers[0]?.groupName;
						if (this.form.groupId) {
							this.searchDeptNodeClick(
								this.form.groupId,
								this.form.groupName,
								"init",
							);
						}
					}

					if (!this.form.teamId && this.teamList.length > 0) {
						this.form.teamId = this.teamList[0].id;
					}

					this.form.recordRulesClassify += "";

					// 加载班组人员列表
					if (this.form.teamId && this.form.type) {
						await this.getAllTeamList();

						const index = this.allTeamList.findIndex(
							(item) => item.id == this.form.teamId,
						);
						this.executorList = this.allTeamList[index].userVOList;

						this.productLineList = [];

						this.allTeamList[index].factoryWorkstationVOList.forEach((item) => {
							if (
								!this.productLineList.find((p) => p.id === item.productionLineId)
							) {
								this.productLineList.push({
									name: item.productionLineName,
									id: item.productionLineId,
								});
							}
						});
					}
					console.log(userInfo, 'this.clientEnvironmentId')
					//宇信
					if (
						userInfo.clientEnvironmentId == 10 && ['productionRecords', 'qualityTestRecords'].includes(this
							.pageName)
					) {
						//客户:5#和6#默认是重油公司7#默认是红山 2008389016775864321==7#
						if (this.form.productLineId == '2008389016775864321') {
							this.form.contactId =
								this.form.contactId || '2008562263580520449';
							this.form.contactName =
								this.form.contactName || '克拉玛依红山油田有限责任公司';
						} else {
							this.form.contactId =
								this.form.contactId || '2008383566202318850';
							this.form.contactName =
								this.form.contactName || '中国石油新疆油田分公司(重油公司)';
						}
					}
					this.setValue();
					this.$nextTick(() => {
						this.loading = false;
					});
				} catch (error) {
					console.log("error", error);
					this.loading = false;
				}
			},
			checkTeamList(id) {
				const index = this.teamList.findIndex((item) => item.id == id);
				this.teamUserList = this.teamAllList[index];
				this.form.teamName = this.teamList[index].name;
				console.log("this.teamUserList", this.teamUserList);
			},


			chooseImage() {
				const _this = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '加载中'
						})

						_this.uploadFile(res.tempFilePaths).then(res => {
							res.forEach(item => {
								// let fileNames = item.storePath.split('/')
								// let url =
								// 	'/main/file/getFile?objectName=' + item.storePath +
								// 	'&fullfilename=' + fileNames[fileNames.length -
								// 		1]
								_this.form.vehiclePhotoUrl.push(item.storePath)
							})

							uni.hideLoading()

						})

					}
				});
			},
			getUrl(arr) {
				// console.log(arr, 'arr')
				if (arr.length) {
					return arr.map(item => {
						let fileNames = item.split('/')
						return this.apiUrl + '/main/file/getFile?objectName=' + item + '&fullfilename=' +
							fileNames[fileNames.length - 1]
					})
				} else {
					return []
				}


			},
			uploadFile(list) {
				let PromiseAll = []
				const apiUrl = this.apiUrl
				const token = uni.getStorageSync("token"); //取存本地的token
				list.forEach(item => {
					PromiseAll.push(
						new Promise((resolve, reject) => {
							uni.uploadFile({
								url: apiUrl + '/main/file/upload',
								filePath: item,
								name: 'multiPartFile',
								header: {
									authorization: token
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data)
									resolve(data.data)
								}
							});
						}),
					)
				})

				return Promise.all(PromiseAll)

			},
			setValue() {
				if (this.title == '报工') {
					this.form.detailList.forEach((item, index) => {

						if (this.pageName == 'qualityTestRecords') {
							let num1 = this.form.detailList.find(
								(item1) => item1.paramValue == '给水量'
							)?.num;
							let num2 = this.form.detailList.find(
								(item1) => item1.paramValue == '炉水量'
							)?.num;
							let num = 0;
							if (num1 && num2) {
								num = (num2 - num1) / num2;
							}
							if (item.paramValue == '干度') {
								this.$set(
									this.form.detailList[index],
									'num',
									parseFloat(num.toFixed(5)) * 100
								);
							}
							if (item.paramValue == '是否合格' && num1) {
								this.$set(
									this.form.detailList[index],
									'num',
									parseFloat(num.toFixed(5)) * 100 >= 90 ? '合格' : '不合格'
								);
							}
						}
						if (this.pageName == 'productionRecords') {
							let num1 = this.form.detailList.find(
								(item1) => item1.paramValue == '日用水量'
							)?.num;

							let num = 0;
							if (num1) {
								num = num1 * 0.1034;
							}
							if (item.paramValue == '日用煤量') {
								this.$set(
									this.form.detailList[index],
									'num',
									parseFloat(num.toFixed(5))
								);
							}
						}
					});
				}
			},
			handleDeleteImage(index) {
				this.form.vehiclePhotoUrl.splice(index, 1);
			},
			// 批量检查
			batchCheck() {
				this.form.detailList.forEach((i, index) => {
					this.$set(this.form.detailList[index], "checkStatus", 1);
				});
			},
			// 批量合格
			batchQualified() {
				this.form.detailList.forEach((i, index) => {
					this.$set(this.form.detailList[index], "checkResult", 1);
				});
			},
			itemExecuteUsers(index, row) {
				this.currentIndex = index;
				this.$refs.selector1.open();
			},
			executeIdListChange1() {
				this.$set(
					this.form.detailList[this.currentIndex],
					"checkUsersIds",
					this.checkUsersIds,
				);
				const checkUsersIds = this.checkUsersIds;
				this.checkUsersIds = [];
				const checkUsers = checkUsersIds.map((i) => {
					const user = this.form.executeUsers.find((item) => item.userId === i);
					return user;
				});
				console.log(checkUsers, "checkUsers");
				this.$set(
					this.form.detailList[this.currentIndex],
					"checkUsers",
					checkUsers,
				);
			},

			// 获取审核人列表、巡点检人员
			async getUserList(params) {
				try {
					let data = {
						pageNum: 1,
						size: -1,
					};
					// 如果传了参数就是获取部门人员数据
					if (params) {
						data = Object.assign(data, params);
					}
					const res = await getUserPage(data);
					if (params) {
						this.executorList = res.list;
					}
				} catch (error) {}
			},
			//选择部门(搜索)
			async searchDeptNodeClick(id, name, type) {
				this.form.groupId = id;
				this.form.groupName = name;
				if (id) {
					// 根据部门获取人员
					const params = {
						groupId: id,
					};
					await this.getUserList(params);
				} else {
					this.form.groupId = null;
				}
				if (type != "init") {
					this.form.detailList.forEach((detail) => {
						detail.checkUsersIds = [];
						detail.checkUsers = [];
					});
					this.form.executeUsers = [];
					this.form.executeUsersIds = [];
				}
			},
			// 负责人变更 同步执行人列表
			executeIdListChange() {
				console.log(this.form.executeUsersIds, "this.form.executeUsersIds");
				this.form.executeUsers = this.form.executeUsersIds
					.map((userId) => {
						const user = this.executorList.find((u) => u.id === userId);
						if (!user) return null;
						return {
							userId: user.id,
							userName: user.name,
							groupId: user.groupId,
							groupName: user.groupName,
						};
					})
					.filter((i) => i);
				// 同步详情执行人
				this.form.detailList.forEach((detail, index) => {
					this.$set(
						this.form.detailList[index],
						"checkUsersIds",
						this.form.executeUsersIds,
					);
					this.$set(
						this.form.detailList[index],
						"checkUsers",
						this.form.executeUsers,
					);
				});
				console.log("this.form.executeUsers", this.form.detailList);
			},
			async getAllTeamList() {
				const {
					list
				} = await getTeamPage({
					pageNum: 1,
					size: -1,
				});
				console.log("teamAllList 班组", list);
				this.allTeamList = list;
			},

			// 提交
			async submit() {
				// 验证检查时间和报工时间必填
				if (!this.form.checkStartTime) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择检查时间`,
					});
					return;
				}
				if (!this.form.checkFinishTime) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择报工时间`,
					});
					return;
				}
				if (['QualityInspection', 'TransportAsh', 'HaulSlag'].includes(this.pageName) && !this.form
					.supplierName) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择供应商！`,
					});
					return;
				}
				if (['QualityInspection', 'TransportAsh', 'HaulSlag'].includes(this.pageName) && !this.form
					.purchaseOrderNo) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择采购订单！`,
					});
					return;
				}
				if (['QualityInspection', 'TransportAsh', 'HaulSlag'].includes(this.pageName) && !this.form
					.vehiclePhotoUrl.length) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择照片！`,
					});
					return;
				}

				// 验证报工时间必须大于等于检查时间
				const startTime = new Date(this.form.checkStartTime).getTime();
				const finishTime = new Date(this.form.checkFinishTime).getTime();

				if (finishTime < startTime) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `报工时间不能早于检查时间`,
					});
					return;
				}

				if (this.form.executeUsersIds.length == 0) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择执行人`,
					});
					return;
				}

				if (![
						'qualityTestRecords',
						'productionRecords',
						'QualityInspection',
						'HaulSlag',
						'TransportAsh'
					].includes(this.pageName)) {
					// 验证检查项目
					const detailRequired = this.form.detailList.some((i) => {
						return i.checkResult == null || i.checkStatus == null;
					});

					if (detailRequired) {
						this.$refs.uToast.show({
							type: "error",
							icon: false,
							message: `请先完善、检查情况、检查结果`,
						});
						return;
					}
				}

				this.form.checkStartTime = dayjs(this.form.checkStartTime).format('YYYY-MM-DD HH:mm:ss')
				this.form.checkFinishTime = dayjs(this.form.checkFinishTime).format('YYYY-MM-DD HH:mm:ss')
				const body = JSON.parse(JSON.stringify(this.form));


				try {
					await producetaskrulerecordSaveOrUpdateAndSubmit(body);
					this.$emit("refresh");
					this.closePopup();
				} catch (error) {
					console.log(error, "dsdsd");
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.popup-content {
		width: 100vw;
		height: calc(100vh - 100px);
		background: #fff;
		border-radius: 0;
		display: flex;
		background-color: #eff2f7;
		flex-direction: column;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #e5e5e5;

		.popup-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.close-btn {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 60rpx;
			color: #999;
			line-height: 1;
		}
	}

	.popup-body {
		flex: 1;
		overflow-y: auto;
		padding: 28rpx;
	}

	.page {
		font-family:
			system-ui,
			-apple-system,
			"Segoe UI",
			Roboto,
			Helvetica,
			sans-serif;
	}

	.design-section {
		/* margin-bottom: 60rpx; */
	}

	.design-header {
		margin-bottom: 20rpx;
		padding-left: 8rpx;
	}

	.design-title {
		font-size: 44rpx;
		font-weight: 800;
		color: #1f2b3c;
		display: block;
	}

	.design-desc {
		font-size: 26rpx;
		color: #6b7280;
		margin-top: 6rpx;
	}

	/* 卡片白色风格 */
	.card-a {
		background: #ffffff;
		border-radius: 48rpx;
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.a-header {
		padding: 40rpx 32rpx 24rpx;
		border-bottom: 2rpx solid #f0f2f5;
	}

	.a-main-title {
		font-size: 36rpx;
		font-weight: 800;
		background: linear-gradient(135deg, #1f2b3c, #2c3e50);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		letter-spacing: -0.5rpx;
	}

	.a-sub {
		font-size: 24rpx;
		color: #8e9aae;
		margin-top: 12rpx;
		display: flex;
		gap: 24rpx;
	}

	.info-grid {
		padding: 30rpx 32rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 28rpx 20rpx;
		// background: #fcfdfe;
		border-bottom: 2rpx solid #f0f2f5;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.info-label {
		font-size: 26rpx;
		font-weight: 600;
		color: #6c7a91;
		text-transform: uppercase;
	}

	.records-area {
		padding: 16rpx 28rpx 32rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 16rpx 0 20rpx 8rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #1f2a44;
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.badge {
		background: #eff3fa;
		padding: 6rpx 20rpx;
		border-radius: 60rpx;
		font-size: 24rpx;
		font-weight: normal;
		color: #2c5f8a;
	}

	.device-card-a {
		background: #f8fbfe;
		border-radius: 36rpx;
		padding: 20rpx 24rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		border: 2rpx solid #e9edf2;
	}

	.device-label {
		font-weight: 700;
		font-size: 28rpx;
		color: #1f2a44;
		background: #eff3fa;
		padding: 8rpx 24rpx;
		border-radius: 60rpx;
	}

	.device-input-a {
		flex: 1;
		min-width: 280rpx;
		background: #ffffff;
		border: 2rpx solid #dce3ec;
		border-radius: 36rpx;
		padding: 16rpx 24rpx;
		font-size: 28rpx;
	}

	.check-item-a {
		background: #ffffff;
		border-radius: 36rpx;
		padding: 24rpx 24rpx;
		margin-bottom: 24rpx;
		box-shadow:
			0 4rpx 16rpx rgba(0, 0, 0, 0.02),
			0 0 0 2rpx #edf2f7;
	}

	.item-row1 {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		gap: 16rpx;
	}

	.item-name {
		font-weight: 620;
		font-size: 30rpx;
		color: #1f2a44;
		background: #f5f7fb;
		padding: 6rpx 20rpx;
		border-radius: 50rpx;
	}

	.item-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.item-row-input {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
		padding: 0 8rpx;
	}

	.input-label {
		font-size: 28rpx;
		color: #555;
		font-weight: 500;
		white-space: nowrap;
	}

	.item-input {
		// background: #f8fafe;
		border: 2rpx solid #e2e8f0;
		border-radius: 36rpx;
		padding: 12rpx 24rpx;
		font-size: 30rpx;
		min-height: 60rpx;
		flex: 1;
		font-family: monospace;
	}

	.item-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.check-status,
	.result-group {
		display: flex;
		align-items: center;
		gap: 24rpx;
		background: #f8fafe;
		padding: 8rpx 24rpx;
		border-radius: 60rpx;
		font-size: 28rpx;
	}

	/deep/.result-group {
		.u-radio__text {
			font-size: 28rpx !important;
		}

		.u-radio__icon-wrap {
			width: 30rpx !important;
			height: 30rpx !important;
		}
	}

	.radio-label {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.batch-bar {
		display: flex;
		gap: 16rpx;
		margin: 16rpx 0 20rpx 8rpx;
	}

	.btn {
		flex: 1;
		text-align: center;
		border-radius: 80rpx;
		font-weight: 700;
		font-size: 30rpx;
		border: none;
	}

	.btn-primary {
		background: #1e6f5c;
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(30, 111, 92, 0.2);
	}

	.btn-secondary {
		background: #2c7da0;
		color: white;
	}

	.footnote {
		font-size: 22rpx;
		color: #8e9aab;
		text-align: center;
		margin-top: 16rpx;
		display: block;
	}

	/* 修复组件样式 */
	radio,
	checkbox {
		transform: scale(0.9);
		margin-right: 6rpx;
	}

	button:after {
		border: none;
	}

	.info-value {
		font-size: 28rpx;
		font-weight: 500;
		color: #1e2a3a;
		// background: #f2f5f9;
		padding: 16rpx 20rpx;
		border-radius: 24rpx;
		border: 2rpx solid #e9edf2;

		&.disabled {
			color: #999;
			background: #f5f5f5;
		}
	}

	.popup-footer {
		display: flex;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #e5e5e5;
		gap: 20rpx;

		/deep/ .u-button {
			flex: 1;
		}
	}

	/deep/.uni-select {
		border-radius: 36rpx;
	}
</style>