代码提交

zjh

2025-04-29 17d3d61e12f537eb2ee7ec6f4de1590102377afa

代码提交

 pages.json

@@ -197,7 +197,8 @@
        {
            "path": "pages/QC/SJ/Add",
            "style": {
                "navigationBarTitleText": "首检",
                // "navigationBarTitleText": "首检",
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        },

 pages/QC/LLJ/Add.vue

@@ -4,7 +4,7 @@
    <view class="sheet-header">
      <h1>来料检验单</h1>
      <view class="inspection-number">检验单号：{{formData.releaseNo}}</view>
 
       <!-- é€ æ¢¦è€…特殊功能 -->
      <view style="text-align: right;" v-if="this.current"><a class="sysLike" @click="toSysSubmitFrom(formData.releaseNo)">实验室送检</a></view>
    </view>

@@ -29,6 +29,7 @@
      <view class="info-block">
        <view class="info-label">物料编码：</view>
        <view class="info-value">{{formData.itemNo}}</view>
         <!-- é€ æ¢¦è€…特殊功能 -->
        <view class="doc-links">
          <a class="doc-link" @click="toFileUrlByU9List(1,formData.itemNo)">图纸规格书</a>
          <a class="doc-link" @click="toFileUrlByU9List(2,formData.itemNo)">进料检验文件</a>

 pages/QC/SJ/Add.vue

@@ -1,103 +1,108 @@
<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.billNo"/>
    <view class="inspection-sheet">
        <!-- å¤´éƒ¨ä¿¡æ¯ -->
        <view class="sheet-header">
            <h1>首检检验单</h1>
            <view class="inspection-number">检验单号：{{formData.billNo}}</view>


        </view>
        <view class="form-group">
          <label class="form-label">创建时间:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.createTime"/>

        <!-- åŸºæœ¬ä¿¡æ¯åŒº -->
        <view class="basic-info">
            <view class="info-row">
                <span class="info-label">创建人：</span>
                <span class="info-value">{{formData.fName}}</span>
        </view>
        <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">生产线别:</text>
          <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入"
                           v-model="formData.line"
                           @select="onDaa020Change"
                           class="picker form-input"
                           style="border: none;"></superwei-combox>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.line"/>
            <view class="info-row">
                <span class="info-label">创建时间：</span>
                <span class="info-value">{{formData.createTime}}</span>
                <!--        <span class="info-label">&nbsp;负责人：</span>
        <span class="info-value">{{formData.statusUser}}</span> -->
        </view>
        <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">物料编码:</text>
          <superwei-combox v-if="isUpdate" :candidates="boardItems" placeholder="请选择或输入"
                           v-model="formData.itemNo"
                           :isJSON="true" keyName="itemName"
                           @select="onItemChange"
                           class="picker form-input"
                           style="border: none;"></superwei-combox>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.itemNo"/>
        </view>
       <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">计划编号:</text>
          <picker v-if="isUpdate" class="picker form-input" name="selector" :range="DAA001List"
                  @change="onDaa001Change">
            <text>{{ DAA001List[DAA001Index] }}</text>
          </picker>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa001"/>

        <!-- ç‰©æ–™ä¿¡æ¯åŒº -->
        <view class="material-info">
            <view class="info-block">
                <view class="info-label">物料编码：</view>
                <view class="info-value">{{formData.itemNo}}</view>
        </view>
        <view class="form-group">
          <label class="form-label">产品名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.daa003"/>
            <view class="info-block">
                <view class="info-label">产品名称：</view>
                <view class="info-value">{{formData.daa003}}</view>
        </view>
        <view class="form-group">
          <label class="form-label">规格型号:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.daa004"/>
            <view class="info-block">
                <view class="info-label">规格型号：</view>
                <view class="info-value">{{formData.daa004}}</view>
        </view>
       <view class="form-group">
          <label class="form-label">工单数量:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.daa008"/>
            <view class="info-block">
                <view class="info-label">生产线别：</view>
                <view class="info-value">{{formData.line}}</view>
        </view> 
        <view class="form-group">
          <label class="form-label">不合格描述:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>

            <view class="info-block">

                <view class="info-label" v-if="formData.extendNo1!=null">技改状态：</view>
                <view class="info-value" v-if="formData.extendNo1!=null">{{formData.extendNo1}}</view>
                <!-- <view class="info-label">项目：</view>
        <view class="info-value">{{formData.projectCodes}}</view> -->

                <view class="info-label">数量：</view>
                <view class="info-value highlight">{{formData.daa008}}</view>
        </view>
      </form>
            <view class="info-block" v-if="formData.fngDesc!=null">
                <view class="info-label">不良描述：</view>
                <view class="info-value">{{formData.fngDesc}}</view>
    </view>
    <view class="list-container">
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center" class="th" style="color: #FFFFFF;">检验项目</uni-th>
          <uni-th align="center" class="th" style="color: #FFFFFF">是否合格</uni-th>
          <uni-th align="center" class="th" style="color: #FFFFFF">记录(点击)</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.projName"/>
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.result"/>
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)">
                {{ item.levelNum + '/' + item.isCheck }}
              </button>
              <button v-else type="warn" @click="toDetail(item)"> {{ item.levelNum + '/' + item.isCheck }}</button>
            <view class="info-block" v-if="formData.newFngDesc!=null">
                <view class="info-label">上次不良：</view>
                <view class="info-value">{{formData.newFngDesc}}</view>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="isUpdate && !isShowTable" @click="save">创建检验单并生成部分默认值</button>

        <!-- æ“ä½œæŒ‰é’®åŒº -->
        <!--    <view class="action-buttons" v-if="this.current" >
      <button class="secondary-btn" @click="getInspectionItems">获取检验项目</button>
    </view> -->

        <!-- æ£€éªŒé¡¹ç›®è¡¨æ ¼ -->
        <view class="inspection-table">
            <table>
                <thead>
                    <tr>
                        <th width="15%" style="text-align: center;">检验项目</th>
                        <th width="50%" style="text-align: center;">质量要求</th>
                        <th width="20%" style="text-align: center;">记录(点击)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td>{{ item.projName }}</td>
                        <td>
                            <view v-if="item.result=='合格'" class="watermark approved">{{ getStatusText(item.result) }}
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button>
                            <view v-if="item.result=='不合格'" class="watermark rejected">{{ getStatusText(item.result) }}
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && formData.result == '未完成' && !isShowTable" @click="removeXJ">删除单据
      </button>
                            <view v-if="item.result=='未完成'" class="watermark pending">{{ getStatusText(item.result) }}
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate &&  !isShowTable" @click="saveRemarks">添加不合格描述</button>
                            <view class="description-text">{{ item.itemMod }}</view>
                        </td>
                        <td>
                            <button v-if="item.current" class="record-btn" @click="fillRecord(item,index)">填写</button>
                            <button v-if="!item.current" class="record-btn" @click="fillRecord(item,index)">查看</button>
                        </td>
                    </tr>
                </tbody>
            </table>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="isShowTable" @click="getTable">获取检验项目</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button>

        <!-- æ“ä½œæŒ‰é’®åŒº -->
        <view class="action-buttons">
            <button class="secondary-btn" @click="uploadImages">上传/查看图片</button>
            <button class="secondary-btn" @click="addDefectDescription" v-if="this.current">添加不良描述</button>
            <!-- é¦–检这边会填完检验项目自动提交，不用写提交逻辑 -->
            <!-- <button class="primary-btn" @click="submitInspection" v-if="this.current">检验提交</button> -->
    </view>
    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
