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 == 'steamInjectionInspectionRecord'">
								<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="pageName == 'solidWasteRecord'">
								<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="pageName == 'qualityTestRecords'">
								<text class="info-label">联合站检查人</text>
								<view class="info-value" :class="{ disabled: title == '详情' }"
									@click="title != '详情' && selectContactShow(17)">{{ form.contactName || "请选择" }}
								</view>
							</view>
						</view>
						<!-- 运行参数记录区 -->
						<view class="records-area">
							<view class="section-header">
								<view class="section-title">
									<text>📊 记录数据</text>
								</view>
							</view>
							<!-- 批量操作按钮放在标题下方 -->
							<view class="batch-bar" v-if="pageName != 'productionRecords' && 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">{{
                    pageName == "qualityTestRecords" ? "描述" : "数量"
                  }}</text>

									<input class="item-input" v-model="item.num" type="text" placeholder="请输入数量"
										: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="pageName != 'productionRecords'">
									<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>
		<!-- <u-picker
      :show="showCheckUsersIds"
      keyName="label"
      mode="multiSelector"
      :columns="[
        form.executeUsers &&
          form.executeUsers.map((item) => {
            return {
              label: item.userName,
              value: item.userId,
            };
          }),
      ]"
      @confirm="confirmCheckUsersIds"
      @cancel="showCheckUsersIds = false"
    ></u-picker> -->
	</u-popup>
</template>

<script>
	const formBaseData = {
		id: null,
		workshopArea: "",
		workshopAreaId: null,
		checkFinishTime: "",
		checkStartTime: "",
		checkValidity: null,
		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: "",
	};
	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 dayjs from 'dayjs'
	export default {
		data() {
			return {
				visible: false,
				executeUsersIds: [],
				title: "",
				loading: false,
				butLoading: false,
				checked: false,
				teamUserList: [],
				teamList: [],
				teamAllList: [],
				classificationList: [],
				showProductLineIdPicker: false,
				showCheckUsersIds: false,
				executorList: [],
				allTeamList: [],
				productLineList: [],
				dayjs,
				currentIndex: "",
				form: JSON.parse(JSON.stringify(formBaseData)),
			};
		},
		computed: {
			...mapGetters(["getDictValue"]),
		},
		components: {
			searchSelect,
		},
		props: {
			pageName: "",
		},
		methods: {
			async open(row, type) {
				uni.$off("setSelectList");
				uni.$on("setSelectList", (data) => {
					console.log(data, "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 (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,
				});
			},
			confirmProductLine(e) {
				this.form.productLineId = e.value[0].value;
				this.form.productLineName = e.value[0].label;
				this.showProductLineIdPicker = false;
			},

			closePopup() {
				this.cancel();
			},

			handParent() {
				this.$refs.parentListRef.open();
			},
			changeParent(data) {
				this.form.contactName = data.name;
				this.form.contactId = data.id;
				this.form.supplierName = data.name;
				this.form.supplierId = data.id;
			},
			// 获取工单详情
			async getOrderDetials(id) {
				try {
					const data = await getById(id);
					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.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,
								});
							}
						});
					}

					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);
			},

			// 批量检查
			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 (this.pageName == 'steamInjectionInspectionRecord'&&!this.form.contactName) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择甲方检查人！`,
					});
					return;
				}
				if (this.pageName == 'solidWasteRecord'&&!this.form.supplierName) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						message: `请选择处理方！`,
					});
					return;
				}
				if (this.pageName == 'qualityTestRecords'&&!this.form.contactName) {
					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;
				}

				// 报工需要验证 缓存不验证 排除 recordTemplateStyle ==3 物料添加 == 4生产统计 模板
				if (this.pageName != "productionRecords") {
					// 验证检查项目
					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>