最新代码

kyy

2 天以前 ab826d12b52265bc4f25044d43a042df2104f972

 pages/QC/LLJ/detail.vue

@@ -1,143 +1,245 @@
<template>
  <view>
    <view class="form-container">
      <form :modelValue="formData">
        <view class="form-group">
          <label class="form-label">项目名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fcheckItem"/>
        </view>
        <view class="form-group">
          <label class="form-label">规格要求:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fspecRequ"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验方法:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验工具:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fcheckTool"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.checkQyt"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验标准编码:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.sampleSizeNo"/>
        </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">
          <label class="form-label">下限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fdownAllow"/>
        </view>
        <view class="form-group">
          <label class="form-label">标准值:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fstand"/>
        </view>
        <view class="form-group">
          <label class="form-label">上限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fupAllow"/>
        </view>
        <view class="form-group">
          <label class="form-label">AC数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.facQty"/>
        </view>
        <view class="form-group">
          <label class="form-label">RE数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.freQty"/>
        </view>
        <view class="form-group">
          <label class="form-label">不合格数:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.fngQty"/>
        </view>
        <view class="form-group">
          <label class="form-label">预览结果:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.result"/>
        </view>
        <view class="form-group">
          <label class="form-label">不合格描述:</label>
          <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>
        <view class="form-group edit">
          <label class="form-label">检测结果:</label>
         <!-- <input class="form-input" type="number" v-model="formData.fcheckResu"/>-->
        <input class="form-input" type="number" v-model="fcheckResuK" />
        </view>
        <button type="primary" v-if="tableData.length < formData.checkQyt" @click="submit">保存</button>
      </form>
    </view>
    <view>
      <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/>
    </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>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="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"/>
          </uni-td>
          <uni-td align="center">
            <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="page-container">
    <!-- 检验项目表单卡片 -->
    <view class="form-card">
      <view class="form-title">
        <view class="title-icon">📋</view>
        <span>检验项目详情</span>
      </view>
      <view class="form-container">
        <!-- 基本信息模块 -->
        <view class="form-section">
          <view class="section-title">基本信息</view>
          <view class="form-grid">
            <view class="form-group">
              <label class="form-label">项目名称:</label>
              <input class="form-input" disabled="true" type="text" v-model="formData.fcheckItem" />
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
            <view class="form-group">
              <label class="form-label">规格要求:</label>
              <input class="form-input" disabled="true" type="text" v-model="formData.fspecRequ" />
            </view>
            <view class="form-group">
              <label class="form-label">检验方法:</label>
              <input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod" />
            </view>
            <view class="form-group">
              <label class="form-label">检验工具:</label>
              <input class="form-input" disabled="true" type="text" v-model="formData.fcheckTool" />
            </view>
          </view>
        </view>
        
        <!-- 三个模块并列容器 -->
        <view class="three-modules-container">
          <!-- 检验参数模块 -->
          <view class="module-item">
            <view class="module-header">
              <text class="module-title">检验参数</text>
            </view>
            <view class="module-content">
              <view class="form-grid">
                <view class="form-group">
                  <label class="form-label">检验数:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.checkQyt" />
                </view>
                <view class="form-group">
                  <label class="form-label">检验标准编码:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.sampleSizeNo" />
                </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>
            </view>
          </view>
          
          <!-- 数值标准模块 -->
          <view class="module-item">
            <view class="module-header">
              <text class="module-title">数值标准</text>
            </view>
            <view class="module-content">
              <view class="form-grid">
                <view class="form-group">
                  <label class="form-label">下限:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.fdownAllow" />
                </view>
                <view class="form-group">
                  <label class="form-label">标准值:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.fstand" />
                </view>
                <view class="form-group">
                  <label class="form-label">上限:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.fupAllow" />
                </view>
              </view>
            </view>
          </view>
          
          <!-- 判定标准模块 -->
          <view class="module-item">
            <view class="module-header">
              <text class="module-title">判定标准</text>
            </view>
            <view class="module-content">
              <view class="form-grid">
                <view class="form-group">
                  <label class="form-label">AC数:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.facQty" />
                </view>
                <view class="form-group">
                  <label class="form-label">RE数:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.freQty" />
                </view>
                <view class="form-group">
                  <label class="form-label">不合格数:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.fngQty" />
                </view>
                <view class="form-group">
                  <label class="form-label">预览结果:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.result" />
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 备注信息模块 -->
        <view class="form-section">
          <view class="section-title">备注信息</view>
          <view class="form-grid">
            <view class="form-group">
              <label class="form-label">不合格描述:</label>
              <input class="form-input" disabled="true" type="text" v-model="formData.remarks" />
            </view>
          </view>
        </view>
        
        <!-- 检测结果区域 -->
        <view class="form-section">
          <view class="section-title">检测结果</view>
          <view class="form-grid">
            <view class="form-group">
              <label class="form-label">检测结果:</label>
              <input class="form-input" type="number" v-model="fcheckResuK" />
            </view>
            
            <!-- 提示词作为检测结果的提示 -->
            <view class="form-group tip-group">
              <view class="tip-box">
                <view class="tip-icon">⚠️</view>
                <view class="tip-text">没有最大值和最小值时填写<span class="highlight">0（未通过检验）</span>或<span class="highlight">1（通过检验）</span></view>
              </view>
            </view>
          </view>
        </view>
        
        <button :class="['action-btn', 'btn-primary', { 'btn-loading': isLoading }]" v-if="tableData.length < formData.checkQyt" @click="submit" :disabled="isLoading">
          {{ isLoading ? '保存中...' : '保存' }}
        </button>
      </view>
    </view>

    <view class="plus-button">
      <button type="warn" @click="saveRemarks">添加不合格描述</button>
    <!-- 检验结果表格卡片 -->
    <view class="table-card">
      <view class="table-title">
        <view class="title-icon">📊</view>
        <span>检验结果列表</span>
      </view>
      <view class="list-container">
        <uni-table ref="table" border emptyText="暂无更多数据">
          <uni-tr>
            <uni-th width="80" align="center" class="th">编号</uni-th>
            <uni-th width="120" align="center" class="th">判定标识</uni-th>
            <uni-th width="100" align="center" class="th">检验结果</uni-th>
            <uni-th width="120" align="center" class="th">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableData" :key="index" class="table-row" :class="{ 'hover-effect': isHoveringRow === index }" @mouseenter="isHoveringRow = index" @mouseleave="isHoveringRow = -1">
            <uni-td align="center">
              {{ index + 1 }}
            </uni-td>
            <uni-td align="center">
              <input class="form-input" disabled="true" type="text" v-model="item.fstand" />
            </uni-td>
            <uni-td align="center">
              <span class="result-badge" :class="{ 'pass': item.fcheckResu === 'OK', 'fail': item.fcheckResu === 'NG' }">
                {{ item.fcheckResu || '未检验' }}
              </span>
            </uni-td>
            <uni-td align="center">
              <view class="action-group">
                <button :class="['action-btn', 'btn-sm', 'btn-warn', { 'btn-disabled': isLoading }]" v-if="isNumber" @click="toDetail(item)" :disabled="isLoading">
                  {{ isLoading ? '处理中...' : '修改' }}
                </button>
                <button :class="['action-btn', 'btn-sm', 'btn-warn', { 'btn-disabled': isLoading }]" v-if="!isNumber" @click="numberEdit(item)" :disabled="isLoading">
                  {{ isLoading ? '处理中...' : editResult(item.fcheckResu) }}
                </button>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>

    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <h3>修改检验结果</h3>
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="button-group">
        <button :class="['action-btn', 'btn-warn', { 'btn-disabled': isLoading }]" @click="saveRemarks" :disabled="isLoading">
          {{ isLoading ? '处理中...' : '添加不合格描述' }}
        </button>
      </view>
    </view>

    <!-- 修改检验结果弹出层 -->
    <view v-if="showPopup" class="overlay active">
      <view class="popup" :class="{ 'popup-scale': isPopupAnimated }" @animationend="isPopupAnimated = false">
        <view class="popup-header">
          <h3 class="popup-title">修改检验结果</h3>
          <view class="close-btn" @click="showPopup = !showPopup">×</view>
        </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="button-group">
            <button :class="['action-btn', 'btn-warn', { 'btn-loading': isEditLoading }]" @click="eidt" :disabled="isEditLoading">
              {{ isEditLoading ? '修改中...' : '修改' }}
            </button>
            <button @click="showPopup = !showPopup">
              取消
            </button>
          </view>
        </form>
      </view>
    </view>

    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
    <!-- 修改不合格描述弹出层 -->
    <view v-if="remarksPopup" class="overlay active">
      <view class="popup" :class="{ 'popup-scale': isPopupAnimated }" @animationend="isPopupAnimated = false">
        <view class="popup-header">
          <h3 class="popup-title">修改不合格描述</h3>
          <view class="close-btn" @click="remarksPopup = !remarksPopup">×</view>
        </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="button-group">
            <button :class="['action-btn', 'btn-warn', { 'btn-loading': isRemarksLoading }]" @click="editRemarks" :disabled="isRemarksLoading">
              {{ isRemarksLoading ? '保存中...' : '修改' }}
            </button>
            <button @click="remarksPopup = !remarksPopup">
              取消
            </button>
          </view>
        </form>
      </view>
    </view>