@@ -107,113 +112,187 @@
            <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>
                <button class="updateBut" @click="editRemarks">修改</button>
                <button @click="remarksPopup = !remarksPopup">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        createTime: "",
        id: "",
        billNo: "",
                    releaseNo: "",
                    createBy: "",
                    createDate: "",
                    lotNo: "",
        itemNo: "",
        itemName: "",
        workshopCode: "",
        workshopName: "",
        line: "",
        lineName: "",
        comments: "",
        statusUser: ""
                    billNo: "",
                    fcovertQty: "",
                    detailMem: "",
                    taskNo: "",
                    fcheckResu: "",
                    boardModel: "",
                    planQty: "",
                    mocode: "",
                    boardStyle: ""
      },

      DAA020List: [],

      DAA001List: [],
      schemeResult: [],
      DAA001Index: -1,

      ItemList: [],

      boardItems: [],

      womdaaList: [],

      tableData: [],

      isSubmit: true,

      isUpdate: true,

      isShowTable: false,

      remarks: "",
      remarksPopup: false,
    };
                current: true
            }
  },
  onLoad(options) {
    //options中包含了url附带的参数

    let params = options;

    if (params["id"]) {
      this.isUpdate = false;
      this.formData.id = params["id"];
      this.formData.billNo = params["billNo"];
      this.init();
                this.formData.releaseNo = params["releaseNo"];
                this.formData.lotNo = params["lotNo"];
                this.msgId = params["msgId"];

                if (params["current"] === 'A') {
                    this.current = true;
                } else if (params["current"] === 'B') {
                    this.current = false;
                }

                if (this.msgId > 0) {
                    this.msgRead();
                }

    } else {
      //初始化检验单号
      this.$post({
        url: "/SJ/GetMaxBillNo"
                    url: "/LLJ/getMaxReleaseNo"
      }).then(res => {
        this.formData.billNo = res.data.tbBillList;
        this.formData.createTime = this.$getDate("yyyy-mm-dd");
                    this.formData.releaseNo = res.data.tbBillList;
                    this.formData.createBy = this.$loginInfo.account;
                    this.formData.createDate = this.$getDate("yyyy-mm-dd");
      });

      //产品编码下拉框的初始化
      this.$post({
        url: "/XJ/getLineAll"
      }).then(res => {
        this.lineList = res.data.tbBillList;
        this.DAA020List = res.data.tbBillList.map(item => item.lineName);
        this.formData.itemNo = "";
        this.formData.itemName = "";
        this.formData.workshopCode = "";
        this.formData.workshopName = "";
        this.formData.line = "";
        this.formData.lineName = "";
        this.formData.pbaid = null;
      })
    }

  },
  methods: {
    removeXJ() {
      if (this.formData.id) {
            getStatusText(status) {
                const statusMap = {
                    approved: '合格',
                    rejected: '不合格',
                    pending: '待确认'
                }
                if (status == '未完成') {
                    return statusMap['pending'] || ''
                } else if (status == '合格') {
                    return statusMap['approved'] || ''
                } else {
                    return statusMap['rejected'] || ''
                }

            },
            getInspectionItems() {
                // èŽ·å–检验项目的逻辑
        this.$post({
          url: "/SJ/removeSJ",
                    url: "/LLJ/setJYItem",
          data: {
            id: this.formData.id
                        itemNo: this.formData.itemNo,
                        quantity: this.formData.fcovertQty,
                        releaseNo: this.formData.releaseNo
          }
        }).then(res => {
          if (res.data.tbBillList > 0) {
            this.$showMessage("删除成功");
            //关闭当前页面，返回上一页面或多级页面
            uni.navigateBack();
                    if (res.status == 0) {
                        uni.showToast({
                            title: res.message.toString(),
                            //将值设置为 success æˆ–者直接不用写icon这个参数
                            icon: 'success',
                            //显示持续时间为 2秒
                            duration: 2000
                        })
                        // å¦‚果有页面跳转，需要用定时器延迟
                        setTimeout(() => {
                            this.init();
                        }, 2000);

          } else {
            this.$showMessage("删除失败");
                        uni.showToast({
                            title: res.message.toString(),
                            //将值设置为 success æˆ–者直接不用写icon这个参数
                            icon: 'error',
                            //显示持续时间为 2秒
                            duration: 2000
                        })
          }
        });
            },
            fillRecord(item, index) {
                // å¡«å†™è®°å½•çš„逻辑
                uni.navigateTo({
                    url: 'detail?mainId=' + item.id + '&formID=' + this.formData.id + '&releaseNo=' + this.formData
                        .billNo + '&index=' + index + '&current=' + this.current
                });
            },
            uploadImages() {
                // ä¸Šä¼ /查看图片的逻辑
                uni.navigateTo({
                    url: 'ImageItem?id=' + this.formData.id
                });
            },
            addDefectDescription() {
                // æ·»åŠ ä¸è‰¯æè¿°çš„逻辑
                this.remarksPopup = !this.remarksPopup;
                this.remarks = this.formData.remarks;
            },
            submitInspection() {
                // æ£€éªŒæäº¤çš„逻辑
                this.$post({
                    url: "/LLJ/IqcQaSubmit",
                    data: {
                        userNo: this.$loginInfo.account,
                        releaseNo: this.formData.releaseNo
                    }
                }).then(res => {
                    if (res.status == 0) {

                        uni.showToast({
                            title: res.message.toString(),
                            icon: 'success',
                            duration: 2000
                        })
                        // å¦‚果有页面跳转，需要用定时器延迟
                        setTimeout(() => {
                            uni.navigateTo({
                                url: 'List'
                            });
                        }, 2000); // ä¿æŒä¸Ž duration ç›¸åŒçš„时长

      } else {
        this.$showMessage("请先选择检验单号");
                        uni.showModal({
                            title: "提示",
                            content: res.message.toString(),
                            confirmText: "确定",
                            showCancel: false,
                            success: (res) => {

                            }
                        })
                    }
                })
            },
            onShow() {
                //每次进入页面都会执行的方法
                if (this.formData.id) {
                    this.init();
      }
    },
    init() {
      if (this.formData.id) {
                let userName = this.$loginInfo.account;

        this.$post({
          url: "/SJ/GetPage",
          data: {
@@ -222,18 +301,19 @@
            id: this.formData.id
          }
        }).then(res => {
          let tbBillListElement = res.data.tbBillList[0];
          if (tbBillListElement) {
            this.formData = tbBillListElement;
                    let data = res.data.tbBillList[0];
                    if (data) {
                        this.formData = data;

            this.$post({
              url: "/SJ/getQSItems",
              data: {
                pid: this.formData.id
              }
            }).then(res => {
              this.tableData = res.data.tbBillList;

              this.tableData.sort((a, b) => {
                        }).then(res1 => {
                            let tableData = res1.data.tbBillList
                            //当已检验个数都不为空时按照检测结构排序
                            tableData.sort((a, b) => {
                if (a.result === '未完成' && b.result === '合格') {
                  return -1;
                } else if (a.result === '合格' && b.result === '未完成') {
@@ -242,182 +322,35 @@
                  return 0;
                }
              });

              if (this.tableData.length <= 0) {
                            this.tableData = tableData;
                            if (this.tableData.length === 0) {
                this.isShowTable = true;
              }
            })
          }
        })
      }
    },
    onDaa020Change(event) {
      //获取生产线别的下标地址
      //this.formData.line = event;

      this.lineNo = this.lineList[this.DAA020List.indexOf(event)].lineNo;

      this.formData.line = this.lineNo;

      this.$post({
        url: "/XJ/getBoardItem",
        data: {
          lineNo: this.lineNo
        }
      }).then(res => {
        //填充工单号的数据源
        this.boardItems = res.data.tbBillList;

        this.ItemList = this.boardItems.map(item => item.itemName);
      })

    },
    onItemChange(event) {

      this.formData.itemNo = event.itemNo;

      this.$post({
        url: "/XJ/getDaa001",
        data: {
          daa020: this.lineNo,
          item: this.formData.itemNo
        }
      }).then(res => {
        //填充工单号的数据源
        this.schemeResult = res.data.tbBillList;
        this.DAA001List = this.schemeResult.map(s => s.daa001);
        //变为默认空值的状态
        this.DAA001Index = -1;
        this.formData.daa001 = "";
      })
    },
    //选取工单填充物料号和其他信息
    onDaa001Change(event) {
      this.DAA001Index = event.mp.detail.value;

      this.formData.daa001 = this.schemeResult[this.DAA001Index].daa001;

      //表单中的部分字段赋值
      this.$post({
        url: "/XJ/getItem",
        data: {
          daa001: this.formData.daa001
        }
      }).then(res => {
        let data = res.data.tbBillList[0];
        //当返回的结果集为空时置空原有的值
        if (!data) {
          this.formData.billNo = "";
          this.formData.taskNo = "";
          this.formData.itemNo = "";
          this.tableData = [];
          return;
        }
        //不为空时赋值
        this.formData.daa001 = data.daa001;
        this.formData.daa003 = data.daa003;
        this.formData.daa004 = data.daa004;
        this.formData.daa008 = data.daa008;
        this.formData.pbaid = data.id;


        this.$post({
          url: "/SJ/SetQSItems",
          data: {
            itemNo: this.formData.itemNo
          }
        }).then(res => {
          if (res.data.tbBillList.length > 0) {
            this.tableData = res.data.tbBillList; // åœ¨ç®­å¤´å‡½æ•°ä¸­ï¼Œthis æŒ‡å‘外层作用域的 this
            this.isSubmit = false;
          } else {
            this.$showMessage("此物料没有启用的检验项目，请维护!");
            this.isSubmit = true;
            this.tableData = [];
          }
        });
                            this.tableData.forEach((item, index) => {
                                this.$set(item, 'current', this.current);

      });

                        })
                    }
                });
    },
    toDetail(item) {
      if (this.isUpdate) {
        uni.showToast({
          icon: "none",
          title: "请先生成检验项目",
          duration: 2000,
            msgRead() {
                msgRead(this.msgId, this.$loginInfo.account);
            },
            //去文件列表页面（文件类型，物料编号）
            toFileUrlByU9List(type, u9No) {
                if (type === 1) {
                    uni.navigateTo({
                        url: 'FileUrlByU9List?type=' + type + '&itemID=' + u9No
        });
      } else {
        uni.navigateTo({
          url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData.id
                        url: 'FileUrlByU9List2?type=' + type + '&itemID=' + u9No
        });
      }
    },
    getTable() {
      this.$post({
        url: "/SJ/SetQSItems",
        data: {
          itemNo: this.formData.itemNo
        }
      }).then(res => {
        if (res.data.tbBillList.length > 0) {
          this.tableData = res.data.tbBillList; // åœ¨ç®­å¤´å‡½æ•°ä¸­ï¼Œthis æŒ‡å‘外层作用域的 this
          this.isShowTable = true;
          this.isUpdate = true;
        } else {
          this.$showMessage("此物料没有启用的检验项目，请维护!");
          this.isShowTable = true;
          this.isUpdate = false;
          this.tableData = [];
        }
      });
    },
    saveTable() {
      if (this.tableData.length === 0) {
        return;
      }

      this.$post({
        url: "/SJ/SaveItem",
        data: {
          gid: this.formData.id,
          items: this.tableData,
          statusUser: this.$loginInfo.account
        }
      }).then(res => {
        this.tableData = res.data.tbBillList.items;
        this.isShowTable = false;
        this.isUpdate = false;
      })
    },
    save() {

      if (this.tableData.length === 0) {
        this.$showMessage(this.formData.itemNo + "物料没有检验项目");
        return;
      }

      if (!this.formData.daa001) {
        this.$showMessage("请选择计划编号");
        return;
      }

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

      this.$post({
        url: "/SJ/Save",
        data: {
          from: this.formData,
          items: this.tableData
        }
      }).then(res => {
        this.formData = res.data.tbBillList.result;
        this.tableData = res.data.tbBillList.items;
        this.isUpdate = false;
      })
    }, saveRemarks() {
      this.remarksPopup = !this.remarksPopup;
      this.remarks = this.formData.remarks;
    },
    editRemarks() {
      if (this.remarks) {
        //saveRemarksGid
@@ -434,92 +367,251 @@
            this.$showMessage("保存成功");
          }
        })
                } else {
                    this.$post({
                        url: "/SJ/saveRemarksGid",
                        data: {
                            gid: this.formData.id,
                            remarks: ''
                        }
                    }).then(res => {
                        if (res.data.tbBillList > 0) {
                            this.formData.remarks = this.remarks;
                            this.remarksPopup = !this.remarksPopup;
                            this.$showMessage("保存成功");
                        }
                    })
      }
    },
    toImage() {
      uni.navigateTo({
        url: 'ImageItem?id=' + this.formData.id
      });
    }
  },
  onShow() {
    //每次进入页面都会执行的方法
    this.init();
  }
};
</script>

<style>
.form-group {
    /* åŸºç¡€æ ·å¼ */
    .inspection-sheet {
        font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /* å¤´éƒ¨æ ·å¼ */
    .sheet-header {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e0e0e0;
    }

    .sheet-header h1 {
        color: #2c3e50;
        font-size: 24px;
        margin-bottom: 5px;
    }

    .inspection-number {
        font-size: 16px;
        font-weight: bold;
        color: #3498db;
    }

    /* åŸºæœ¬ä¿¡æ¯åŒºæ ·å¼ */
    .basic-info,
    .material-info {
        margin-bottom: 20px;
    }

    .info-row {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .info-label {
        font-weight: bold;
        color: #34495e;
        min-width: 80px;
        margin-right: 5px;
    }

    .info-value {
        color: #2c3e50;
        margin-right: 20px;
    }

    .highlight {
        font-weight: bold;
        color: #e74c3c;
    }

    /* ç‰©æ–™ä¿¡æ¯åŒºæ ·å¼ */
    .material-info {
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 5px;
    }

    .info-block {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c9c9c9;
        margin-bottom: 10px;
        flex-wrap: wrap;
}

.form-label {
  margin-bottom: 0;
  padding: 5px;
    .doc-links {
        margin-left: auto;
}

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


.picker {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
    .doc-link {
        color: #3498db;
        text-decoration: none;
        margin-left: 15px;
        padding: 3px 8px;
        border: 1px solid #3498db;
        border-radius: 3px;
  font-size: 12px;
}

.uni-form-item {
    .sysLike {
        color: #3498db;
        text-decoration: none;
        margin-left: 15px;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 12px;
    }

    .doc-link:hover {
        background-color: #f0f8ff;
    }

    /* è¡¨æ ¼æ ·å¼ */
    .inspection-table {
        margin: 25px 0;
    }

    .inspection-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .inspection-table th,
    .inspection-table td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
    }

    .inspection-table th {
        background-color: #f8f9fa;
        font-weight: bold;
        color: #34495e;
    }

    .inspection-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .inspection-table tr:hover {
        background-color: #f1f5f9;
    }

    /* æŒ‰é’®æ ·å¼ */
    .action-buttons {
  display: flex;
  border-bottom: 1px solid #c9c9c9;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
}

.edit {
  background-color: white;
}

/* é»˜è®¤æ ·å¼ */
.list-container {
  height: 60vh;
  /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* å…è®¸åˆ—表容器垂直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */
}

/* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 376px);
    /* é€‚当调整高度 */
  }
}


.form-container {
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
}

.th {
  background-color: lightskyblue;
  color: #FFFFFF;
}


.plus-button {
  line-height: 59px;
  font-size: 24px;
    .primary-btn,
    .secondary-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 10px;
        transition: all 0.3s;
    }

    .primary-btn {
        background-color: #3498db;
        color: white;
    }

    .primary-btn:hover {
        background-color: #2980b9;
    }

    .secondary-btn {
        background-color: #ecf0f1;
        color: #7f8c8d;
    }

    .secondary-btn:hover {
        background-color: #d5dbdb;
    }

    .record-btn {
        padding: 6px 12px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        /* border-radius: 3px; */
        cursor: pointer;
        transition: all 0.2s;
    }

    .record-btn:hover {
        background-color: #e9ecef;
    }

    /* æ°´å°æ ·å¼ */
    .watermark {
        position: absolute;
        font-size: 40px;
        font-weight: bold;
        opacity: 1;
        z-index: 1;
        pointer-events: none;
        transform: rotate(-15deg);
        width: 100%;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-15deg);
    }

    .watermark.approved {
        color: #2ecc71;
        /* ç»¿è‰² */
    }

    .watermark.rejected {
        color: #e74c3c;
        /* çº¢è‰² */
    }

    .watermark.pending {
        color: #f39c12;
        /* æ©™è‰² */
    }

    /* æè¿°æ–‡æœ¬å®¹å™¨ */
    .description-text {
        position: relative;
        z-index: 2;
        padding: 25px;
        background-color: rgba(255, 255, 255, 0.7);
    }

    /* è°ƒæ•´è¡¨æ ¼å•å…ƒæ ¼ */
    .inspection-table td:nth-child(2) {
        position: relative;
        overflow: hidden;
        padding: 0;
}

.overlay {
@@ -532,6 +624,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
        z-index: 10;
}

.popup {
@@ -544,4 +637,39 @@
  height: 25vh;
  /* è®¾ç½®é«˜åº¦ä¸ºè§†å£é«˜åº¦çš„80% */
}

    .form-group {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #c9c9c9;
    }

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

    /* å“åº”式设计 */
    @media (max-width: 500px) {

        .info-row,
        .info-block {
            flex-direction: column;
            align-items: flex-start;
        }

        .doc-links {
            margin-left: 0;
            margin-top: 10px;
        }

        .action-buttons {
            flex-direction: column;
        }

        .inspection-table table {
            display: block;
            overflow-x: auto;
        }
    }
</style>

 pages/QC/SJ/Add£¨¾É£©.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,547 @@
<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.billNo"/>
        </view>
        <view class="form-group">
          <label class="form-label">创建时间:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.createTime"/>
        </view>
        <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">生产线别:</text>
          <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入"
                           v-model="formData.line"
                           @select="onDaa020Change"
                           class="picker form-input"
                           style="border: none;"></superwei-combox>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.line"/>
        </view>
        <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">物料编码:</text>
          <superwei-combox v-if="isUpdate" :candidates="boardItems" placeholder="请选择或输入"
                           v-model="formData.itemNo"
                           :isJSON="true" keyName="itemName"
                           @select="onItemChange"
                           class="picker form-input"
                           style="border: none;"></superwei-combox>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.itemNo"/>
        </view>
       <view class="uni-form-item uni-column form-item edit">
          <text class="form-label">计划编号:</text>
          <picker v-if="isUpdate" class="picker form-input" name="selector" :range="DAA001List"
                  @change="onDaa001Change">
            <text>{{ DAA001List[DAA001Index] }}</text>
          </picker>
          <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa001"/>
        </view>
        <view class="form-group">
          <label class="form-label">产品名称:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.daa003"/>
        </view>
        <view class="form-group">
          <label class="form-label">规格型号:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.daa004"/>
        </view>
       <view class="form-group">
          <label class="form-label">工单数量:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.daa008"/>
        </view> 
        <view class="form-group">
          <label class="form-label">不合格描述:</label>
          <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/>
        </view>
      </form>
    </view>
    <view class="list-container">
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center" class="th" style="color: #FFFFFF;">检验项目</uni-th>
          <uni-th align="center" class="th" style="color: #FFFFFF">是否合格</uni-th>
          <uni-th align="center" class="th" style="color: #FFFFFF">记录(点击)</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.projName"/>
          </uni-td>
          <uni-td align="center">
            <input class="form-input" disabled="true" type="text" v-model="item.result"/>
          </uni-td>
          <uni-td>
            <view class="uni-group">
              <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)">
                {{ item.levelNum + '/' + item.isCheck }}
              </button>
              <button v-else type="warn" @click="toDetail(item)"> {{ item.levelNum + '/' + item.isCheck }}</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="isUpdate && !isShowTable" @click="save">创建检验单并生成部分默认值</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate && formData.result == '未完成' && !isShowTable" @click="removeXJ">删除单据
      </button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="!isUpdate &&  !isShowTable" @click="saveRemarks">添加不合格描述</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="isShowTable" @click="getTable">获取检验项目</button>
    </view>
    <view class="plus-button">
      <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</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>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        createTime: "",
        id: "",
        billNo: "",
        itemNo: "",
        itemName: "",
        workshopCode: "",
        workshopName: "",
        line: "",
        lineName: "",
        comments: "",
        statusUser: ""
      },

      DAA020List: [],

      DAA001List: [],
      schemeResult: [],
      DAA001Index: -1,

      ItemList: [],

      boardItems: [],

      womdaaList: [],

      tableData: [],

      isSubmit: true,

      isUpdate: true,

      isShowTable: false,

      remarks: "",
      remarksPopup: false,
    };
  },
  onLoad(options) {
    //options中包含了url附带的参数

    let params = options;

    if (params["id"]) {
      this.isUpdate = false;
      this.formData.id = params["id"];
      this.formData.billNo = params["billNo"];
      this.init();
    } else {
      //初始化检验单号
      this.$post({
        url: "/SJ/GetMaxBillNo"
      }).then(res => {
        this.formData.billNo = res.data.tbBillList;
        this.formData.createTime = this.$getDate("yyyy-mm-dd");
      });

      //产品编码下拉框的初始化
      this.$post({
        url: "/XJ/getLineAll"
      }).then(res => {
        this.lineList = res.data.tbBillList;
        this.DAA020List = res.data.tbBillList.map(item => item.lineName);
        this.formData.itemNo = "";
        this.formData.itemName = "";
        this.formData.workshopCode = "";
        this.formData.workshopName = "";
        this.formData.line = "";
        this.formData.lineName = "";
        this.formData.pbaid = null;
      })
    }
  },
  methods: {
    removeXJ() {
      if (this.formData.id) {
        this.$post({
          url: "/SJ/removeSJ",
          data: {
            id: this.formData.id
          }
        }).then(res => {
          if (res.data.tbBillList > 0) {
            this.$showMessage("删除成功");
            //关闭当前页面，返回上一页面或多级页面
            uni.navigateBack();
          } else {
            this.$showMessage("删除失败");
          }
        });
      } else {
        this.$showMessage("请先选择检验单号");
      }
    },
    init() {
      if (this.formData.id) {
        this.$post({
          url: "/SJ/GetPage",
          data: {
            pageIndex: 1,
            limit: 1,
            id: this.formData.id
          }
        }).then(res => {
          let tbBillListElement = res.data.tbBillList[0];
          if (tbBillListElement) {
            this.formData = tbBillListElement;
            this.$post({
              url: "/SJ/getQSItems",
              data: {
                pid: this.formData.id
              }
            }).then(res => {
              this.tableData = res.data.tbBillList;

              this.tableData.sort((a, b) => {
                if (a.result === '未完成' && b.result === '合格') {
                  return -1;
                } else if (a.result === '合格' && b.result === '未完成') {
                  return 1;
                } else {
                  return 0;
                }
              });

              if (this.tableData.length <= 0) {
                this.isShowTable = true;
              }
            })
          }
        })
      }
    },
    onDaa020Change(event) {
      //获取生产线别的下标地址
      //this.formData.line = event;

      this.lineNo = this.lineList[this.DAA020List.indexOf(event)].lineNo;

      this.formData.line = this.lineNo;

      this.$post({
        url: "/XJ/getBoardItem",
        data: {
          lineNo: this.lineNo
        }
      }).then(res => {
        //填充工单号的数据源
        this.boardItems = res.data.tbBillList;

        this.ItemList = this.boardItems.map(item => item.itemName);
      })

    },
    onItemChange(event) {

      this.formData.itemNo = event.itemNo;

      this.$post({
        url: "/XJ/getDaa001",
        data: {
          daa020: this.lineNo,
          item: this.formData.itemNo
        }
      }).then(res => {
        //填充工单号的数据源
        this.schemeResult = res.data.tbBillList;
        this.DAA001List = this.schemeResult.map(s => s.daa001);
        //变为默认空值的状态
        this.DAA001Index = -1;
        this.formData.daa001 = "";
      })
    },
    //选取工单填充物料号和其他信息
    onDaa001Change(event) {
      this.DAA001Index = event.mp.detail.value;

      this.formData.daa001 = this.schemeResult[this.DAA001Index].daa001;

      //表单中的部分字段赋值
      this.$post({
        url: "/XJ/getItem",
        data: {
          daa001: this.formData.daa001
        }
      }).then(res => {
        let data = res.data.tbBillList[0];
        //当返回的结果集为空时置空原有的值
        if (!data) {
          this.formData.billNo = "";
          this.formData.taskNo = "";
          this.formData.itemNo = "";
          this.tableData = [];
          return;
        }
        //不为空时赋值
        this.formData.daa001 = data.daa001;
        this.formData.daa003 = data.daa003;
        this.formData.daa004 = data.daa004;
        this.formData.daa008 = data.daa008;
        this.formData.pbaid = data.id;


        this.$post({
          url: "/SJ/SetQSItems",
          data: {
            itemNo: this.formData.itemNo
          }
        }).then(res => {
          if (res.data.tbBillList.length > 0) {
            this.tableData = res.data.tbBillList; // åœ¨ç®­å¤´å‡½æ•°ä¸­ï¼Œthis æŒ‡å‘外层作用域的 this
            this.isSubmit = false;
          } else {
            this.$showMessage("此物料没有启用的检验项目，请维护!");
            this.isSubmit = true;
            this.tableData = [];
          }
        });

      });
    },
    toDetail(item) {
      if (this.isUpdate) {
        uni.showToast({
          icon: "none",
          title: "请先生成检验项目",
          duration: 2000,
        });
      } else {
        uni.navigateTo({
          url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData.id
        });
      }
    },
    getTable() {
      this.$post({
        url: "/SJ/SetQSItems",
        data: {
          itemNo: this.formData.itemNo
        }
      }).then(res => {
        if (res.data.tbBillList.length > 0) {
          this.tableData = res.data.tbBillList; // åœ¨ç®­å¤´å‡½æ•°ä¸­ï¼Œthis æŒ‡å‘外层作用域的 this
          this.isShowTable = true;
          this.isUpdate = true;
        } else {
          this.$showMessage("此物料没有启用的检验项目，请维护!");
          this.isShowTable = true;
          this.isUpdate = false;
          this.tableData = [];
        }
      });
    },
    saveTable() {
      if (this.tableData.length === 0) {
        return;
      }

      this.$post({
        url: "/SJ/SaveItem",
        data: {
          gid: this.formData.id,
          items: this.tableData,
          statusUser: this.$loginInfo.account
        }
      }).then(res => {
        this.tableData = res.data.tbBillList.items;
        this.isShowTable = false;
        this.isUpdate = false;
      })
    },
    save() {

      if (this.tableData.length === 0) {
        this.$showMessage(this.formData.itemNo + "物料没有检验项目");
        return;
      }

      if (!this.formData.daa001) {
        this.$showMessage("请选择计划编号");
        return;
      }

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

      this.$post({
        url: "/SJ/Save",
        data: {
          from: this.formData,
          items: this.tableData
        }
      }).then(res => {
        this.formData = res.data.tbBillList.result;
        this.tableData = res.data.tbBillList.items;
        this.isUpdate = false;
      })
    }, saveRemarks() {
      this.remarksPopup = !this.remarksPopup;
      this.remarks = this.formData.remarks;
    },
    editRemarks() {
      if (this.remarks) {
        //saveRemarksGid
        this.$post({
          url: "/SJ/saveRemarksGid",
          data: {
            gid: this.formData.id,
            remarks: this.remarks
          }
        }).then(res => {
          if (res.data.tbBillList > 0) {
            this.formData.remarks = this.remarks;
            this.remarksPopup = !this.remarksPopup;
            this.$showMessage("保存成功");
          }
        })
      }
    },
    toImage() {
      uni.navigateTo({
        url: 'ImageItem?id=' + this.formData.id
      });
    }
  },
  onShow() {
    //每次进入页面都会执行的方法
    this.init();
  }
};
</script>

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

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

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


.picker {
  flex: 1;
  margin-bottom: 0;
  padding: 5px;
  font-size: 12px;
}

.uni-form-item {
  display: flex;
  border-bottom: 1px solid #c9c9c9;
}

.edit {
  background-color: white;
}

/* é»˜è®¤æ ·å¼ */
.list-container {
  height: 60vh;
  /* è®¾ç½®åˆ—表容器的高度为剩余空间，并减去表单容器的高度 */
  overflow-y: auto;
  /* å…è®¸åˆ—表容器垂直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使列表内容更美观 */
}

/* åœ¨å°å±å¹•è®¾å¤‡ä¸Šï¼Œé‡ç½®é«˜åº¦ä¸ºé€‚应屏幕 */
@media (max-width: 768px) {
  .list-container {
    height: calc(100vh - 376px);
    /* é€‚当调整高度 */
  }
}


.form-container {
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
}

.th {
  background-color: lightskyblue;
  color: #FFFFFF;
}


.plus-button {
  line-height: 59px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 10px;
}

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

.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% */
}
</style>

 pages/QC/SJ/List(¾É).vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,384 @@
