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"
                  :disabled="title == '详情'"
                >
                  <view class="info-value">{{
                    form.checkStartTime || "请选择"
                  }}</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 == '详情'"
                >
                  <view class="info-value">{{
                    form.checkFinishTime || "请选择"
                  }}</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";

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: [],
      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;
      }
      // 验证报工时间必须大于等于检查时间
      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;
        }
      }

      // 处理时间格式 - 如果没有时分秒则补齐 00:00:00
      const formatTime = (timeStr) => {
        if (!timeStr) return timeStr;
        // 如果只包含日期部分 (YYYY-MM-DD)，添加时分秒
        if (/^\d{4}-\d{2}-\d{2}$/.test(timeStr)) {
          return timeStr + " 00:00:00";
        }
        return timeStr;
      };

      this.form.checkStartTime = formatTime(this.form.checkStartTime);
      this.form.checkFinishTime = formatTime(this.form.checkFinishTime);

      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;
  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>