@@ -145,7 +247,6 @@
</template>

<script>

export default {
  data() {
    return {
@@ -158,306 +259,583 @@
      showPopup: false,
      editData: {},
      tableData: [],
      isShowImg: false,
      base64Image:"",
      remarks: "",
      remarksPopup: false,
     fcheckResuK:'',
	  
    }
      fcheckResuK: "",
      isLoading: false,
      isEditLoading: false,
      isRemarksLoading: false,
      isHoveringRow: -1,
      isPopupAnimated: false
    };
  },
  methods: {

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

    editResult(fcheckResu) {
      if (fcheckResu == 'OK') {
      if (fcheckResu == "OK") {
        return "改为不合格";
      } else {
        return "改为合格";
      }
    },
    submit() {

      this.isLoading = true;
      let count = this.formData.checkQyt;
      let fstand = "√";
        // alert(this.fcheckResuK);
      //有最大值和最小值就根据是否符合标准值更新判定结果，没有最大值和最小值就根据是否通过检验判定结果
      if (Number(this.formData.fupAllow )&& Number(this.formData.fdownAllow)) {

        /*if (!this.formData.fcheckResu) {
      if (Number(this.formData.fupAllow) && Number(this.formData.fdownAllow)) {
        if (!this.fcheckResuK) {
          this.$showMessage("请输入检验值");
          return;
        }*/
      if (!this.fcheckResuK) {
          this.$showMessage("请输入检验值");
          this.isLoading = false;
          return;
        }
//console.log(Number(this.fcheckResuK) >= Number(this.formData.fdownAllow) && Number(this.fcheckResuK) <= Number(this.formData.fupAllow));
        if (Number(this.fcheckResuK) >= Number(this.formData.fdownAllow) && Number(this.fcheckResuK) <= Number(this.formData.fupAllow)){
          fstand = "√"
        if (
          Number(this.fcheckResuK) >= Number(this.formData.fdownAllow) &&
          Number(this.fcheckResuK) <= Number(this.formData.fupAllow)
        ) {
          fstand = "√";
        } else {
          fstand = "×";
        }
        count = 1;
      //alert(fstand);
      } else {

       /* if (!this.formData.fcheckResu) {
          this.formData.fcheckResu = 1
        if (!this.fcheckResuK) {
          this.formData.fcheckResu = 1;
        }

        if (this.formData.fcheckResu == 0 || this.formData.fcheckResu == 1) {
          this.formData.isPass = this.formData.fcheckResu
        if (this.fcheckResuK == 0 || this.fcheckResuK == 1) {
          this.formData.isPass = this.fcheckResuK;
        } else {
          this.$showMessage("无标准值时，检验结果只能为0或1!");
          this.isLoading = false;
          return;
        }*/
		
       if (!this.fcheckResuK) {
         this.formData.fcheckResu = 1
       }
		
       if (this.fcheckResuK == 0 || this.fcheckResuK == 1) {
         this.formData.isPass = this.fcheckResuK
       } else {
         this.$showMessage("无标准值时，检验结果只能为0或1!");
         return;
       }
		 
        }
        count = count - this.tableData.length;
      }


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

      this.$post({
        url: "/LLJ/SetQSItemDetail",
        data: {
          mainId: this.formData.id,
          releaseNo: this.formData.releaseNo,
          fstand: fstand,
          fcheckResu: this.fcheckResuK,//this.formData.fcheckResu,
          LastupdateBy:this.$loginInfo.account,
          fcheckResu: this.fcheckResuK,
          LastupdateBy: this.$loginInfo.account,
          count: count
        }
      }).then(res => {
      }).then((res) => {
        this.formData.fcheckResu = null;
        this.$showMessage("保存成功");
        this.refreshResult();
      })

        this.isLoading = false;
      }).catch(() => {
        this.$showMessage("保存失败，请重试");
        this.isLoading = false;
      });
    },
    refreshResult() {
      this.isLoading = true;
      this.$post({
        url: "/LLJ/getXjDetail02ById",
        data: {
          id: this.id
        }
      }).then(res => {
      }).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;
        }

        //fupAllow  fdownAllow  standardValue
        if (this.formData.fupAllow && this.formData.fdownAllow && this.formData.fstand) {
          this.isNumber = true;
        } else {
          this.isNumber = false;
        }
      })
        this.isLoading = false;
      }).catch(() => {
        this.$showMessage("获取数据失败");
        this.isLoading = false;
      });
    },
    toDetail(item) {
      this.showPopup = !this.showPopup;
      this.editData = item;
      this.showPopup = true;
      this.editData = { ...item };
    },
    eidt() {

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

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

      if (this.formData.fcheckResu == this.editData.fcheckResu) {
        this.$showMessage("修改成功");
        this.showPopup = false;
        this.isEditLoading = false;
        return;
      }
      let fstand = "√";

      if (this.formData.fupAllow && this.formData.fdownAllow) {

        if (!this.editData.fcheckResu) {
          this.$showMessage("请输入检验值");
          this.isEditLoading = false;
          return;
        }
console.log(Number(this.editData.fcheckResu) >= Number(this.formData.fdownAllow) && Number(this.editData.fcheckResu) <= Number(this.formData.fupAllow))
        if (Number(this.editData.fcheckResu) >= Number(this.formData.fdownAllow) && Number(this.editData.fcheckResu) <= Number(this.formData.fupAllow)) {
          this.editData.isPass = 1
         fstand = "√";
		   
        if (
          Number(this.editData.fcheckResu) >= Number(this.formData.fdownAllow) &&
          Number(this.editData.fcheckResu) <= Number(this.formData.fupAllow)
        ) {
          this.editData.isPass = 1;
          fstand = "√";
        } else {
          this.editData.isPass = 0
          this.editData.isPass = 0;
          fstand = "×";
        }
		 
      //alert(fstand + this.formData.fdownAllow + this.formData.fupAllow + this.editData.fcheckResu );
      } else {

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

        if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) {
          if (this.editData.fcheckResu == 0) {
            fstand = "×";
          }
        } else {
          this.$showMessage("无标准值时，检验结果只能为0或1!");
          this.isEditLoading = false;
          return;
        }
      }

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

      this.$post({
        url: "/LLJ/UpdateQSItemDetail",
        data: {
         // mainId: this.editData.id,
         //releaseNo: this.editData.releaseNo,
         // fstand: fstand,
         // fcheckResu: this.editData.fcheckResu,
         
       id: this.editData.id,
         mainId: this.formData.id,
         releaseNo: this.formData.releaseNo,
         fstand: fstand,
         fcheckResu: this.editData.fcheckResu,
         lastupdateBy: this.$loginInfo.account,
          id: this.editData.id,
          mainId: this.formData.id,
          releaseNo: this.formData.releaseNo,
          fstand: fstand,
          fcheckResu: this.editData.fcheckResu,
          lastupdateBy: this.$loginInfo.account
        }
      }).then(res => {
        this.showPopup = !this.showPopup;
      }).then((res) => {
        this.showPopup = false;
        this.$showMessage("修改成功");
        this.refreshResult(); //刷新页面
      })
        this.refreshResult();
        this.isEditLoading = false;
      }).catch(() => {
        this.$showMessage("修改失败，请重试");
        this.isEditLoading = false;
      });
    },

    numberEdit(item) {

      this.isLoading = true;
      let fstand = "√";
      let fcheckResu = "OK";

      if (item.fcheckResu == 'OK') {
      if (item.fcheckResu == "OK") {
        fstand = "×";
        fcheckResu = "NG";
      }

      this.$post({
        url: "/LLJ/UpdateQSItemDetail",
        data: {
         // mainId: item.id,
          //releaseNo: this.editData.releaseNo,
         // fstand: fstand,
         // fcheckResu: fcheckResu,
        //  updateBy: this.$loginInfo.account,
        id: item.id,
        mainId: this.formData.id,
        releaseNo: this.formData.releaseNo,
        fstand: fstand,
        fcheckResu: fcheckResu,
        lastupdateBy: this.$loginInfo.account,
          id: item.id,
          mainId: this.formData.id,
          releaseNo: this.formData.releaseNo,
          fstand: fstand,
          fcheckResu: fcheckResu,
          lastupdateBy: this.$loginInfo.account
        }
      }).then(res => {
      }).then((res) => {
        this.$showMessage("修改成功");
        this.refreshResult(); //刷新页面
      })
        this.refreshResult();
        this.isLoading = false;
      }).catch(() => {
        this.$showMessage("修改失败，请重试");
        this.isLoading = false;
      });
    },
    saveRemarks() {
      this.remarksPopup = !this.remarksPopup;
      this.remarks = this.formData.remarks;
      this.remarksPopup = true;
      this.remarks = this.formData.remarks || "";
    },
    editRemarks() {
      this.isRemarksLoading = true;
      if (this.remarks) {
        //saveRemarksGid
        this.$post({
          url: "/LLJ/saveRemarksPid",
          data: {
            pid: this.formData.id,
            remarks: this.remarks
          }
        }).then(res => {
          if(res.data.tbBillList > 0){
        }).then((res) => {
          if (res.data.tbBillList > 0) {
            this.formData.remarks = this.remarks;
            this.remarksPopup = !this.remarksPopup;
            this.remarksPopup = false;
            this.$showMessage("保存成功");
          } else {
            this.$showMessage("保存失败");
          }
        })
          this.isRemarksLoading = false;
        }).catch(() => {
          this.$showMessage("保存失败，请重试");
          this.isRemarksLoading = false;
        });
      } else {
        this.$showMessage("请输入不合格描述");
        this.isRemarksLoading = false;
      }
    }
  },
  onLoad(options) {
    //options中包含了url附带的参数
    let params = options;

    this.id = params["mainId"];
 

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

<style>
.form-group {
/* 基础配色方案 */
:root {
  --primary-color: #3b82f6;         
  --primary-dark: #2563eb;         
  --primary-light: #bfdbfe;       
  --success-color: #10b981;        
  --warning-color: #f59e0b;        
  --danger-color: #ef4444;         
  --text-primary: #1e293b;         
  --text-secondary: #64748b;       
  --text-tertiary: #94a3b8;        
  --bg-primary: #f8fafc;           
  --bg-secondary: #e2e8f0;         
  --card-bg: #ffffff;              
  --border-color: #e2e8f0;         
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 页面整体样式 */
.page-container {
  padding: 4px; /* 页面内边距进一步缩小 */
  background-color: var(--bg-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 卡片样式 */
.form-card, .table-card {
  background-color: var(--card-bg);
  border-radius: 8px; /* 圆角进一步缩小 */
  box-shadow: var(--shadow-md);
  margin-bottom: 4px; /* 卡片间距进一步缩小 */
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.form-card:hover, .table-card:hover {
  transform: translateY(-1px); /* 悬停效果减弱 */
  box-shadow: var(--shadow-lg);
}

.form-title, .table-title {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
  padding: 4px 8px; /* 标题内边距进一步缩小 */
  font-size: 14px; /* 标题字体进一步缩小 */
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  background-color: #d4d4d4;
}

.title-icon {
  margin-right: 4px; /* 图标间距进一步缩小 */
  font-size: 16px; /* 图标大小进一步缩小 */
}

/* 表单样式 */
.form-container {
  padding: 4px 8px; /* 容器内边距进一步缩小 */
}

/* 三模块并列容器 */
.three-modules-container {
  display: flex; /* 使用Flex布局实现并列 */
  gap: 4px; /* 模块间间距 */
  margin-bottom: 6px;
  flex-wrap: wrap; /* 允许换行 */
}

.module-item {
  flex: 1; /* 平均分配宽度 */
  min-width: 0;
  border-radius: 6px;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.module-header {
  background-color: var(--primary-light);
  padding: 6px 10px;
  display: flex;
  align-items: center;
}

.module-title {
  font-size: 13px; /* 模块标题字体进一步缩小 */
  font-weight: 600;
  color: var(--text-primary);
}

.module-content {
  padding: 6px 8px; /* 模块内容内边距 */
}

/* 表单模块样式 */
.form-section {
  margin-bottom: 6px;
  padding: 8px;
  border-radius: 6px;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  transition: all 0.3s;
  position: relative;
}

.form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
}

.form-section:hover {
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1); /* 悬停阴影进一步缩小 */
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.15);
}

.section-title {
  font-size: 14px; /* 模块标题字体进一步缩小 */
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--primary-color); /* 左侧条宽度缩小 */
  display: flex;
  align-items: center;
  letter-spacing: 0.2px; /* 字间距进一步缩小 */
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border-color);
  margin-left: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px; /* 表单项间距进一步缩小 */
}

.form-group {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-color);
  padding: 3px 0; /* 表单项内边距进一步缩小 */
}

.form-group:last-child {
  border-bottom: none;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
  width: 80px; /* 标签宽度进一步缩小 */
  color: var(--text-secondary);
  font-size: 12px; /* 标签字体进一步缩小 */
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
}

.form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
  font-size: 12px; /* 输入框字体进一步缩小 */
  color: var(--text-primary);
  border: none;
  outline: none;
  background-color: transparent;
  padding: 2px 0; /* 输入框内边距进一步缩小 */
}