<template>
  <view>
    <!-- åˆ·æ–°é¡µé¢åŽçš„顶部提示框 -->
    <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view>

    <view class="newsTab">
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
                             active-color="#87cefa"></uni-segmented-control>
      <view class="content">
        <view v-show="current===0">
          <!-- åŸºäºŽ uni-list çš„页面布局 -->
          <uni-list>
            <!-- to å±žæ€§æºå¸¦å‚数跳转详情页面，当前只为参考 -->
            <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;"
                           class="list-item" direction="column" v-for="item in data" :key="item.id"
                           :to="'Add?id='+item.id+'&billNo='+item.billNo">
              <!-- é€šè¿‡header插槽定义列表的标题 -->
              <template v-slot:header>
                <view class="form-group uni-title" style="margin-bottom: 0;">
                  <label class="form-label">检验单号:</label>
                  <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                </view>
              </template>
              <!-- é€šè¿‡body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">创建时间:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">产线:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.line"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">物料编码:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">产品名称:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa003"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">规格型号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa004"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">工单数量:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa008"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.fName"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检验人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检测结果:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.result"/>
                      </view>
                    </view>

                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
          <!-- é€šè¿‡ loadMore ç»„件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
          <!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->

          <!-- <view class="fab" @click="handleFabClick">
            <text class="fab-icon">+</text>
          </view> -->
          <view class="plus-button" @click="handleFabClick">
            +
          </view>
        </view>
        <view v-show="current===1">
          <uni-list>
            <!-- to å±žæ€§æºå¸¦å‚数跳转详情页面，当前只为参考 -->
            <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;"
                           class="list-item" direction="column" v-for="item in data" :key="item.id"
                           :to="'Add?id='+item.id+'&billNo='+item.billNo">
              <!-- é€šè¿‡header插槽定义列表的标题 -->
              <template v-slot:header>
                <view class="form-group uni-title" style="margin-bottom: 0;">
                  <label class="form-label">检验单号:</label>
                  <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                </view>
              </template>
              <!-- é€šè¿‡body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">创建时间:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">产线:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.line"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">物料编码:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">产品名称:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa003"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">规格型号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa004"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">工单数量:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa008"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.fName"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检验人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检测结果:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.result"/>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      items: ['未完成', '已完成'],
      current: 0,
      data: [],
      tipShow: false // æ˜¯å¦æ˜¾ç¤ºé¡¶éƒ¨æç¤ºæ¡†
    };
  },
  onLoad() {
    //页面加载时调用的事件
    this.init();
  },
  methods: {
    init() {
      let result = "未完成";
      if (this.current === 1) {
        result = "已完成";
      }
      //页面加载时调用的事件
      this.$post({
        url: "/SJ/GetPage",
        data: {
          pageIndex: 1,
          limit: 20,
          statusUser: this.$loginInfo.account,
          result: result
        }
      }).then(res => {
        this.data = res.data.tbBillList;
      })
    },
    handleFabClick() {
      uni.navigateTo({
        url: 'Add?id'
      });
    },
    onClickItem(index) {
      if (this.current !== index.currentIndex) {
        this.current = index.currentIndex;
        this.init();
      }
    },
  },
  /**
   * ä¸‹æ‹‰åˆ·æ–°å›žè°ƒå‡½æ•°
   */
  onPullDownRefresh() {
    //重新执行一遍查询
    this.init();
    this.tipShow = true;
    //关闭动画
    uni.stopPullDownRefresh();

    setTimeout(function () {
      this.tipShow = false;
    }, 3000);
  },
  /**
   * ä¸Šæ‹‰åŠ è½½å›žè°ƒå‡½æ•°
   */
  onReachBottom() {
    this.init();
  },
  onShow() {
    //每次进入页面都会执行的方法
    this.init();
  }
};
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';

