最新代码

kyy

2025-07-14 ab826d12b52265bc4f25044d43a042df2104f972

 pages/QC/RKJ/detail.vue

@@ -1,147 +1,252 @@
<template>
  <view>
    <view class="form-container">
      <form :modelValue="formData">
        <view class="form-group">
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">检验详情</text>
    </view>

    <!-- 基本信息模块 (2-1排列) -->
    <view class="module-card mb-2">
      <view class="module-header">
        <text class="module-title">基本信息</text>
      </view>
      <view class="form-grid">
        <view class="form-group col-6">
          <label class="form-label">检验单号:</label>
          <input class="form-input" disabled="true" type="text" v-model="releaseNo" />
        </view>
        <view class="form-group col-6">
          <label class="form-label">项目名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.projName"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.projName" />
        </view>
        <view class="form-group">
        <view class="form-group col-12">
          <label class="form-label">质量要求:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.itemMod"/>
          <input class="form-input quality-requirement" disabled="true" type="text" v-model="formData.itemMod" />
        </view>
        <view class="form-group">
      </view>
    </view>

    <!-- 检验设置模块 (3个字段) -->
    <view class="module-card mb-2">
      <view class="module-header">
        <text class="module-title">检验设置</text>
      </view>
      <view class="form-grid">
        <view class="form-group col-4">
          <label class="form-label">检验方法:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod" />
        </view>
        <view class="form-group">
        <view class="form-group col-4">
          <label class="form-label">使用仪表:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.usingInstruments"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.usingInstruments" />
        </view>
        <view class="form-group">
        <view class="form-group col-4">
          <label class="form-label">检验数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.levelNum"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.levelNum" />
        </view>
        <view class="form-group">
          <label class="form-label">检验标准编码:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.qsCode"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验标准名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.qsName"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验水平:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fcheckLevel"/>
        </view>
        <view class="form-group">
          <label class="form-label">接收水平:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.facLevel"/>
        </view>
        <view class="form-group">
      </view>
    </view>

    <!-- 数值范围模块 (3个字段) -->
    <view class="module-card mb-2">
      <view class="module-header">
        <text class="module-title">数值范围</text>
      </view>
      <view class="form-grid">
        <view class="form-group col-4">
          <label class="form-label">下限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.minValue"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.minValue" />
        </view>
        <view class="form-group">
        <view class="form-group col-4">
          <label class="form-label">标准值:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.standardValue"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.standardValue" />
        </view>
        <view class="form-group">
        <view class="form-group col-4">
          <label class="form-label">上限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.maxValue"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.maxValue" />
        </view>
        <view class="form-group">
      </view>
    </view>

    <!-- 标准规范模块 (4列布局) -->
    <view class="module-card mb-2">
      <view class="module-header">
        <text class="module-title">标准规范</text>
      </view>
      <view class="form-grid">
        <view class="form-group col-3">
          <label class="form-label">检验标准编码:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.qsCode" />
        </view>
        <view class="form-group col-3">
          <label class="form-label">检验标准名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.qsName" />
        </view>
        <view class="form-group col-3">
          <label class="form-label">检验水平:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fcheckLevel" />
        </view>
        <view class="form-group col-3">
          <label class="form-label">接收水平:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.facLevel" />
        </view>
      </view>
    </view>

    <!-- 判定标准模块 (4列布局) -->
    <view class="module-card mb-2">
      <view class="module-header">
        <text class="module-title">判定标准</text>
      </view>
      <view class="form-grid">
        <view class="form-group col-3">
          <label class="form-label">AC数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.freQty - 1"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.freQty - 1" />
        </view>
        <view class="form-group">
        <view class="form-group col-3">
          <label class="form-label">RE数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.freQty"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.freQty" />
        </view>
        <view class="form-group">
        <view class="form-group col-3">
          <label class="form-label">不合格数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.unqualified"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.unqualified" />
        </view>
        <view class="form-group">
        <view class="form-group col-3">
          <label class="form-label">预览结果:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.result"/>
          <!-- 动态样式绑定 -->
          <input 
            class="form-input" 
            disabled="true" 
            type="text" 
            v-model="formData.result"
            :class="{ 'result-pass': formData.result === '合格', 'result-fail': formData.result === '不合格' }" 
          />
        </view>
        <view class="form-group">
      </view>
    </view>

    <!-- 检验结果模块 (1列3行) -->
    <view class="module-card">
      <view class="module-header">
        <text class="module-title">检验结果</text>
      </view>
      <view class="form-grid">
        <view class="form-group col-12">
          <label class="form-label">不合格描述:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks" />
        </view>
        <view class="form-group edit">
          <input class="form-input" style="color: red" disabled="true" type="text"
                 value="没有最大值和最小值时填写0（未通过检验）或1（通过检验）"/>
        <view class="form-group col-12 warning-tip">
          <label class="form-label">警示提示</label>
          <text class="tip-text">没有最大值和最小值时填写0（未通过检验）或1（通过检验）</text>
        </view>
        <view class="form-group edit">
        <view class="form-group col-12">
          <label class="form-label">检测结果:</label>
          <input class="form-input" type="number" v-model="formData.fcheckResu"/>
          <input class="form-input result-input" type="number" v-model="formData.fcheckResu" />
        </view>
        <button type="primary" v-if="tableData.length < formData.levelNum" @click="submit">保存</button>
      </form>
      </view>
      <button type="primary" v-if="tableData.length < formData.levelNum" @click="submit" class="submit-btn">
        <text class="btn-text">保存</text>
      </button>
    </view>
    <view>
      <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/>

    <!-- 图片预览区域 -->
    <view class="image-container card" v-if="isShowImg">
      <img :src="base64Image" style="width:100%; border-radius: 8px;" @click="previewImage" class="preview-image" />
    </view>
    <view class="list-container">
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">编号</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">判定标识</uni-th>
          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">检验结果</uni-th>
          <uni-th width="150" align="center"
                  style="color: #FFFFFF;background-color: lightskyblue;">修改
          </uni-th>

    <!-- 表格区域 -->
    <view class="table-container card">
      <view class="table-header">
        <text class="section-title">检验记录</text>
      </view>
      <uni-table ref="table" border emptyText="暂无更多数据" class="custom-table">
        <uni-tr class="table-header-row">
          <uni-th align="center" class="th">编号</uni-th>
          <uni-th align="center" class="th">判定标识</uni-th>
          <uni-th align="center" class="th">检验结果</uni-th>
          <uni-th width="150" align="center" class="th">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-tr v-for="(item, index) in tableData" :key="index" class="table-row"
          :class="{ 'row-success': item.fcheckResu == 1, 'row-warning': item.fcheckResu == 0 }"
          @mouseenter="highlightRow(index)" @mouseleave="unhighlightRow(index)">
          <uni-td align="center">
            {{ index + 1 }}
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fstand"/>
            <input class="form-input" disabled="true" type="text" v-model="item.fstand" />
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
            <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu" />
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button type="warn" v-if="isNumber" @click="toDetail(item)">修改</button>
              <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
            <view class="action-buttons">
              <button type="warn" v-if="isNumber" @click="toDetail(item)" class="action-btn">
                <text class="btn-text">修改</text>
              </button>
              <button type="warn" v-if="!isNumber" @click="numberEdit(item)" class="action-btn">
                <text class="btn-text">{{ editResult(item.fcheckResu) }}</text>
              </button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>

    <view class="plus-button">
      <button type="warn" @click="saveRemarks">添加不合格描述</button>
    <!-- 操作按钮 -->
    <view class="action-buttons-container">
      <button type="warn" @click="saveRemarks" class="action-btn">
        <text class="btn-text">添加不合格描述</text>
      </button>
    </view>

    <!-- 修改检验结果弹出层 -->
    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <h3>修改检验结果</h3>
      <view class="popup card">
        <view class="popup-header">
          <text class="popup-title">修改检验结果</text>
          <button @click="showPopup = !showPopup" class="close-btn">
            <text class="btn-text">×</text>
          </button>
        </view>
        <form :modelValue="editData">
          <view class="form-group">
            <label class="form-label">检验结果:</label>
            <input class="form-input" type="text" v-model="editData.fcheckResu"/>
            <input class="form-input" type="text" v-model="editData.fcheckResu" />
          </view>
          <button type="warn" @click="eidt">修改</button>
          <button @click="showPopup = !showPopup">取消</button>
          <view class="popup-actions">
            <button type="warn" @click="eidt" class="action-btn">
              <text class="btn-text">修改</text>
            </button>
            <button @click="showPopup = !showPopup" class="action-btn btn-outline">
              <text class="btn-text">取消</text>
            </button>
          </view>
        </form>
      </view>
    </view>

    <!-- 修改不合格描述弹出层 -->
    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
      <view class="popup card">
        <view class="popup-header">
          <text class="popup-title">修改不合格描述</text>
          <button @click="remarksPopup = !remarksPopup" class="close-btn">
            <text class="btn-text">×</text>
          </button>
        </view>
        <form>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input class="form-input" type="text" v-model="remarks"/>
            <input class="form-input" type="text" v-model="remarks" />
          </view>
          <button type="warn" @click="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
          <view class="popup-actions">
            <button type="warn" @click="editRemarks" class="action-btn">
              <text class="btn-text">修改</text>
            </button>
            <button @click="remarksPopup = !remarksPopup" class="action-btn btn-outline">
              <text class="btn-text">取消</text>
            </button>
          </view>
        </form>
      </view>
    </view>