/* 默认样式 */
.form-input:focus {
  color: var(--primary-color);
}

/* 提示词样式 */
.tip-group {
  border: none;
  padding: 1px 0 2px; /* 提示词区域内边距进一步缩小 */
  margin-top: -2px; /* 顶部边距进一步缩小 */
}

.tip-box {
  display: flex;
  align-items: flex-start;
  background-color: rgba(239, 68, 68, 0.08);
  border-radius: 3px; /* 圆角进一步缩小 */
  padding: 4px 6px; /* 提示词框内边距进一步缩小 */
  border-left: 3px solid var(--danger-color); /* 左侧条宽度进一步缩小 */
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.03); /* 阴影进一步缩小 */
}

.tip-icon {
  font-size: 12px; /* 图标大小进一步缩小 */
  color: #ef4444;
  margin-right: 4px; /* 图标与文本间距进一步缩小 */
  margin-top: 1px;
}

.tip-text {
  color: #4b5563;
  font-size: 12px; /* 提示文字体进一步缩小 */
  line-height: 1.3; /* 行高进一步缩小 */
}

.highlight {
  color: #ef4444;
  font-weight: 600;
  text-decoration: underline;
}

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

/* 在小屏幕设备上，重置高度为适应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 485px);
    /* 适当调整高度 */
  }