.uni-note {
  margin-top: 0;
}

/* Set the input backgrounds to be gray */
.form-input {
  background-color: #f2f2f2; /* Or any other shade of gray you prefer */
}

/* Ensure automatic adaptation based on page size */
.form-group {
  display: flex;
  align-items: center;
}

.form-label {
  margin-bottom: 0;
  border-bottom: 1px solid #FFFFFF;
  padding: 5px;
  font-size: 12px;
  width: 60px;
  /* Adjust the font size as per your requirement */
}

.form-input {
  flex: 1;
  margin-bottom: 0;
  border-bottom: 1px solid #c7c7c7;
  padding: 5px;
  font-size: 12px;
  background-color: #FFFFFF;
  /* Adjust the font size as per your requirement */
}

.plus-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  color: #ffffff;
  text-align: center;
  line-height: 59px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 35px;
}

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
}

.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}

.content {
  width: 100%;
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

 pages/QC/SJ/List.vue

@@ -1,210 +1,100 @@
<template>
  <view>
    <!-- åˆ·æ–°é¡µé¢åŽçš„顶部提示框 -->
    <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view>
    <view class="inspection-app">
        <view class="filter-section">
            <view class="filter-controls">

    <view class="newsTab">
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
                             active-color="#87cefa"></uni-segmented-control>
      <view class="content">
        <view v-show="current===0">
          <!-- åŸºäºŽ uni-list çš„页面布局 -->
          <uni-list>
            <!-- to å±žæ€§æºå¸¦å‚数跳转详情页面，当前只为参考 -->
            <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;"
                           class="list-item" direction="column" v-for="item in data" :key="item.id"
                           :to="'Add?id='+item.id+'&billNo='+item.billNo">
              <!-- é€šè¿‡header插槽定义列表的标题 -->
              <template v-slot:header>
                <view class="form-group uni-title" style="margin-bottom: 0;">
                  <label class="form-label">检验单号:</label>
                  <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                </view>
              </template>
              <!-- é€šè¿‡body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">创建时间:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">产线:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.line"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">物料编码:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">产品名称:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa003"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">规格型号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa004"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">工单数量:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa008"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.fName"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检验人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检测结果:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.result"/>
                      </view>
                <view class="status-tabs">
                    <button :class="['tab-button', activeTab === 0 ? 'active' : '']"
                        @click="switchTab(0)">未检验</button>
                    <button :class="['tab-button', activeTab === 1 ? 'active' : '']"
                        @click="switchTab(1)">{{checkedCount}}</button>
                    </view>

                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
          <!-- é€šè¿‡ loadMore ç»„件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
          <!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->

          <!-- <view class="fab" @click="handleFabClick">
            <text class="fab-icon">+</text>
          </view> -->
          <view class="plus-button" @click="handleFabClick">
            +
        <!-- æ£€éªŒå•åˆ—表 -->
        <view class="inspection-list">
            <!-- æ£€éªŒå•å¡ç‰‡1 -->
            <view class="inspection-card" v-for="(item, index) in inspectionList" :key="index">
                <view class="card-header">
                    <text class="badge urgent" v-if="item.urgentFlag == 1">急料</text>
                    <text class="badge urgent" v-if="item.jycs == 1">超时</text>
                    <text class="badge normal" v-if="item.ftype == 1">委外</text>
                    <text class="badge normal" v-if="item.first == 1">首次来料</text>
                    <text class="card-title">检验单号: {{item.billNo}}</text>
                    <text class="status pass" v-if="item.result=='合格' && item.activeTab==1">合格</text>
                    <text class="status Unqualified" v-if="item.result=='不合格' && item.activeTab==1">不合格</text>
                </view>

                <view class="card-body">
                    <view class="info-row">
                        <view class="info-item">
                            <text class="info-label">物料信息</text>
                            <text class="info-content">{{item.itemNo}}  </text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">产线</text>
                            <text class="info-content">{{item.line}}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">工单数量</text>
                            <text class="info-content highlight">{{item.daa008}}</text>
                        </view>

                    </view>
                    <view class="info-row">
                        <view class="info-item">
                            <text class="info-label">产品信息</text>
                            <text class="info-content">{{item.daa003}} |{{item.daa004}} </text>
          </view>
        </view>
        <view v-show="current===1">
          <uni-list>
            <!-- to å±žæ€§æºå¸¦å‚数跳转详情页面，当前只为参考 -->
            <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;"
                           class="list-item" direction="column" v-for="item in data" :key="item.id"
                           :to="'Add?id='+item.id+'&billNo='+item.billNo">
              <!-- é€šè¿‡header插槽定义列表的标题 -->
              <template v-slot:header>
                <view class="form-group uni-title" style="margin-bottom: 0;">
                  <label class="form-label">检验单号:</label>
                  <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
                    <view class="info-row">
                        <view class="info-item" v-if="item.newFngDesc!=null">
                            <text class="info-label">上次不良描述</text>
                            <text class="info-content">{{item.newFngDesc}}</text>
                </view>
              </template>
              <!-- é€šè¿‡body插槽定义列表内容显示 -->
              <template v-slot:body>
                <view style="margin-top: 0;">
                  <view class="uni-content">
                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">创建时间:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/>
                        <view class="info-item" v-if="item.fngDesc!=null">
                            <text class="info-label">不良描述</text>
                            <text class="info-content">{{item.fngDesc}}</text>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">产线:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.line"/>
                    <view class="meta-info">
                        <text class="meta-item"><uni-icons type="calendar" size="14" color="#95a5a6"></uni-icons>
                            {{item.statusDate}}</text>
                        <text class="meta-item"><uni-icons type="person" size="14" color="#95a5a6"></uni-icons>
                            {{item.statusUser}}</text>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label lab">物料编码:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">产品名称:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa003"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">规格型号:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa004"/>
                      </view>
                    </view>

                    <view class="uni-title-sub uni-ellipsis-2">
                      <view class="form-group">
                        <label class="form-label">工单数量:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.daa008"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">创建人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.fName"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检验人:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/>
                      </view>
                    </view>

                    <view class="uni-note" style="color: red">
                      <view class="form-group">
                        <label class="form-label lab">检测结果:</label>
                        <input class="form-input" disabled="true" type="text" v-model="item.result"/>
                <view class="card-actions">
                    <button v-if="item.activeTab==0" class="primary" @click="startInspection(item)">开始检验</button>
                    <button v-if="item.activeTab==1" class="primary" @click="startInspection(item)">查看</button>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
            </uni-list-item>
          </uni-list>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      items: ['未完成', '已完成'],
      current: 0,
      data: [],
      tipShow: false // æ˜¯å¦æ˜¾ç¤ºé¡¶éƒ¨æç¤ºæ¡†
    };
                projectIndex: 0,
                optionsIndex: 0,
                projects: ['当前', '全部'],
                activeTab: 0, // 0-未检验, 1-已检验
                uncheckedCount: 0,
                checkedCount: '已检验',
                inspectionList: [],
                pageIndex: 1,
                limit: 20,
                IQCJL: 0,
                options: ['项目', '物料编号', '物料名称', '供应商', '采购员'],
                searchValue: ''

            }
  },
  onLoad() {
    //页面加载时调用的事件
@@ -212,173 +102,422 @@
  },
  methods: {
    init() {

      let result = "未完成";
      if (this.current === 1) {
                if (this.activeTab === 1) {
        result = "已完成";
      }

                if (this.isLoading) return; // å¦‚果正在加载则不继续执行

                this.isLoading = true;

                //获取当前登录的用户
                let userName = this.$loginInfo.account;


      //页面加载时调用的事件
      this.$post({
        url: "/SJ/GetPage",
        data: {
          pageIndex: 1,
                      pageIndex: this.pageIndex ,
          limit: 20,
          statusUser: this.$loginInfo.account,
          result: result
        }
      }).then(res => {
        this.data = res.data.tbBillList;
      })
    },
    handleFabClick() {
      uni.navigateTo({
        url: 'Add?id'
					 
                    if (this.pageIndex === 1) {
                        // å¦‚果是第一页，直接覆盖原数据
                        this.inspectionList = res.data.tbBillList;
                        //添加Tab信息，判断是已检还是未检数据
                        this.inspectionList.forEach((item, index) => {
                            this.$set(item, 'activeTab', this.activeTab);
                            this.$set(item, 'IQCJL', this.IQCJL);
                        });
                    } else {

                        if (res.data.tbBillList.length > 0) {
                            // å¦‚果是下一页，追加新数据
                            this.inspectionList = [...this.inspectionList, ...res.data.tbBillList];
                            //添加Tab信息，判断是已检还是未检数据
                            this.inspectionList.forEach((item, index) => {
                                this.$set(item, 'activeTab', this.activeTab);
                                this.$set(item, 'IQCJL', this.IQCJL);
                            });
                        }

                    }
                    console.log(this.inspectionList)
                    this.totalCount = res.data.totalCount;
                    this.totalPage = Math.ceil(this.totalCount / this.limit);

                    this.noData = this.pageIndex >= this.totalPage;
                    this.isLoading = false; // ç»“束加载
                    if (this.activeTab === 1) {
                        // this.checkedCount = '已检验（' + res.totalCount + '）';
                        this.checkedCount = '已检验';
                    } else {
                        this.uncheckedCount = res.totalCount;
                    }
                }).catch(() => {
                    this.isLoading = false; // å‡ºçŽ°é”™è¯¯æ—¶ç»“束加载
      });
    },
    onClickItem(index) {
      if (this.current !== index.currentIndex) {
        this.current = index.currentIndex;
            switchTab(index) {
                this.activeTab = index
                // è¿™é‡Œå¯ä»¥æ·»åŠ åˆ‡æ¢æ ‡ç­¾é¡µçš„逻辑
                this.inspectionList = [];
        this.init();
      }
    },
            //跳转检验单
            startInspection(item) {
				 
                if (this.activeTab === 1) {
                    uni.navigateTo({
                        url: 'Add?id=' + item.id + '&current=B'
                    })
                } else {
                    uni.navigateTo({
                        url: 'Add?id=' + item.id + '&current=A'
                    })
                }

  },
  /**
   * ä¸‹æ‹‰åˆ·æ–°å›žè°ƒå‡½æ•°
   */
  onPullDownRefresh() {

                this.pageIndex = 1;
    //重新执行一遍查询
    this.init();
    this.tipShow = true;
                // this.tipShow = true;
    //关闭动画
    uni.stopPullDownRefresh();

    setTimeout(function () {
      this.tipShow = false;
    }, 3000);
                // setTimeout(function () {
                //   this.tipShow = false;
                // }, 6000);

  },
  /**
   * ä¸Šæ‹‰åŠ è½½å›žè°ƒå‡½æ•°
   */
  onReachBottom() {
    this.init();
                if (this.noData || this.isLoading) return;
                this.pageIndex++;
                this.init(); // åŠ è½½æ›´å¤šæ•°æ®
  },
  onShow() {
    //每次进入页面都会执行的方法
                // this.pageIndex = 1;
                // this.data = [];
                // //this.current = 0
    this.init();
  }
};
        }
    }
