解决1、一致性核对，没有维护的情况下不要求必填

fcx

4 天以前 6ca81c89d606b5be26c8b8526b191ae8e773167b

 pages/QC/SJ/detail.vue

@@ -1,126 +1,195 @@
<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.projName"/>
        </view>
        <view class="form-group">
          <label class="form-label">质量要求:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.itemMod"/>
        </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.usingInstruments"/>
        </view>
        <view class="form-group">
          <label class="form-label">检验数:</label>
          <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.minValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">标准值:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.standardValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">上限:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.maxValue"/>
        </view>
        <view class="form-group">
          <label class="form-label">更新人:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.updater"/>
        </view>
        <view class="form-group">
          <label class="form-label">更新时间:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.updateTime"/>
        </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"/>
        </view>
        <button type="primary" v-if="tableData.length < formData.levelNum" @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 edit">
              <button type="warn" v-if="isNumber" @click="toDetail(item)">修改</button>
              <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <view class="title">首检项目明细</view>
      <view class="order-number">当前检验单号: {{ formData.billNo }}</view>
    </view>

    <view class="plus-button">
      <button type="warn" @click="saveRemarks">添加不合格描述</button>
    </view>

    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
        <form>
          <view class="form-group">
            <label class="form-label">不合格描述:</label>
            <input class="form-input" type="text" v-model="remarks"/>
          </view>
          <button type="warn" @click="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
        </form>
    <!-- 标签栏 -->
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}" class="tab"
            @tap="switchTab(index, tab.id)">
        {{ tab.projName || tab.fcheckItem || '项目' + (index + 1) }}
      </view>
    </view>

    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <h3>修改检验结果</h3>
        <form :modelValue="editData">
          <view class="form-group">
            <label class="form-label">检验结果:</label>
            <input class="form-input" type="text" v-model="editData.fcheckResu"/>
    <view class="tab-content">
      <!-- 基本信息 -->
      <view class="section">
        <view class="section-header">基本信息</view>
        <view class="section-body">
          <view class="info-grid">
            <view class="info-item">
              <view class="info-label">项目名称</view>
              <view class="info-value">{{ formData.projName }}</view>
            </view>
            <view class="info-item">
              <view class="info-label">质量要求</view>
              <view class="info-value">{{ formData.itemMod }}</view>
            </view>
            <view class="info-item">
              <view class="info-label">检验方法</view>
              <view class="info-value">{{ formData.inspectionMethod }}</view>
            </view>
            <view class="info-item">
              <view class="info-label">使用仪表</view>
              <view class="info-value">{{ formData.usingInstruments }}</view>
            </view>
            <view class="info-item">
              <view class="info-label">检验数</view>
              <view class="info-value">{{ formData.levelNum }}</view>
            </view>
            <!-- 修复：使用更准确的判断条件，避免0被误判为falsy -->
            <view v-if="formData.minValue != null" class="info-item">
              <view class="info-label">下限</view>
              <view class="info-value">{{ formData.minValue }}</view>
            </view>
            <view v-if="formData.standardValue != null" class="info-item">
              <view class="info-label">标准值</view>
              <view class="info-value">{{ formData.standardValue }}</view>
            </view>
            <view v-if="formData.maxValue != null" class="info-item">
              <view class="info-label">上限</view>
              <view class="info-value">{{ formData.maxValue }}</view>
            </view>
            <view class="info-item">
              <view class="info-label">更新人</view>
              <view class="info-value">{{ formData.updater }}</view>
            </view>
            <view class="info-item">
              <view class="info-label">更新时间</view>
              <view class="info-value">{{ formData.updateTime }}</view>
            </view>
          </view>
          <button type="warn" @click="eidt">修改</button>
          <button @click="showPopup = !showPopup">取消</button>
        </form>
        </view>
      </view>

      <!-- 检验结果 -->
      <view class="section">
        <view class="section-header">检验结果</view>
        <view class="section-body">
          <view class="info-grid">
            <view v-if="formData.result != null" class="info-item">
              <view class="info-label">预览结果</view>
              <view class="info-value">{{ formData.result }}</view>
            </view>
            <view v-if="formData.remarks != null" class="info-item">
              <view class="info-label">备注</view>
              <view class="info-value danger">{{ formData.remarks }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 结果录入 -->
      <view class="section">
        <view class="section-header">检验结果录入</view>
        <view class="section-body">
          <!-- 修复：使用更准确的判断条件，避免0被误判为falsy -->
          <view v-if="formData.maxValue == null && formData.minValue == null" class="info-item edit">
            <view class="info-label" style="color: #F56C6C">提示</view>
            <view class="info-value" style="color: #F56C6C">没有最大值和最小值时填写0（未通过检验）或1（通过检验）</view>
          </view>

          <view class="input-group input1">
            <view class="input-wrapper">
              <button class="btn upload-btn" @click="chooseImage">
                <uni-icons type="upload" size="16" color="#fff"></uni-icons>
                上传/查看图片
              </button>
              <button class="btn upload-btn" @click="saveRemarks">
                <uni-icons type="compose" size="16" color="#fff"></uni-icons>
                备注
              </button>
              <input v-if="(tableData.length < formData.levelNum)" v-model="formData.fcheckResu" class="result-input"
                     placeholder="请输入检验结果..." type="number"/>
              <button v-if="(tableData.length < formData.levelNum)" class="btn primary-btn" @click="submit" style="margin: 0px;">保存结果
              </button>
            </view>
          </view>

          <!-- 响应式设计的第二个输入组 -->
          <view class="input-group input2">
            <view class="input-wrapper">
              <button class="btn upload-btn" @click="chooseImage ">
                <uni-icons type="upload" size="16" color="#fff"></uni-icons>
                上传/查看图片
              </button>
              <button v-if="current" class="btn upload-btn" @click="saveRemarks  ">
                <uni-icons type="compose" size="16" color="#fff"></uni-icons>
                备注
              </button>
            </view>
            <view class="input-wrapper" style="margin-top: 15px;">
              <input v-if="(tableData.length < formData.levelNum)" v-model="formData.fcheckResu" class="result-input" 
                     placeholder="请输入检验结果..." type="number"/>
              
              <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit" style="margin: 0px;" >保存结果  
           </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 结果表格 -->
      <view v-if="tableData.length > 0" class="table-container">
        <view class="table-header">
          <view class="th">编号</view>
          <view class="th">检验结果</view>
          <view class="th" v-if="current">操作</view>
        </view>

        <view v-for="(item, index) in tableData" :key="index" class="table-row">
          <view class="td">{{ index + 1 }}</view>
          <view class="td">
            <view :class="['result-badge', item.fcheckResu]">
              {{ item.fcheckResu }}
            </view>
          </view>
          <view class="td" v-if="current" >
            <button v-if="!isNumber" class="btn danger-btn" @click="numberEdit(item)">
              {{ editResult(item.fcheckResu) }}
            </button>
            <button v-if="isNumber" class="btn danger-btn" @click="toDetail(item)">
              修改
            </button>
          </view>
        </view>
      </view>

      <!-- 弹出层 - 备注 -->
      <view v-if="remarksPopup" class="overlay">
        <view class="popup">
          <h3>修改备注</h3>
          <form>
            <view class="form-group">
              <label class="form-label">备注:</label>
              <input v-model="remarks" class="form-input" type="text"/>
            </view>
            <view class="popup-buttons">
              <button class="btn primary-btn" type="warn" @click="editRemarks">修改</button>
              <button class="btn cancel-btn" @click="remarksPopup = !remarksPopup">取消</button>
            </view>
          </form>
        </view>
      </view>

      <!-- 弹出层 - 修改检验结果 -->
      <view v-if="showPopup" class="overlay">
        <view class="popup">
          <h3>修改检验结果</h3>
          <form :modelValue="editData">
            <view class="form-group">
              <label class="form-label">检验结果:</label>
              <input v-model="editData.fcheckResu" class="form-input" type="text"/>
            </view>
            <view class="popup-buttons">
              <button class="btn primary-btn" type="warn" @click="eidt">修改</button>
              <button class="btn cancel-btn" @click="showPopup = !showPopup">取消</button>
            </view>
          </form>
        </view>
      </view>
    </view>
  </view>
@@ -143,9 +212,52 @@
      isShowImg: false,
      remarks: "",
      remarksPopup: false,
      currentTab: 0,
      tabs: [],
      current: true // 控制是否可编辑
    }
  },
  methods: {
    // 切换标签页
    switchTab(index, id) {
      this.currentTab = index;
      this.id = id;
      this.refreshResult();
    },

    // 加载标签项
    loadTabItems() {
      this.$post({
        url: "/SJ/getQSItems",
        data: {
          pid: this.gid,
        }
      }).then(res => {
        if (res.data && res.data.tbBillList) {
          this.tabs = res.data.tbBillList;
          // 按检测结果排序，未完成的排在前面
          this.tabs.sort((a, b) => {
            if (a.result === '未完成' && b.result !== '未完成') {
              return -1;
            } else if (a.result !== '未完成' && b.result === '未完成') {
              return 1;
            } else {
              return 0;
            }
          });
          
          // 排序后自动跳转到第一个标签
          this.currentTab = 0;
          if (this.tabs.length > 0) {
            this.id = this.tabs[0].id;
            this.refreshResult();
          }
        } else {
          // 没有项目时至少添加当前项目到标签
          this.tabs = [{id: this.id, projName: this.formData.projName || '当前项目'}];
        }
      });
    },

    previewImage() {
      uni.previewImage({
@@ -164,15 +276,24 @@
      let count = this.formData.levelNum;
      let fstand = "√";

      //有最大值和最小值就根据是否符合标准值更新判定结果，没有最大值和最小值就根据是否通过检验判定结果
      if (this.formData.maxValue && this.formData.minValue) {
      // 修复：使用更准确的判断条件，避免0被误判为falsy
      if (this.formData.maxValue != null && this.formData.minValue != null) {

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

        if (this.formData.fcheckResu >= this.formData.minValue && this.formData.fcheckResu <= this.formData.maxValue) {
        let checkValue = Number(this.formData.fcheckResu);
        let minValue = Number(this.formData.minValue);
        let maxValue = Number(this.formData.maxValue);

        if (isNaN(checkValue) || isNaN(minValue) || isNaN(maxValue)) {
          this.$showMessage("检验值或范围值格式不正确，请检查输入");
          return;
        }

        if (checkValue >= minValue && checkValue <= maxValue) {
          fstand = "√"
        } else {
          fstand = "×";
@@ -209,6 +330,8 @@
        this.formData.fcheckResu = null;
        this.$showMessage("保存成功");
        this.refreshResult();
        // 重新加载标签项以更新状态
        this.loadTabItems();
      })

    },
@@ -225,7 +348,8 @@
          this.isShowImg = true;
          this.base64Image = 'data:image/jpeg;base64,' + this.formData.imageData;
        }
        if (this.formData.maxValue && this.formData.minValue && this.formData.standardValue) {
        // 修复：使用更准确的判断条件，避免0被误判为falsy
        if (this.formData.maxValue != null && this.formData.minValue != null && this.formData.standardValue != null) {
          this.isNumber = true;
        }
      })
@@ -257,14 +381,24 @@

      let fstand = "√";

      if (this.formData.maxValue && this.formData.minValue) {
      // 修复：使用更准确的判断条件，避免0被误判为falsy
      if (this.formData.maxValue != null && this.formData.minValue != null) {

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

        if (this.editData.fcheckResu >= this.formData.minValue && this.editData.fcheckResu <= this.formData.maxValue) {
        let checkValue = Number(this.editData.fcheckResu);
        let minValue = Number(this.formData.minValue);
        let maxValue = Number(this.formData.maxValue);

        if (isNaN(checkValue) || isNaN(minValue) || isNaN(maxValue)) {
          this.$showMessage("检验值或范围值格式不正确，请检查输入");
          return;
        }

        if (checkValue >= minValue && checkValue <= maxValue) {
          this.editData.isPass = 1
        } else {
          this.editData.isPass = 0
@@ -276,9 +410,13 @@
          this.editData.fcheckResu = 1
        }

        // 改进后的逻辑：根据检验结果值来判断合格与否
        if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) {
          // 0表示不合格，1表示合格
          if (this.editData.fcheckResu == 0) {
            fstand = "×";
          } else {
            fstand = "√";
          }
        } else {
          this.$showMessage("无标准值时，检验结果只能为0或1!");
@@ -302,6 +440,8 @@
        this.showPopup = !this.showPopup;
        this.$showMessage("修改成功");
        this.refreshResult();//刷新页面
        // 重新加载标签项以更新状态
        this.loadTabItems();
      })
    },
    numberEdit(item) {
@@ -327,7 +467,15 @@
      }).then(res => {
        this.$showMessage("修改成功");
        this.refreshResult(); //刷新页面
        // 重新加载标签项以更新状态
        this.loadTabItems();
      })
    },
    // 上传图片
    chooseImage() {
      uni.navigateTo({
        url: 'ImageItem?id=777' + this.formData.id + '&gid=' + this.gid
      });
    },
    saveRemarks() {
      this.remarksPopup = !this.remarksPopup;
@@ -347,68 +495,277 @@
            this.formData.remarks = this.remarks;
            this.remarksPopup = !this.remarksPopup;
            this.$showMessage("保存成功");
            // 重新加载标签项以更新状态
            this.loadTabItems();
          }
        })
      }
    },
    // 判断数字是否在范围内
    isInRange(value) {
      // 修复：使用更准确的判断条件，避免0被误判为falsy
      if (this.formData.maxValue == null || this.formData.minValue == null) return true;
      const numValue = parseFloat(value);
      return numValue >= parseFloat(this.formData.minValue) &&
          numValue <= parseFloat(this.formData.maxValue);
    },
    // 获取数字结果的样式类
    getNumberResultClass(value) {
      // 修复：使用更准确的判断条件，避免0被误判为falsy
      if (this.formData.maxValue == null || this.formData.minValue == null) return 'number-normal';
      return this.isInRange(value) ? 'number-pass' : 'number-fail';
    },
    // 获取状态结果的样式类
    getStatusClass(status) {
      return status === '√' ? 'status-pass' : 'status-fail';
    }
  },
  onLoad(options) {
//options中包含了url附带的参数
    //options中包含了url附带的参数
    let params = options;

    this.id = params["id"];
    this.billNo = params["billNo"];
    this.gid = params["gid"];
    this.currentTab = parseInt(params["index"] || 0);
    this.current = params["current"] !== 'B'; // B表示已完成状态，不可编辑

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

<style>
<style lang="scss">
$primary-color: #409EFF;
$success-color: #67C23A;
$danger-color: #F56C6C;
$border-color: #DCDFE6;
$bg-color: #f5f7fa;

.form-group {
  display: flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  background-color: #d4d4d4;
.container {
  padding: 20px;
  background-color: #fff;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
}
.header {
  padding: 20px;
  border-bottom: 1px solid $border-color;
  background: linear-gradient(90deg, #f0f7ff, #e1f0ff);

.form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
}
  .title {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
  }

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

/* 在小屏幕设备上，重置高度为适应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 485px);
    /* 适当调整高度 */
  .order-number {
    color: #666;
    font-size: 14px;
  }
}

.form-container {
  /* 设置表单容器的高度，使其可以滚动 */
  overflow-y: auto;
  /* 允许表单容器垂直滚动 */
  padding: 10px;
  /* 可选：添加一些内边距，使表单内容更美观 */
.tabs {
  display: flex;
  background-color: $bg-color;
  border-bottom: 1px solid $border-color;

  .tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    border-right: 1px solid $border-color;
    color: #666;
    transition: all 0.3s;

    &:last-child {
      border-right: none;
    }

    &.active {
      background-color: #fff;
      color: $primary-color;
      font-weight: bold;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: $primary-color;
      }
    }
  }
}

.tab-content {
  padding-top: 20px;
}

.section {
  margin: 20px 0;
  border: 1px solid $border-color;
  border-radius: 4px;

  &-header {
    padding: 12px 16px;
    background-color: $bg-color;
    border-bottom: 1px solid $border-color;
    font-weight: bold;
  }

  &-body {
    padding: 16px;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  .info-item {
    margin-bottom: 12px;

    .info-label {
      color: #909399;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .info-value {
      color: #333;
      font-weight: 500;
    }
  }
}

.input-group {
  margin: 16px 0;

  .input-wrapper {
    display: flex;
    gap: 12px;

    .result-input {
      flex: 1;
      height: 45px;
      padding: 0 12px;
      border: 1px solid $border-color;
      border-radius: 4px;
      font-size: 14px;
    }

    .upload-btn {
      background-color: #909399;
      color: #fff;
      padding: 0 10px;
      margin: 0;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 4px;
    }
    
    .primary-btn {
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 4px;
    }
  }
}

.table-container {
  border: 1px solid $border-color;
  border-radius: 4px;
  margin-top: 20px;

  .table-header {
    display: flex;
    background-color: $bg-color;
    border-bottom: 1px solid $border-color;

    .th {
      flex: 1;
      padding: 12px;
      font-weight: bold;
    }
  }

  .table-row {
    display: flex;
    border-bottom: 1px solid $border-color;
    padding: 12px;

    &:last-child {
      border-bottom: none;
    }

    .td {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}

.result-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;

  &.OK {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
  }

  &.NG {
    background-color: rgba($danger-color, 0.1);
    color: $danger-color;
  }
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .btn {
    padding: 8px 20px;
    border-radius: 4px;

    &.primary-btn {
      background-color: $primary-color;
      color: #fff;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 4px;
      padding: 0 20px;
    }

    &.cancel-btn {
      background-color: #909399;
      color: #fff;
    }
  }
}

.danger {
  color: $danger-color;
}

.overlay {
@@ -428,11 +785,37 @@
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 68vw; /* 设置宽度为视口宽度的80% */
  height: 25vh; /* 设置高度为视口高度的80% */
  width: 68vw;
  /* 设置宽度为视口宽度的80% */
  height: 25vh;
  /* 设置高度为视口高度的80% */
}

.edit {
  background-color: white;
.updateBut {
  background-color: #3498db;
  color: white;
}

.input1 {
  display: block;
}

.input2 {
  display: none;
}

/* 响应式设计 */
@media (max-width: 500px) {
  .input1 {
    display: none;
  }

  .input2 {
    display: block;
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>