.th {
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  font-size: 12px; /* 表头字体进一步缩小 */
  padding: 4px 6px; /* 表头内边距进一步缩小 */
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.form-container {
  /* 设置表单容器的高度，使其可以滚动 */
  overflow-y: auto;
  /* 允许表单容器垂直滚动 */
  padding: 10px;
  /* 可选：添加一些内边距，使表单内容更美观 */
.table-row {
  transition: background-color 0.2s, transform 0.2s;
}

.hover-effect {
  background-color: var(--primary-light) !important;
  transform: translateY(-0.5px);
}

.result-badge {
  padding: 1px 4px; /* 结果标签内边距进一步缩小 */
  border-radius: 3px; /* 圆角进一步缩小 */
  font-size: 11px; /* 结果标签字体进一步缩小 */
  font-weight: 500;
  display: inline-block;
  min-width: 30px; /* 最小宽度进一步缩小 */
  text-align: center;
}

.pass {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--success-color);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.fail {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--danger-color);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* 按钮样式 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px; /* 按钮组间距进一步缩小 */
  padding: 0 0 4px; /* 底部边距进一步缩小 */
}

.button-group {
  width: 100%;
}

.action-btn {
  width: 100%;
  height: 28px; /* 按钮高度进一步缩小 */
  line-height: 28px;
  border-radius: 5px; /* 圆角进一步缩小 */
  font-size: 12px; /* 按钮字体进一步缩小 */
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); /* 阴影进一步缩小 */
}