</script>

<style lang="scss">
@import '@/common/uni-ui.scss';

.uni-note {
  margin-top: 0;
<style scoped>
    /* åŸºç¡€æ ·å¼é‡ç½® */
    .inspection-app {
        padding: 10px;
        background-color: #f5f7fa;
        min-height: 100vh;
}

/* Set the input backgrounds to be gray */
.form-input {
  background-color: #f2f2f2; /* Or any other shade of gray you prefer */
    /* é¡¶éƒ¨ç­›é€‰åŒº */
    .filter-section {
        margin-bottom: 24px;
}

/* Ensure automatic adaptation based on page size */
.form-group {
    .filter-section h1 {
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 16px;
    }

    /* æ–°å¢žæœç´¢æ¡†æ ·å¼ */
    .search-container {
        display: flex;
        flex: 1;
        margin: 0 10px;
        height: 36px;
        /* ä¸Žå…¶ä»–控件高度一致 */
    }

    .search-input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 4px;
        font-size: 14px;
        background-color: white;
    }

    .search-button {
        padding: 0 12px;
        border: 1px solid #3498db;
        border-radius: 0 4px 4px 0;
        background-color: #3498db;
        color: white;
        font-size: 14px;
        margin: 0;
    }

    /* .filter-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.dropdown-filter {
  display: flex;
  align-items: center;
  gap: 8px;
} */
    .filter-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .dropdown-filter {
        min-width: 70px;
    }

    .filter-label {
        font-size: 14px;
        color: #7f8c8d;
    }

    .picker {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
        font-size: 14px;
        min-width: 120px;
    }

    .status-tabs {
        display: flex;
        border-radius: 4px;
        overflow: hidden;
        background-color: #ecf0f1;
    }

    .status-tabs {
        flex: 1;
        min-width: 200px;
    }

    .tab-button {
        padding: 0px 16px;
        border: none;
        background: none;
        font-size: 14px;
        transition: all 0.3s;
        margin: 0;
        height: 35px;
    }

    .tab-button.active {
        background-color: #3498db;
        color: white;
    }

    /* æ£€éªŒå•åˆ—表 */
    .inspection-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* æ£€éªŒå•å¡ç‰‡ */
    .inspection-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: all 0.3s;
    }

    .card-header {
        padding: 16px;
        border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.form-label {
  margin-bottom: 0;
  border-bottom: 1px solid #FFFFFF;
  padding: 5px;
  font-size: 12px;
  width: 60px;
  /* Adjust the font size as per your requirement */
}

.form-input {
    .card-title {
        font-size: 16px;
        font-weight: 600;
  flex: 1;
  margin-bottom: 0;
  border-bottom: 1px solid #c7c7c7;
  padding: 5px;
        margin: 0 8px;
    }

    .badge {
  font-size: 12px;
  background-color: #FFFFFF;
  /* Adjust the font size as per your requirement */
        padding: 2px 6px;
        border-radius: 10px;
        margin-right: 8px;
}

.plus-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  color: #ffffff;
  text-align: center;
  line-height: 59px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  margin-bottom: 35px;
    .badge.urgent {
        background-color: #e74c3c;
        color: white;
}

page {
    .badge.normal {
        background-color: #ffaa00;
        color: white;
    }

    .status {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 500;
    }

    .status.pending {
        background-color: #f39c12;
        color: white;
    }

    .status.assigned {
        background-color: #3498db;
        color: white;
    }

    .status.pass {
        background-color: #00cd00;
        color: white;
    }

    .status.Unqualified {
        background-color: #ff0000;
        color: white;
    }

    .card-body {
        padding: 16px;
    }

    .info-row {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
        margin-bottom: 12px;
        gap: 16px;
}

.tips {
  color: #67c23a;
    .info-item {
        flex: 1;
    }

    .info-label {
        display: block;
        font-size: 12px;
        color: #7f8c8d;
        margin-bottom: 4px;
    }

    .info-content {
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
        color: #2c3e50;
        line-height: 1.5;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
    .highlight {
        font-weight: 600;
        color: #2c3e50;
        font-size: 16px;
}

.content {
  width: 100%;
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
    .meta-info {
  display: flex;
  overflow: hidden;
        gap: 16px;
        font-size: 12px;
        color: #95a5a6;
        margin-top: 12px;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
    .meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
    .card-actions {
        padding: 12px 16px;
        border-top: 1px solid #eee;
        display: flex;
        gap: 8px;
    }

    button {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
        font-size: 14px;
        transition: all 0.2s;
        flex: 1;
    }

    button.primary {
        background-color: #3498db;
        color: white;
        border-color: #2980b9;
    }

    /* å“åº”式设计 */
    @media (min-width: 768px) {
        .inspection-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        }

        .info-row {
            flex-direction: row;
        }

    }

    /* å“åº”式设计 */
    @media (min-width: 300px) {
        .inspection-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }

        .info-row {
            flex-direction: row;
        }

        .picker {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            font-size: 14px;
            min-width: 10px;
        }

        /*   .search-container {
      order: 3;
      width: 100%;
      margin: 0px 0 0 0;
    }
    
    .status-tabs {
      order: 4;
      width: 100%;
    } */
}
</style>

 pages/QC/SJ/detail.vue

@@ -1,101 +1,166 @@
<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">当前检验单号: {{releaseNo}}</view>
    </view>

    <view class="plus-button">
      <button type="warn" @click="saveRemarks">添加不合格描述</button>
        <!-- æ ‡ç­¾æ  -->
        <view class="tabs">
            <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{active: currentTab === index}"
                @tap="switchTab(index,tab.id)">
                {{ tab.projName }}
            </view>
        </view>
        <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.usingInstruments }}</view>
                        </view>
                        <view class="info-item">
                            <view class="info-label">检验数量</view>
                            <view class="info-value">{{ formData.levelNum }}</view>
    </view>

                        <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>
                </view>
            </view>

            <!-- è§„格要求 -->
            <view class="section">
                <view class="section-header">质量要求</view>
                <view class="section-body">
                    <text class="spec-text">{{ formData.itemMod }}</text>
                </view>
            </view>
            <!-- è§„格要求 -->
            <view class="section">
                <view class="section-header">检验描述</view>
                <view class="section-body">
                    <text class="spec-text">{{ formData.inspectionMethod }}</text>
                </view>
            </view>
            <!-- æ£€éªŒç»“æžœ -->
            <view class="section">
                <view class="section-header">检验结果</view>
                <view class="section-body">
                    <view v-if="formData.result!=null" class="result-preview">
                        <view class="info-label">预览结果</view>
                        <view class="info-value"><b>{{formData.result}}</b></view>
                    </view>

                    <view v-if="formData.remarks!=null" class="result-ng">
                        <view class="info-label">不良描述</view>
                        <view class="info-value danger">{{formData.remarks}}</view>
                    </view>
                </view>
            </view>

            <!-- ç»“果录入 -->
            <view class="section">
                <view class="section-header">检验结果录入</view>
                <view class="section-body">
                    <view class="input-group input1">
                        <view class="input-wrapper">

                            <button class="btn upload-btn" @tap="chooseImage">
                                <uni-icons type="upload" size="16" color="#fff"></uni-icons>
                                ä¸Šä¼ /查看图片
                            </button>
                            <button v-if="this.current" class="btn upload-btn" @tap="upRemarks">
                                <uni-icons type="compose" size="16" color="#fff"></uni-icons>
                                ä¸è‰¯æè¿°
                            </button>
                            <input v-if="(tableData.length < formData.levelNum)" @input="search($event)"
                                v-model="inputTxt" type="text" class="result-input" placeholder="请输入检验结果..."
                                placeholder-class="placeholder" />
                            <button v-if="(tableData.length < formData.levelNum)"
                                style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn"
                                @tap="saveResult">保存结果</button>
                        </view>
                    </view>

                    <view class="input-group input2">
                        <view class="input-wrapper">

                            <button class="btn upload-btn" @tap="chooseImage">
                                <uni-icons type="upload" size="16" color="#fff"></uni-icons>
                                ä¸Šä¼ /查看图片
                            </button>
                            <button v-if="this.current" class="btn upload-btn" @tap="upRemarks">
                                <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.checkQyt)" @input="search($event)"
                                v-model="inputTxt" type="text" class="result-input" placeholder="请输入检验结果..."
                                placeholder-class="placeholder" />
                            <button v-if="(tableData.length < formData.checkQyt)"
                                style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn"
                                @tap="saveResult">保存结果</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">检验结果<i style="color: rgb(0 212 68);"
                            v-if="!(tableData.length < formData.levelNum)">（输入已完成）</i></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 v-if="!isNumber" class="td">
                        <view :class="['result-badge', 'OK']" v-if="item.fcheckResu==1">
                            OK
                        </view>
                        <view :class="['result-badge', 'NG']" v-if="item.fcheckResu==0">
                            NG
                        </view>
                    </view>
                    <view v-if="isNumber" 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" @tap="toggleResult(item)">
                            {{ editResult(item.fcheckResu) }}
                        </button>
                        <button v-if="isNumber" class="btn danger-btn" @tap="toDetail(item)">
                            ä¿®æ”¹
                        </button>
                    </view>
                </view>
            </view>
    <view v-if="remarksPopup" class="overlay">
      <view class="popup">
        <h3>修改不合格描述</h3>
@@ -104,12 +169,11 @@
            <label class="form-label">不合格描述:</label>
            <input class="form-input" type="text" v-model="remarks"/>
          </view>
          <button type="warn" @click="editRemarks">修改</button>
                        <button class="updateBut" type="warn" @click="editRemarks">修改</button>
          <button @click="remarksPopup = !remarksPopup">取消</button>
        </form>
      </view>
    </view>

    <view v-if="showPopup" class="overlay">
      <view class="popup">
        <h3>修改检验结果</h3>
@@ -123,44 +187,78 @@
        </form>
      </view>
    </view>

        </view>
  </view>
</template>

<script>
    import {
        compile
    } from "vue";

export default {
  data() {
    return {
      formData: {},
                tableData: {},
                mainId: '',
      isNumber: false,
      checkItem: "",
      id: 0,
      gid: 0,
      billNo: "",
                currentTab: 0,
                tabs: [],
                inputResult: '',
                remarksPopup: false,
      showPopup: false,
      editData: {},
      tableData: [],
      base64Image: "",
      isShowImg: false,
      remarks: "",
      remarksPopup: false,
                inputTxt: '',
                formID: '',
                releaseNo: '',
                current: false
    }
  },
  methods: {
            switchTab(index, mainIds) {
                this.currentTab = index
                this.mainId = mainIds;
                this.refreshResult();
            },
            //检测输入框的输入，并给变量赋值
            search(event) {
                this.formData.fcheckResu = event.detail.value;
            },
            toggleResult(item) {
                let fstand = "√";
                let fcheckResu = 1;

    previewImage() {
      uni.previewImage({
        urls: [this.base64Image],
                if (item.fcheckResu == '1') {
                    fstand = "×";
                    fcheckResu = 0;
                }

                this.$post({
                    url: "/SJ/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(); //刷新页面
                })
            },
            chooseImage() {
                uni.navigateTo({
                    url: 'ImageItem?id=' + this.formData.id
      });
    },
    editResult(fcheckResu) {
      if (fcheckResu == '1') {
        return "改为不合格";
      } else {
        return "改为合格";
      }
            upRemarks() {
                this.remarksPopup = true;
    },
    submit() {

            saveResult() {
      let count = this.formData.levelNum;
      let fstand = "√";

@@ -172,7 +270,8 @@
          return;
        }

        if (this.formData.fcheckResu >= this.formData.minValue && this.formData.fcheckResu <= this.formData.maxValue) {
                    if (this.formData.fcheckResu >= this.formData.minValue && this.formData.fcheckResu <= this.formData
                        .maxValue) {
          fstand = "√"
        } else {
          fstand = "×";
@@ -198,8 +297,8 @@
      this.$post({
        url: "/SJ/SetQSItemDetail",
        data: {
          pid: this.id,
          gid: this.gid,
                        pid: this.mainId,
                        gid: this.formID,
          fstand: fstand,
          fcheckResu: this.formData.fcheckResu,
          updateBy: this.formData.updater,
@@ -211,38 +310,87 @@
        this.refreshResult();
      })


    },
            goBack() {
                uni.navigateBack()
            },
            //获取检验单详情
    refreshResult() {
      this.$post({
        url: "/SJ/getQSItems",
        data: {
          id: this.id
                        id: this.mainId
        }
      }).then(res => {
        this.formData = res.data.tbBillList[0];
        this.formData.billNo = this.billNo;
        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;
        }
      })

                    this.formData = res.data.tbBillList[0];
      this.$post({
        url: "/SJ/getQSItemDetail",
        data: {
          pid: this.id,
          gid: this.gid
                            pid: this.mainId,
                            gid: this.formID
        }
      }).then(res => {
        this.tableData = res.data.tbBillList;
      })
                    // 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.maxValue && this.formData.minValue && this.formData.standardValue) {
                        this.isNumber = true;
                    } else {
                        this.isNumber = false;
                    }
                })
            },
            editResult(fcheckResu) {
                if (fcheckResu == '1') {
                    return "改为不合格";
                } else {
                    return "改为合格";
                }
    },
    toDetail(item) {
      this.showPopup = !this.showPopup;
      this.editData = item;
            },
            editRemarks() {
                if (this.remarks) {
                    //saveRemarksGid
                    this.$post({
                        url: "/SJ/saveRemarksPid",
                        data: {
                            pid: this.formData.id,
                            remarks: this.remarks
                        }
                    }).then(res => {
                        if (res.data.tbBillList > 0) {
                            this.formData.remarks = this.remarks;
                            this.remarksPopup = !this.remarksPopup;
                            this.$showMessage("保存成功");
                        }
                    })
                } else {
                    this.$post({
                        url: "/SJ/saveRemarksPid",
                        data: {
                            pid: this.formData.id,
                            remarks: ''
                        }
                    }).then(res => {
                        if (res.data.tbBillList > 0) {
                            this.formData.remarks = this.remarks;
                            this.remarksPopup = !this.remarksPopup;
                            this.$showMessage("保存成功");
                        }
                    })
                }
    },
    eidt() {

@@ -264,7 +412,9 @@
          return;
        }

        if (this.editData.fcheckResu >= this.formData.minValue && this.editData.fcheckResu <= this.formData.maxValue) {
                    if (parseFloat(this.editData.fcheckResu) >= parseFloat(this.formData.fdownAllow) && parseFloat(this
                            .editData
                            .fcheckResu) <= parseFloat(this.formData.fupAllow)) {
          this.editData.isPass = 1
        } else {
          this.editData.isPass = 0
@@ -292,8 +442,8 @@
        url: "/SJ/UpdateQSItemDetail",
        data: {
          id: this.editData.id,
          pid: this.id,
          gid: this.gid,
                        pid: this.mainId,
                        gid: this.formID,
          fstand: fstand,
          fcheckResu: this.editData.fcheckResu,
          updateBy: this.editData.updater,
@@ -304,111 +454,252 @@
        this.refreshResult();//刷新页面
      })
    },
    numberEdit(item) {

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

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

      this.$post({
        url: "/SJ/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: "/SJ/saveRemarksPid",
          data: {
            pid: this.formData.id,
            remarks: this.remarks
          }
        }).then(res => {
          if (res.data.tbBillList > 0) {
            this.formData.remarks = this.remarks;
            this.remarksPopup = !this.remarksPopup;
            this.$showMessage("保存成功");
          }
        })
      }
    }
  },
  onLoad(options) {
//options中包含了url附带的参数
    let params = options;

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

            this.mainId = params["mainId"];
    this.refreshResult();
            this.formID = params["formID"];
            this.releaseNo = params["releaseNo"];
            this.currentTab = parseInt(params["index"]);
            this.current = params["current"] === 'true' ? true : false;
            this.$post({
            url: "/SJ/getQSItems",
            data: {
                pid: this.formID
            }
            }).then(res1 => {
                let tableData = res1.data.tbBillList
                //当已检验个数都不为空时按照检测结构排序
                tableData.sort((a, b) => {
                    if (a.result === '未完成' && b.result === '合格') {
                        return -1;
                    } else if (a.result === '合格' && b.result === '未完成') {
                        return 1;
                    } else {
                        return 0;
                    }
                });
                this.tabs = tableData;
                // if (this.tableData.length === 0) {
                //     this.isShowTable = true;
                // }
                this.tableData.forEach((item, index) => {
                    this.set(item, 'current', this.current);
                });
                console.log(this.tableData);
            })
  }
}
</script>

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

.form-group {
    .container {
        padding: 20px;
        background-color: #fff;
    }

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

        .title {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
        }

        .order-number {
            color: #666;
            font-size: 14px;
        }
    }

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

    .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: 40rpx;
            }
        }
    }

    .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;
  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);
    /* é€‚当调整高度 */
  }
}