@@ -149,215 +254,174 @@
</template>

<script>

export default {
  data() {
    return {
      formData: {},
      isNumber: false,
      checkItem: "",
      id: 0,
      gid: 0,
      billNo: "",
      showPopup: false,
      editData: {},
      tableData: [],
      isShowImg: false,
      base64Image:"",
      remarks: "",
      remarksPopup: false,
    }
  },
  methods: {

    previewImage() {
      uni.previewImage({
        urls: [this.base64Image],
      });
    },

    editResult(fcheckResu) {
      if (fcheckResu == '1') {
        return "改为不合格";
      } else {
        return "改为合格";
  export default {
    data() {
      return {
        formData: {},
        isNumber: false,
        checkItem: "",
        id: 0,
        gid: 0,
        billNo: "",
        showPopup: false,
        editData: {},
        tableData: [],
        isShowImg: false,
        base64Image: "",
        remarks: "",
        remarksPopup: false,
        releaseNo: ""
      }
    },
    submit() {

      let count = this.formData.levelNum;
      let fstand = "√";

      //有最大值和最小值就根据是否符合标准值更新判定结果，没有最大值和最小值就根据是否通过检验判定结果
      if (this.formData.maxValue && this.formData.minValue) {

        if (!this.formData.fcheckResu) {
          this.$showMessage("请输入检验值");
          return;
        }

        if (this.formData.fcheckResu >= this.formData.minValue && this.formData.fcheckResu <= this.formData
            .maxValue) {
          fstand = "√"
    methods: {
      previewImage() {
        uni.previewImage({
          urls: [this.base64Image],
        });
      },
      editResult(fcheckResu) {
        if (fcheckResu == '1') {
          return "改为不合格";
        } else {
          fstand = "×";
          return "改为合格";
        }
        count = 1;
      } else {

        if (!this.formData.fcheckResu) {
          this.formData.fcheckResu = 1
        }

        if (this.formData.fcheckResu == 0 || this.formData.fcheckResu == 1) {
          this.formData.isPass = this.formData.fcheckResu
      },
      submit() {
        let count = this.formData.levelNum;
        let fstand = "√";
        if (this.formData.maxValue && this.formData.minValue) {
          if (!this.formData.fcheckResu) {
            this.$showMessage("请输入检验值");
            return;
          }
          if (this.formData.fcheckResu >= this.formData.minValue && this.formData.fcheckResu <= this.formData.maxValue) {
            fstand = "√"
          } else {
            fstand = "×";
          }
          count = 1;
        } else {
          this.$showMessage("无标准值时，检验结果只能为0或1!");
          return;
          if (!this.formData.fcheckResu) {
            this.formData.fcheckResu = 1
          }
          if (this.formData.fcheckResu == 0 || this.formData.fcheckResu == 1) {
            this.formData.isPass = this.formData.fcheckResu
          } else {
            this.$showMessage("无标准值时，检验结果只能为0或1!");
            return;
          }
          count = count - this.tableData.length;
        }
        count = count - this.tableData.length;
      }

      this.formData.updater = this.$loginInfo.account;

      this.$post({
        url: "/RKJ/SetQSItemDetail",
        data: {
          pid: this.id,
          gid: this.gid,
          fstand: fstand,
          fcheckResu: this.formData.fcheckResu,
          updateBy: this.formData.updater,
          count: count
        }
      }).then(res => {
        this.formData.fcheckResu = null;
        this.$showMessage("保存成功");
        this.refreshResult();
      })

    },
    refreshResult() {
      this.$post({
        url: "/RKJ/getXjDetail02ById",
        data: {
          id: this.id
        }
      }).then(res => {
        this.formData = res.data.tbBillList.itemXj01;

        this.tableData = res.data.tbBillList.itemXj02s;

        if (this.formData.imageData) {
          this.isShowImg = true;
          this.base64Image = 'data:image/jpeg;base64,' + this.formData.imageData;
        }

        //maxValue  minValue  standardValue
        if (this.formData.maxValue && this.formData.minValue && this.formData.standardValue) {
          this.isNumber = true;
        }

      })
    },
    toDetail(item) {
      this.showPopup = !this.showPopup;
      this.editData = item;
    },
    eidt() {

      if (!this.editData.fcheckResu) {
        this.$showMessage("请输入检验结果");
      }

      if (this.formData.fcheckResu == this.editData.fcheckResu) {
        this.$showMessage("修改成功");
        return;
      }

      let fstand = "√";

      if (this.formData.maxValue && this.formData.minValue) {

        this.formData.updater = this.$loginInfo.account;
        this.$post({
          url: "/RKJ/SetQSItemDetail",
          data: {
            pid: this.id,
            gid: this.gid,
            fstand: fstand,
            fcheckResu: this.formData.fcheckResu,
            updateBy: this.formData.updater,
            count: count
          }
        }).then(res => {
          this.formData.fcheckResu = null;
          this.$showMessage("保存成功");
          this.refreshResult();
        })
      },
      refreshResult() {
        this.$post({
          url: "/RKJ/getXjDetail02ById",
          data: {
            id: this.id,
            releaseNo: this.releaseNo
          }
        }).then(res => {
          this.formData = res.data.tbBillList.itemXj01;
          this.tableData = res.data.tbBillList.itemXj02s;
          if (this.formData.imageData) {
            this.isShowImg = true;
            this.base64Image = 'data:image/jpeg;base64,' + this.formData.imageData;
          }
          if (this.formData.maxValue && this.formData.minValue && this.formData.standardValue) {
            this.isNumber = true;
          }
        })
      },
      toDetail(item) {
        this.showPopup = !this.showPopup;
        this.editData = item;
      },
      eidt() {
        if (!this.editData.fcheckResu) {
          this.$showMessage("请输入检验值");
          this.$showMessage("请输入检验结果");
          return;
        }

        if (this.editData.fcheckResu >= this.formData.minValue && this.editData.fcheckResu <= this.formData
            .maxValue) {
          this.editData.isPass = 1
        } else {
          this.editData.isPass = 0
          fstand = "×";
        if (this.editData.fcheckResu == this.formData.fcheckResu) {
          this.$showMessage("无需修改");
          return;
        }
      } else {

        if (!this.editData.fcheckResu) {
          this.editData.fcheckResu = 1
        }

        if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) {
          if (this.editData.fcheckResu == 0) {
        let fstand = "√";
        if (this.formData.maxValue && this.formData.minValue) {
          if (this.editData.fcheckResu >= this.formData.minValue && this.editData.fcheckResu <= this.formData.maxValue) {
            this.editData.isPass = 1;
          } else {
            this.editData.isPass = 0;
            fstand = "×";
          }
        } else {
          this.$showMessage("无标准值时，检验结果只能为0或1!");
          if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) {
            fstand = this.editData.fcheckResu == 1 ? "√" : "×";
          } else {
            this.$showMessage("无标准值时，检验结果只能为0或1!");
            return;
          }
        }
        this.editData.updater = this.$loginInfo.account;
        this.$post({
          url: "/RKJ/UpdateQSItemDetail",
          data: {
            id: this.editData.id,
            pid: this.id,
            gid: this.gid,
            fstand: fstand,
            fcheckResu: this.editData.fcheckResu,
            updateBy: this.editData.updater,
          }
        }).then(res => {
          this.showPopup = !this.showPopup;
          this.$showMessage("修改成功");
          this.refreshResult();
        })
      },
      numberEdit(item) {
        let fstand = item.fcheckResu == '1' ? "×" : "√";
        let fcheckResu = item.fcheckResu == '1' ? 0 : 1;
        
        this.$post({
          url: "/RKJ/UpdateQSItemDetail",
          data: {
            id: item.id,
            pid: item.pid,
            gid: item.gid,
            fstand: fstand,
            fcheckResu: fcheckResu,
            updateBy: this.$loginInfo.account,
          }
        }).then(res => {
          this.$showMessage("修改成功");
          this.refreshResult();
        })
      },
      saveRemarks() {
        this.remarksPopup = !this.remarksPopup;
        this.remarks = this.formData.remarks;
      },
      editRemarks() {
        if (!this.remarks) {
          this.$showMessage("请输入不合格描述");
          return;
        }
      }

      this.editData.updater = this.$loginInfo.account;

      this.$post({
        url: "/RKJ/UpdateQSItemDetail",
        data: {
          id: this.editData.id,
          pid: this.id,
          gid: this.gid,
          fstand: fstand,
          fcheckResu: this.editData.fcheckResu,
          updateBy: this.editData.updater,
        }
      }).then(res => {
        this.showPopup = !this.showPopup;
        this.$showMessage("修改成功");
        this.refreshResult(); //刷新页面
      })
    },

    numberEdit(item) {

      let fstand = "√";
      let fcheckResu = 1;

      if (item.fcheckResu == '1') {
        fstand = "×";
        fcheckResu = 0;
      }

      this.$post({
        url: "/RKJ/UpdateQSItemDetail",
        data: {
          id: item.id,
          pid: item.pid,
          gid: item.gid,
          fstand: fstand,
          fcheckResu: fcheckResu,
          updateBy: this.$loginInfo.account,
        }
      }).then(res => {
        this.$showMessage("修改成功");
        this.refreshResult(); //刷新页面
      })
    },
    saveRemarks() {
      this.remarksPopup = !this.remarksPopup;
      this.remarks = this.formData.remarks;
    },
    editRemarks() {
      if (this.remarks) {
        //saveRemarksGid
        this.$post({
          url: "/RKJ/saveRemarksPid",
          data: {
@@ -365,97 +429,385 @@
            remarks: this.remarks
          }
        }).then(res => {
          if(res.data.tbBillList > 0){
          if (res.data.tbBillList > 0) {
            this.formData.remarks = this.remarks;
            this.remarksPopup = !this.remarksPopup;
            this.$showMessage("保存成功");
          }
        })
      },
      highlightRow(index) {
        this.tableData[index].isHighlighted = true;
      },
      unhighlightRow(index) {
        this.tableData[index].isHighlighted = false;
      }
    },
    onLoad(options) {
      let params = options;
      this.id = params["id"];
      this.billNo = params["billNo"];
      this.gid = params["gid"];
      this.releaseNo = params["releaseNo"];
      this.refreshResult();
    }
  },
  onLoad(options) {
    //options中包含了url附带的参数
    let params = options;

    this.id = params["id"];
    this.billNo = params["billNo"];
    this.gid = params["gid"];

    this.refreshResult();
  }
}
  };
</script>

<style>
.form-group {
  display: flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  background-color: #d4d4d4;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
}

.form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
}

/* 默认样式 */
.list-container {
  height: calc(100vh - 750px);
  /* 设置列表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* 允许列表容器垂直滚动 */
  padding: 10px;
  /* 可选：添加一些内边距，使列表内容更美观 */
}

/* 在小屏幕设备上，重置高度为适应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 485px);
    /* 适当调整高度 */
  /* 基础样式 */
  .container {
    padding: 8px;
    background-color: #f8fafc;
  }
}

.form-container {
  /* 设置表单容器的高度，使其可以滚动 */
  overflow-y: auto;
  /* 允许表单容器垂直滚动 */
  padding: 10px;
  /* 可选：添加一些内边距，使表单内容更美观 */
}
  /* 页面标题 */
  .page-header {
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
  }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
  .page-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

.popup {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 68vw;
  /* 设置宽度为视口宽度的80% */
  height: 25vh;
  /* 设置高度为视口高度的80% */
}
  /* 模块卡片样式 */
  .module-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 12px;
    margin-bottom: 8px;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
  }

.edit {
  background-color: white;
}
  .module-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .mb-2 {
    margin-bottom: 8px;
  }

  .module-header {
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
  }

  .module-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  /* 表单网格布局 */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    background-color: #f8fafc;
    transition: all 0.2s;
  }

  .form-group:hover {
    border-color: #94a3b8;
    transform: translateY(-1px);
  }

  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-6 { grid-column: span 6; }
  .col-12 { grid-column: span 12; }

  .form-label {
    font-size: 14px;
    color: #475569;
    margin-bottom: 2px;
    font-weight: 500;
  }

  .form-input {
    padding: 4px 5px; /* 内边距缩小一半 */
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 14px;
    color: #1e293b;
    background-color: rgba(59, 130, 246, 0.05); /* 若隐若现的蓝色背景 */
    height: 24px; /* 高度缩小约1/3，视觉上接近一半 */
    transition: border-color 0.2s;
  }

  .form-input:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
  }

  .quality-requirement {
    min-width: 0;
    flex-grow: 1;
  }

  /* 合格/不合格结果样式 */
  .result-pass {
    background-color: rgba(16, 185, 129, 0.1) !important; /* 浅绿色背景 */
    border-color: #10b981 !important; /* 绿色边框 */
    color: #059669 !important; /* 深绿色文字 */
  }

  .result-fail {
    background-color: rgba(239, 68, 68, 0.1) !important; /* 浅红色背景 */
    border-color: #ef4444 !important; /* 红色边框 */
    color: #dc2626 !important; /* 深红色文字 */
  }

  /* 警示提示样式 */
  .warning-tip {
    background-color: #fef3c7;
    border-color: #fbbf24;
  }

  .tip-text {
    font-size: 12px;
    color: #92400e;
    line-height: 1.4;
  }

  /* 结果输入框样式 */
  .result-input {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  /* 按钮样式 */
  .submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    background-color: #3b82f6;
    color: white;
    width: fit-content;
    margin-top: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.15);
  }

  .submit-btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
  }

  /* 表格样式 */
  .table-container {
    margin-bottom: 8px;
  }

  .custom-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
  }

  .table-header-row {
    background-color: #3b82f6;
    color: white;
  }

  .th {
    padding: 8px 10px;
    text-align: center;
    font-weight: 500;
  }

  .table-row td {
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
  }

  .row-success td {
    background-color: #ecfdf5;
  }

  .row-warning td {
    background-color: #fef3c7;
  }

  /* 操作按钮 */
  .action-buttons-container {
    display: flex;
    justify-content: center;
    margin: 12px 0;
  }

  .action-btn {
    padding: 8px 20px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    background-color: #f59e0b;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.15);
    margin: 0 6px;
  }

  .action-btn:hover {
    background-color: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
  }

  /* 弹出层样式 */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .popup {
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    animation: popIn 0.2s ease;
  }

  @keyframes popIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  .popup-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .popup-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #64748b;
  }

  .close-btn:hover {
    color: #1e293b;
  }

  .popup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 0 16px 16px;
  }

  .btn-outline {
    background-color: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    box-shadow: none;
  }

  .btn-outline:hover {
    background-color: #f8fafc;
  }

  /* 图片预览 */
  .image-container {
    text-align: center;
    padding: 12px 0;
  }

  .preview-image {
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.2s ease;
    max-height: 200px;
    object-fit: contain;
  }

  .preview-image:hover {
    transform: scale(1.02);
  }

  /* 响应式布局 */
  @media (max-width: 768px) {
    .form-grid {
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }

    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 2; }
    .col-6 { grid-column: span 6; }
    .col-12 { grid-column: span 6; }

    .module-card {
      padding: 10px;
      border-radius: 6px;
    }

    .page-title {
      font-size: 16px;
    }

    .module-title {
      font-size: 14px;
    }

    .form-label, .form-input, .th, .table-row td, .action-btn, .submit-btn {
      font-size: 12px;
    }

    .form-input {
      height: 22px;
      padding: 3px 4px;
    }

    .submit-btn, .action-btn {
      padding: 6px 16px;
      border-radius: 16px;
    }
  }
</style>