/* 按钮背景渐变 */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
  transform: translateY(-0.5px); /* 悬停位移进一步缩小 */
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.08);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.1);
}

.btn-warn {
  background: linear-gradient(135deg, var(--warning-color), #d97706);
  color: white;
}

.btn-warn:hover {
  background: linear-gradient(135deg, #d97706, var(--warning-color));
  transform: translateY(-0.5px);
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.08);
}

.btn-warn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1);
}

.btn-loading {
  opacity: 0.8;
  cursor: progress;
}

.btn-disabled {
  background-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn-sm {
  padding: 1px 4px; /* 小按钮内边距进一步缩小 */
  font-size: 10px; /* 小按钮字体进一步缩小 */
  height: 20px; /* 小按钮高度进一步缩小 */
  line-height: 20px;
  border-radius: 3px; /* 圆角进一步缩小 */
}

/* 弹出层样式 */
.overlay {
  position: fixed;
  top: 0;
@@ -468,20 +846,118 @@
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

.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% */
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 10px; /* 弹出层内边距进一步缩小 */
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 380px; /* 最大宽度进一步缩小 */
  transform: scale(0.95);
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
  position: relative;
  overflow: hidden;
}

.edit {
  background-color: white;
.overlay.active .popup {
  transform: scale(1);
  opacity: 1;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px; /* 标题与内容间距进一步缩小 */
  position: relative;
}

.popup-title {
  font-size: 16px; /* 弹出层标题字体进一步缩小 */
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 4px; /* 底部内边距进一步缩小 */
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  text-align: center;
  letter-spacing: 0.2px;
}

.close-btn {
  font-size: 18px; /* 关闭按钮大小进一步缩小 */
  color: var(--text-tertiary);
  cursor: pointer;
  position: absolute;
  top: -1px;
  right: 0;
}

/* 响应式设计 - 小屏幕下模块堆叠 */
@media (max-width: 640px) {
  .three-modules-container {
    flex-direction: column; /* 小屏幕下改为垂直排列 */
  }
  
  .module-item {
    margin-bottom: 4px;
  }
}

@media (max-width: 480px) {
  .form-label {
    width: 70px;
    font-size: 11px; /* 超小屏幕字体进一步缩小 */
  }

  .form-input {
    font-size: 11px;
  }

  .action-btn {
    height: 26px;
    line-height: 26px;
    font-size: 11px;
  }

  .form-container, .list-container {
    padding: 3px 6px;
  }

  .form-title, .table-title {
    padding: 3px 6px;
    font-size: 13px;
  }
  
  .section-title {
    font-size: 13px;
  }

  .th {
    font-size: 11px;
    padding: 3px 4px;
  }

  .result-badge {
    padding: 1px 3px;
    font-size: 10px; /* 超小屏幕结果标签字体进一步缩小 */
  }

  .btn-sm {
    height: 18px;
    line-height: 18px;
    font-size: 9px;
  }
}
</style>