.form-container {
  /* è®¾ç½®è¡¨å•å®¹å™¨çš„高度，使其可以滚动 */
  overflow-y: auto;
  /* å…è®¸è¡¨å•å®¹å™¨åž‚直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
    .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;

            }

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

    .danger {
        color: $danger-color;
}

.overlay {
@@ -428,11 +719,33 @@
  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;
        }
}
</style>

 pages/QC/SJ/detail£¨¾É£©.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,438 @@
<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>

    <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>
    </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>
          <button type="warn" @click="eidt">修改</button>
          <button @click="showPopup = !showPopup">取消</button>
        </form>
      </view>
    </view>
  </view>
</template>

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

    previewImage() {
      uni.previewImage({
        urls: [this.base64Image],
      });
    },
    editResult(fcheckResu) {
      if (fcheckResu == '1') {
        return "改为不合格";
      } else {
        return "改为合格";
      }
    },
    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 {

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

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

      this.$post({
        url: "/SJ/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: "/SJ/getQSItems",
        data: {
          id: this.id
        }
      }).then(res => {
        this.formData = res.data.tbBillList[0];
        this.formData.billNo = this.billNo;
        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;
        }
      })

      this.$post({
        url: "/SJ/getQSItemDetail",
        data: {
          pid: this.id,
          gid: this.gid
        }
      }).then(res => {
        this.tableData = res.data.tbBillList;
      })
    },
    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) {

        if (!this.editData.fcheckResu) {
          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 = "×";
        }
      } else {

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

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

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

      this.$post({
        url: "/SJ/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: "/SJ/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: "/SJ/saveRemarksPid",
          data: {
            pid: this.formData.id,
            remarks: this.remarks
          }
        }).then(res => {
          if (res.data.tbBillList > 0) {
            this.formData.remarks = this.remarks;
            this.remarksPopup = !this.remarksPopup;
            this.$showMessage("保存成功");
          }
        })
      }
    }
  },
  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);
    /* é€‚当调整高度 */
  }
}

.form-container {
  /* è®¾ç½®è¡¨å•å®¹å™¨çš„高度，使其可以滚动 */
  overflow-y: auto;
  /* å…è®¸è¡¨å•å®¹å™¨åž‚直滚动 */
  padding: 10px;
  /* å¯é€‰ï¼šæ·»åŠ ä¸€äº›å†…边距，使表单内容更美观 */
}

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

.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% */
}

.edit {
  background-color: white;
}
</style>