From 97af26e2ad64d7974367df80a900c1f680bd19c5 Mon Sep 17 00:00:00 2001
From: 啊鑫 <t2856754968@163.com>
Date: 星期三, 23 七月 2025 10:38:08 +0800
Subject: [PATCH] 首检,巡检,入库检

---
 pages/QC/RKJ/List.vue        |  643 +-
 pages/QC/SJ/ImageItem.vue    |  157 
 pages/QC/RKJ/detail.vue      | 1341 ++++++-
 pages/QC/XJ/ImageItem.vue    |  145 
 pages/QC/SJ/detail.vue       | 1671 +++++---
 pages/QC/RKJ/Add.vue         | 1135 +++++-
 pages/QC/XJ/detail.vue       |  960 ++++
 pages/QC/XJ/Add.vue          |  816 +++
 pages/QC/RKJ/ImageItem.vue   |  145 
 pages/QC/SJ/List.vue         | 1059 +++--
 pages/QC/Suspend/Suspend.vue |    4 
 pages/QC/SJ/Add.vue          | 1725 ++++++---
 pages/QC/XJ/List.vue         |  657 ++-
 13 files changed, 7,355 insertions(+), 3,103 deletions(-)

diff --git a/pages/QC/RKJ/Add.vue b/pages/QC/RKJ/Add.vue
index 36fd29b..9ef2f5f 100644
--- a/pages/QC/RKJ/Add.vue
+++ b/pages/QC/RKJ/Add.vue
@@ -1,139 +1,188 @@
 <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.releaseNo"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">鍒涘缓浜�:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.createBy"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">鍒涘缓鏃堕棿:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.createDate"/>
-        </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.lineName"
-                           @select="onDaa020Change"
-                           class="picker form-input"
-                           style="border: none;"></superwei-combox>
-          <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa015"/>
-        </view>
+  <view class="inspection-sheet">
+    <!-- 澶撮儴淇℃伅 -->
+    <view class="sheet-header">
+      <h1>鍏ュ簱妫�楠屽崟</h1>
+      <view class="inspection-number">妫�楠屽崟鍙凤細{{ formData.releaseNo }}</view>
+    </view>
 
-        <view class="uni-form-item uni-column form-item edit">
-          <text class="form-label">閫佹鎵规鍙�:</text>
-          <superwei-combox v-if="isUpdate" :candidates="DAA001List" placeholder="璇烽�夋嫨鎴栬緭鍏�"
-                           v-model="formData.billNo"
-                           @select="onDaa001Change"
-                           class="picker form-input"
-                           style="border: none;"></superwei-combox>
-          <input v-else class="form-input" disabled="true" type="text" v-model="formData.billNo"/>
+    <!-- 鍩烘湰淇℃伅鍖� -->
+    <view class="basic-info">
+      <view class="info-row">
+        <span class="info-label">鍒涘缓浜猴細</span>
+        <span class="info-value">{{ formData.createBy }}</span>
+        <span class="info-label">鍒涘缓鏃堕棿锛�</span>
+        <span class="info-value">{{ formData.createDate }}</span>
+      </view>
+    </view>
+
+    <!-- 鐗╂枡淇℃伅鍖� -->
+    <view class="material-info">
+      <view class="info-block">
+        <view class="info-label">鐢熶骇绾垮埆锛�</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.lineNo }}</view>
+        <superwei-combox v-if="isUpdate" v-model="formData.lineNo" :candidates="DAA020List"
+                         class="modern-picker" placeholder="璇烽�夋嫨鎴栬緭鍏�" @select="onDaa020Change"></superwei-combox>
+      </view>
+      <view class="info-block">
+        <view class="info-label">閫佹鎵规鍙凤細</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.billNo }}</view>
+        <superwei-combox v-if="isUpdate" v-model="formData.billNo" :candidates="DAA001List"
+                         class="modern-picker" placeholder="璇烽�夋嫨鎴栬緭鍏�" @select="onDaa001Change"></superwei-combox>
+      </view>
+      <view class="info-block">
+        <view class="info-label">鐗╂枡缂栫爜锛�</view>
+        <view class="info-value">{{ formData.itemNo }}</view>
+      </view>
+      <view class="info-block">
+        <view class="info-label">浠诲姟鍗曞彿锛�</view>
+        <view class="info-value">{{ formData.taskNo }}</view>
+      </view>
+      <view class="info-block">
+        <view class="info-label">浜у搧鍚嶇О锛�</view>
+        <view class="info-value">{{ formData.itemName }}</view>
+      </view>
+      <view class="info-block">
+        <view class="info-label">閫佹鏁伴噺锛�</view>
+        <view class="info-value highlight">{{ formData.quantity }}</view>
+      </view>
+      <view v-if="formData.remarks" class="info-block">
+        <view class="info-label">涓嶅悎鏍兼弿杩帮細</view>
+        <view class="info-value remarks-text">{{ formData.remarks }}</view>
+      </view>
+    </view>
+
+    <!-- 鎿嶄綔鎸夐挳鍖� - 妫�楠岄」鐩幏鍙� -->
+    <view v-if="isShowTable && current" class="action-buttons">
+      <button class="secondary-btn" @click="getTable">鑾峰彇妫�楠岄」鐩�</button>
+      <button v-if="isUpdate" class="primary-btn" @click="saveTable">鐢熸垚妫�楠岄」鐩�</button>
+    </view>
+
+    <!-- 妫�楠岄」鐩〃鏍� -->
+    <view v-if="!isShowTable" class="inspection-table">
+      <!-- 琛ㄦ牸澶撮儴缁熻淇℃伅 -->
+      <view class="table-header-stats">
+        <view class="stats-left">
+          <view class="stats-title">妫�楠岄」鐩竻鍗�</view>
+          <view class="stats-subtitle">鍏� {{ tableData.length }} 涓楠岄」鐩�</view>
         </view>
-        <view class="form-group">
-          <label class="form-label">鐗╂枡缂栫爜:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.itemNo"/>
-        </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="formData.itemName"/>
+        <view class="stats-right">
+          <view class="stat-item passed">
+            <span class="stat-count">{{ getPassedCount() }}</span>
+            <span class="stat-label">宸插悎鏍�</span>
+          </view>
+          <view class="stat-item failed">
+            <span class="stat-count">{{ getFailedCount() }}</span>
+            <span class="stat-label">涓嶅悎鏍�</span>
+          </view>
+          <view class="stat-item pending">
+            <span class="stat-count">{{ getPendingCount() }}</span>
+            <span class="stat-label">寰呮楠�</span>
           </view>
         </view>
-        <view class="form-group">
-          <label class="form-label">瑙勬牸鍨嬪彿:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.itemModel"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">閫佹鏁伴噺:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.quantity"/>
-        </view>
-		<view class="form-group">
-		  <label class="form-label">鎶ュ伐浜�:</label>
-		  <input class="form-input" disabled="true" type="text" v-model="formData.bgr"/>
-		</view>
-		<view class="form-group">
-		  <label class="form-label">妫�楠岀粨鏋�:</label>
-		  <input class="form-input" disabled="true" type="text" v-model="formData.fcheckResu"/>
-		</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>
+      <table>
+        <thead>
+        <tr>
+          <th style="text-align: center;" width="15%">妫�楠岄」鐩�</th>
+          <th style="text-align: center;" width="50%">妫�楠屾弿杩�</th>
+          <th style="text-align: center;" width="20%">璁板綍(鐐瑰嚮)</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <td>
+            <view class="project-name-wrapper">
+								<span :class="{
+									'status-approved': item.result=='鍚堟牸',
+									'status-rejected': item.result=='涓嶅悎鏍�',
+									'status-pending': item.result=='鏈畬鎴�'
+								}" class="status-indicator"></span>
+              {{ item.projName }}
             </view>
-          </uni-td>
-        </uni-tr>
-      </uni-table>
+          </td>
+          <td>
+            <view v-if="item.result=='鍚堟牸'" class="watermark approved">鍚堟牸</view>
+            <view v-if="item.result=='涓嶅悎鏍�'" class="watermark rejected">涓嶅悎鏍�</view>
+            <view v-if="item.result=='鏈畬鎴�'" class="watermark pending">寰呯‘璁�</view>
+            <view class="description-text">{{ item.itemMod }}</view>
+          </td>
+          <td>
+            <button v-if="item.isCheck < item.levelNum"
+                    class="record-btn record-btn-fill"
+                    @click="toDetail(item, index)">
+              濉啓 ({{ item.isCheck }}/{{ item.levelNum }})
+            </button>
+            <button v-else
+                    class="record-btn record-btn-view"
+                    @click="toDetail(item, index)">
+              鏌ョ湅 ({{ item.isCheck }}/{{ item.levelNum }})
+            </button>
+          </td>
+        </tr>
+        </tbody>
+      </table>
     </view>
 
-    <view class="plus-button">
-      <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem">鐢熸垚妫�楠屽崟</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 && !isShowTable" @click="saveRemarks">娣诲姞涓嶅悎鏍兼弿杩�</button>
-    </view>
-	
-	<view class="plus-button">
-	  <button type="warn" v-if="!isUpdate && !isShowTable && this.formData.fsubmit != 1" @click="cleanResult">娓呴櫎妫�楠岀粨鏋�</button>
-	</view>
-	
-<!--    <view class="plus-button">
-      <button type="warn" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">鍒犻櫎鍗曟嵁</button>
-    </view> -->
-
-    <view class="plus-button">
-      <button type="warn" v-if="isShowTable" @click="getTable">鑾峰彇妫�楠岄」鐩�</button>
+    <!-- 涓绘搷浣滄寜閽尯 -->
+    <view class="action-buttons">
+      <button v-if="isUpdate && !isShowTable && current" class="primary-btn" @click="getItem">鐢熸垚妫�楠屽崟</button>
+      <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="toImage">鍥剧墖绠$悊</button>
+      <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="saveRemarks">娣诲姞鎻忚堪</button>
+      <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="showTablePopup = true">鏌ョ湅鏁版嵁</button>
+      <button v-if="!isUpdate && !isShowTable && current" class="primary-btn" @click="submitInspection">妫�楠屾彁浜�
+      </button>
+      <button v-if="!isUpdate && !isShowTable && current && !formData.fcheckResu" class="danger-btn" @click="removeXJ">
+        鍒犻櫎鍗曟嵁
+      </button>
     </view>
 
-    <view class="plus-button">
-      <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">鐢熸垚妫�楠岄」鐩�</button>
-    </view>
-
-
+    <!-- 寮瑰嚭灞� -->
     <view v-if="showPopup" 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"/>
+            <input v-model="remarks" class="form-input" type="text"/>
           </view>
-          <button type="warn" @click="edit">淇敼</button>
-          <button @click="showPopup = !showPopup">鍙栨秷</button>
+          <view class="popup-buttons">
+            <button class="primary-btn" @click="edit">淇敼</button>
+            <button class="secondary-btn" @click="showPopup = !showPopup">鍙栨秷</button>
+          </view>
         </form>
+      </view>
+    </view>
+
+    <!-- 琛ㄦ牸寮瑰嚭灞� -->
+    <view v-if="showTablePopup" class="overlay">
+      <view class="popup table-popup">
+        <h3>璇︾粏鏁版嵁琛ㄦ牸</h3>
+        <view class="table-container">
+          <table>
+            <thead>
+            <tr>
+              <th>搴忓彿</th>
+              <th>椤圭洰鍚嶇О</th>
+              <th>妫�楠屾爣鍑�</th>
+              <th>妫�楠岀粨鏋�</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(item, index) in popupTableData" :key="index">
+              <td>{{ index + 1 }}</td>
+              <td>{{ item.projName }}</td>
+              <td>{{ item.standard || '鏍囧噯鍊�' }}</td>
+              <td :class="item.result === '鍚堟牸' ? 'text-success' : item.result === '涓嶅悎鏍�' ? 'text-danger' : ''">
+                {{ item.result }}
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </view>
+        <view class="popup-buttons">
+          <button class="secondary-btn" @click="showTablePopup = false">鍏抽棴</button>
+        </view>
       </view>
     </view>
 
@@ -156,7 +205,10 @@
         detailMem: "",
         taskNo: "",
         fcheckResu: "",
-        remarks: ""
+        remarks: "",
+        itemId: "",
+        itemName: "",
+        itemModel: "",
       },
 
       DAA020List: [],
@@ -180,6 +232,13 @@
       remarks: "",
 
       showPopup: false,
+
+      showTablePopup: false,
+
+      popupTableData: [],
+
+      current: true, // 鏍囪褰撳墠鐢ㄦ埛鏄惁鏈夋搷浣滄潈闄�
+      msgId: 0
     };
   },
   onLoad(options) {
@@ -191,6 +250,19 @@
       this.isUpdate = false;
       this.formData.id = params["id"];
       this.formData.releaseNo = params["releaseNo"];
+      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();
+      }
+
       //getQaItemXj02
       this.init();
     } else {
@@ -211,8 +283,80 @@
         this.DAA020List = res.data.tbBillList.map(item => item.lineName);
       })
     }
+
+    // 鍒濆鍖栧脊绐楄〃鏍兼暟鎹ず渚�
+    this.initPopupTableData();
   },
   methods: {
+    // 鑾峰彇鍚堟牸椤圭洰鏁伴噺
+    getPassedCount() {
+      return this.tableData.filter(item => item.result === '鍚堟牸').length;
+    },
+    // 鑾峰彇涓嶅悎鏍奸」鐩暟閲�
+    getFailedCount() {
+      return this.tableData.filter(item => item.result === '涓嶅悎鏍�').length;
+    },
+    // 鑾峰彇寰呮楠岄」鐩暟閲�
+    getPendingCount() {
+      return this.tableData.filter(item => item.result === '鏈畬鎴�').length;
+    },
+    // 鑾峰彇鐘舵�佹枃鏈�
+    getStatusText(status) {
+      const statusMap = {
+        '鍚堟牸': '鍚堟牸',
+        '涓嶅悎鏍�': '涓嶅悎鏍�',
+        '鏈畬鎴�': '寰呯‘璁�'
+      }
+      return statusMap[status] || '寰呯‘璁�';
+    },
+
+    // 鍒濆鍖栧脊绐楄〃鏍兼暟鎹�
+    initPopupTableData() {
+      // 杩欓噷鍙互浠嶢PI鑾峰彇鏁版嵁锛岃繖閲屼娇鐢ㄧず渚嬫暟鎹�
+      this.popupTableData = [
+        {projName: '澶栬妫�鏌�', standard: '鏃犳槑鏄惧垝鐥�', result: '鍚堟牸'},
+        {projName: '灏哄妫�鏌�', standard: '10卤0.5mm', result: '鍚堟牸'},
+        {projName: '鍔熻兘娴嬭瘯', standard: '姝e父宸ヤ綔', result: '涓嶅悎鏍�'},
+        {projName: '鐢垫皵鎬ц兘', standard: '5V卤0.1V', result: '鍚堟牸'},
+        {projName: '鑰愬帇娴嬭瘯', standard: '鈮�1000V', result: '鏈畬鎴�'}
+      ];
+    },
+
+    // 妫�楠屾彁浜�
+    submitInspection() {
+      this.$post({
+        url: "/RKJ/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 {
+          uni.showModal({
+            title: "鎻愮ず",
+            content: res.message.toString(),
+            confirmText: "纭畾",
+            showCancel: false,
+            success: (res) => {
+
+            }
+          })
+        }
+      })
+    },
+
     removeXJ() {
       if (this.formData.id) {
         this.$post({
@@ -272,7 +416,7 @@
       this.$post({
         url: "/RKJ/getDaa001",
         data: {
-          lineNo: this.formData.lineName
+          lineNo: this.lineNo
         }
       }).then(res => {
         this.BillNoList = res.data.tbBillList;
@@ -320,13 +464,13 @@
       this.$post({
         url: "/RKJ/setJYItem",
         data: {
-          itemNo: this.formData.itemNo,
-          quantity:this.formData.quantity
+          itemId: this.formData.itemId,
+          quantity: this.formData.quantity
         }
       }).then(res => {
         this.tableData = res.data.tbBillList;
         if (this.tableData.length === 0) {
-          this.$showMessage("璇ョ墿鏂欐潯鐮佹病鏈夋楠岄」鐩�");
+          this.$showMessage("璇ョ墿鏂欐病鏈夋楠岄」鐩�");
           this.isSubmit = true;
           this.tableData = [];
         } else {
@@ -335,11 +479,12 @@
       });
     },
     init() {
+      let userName = this.$loginInfo.account;
+
       this.$post({
         url: "/RKJ/getPage",
         data: {
           id: this.formData.id,
-		  createUser: this.$loginInfo.account,
           pageIndex: 1,
           limit: 1,
         }
@@ -370,14 +515,20 @@
             this.tableData = tableData;
 
             if (this.tableData.length === 0) {
-              this.isShowTable = true;
+              this.isShowTable = true; // 鏃犳楠岄」鐩紝鏄剧ず鑾峰彇鎸夐挳
+            } else {
+              this.isShowTable = false; // 鏈夋楠岄」鐩紝鏄剧ず琛ㄦ牸
             }
+
+            // 涓烘瘡涓�椤规坊鍔燾urrent灞炴�э紝琛ㄧず鏄惁鍙紪杈�
+            this.tableData.forEach((item, index) => {
+              this.$set(item, 'current', this.current);
+            });
           })
         }
       });
     },
-    toDetail(item) {
-
+    toDetail(item, index) {
       if (this.isUpdate) {
         uni.showToast({
           icon: "none",
@@ -386,8 +537,7 @@
         });
       } else {
         uni.navigateTo({
-          url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData
-              .id + '&itemInId=' + this.formData.itemInId
+          url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData.id + '&index=' + index + '&current=' + this.current
         });
       }
     },
@@ -410,32 +560,51 @@
             remarks: this.remarks
           }
         }).then(res => {
-          if(res.data.tbBillList > 0){
+          if (res.data.tbBillList > 0) {
             this.formData.remarks = this.remarks;
             this.showPopup = !this.showPopup;
             this.$showMessage("淇濆瓨鎴愬姛");
           }
         })
+      } else {
+        // 鍏佽娓呯┖鎻忚堪
+        this.$post({
+          url: "/RKJ/saveRemarksGid",
+          data: {
+            gid: this.formData.id,
+            remarks: '',
+            releaseNo: this.formData.releaseNo
+          }
+        }).then(res => {
+          if (res.data.tbBillList > 0) {
+            this.formData.remarks = '';
+            this.showPopup = !this.showPopup;
+            this.$showMessage("淇濆瓨鎴愬姛");
+          }
+        })
       }
-    },getTable() {
+    },
+    getTable() {
       this.$post({
         url: "/RKJ/setJYItem",
         data: {
+          //itemId: this.formData.itemId,
           itemNo: this.formData.itemNo,
-          quantity:this.formData.quantity
+          quantity: this.formData.quantity
         }
       }).then(res => {
 
         this.tableData = res.data.tbBillList;
+
         if (this.tableData.length === 0) {
           this.$showMessage("璇ョ墿鏂欐潯鐮佹病鏈夋楠岄」鐩�");
           this.isSubmit = true;
           this.tableData = [];
-          this.isShowTable = true;
+          this.isShowTable = true; // 淇濇寔涓簍rue锛屾樉绀烘寜閽紝鍥犱负娌℃湁妫�楠岄」鐩�
           this.isUpdate = false;
         } else {
           this.isSubmit = false;
-          this.isShowTable = true;
+          this.isShowTable = false; // 璁句负false锛屼互鏄剧ず琛ㄦ牸锛屽洜涓烘湁妫�楠岄」鐩�
           this.isUpdate = true;
         }
       });
@@ -444,7 +613,6 @@
       if (this.tableData.length === 0) {
         return;
       }
-
       this.$post({
         url: "/RKJ/saveItem",
         data: {
@@ -454,28 +622,11 @@
         }
       }).then(res => {
         this.formData.id = res.data.tbBillList;
-        this.isShowTable = false;
+        this.isShowTable = false; // 纭繚琛ㄦ牸鏄剧ず
         this.isUpdate = false;
         this.init();
       })
     },
-	cleanResult(){
-		this.$post({
-		  url: "/RKJ/cleanReqResult",
-		  data: {
-		    gid: this.formData.id,
-		    userNo: this.$loginInfo.account
-		  }
-		}).then(res => {
-			console.log(res);
-			if(res.status == 0){
-				this.init();
-			}else{
-				this.$showMessage(res.message);
-			}
-		  
-		})
-	}
   },
   onShow() {
     //姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
@@ -487,78 +638,404 @@
 </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;
-}
-
-.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 - 500px);
-    /* 閫傚綋璋冩暣楂樺害 */
-  }
-}
-
-
-.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;
+  flex-wrap: wrap;
 }
 
+.modern-picker {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  background: #ffffff;
+  font-size: 14px;
+  margin-top: 6px;
+}
+
+.remarks-text {
+  color: #e74c3c;
+  font-style: italic;
+}
+
+/* 琛ㄦ牸鏍峰紡 */
+.inspection-table {
+  margin: 25px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: #fff;
+}
+
+/* 琛ㄦ牸澶撮儴缁熻淇℃伅 */
+.table-header-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.stats-left .stats-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #2c3e50;
+  margin-bottom: 4px;
+}
+
+.stats-left .stats-subtitle {
+  font-size: 14px;
+  color: #7f8c8d;
+}
+
+.stats-right {
+  display: flex;
+  gap: 16px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  min-width: 60px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stat-item.passed {
+  background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.2));
+  border: 1px solid rgba(39, 174, 96, 0.3);
+}
+
+.stat-item.failed {
+  background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(230, 126, 34, 0.2));
+  border: 1px solid rgba(230, 126, 34, 0.3);
+}
+
+.stat-item.pending {
+  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.2));
+  border: 1px solid rgba(243, 156, 18, 0.3);
+}
+
+.stat-count {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1;
+  margin-bottom: 2px;
+}
+
+.stat-item.passed .stat-count {
+  color: #27ae60;
+}
+
+.stat-item.failed .stat-count {
+  color: #e67e22;
+}
+
+.stat-item.pending .stat-count {
+  color: #f39c12;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #7f8c8d;
+  font-weight: 500;
+}
+
+.inspection-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.inspection-table th, .inspection-table td {
+  padding: 16px 20px;
+  border: none;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
+.inspection-table th {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-weight: 600;
+  color: #fff;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+  position: relative;
+}
+
+.inspection-table tbody tr {
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+}
+
+.inspection-table tbody tr:nth-child(even) {
+  background-color: #f8fafc;
+}
+
+.inspection-table tbody tr:hover {
+  background-color: #e8f4fd;
+  border-left-color: #3498db;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
+}
+
+/* 妫�楠岄」鐩垪鏍峰紡 */
+.inspection-table td:first-child {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 15px;
+}
+
+/* 椤圭洰鍚嶇О鍖呰鍣� */
+.project-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 鐘舵�佹寚绀哄櫒 */
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.status-indicator.status-approved {
+  background-color: #27ae60;
+  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3);
+}
+
+.status-indicator.status-rejected {
+  background-color: #e67e22;
+  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3);
+}
+
+.status-indicator.status-pending {
+  background-color: #f39c12;
+  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3);
+}
+
+/* 妫�楠屾弿杩板垪鐗规畩鏍峰紡 */
+.inspection-table td:nth-child(2) {
+  position: relative;
+  min-height: 80px;
+  vertical-align: top;
+  padding: 16px 20px;
+}
+
+/* 鎻忚堪鏂囨湰鏍峰紡 */
+.description-text {
+  position: relative;
+  z-index: 2;
+  padding: 12px 16px;
+  background: transparent;
+  line-height: 1.6;
+  font-size: 14px;
+  color: #555;
+  margin: 0;
+  word-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+  /* 纭繚鏂囧瓧涓嶄細澶暱閬尅姘村嵃 */
+  padding-right: 80px;
+  min-height: 20px;
+  display: block;
+}
+
+/* 鎸夐挳鏍峰紡 */
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.primary-btn,
+.secondary-btn,
+.danger-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  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;
+}
+
+.danger-btn {
+  background-color: #e74c3c;
+  color: white;
+}
+
+.danger-btn:hover {
+  background-color: #c0392b;
+}
+
+.record-btn {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  font-size: 13px;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+}
+
+.record-btn:hover {
+  background: linear-gradient(135deg, #2980b9, #1f618d);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
+}
+
+.record-btn:active {
+  transform: translateY(0);
+}
+
+/* 濉啓鐘舵�佹寜閽� */
+.record-btn-fill {
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+  box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3);
+}
+
+.record-btn-fill:hover {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4);
+}
+
+/* 鏌ョ湅鐘舵�佹寜閽� */
+.record-btn-view {
+  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+  box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3);
+}
+
+.record-btn-view:hover {
+  background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
+  box-shadow: 0 4px 8px rgba(149, 165, 166, 0.4);
+}
+
+/* 姘村嵃鏍峰紡 */
+.watermark {
+  position: absolute;
+  font-size: 32px;
+  font-weight: bold;
+  opacity: 0.4;
+  z-index: 3;
+  pointer-events: none;
+  bottom: 8px;
+  right: 8px;
+  transform: rotate(-15deg);
+  transform-origin: bottom right;
+  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
+  min-width: 60px;
+  text-align: center;
+}
+
+.watermark.approved {
+  color: #27ae60; /* 鏇存贰鐨勭豢鑹� */
+}
+
+.watermark.rejected {
+  color: #e67e22; /* 鏇存贰鐨勭孩鑹� */
+}
+
+.watermark.pending {
+  color: #f39c12; /* 姗欒壊 */
+}
+
+/* 寮瑰嚭灞傛牱寮� */
 .overlay {
   position: fixed;
   top: 0;
@@ -569,6 +1046,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 10;
 }
 
 .popup {
@@ -577,8 +1055,221 @@
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 68vw;
-  /* 璁剧疆瀹藉害涓鸿鍙e搴︾殑80% */
   height: 25vh;
-  /* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */
+}
+
+.table-popup {
+  max-width: 700px;
+  width: 90%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  overflow-y: auto;
+  max-height: 60vh;
+  margin: 15px 0;
+}
+
+.table-container table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-container th,
+.table-container td {
+  padding: 10px;
+  border: 1px solid #ddd;
+  text-align: left;
+}
+
+.table-container th {
+  background-color: #f8f9fa;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.table-container tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.table-container tr:hover {
+  background-color: #f1f5f9;
+}
+
+.text-success {
+  color: #2ecc71;
+}
+
+.text-danger {
+  color: #e74c3c;
+}
+
+.popup h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.popup .form-group {
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup .form-label {
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.popup .form-input {
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.popup-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 500px) {
+  .info-row,
+  .info-block {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .inspection-table {
+    margin: 15px -10px;
+    border-radius: 0;
+  }
+
+  .inspection-table th,
+  .inspection-table td {
+    padding: 12px 8px;
+    font-size: 13px;
+  }
+
+  .inspection-table th {
+    font-size: 12px;
+  }
+
+  .description-text {
+    padding: 8px 12px;
+    padding-right: 50px;
+    font-size: 13px;
+  }
+
+  .record-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  /* 绉诲姩绔按鍗版牱寮忚皟鏁� */
+  .watermark {
+    font-size: 24px;
+    bottom: 4px;
+    right: 4px;
+  }
+
+  /* 绉诲姩绔〃鏍煎ご閮ㄧ粺璁� */
+  .table-header-stats {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 12px 16px;
+  }
+
+  .stats-right {
+    width: 100%;
+    justify-content: space-around;
+    gap: 8px;
+  }
+
+  .stat-item {
+    flex: 1;
+    min-width: auto;
+    padding: 6px 8px;
+  }
+
+  .stat-count {
+    font-size: 16px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
+
+  .stats-left .stats-title {
+    font-size: 16px;
+  }
+
+  .stats-left .stats-subtitle {
+    font-size: 13px;
+  }
+
+  /* 绉诲姩绔〃鏍糷over鏁堟灉鍑忓急 */
+  .inspection-table tbody tr:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  /* 绉诲姩绔姸鎬佹寚绀哄櫒璋冩暣 */
+  .project-name-wrapper {
+    gap: 6px;
+  }
+
+  .status-indicator {
+    width: 6px;
+    height: 6px;
+  }
+}
+
+/* 骞虫澘璁惧鏍峰紡 */
+@media (min-width: 501px) and (max-width: 768px) {
+  .watermark {
+    font-size: 28px;
+    bottom: 6px;
+    right: 6px;
+  }
+
+  .inspection-table th,
+  .inspection-table td {
+    padding: 14px 16px;
+  }
+
+  .description-text {
+    font-size: 14px;
+    padding-right: 70px;
+  }
+
+  .record-btn {
+    padding: 7px 14px;
+    font-size: 13px;
+  }
+}
+
+/* 澶у睆璁惧浼樺寲 */
+@media (min-width: 1200px) {
+  .inspection-table {
+    margin: 30px 0;
+  }
+
+  .watermark {
+    font-size: 36px;
+    bottom: 10px;
+    right: 10px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/QC/RKJ/ImageItem.vue b/pages/QC/RKJ/ImageItem.vue
index 1f032bc..f7634ee 100644
--- a/pages/QC/RKJ/ImageItem.vue
+++ b/pages/QC/RKJ/ImageItem.vue
@@ -5,25 +5,34 @@
     <view>
       <view class="uni-common-mt">
         <view class="uni-list list-pd" style="padding: 15px;">
-          <view class="uni-flex" style="margin-bottom: 10px;">
-            <view class="uni-list-cell-left">鐐瑰嚮鍙瑙堥�夊ソ鐨勫浘鐗�</view>
-            <view style="margin-left: auto;">
-              <text class="click-t">{{ qsImage.length }}/{{ countIndex + 1 }}</text>
+          <view class="image-header">
+            <view class="header-title">
+              <uni-icons color="#3498db" size="20" type="image"></uni-icons>
+              <view class="title-text">鍥剧墖绠$悊</view>
             </view>
+            <view class="image-counter">
+              <view class="counter-text">{{ qsImage.length }}/{{ countIndex + 1 }}</view>
+            </view>
+          </view>
+          <view class="description-text">
+            <view>鐐瑰嚮鍥剧墖鍙瑙堬紝鐐瑰嚮鍒犻櫎鎸夐挳鍙Щ闄ゅ浘鐗�</view>
           </view>
           <view class="uni-flex" style="flex-wrap: wrap;">
             <view v-for="(image,index) in qsImage" :key="index" class="uni-uploader__input-box"
                   style="position: relative; border: 0;">
-              <image :src="image.img" :data-src="image.img"
+              <image :data-src="image.img" :src="image.img"
                      @tap="previewImage(index)"></image>
-              <image src="/static/plus.png" class="image-remove" @click="removeImage(index,image.id)"></image>
+              <image class="image-remove" src="/static/plus.png" @click="removeImage(index,image.id)"></image>
             </view>
-            <image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
+            <image class="uni-uploader__input-box" src="/static/plus.png" @tap="chooseImage"></image>
           </view>
         </view>
       </view>
-      <view class="plus-button">
-        <button type="warn" @click="save">涓婁紶鍥剧墖</button>
+      <view class="action-buttons">
+        <button class="save-btn" @click="save">
+          <uni-icons color="#fff" size="16" type="cloud-upload"></uni-icons>
+          淇濆瓨鍥剧墖
+        </button>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -33,7 +42,7 @@
 
 <script>
 
-import {pathToBase64, base64ToPath} from '../../../js_sdk/mmmm-image-tools/index'
+import {pathToBase64} from '../../../js_sdk/mmmm-image-tools/index'
 
 var sourceTypeArray = [
   ['camera'],
@@ -180,8 +189,49 @@
 </script>
 
 <style>
-.click-t {
-  color: darkgray;
+/* 澶撮儴鏍峰紡 */
+.image-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.image-counter {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.counter-text {
+  color: white;
+}
+
+.description-text {
+  color: #7f8c8d;
+  font-size: 14px;
+  margin-bottom: 15px;
+  padding: 8px 12px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border-left: 3px solid #3498db;
 }
 
 .list-pd {
@@ -190,38 +240,79 @@
 
 .uni-uploader__input-box {
   margin: 5px;
-  border: 1px solid #D9D9D9;
+  border: 2px solid #E8E8E8;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.uni-uploader__input-box:hover {
+  border-color: #3498db;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
 }
 
 .image-remove {
   transform: rotate(45deg);
-  width: 25px;
-  height: 25px;
+  width: 24px;
+  height: 24px;
   position: absolute;
-  top: 0;
-  right: 0;
-  border-radius: 13px;
-  background-color: #FF0000;
+  top: -8px;
+  right: -8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
+  transition: all 0.2s;
+  z-index: 10;
+}
+
+.image-remove:active {
+  transform: rotate(45deg) scale(0.9);
 }
 
 .uni-common-mt {
   background-color: #ffffff;
-  /* 绾㈣壊鑳屾櫙 */
+  min-height: 100vh;
 }
 
-.plus-button {
+/* 鎿嶄綔鎸夐挳鏍峰紡 */
+.action-buttons {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
-  background-color: #ffffff; /* 鑳屾櫙棰滆壊 */
-  padding: 10px;
-  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1); /* 娣诲姞搴曢儴闃村奖鏁堟灉 */
-  z-index: 999; /* 纭繚鎸夐挳浣嶄簬椤跺眰 */
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 1) 100%);
+  padding: 20px 15px 15px;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+}
+
+.save-btn {
+  width: 100%;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+  transition: all 0.3s;
+}
+
+.save-btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
 }
 
 .uni-flex {
-  max-height: calc(100vh - 240px); /* 灞忓箷楂樺害鍑忓幓涓婁紶鎸夐挳楂樺害 */
-  overflow-y: auto; /* 褰撳唴瀹硅秴鍑洪珮搴︽椂鍑虹幇鍨傜洿婊氬姩鏉� */
+  max-height: calc(100vh - 280px);
+  overflow-y: auto;
+  padding-bottom: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/pages/QC/RKJ/List.vue b/pages/QC/RKJ/List.vue
index 4e335c9..6ce3ffe 100644
--- a/pages/QC/RKJ/List.vue
+++ b/pages/QC/RKJ/List.vue
@@ -1,228 +1,95 @@
 <template>
-  <view>
+  <view class="inspection-app">
     <!-- 鍒锋柊椤甸潰鍚庣殑椤堕儴鎻愮ず妗� -->
-    <view class="tips" :class="{ 'tips-ani': tipShow }">鍒锋柊鎴愬姛</view>
+    <view :class="{ 'tips-ani': tipShow }" class="tips">鍒锋柊鎴愬姛</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+'&releaseNo='+item.releaseNo">
-              <!-- 閫氳繃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.releaseNo"/>
-                </view>
-              </template>
-              <!-- 閫氳繃body鎻掓Ы瀹氫箟鍒楄〃鍐呭鏄剧ず -->
-              <template v-slot:body>
-                <view style="margin-top: 0;">
-                  <view class="uni-content">
-                    <view class="uni-note">
-                      <view class="form-group">
-                        <label class="form-label lab">閫佹鎵规鍙�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
-                      </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.createDate"/>
-                      </view>
-                    </view>
-                    <view class="uni-note">
-                      <view class="form-group">
-                        <label class="form-label lab">鍒涘缓浜�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
-                      </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.daa015"/>
-                      </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.colorName"/>-->
-                    <!--                      </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.itemName"/>
-                      </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.itemModel"/>
-                      </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.quantity"/>
-                      </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.bgr"/>
-					  </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.fcheckBy"/>
-                      </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.fcheckResu"/>
-                      </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 class="filter-section">
+      <view class="filter-controls" style="margin-bottom: 5px;">
+        <view class="status-tabs">
+          <button :class="['tab-button', current === 0 ? 'active' : '']"
+                  @click="onClickItem({currentIndex: 0})">鏈彁浜�({{ uncheckedCount }})
+          </button>
+          <button :class="['tab-button', current === 1 ? 'active' : '']"
+                  @click="onClickItem({currentIndex: 1})">{{ checkedCount }}
+          </button>
         </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+'&releaseNo='+item.releaseNo">
-              <!-- 閫氳繃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.releaseNo"/>
-                </view>
-              </template>
-              <!-- 閫氳繃body鎻掓Ы瀹氫箟鍒楄〃鍐呭鏄剧ず -->
-              <template v-slot:body>
-                <view style="margin-top: 0;">
-                  <view class="uni-content">
-                    <view class="uni-note">
-                      <view class="form-group">
-                        <label class="form-label lab">閫佹鎵规鍙�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.billNo"/>
-                      </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.createDate"/>
-                      </view>
-                    </view>
-                    <view class="uni-note">
-                      <view class="form-group">
-                        <label class="form-label lab">鍒涘缓浜�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
-                      </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.daa015"/>
-                      </view>
-                    </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.colorName"/>-->
-                    <!--                      </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.itemName"/>
-                      </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.itemModel"/>
-                      </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.quantity"/>
-                      </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.bgr"/>
-					  </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.fcheckBy"/>
-                      </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.fcheckResu"/>
-                      </view>
-                    </view>
-                  </view>
-                </view>
-              </template>
-            </uni-list-item>
-          </uni-list>
+      <view class="filter-controls" style="margin-bottom: 5px;">
+        <view class="search-container">
+          <input v-model="searchValue" class="search-input" placeholder="璇疯緭鍏ユ楠屽崟鍙锋垨鐗╂枡缂栫爜"
+                 @confirm="handleSearch"/>
+          <button class="search-button" @click="handleSearch">鎼滅储</button>
         </view>
       </view>
     </view>
 
+    <!-- 妫�楠屽崟鍒楄〃 -->
+    <view class="inspection-list">
+      <!-- 妫�楠屽崟鍗$墖 -->
+      <view v-for="item in data" :key="item.id" class="inspection-card"
+            @click="navigateToDetail(item)">
+        <view class="card-header">
+          <view class="card-title">妫�楠屽崟鍙�: {{ item.releaseNo }}</view>
+          <view :class="{'status-pending': current === 0, 'status-pass': item.fcheckResu === '鍚堟牸', 'status-fail': item.fcheckResu === '涓嶅悎鏍�'}"
+                class="status">
+            {{ current === 0 ? '鏈彁浜�' : (item.fcheckResu ? item.fcheckResu : '宸叉彁浜�') }}
+          </view>
+        </view>
 
+        <view class="card-body">
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">閫佹鎵规鍙�</view>
+              <view class="info-content">{{ item.billNo }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">鍒涘缓鏃堕棿</view>
+              <view class="info-content">{{ item.createDate }}</view>
+            </view>
+          </view>
+
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">鐗╂枡淇℃伅</view>
+              <view class="info-content">{{ item.itemNo }} | {{ item.itemName }}</view>
+            </view>
+          </view>
+
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">閫佹鏁伴噺</view>
+              <view class="info-content highlight">{{ item.quantity }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">浜х嚎</view>
+              <view class="info-content">{{ item.lineNo }}</view>
+            </view>
+          </view>
+
+          <view v-if="item.fcheckBy" class="info-row">
+            <view class="info-item">
+              <view class="info-label">妫�楠屼汉</view>
+              <view class="info-content">{{ item.fcheckBy }}</view>
+            </view>
+          </view>
+
+          <view class="meta-info">
+            <view class="meta-item">鍒涘缓浜�: {{ item.createBy }}</view>
+          </view>
+        </view>
+
+        <view class="card-actions">
+          <button class="primary">{{ current === 0 ? '缁х画妫�楠�' : '鏌ョ湅璇︽儏' }}</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 娣诲姞鎸夐挳 -->
+    <view v-if="current === 0" class="plus-button" @click="handleFabClick">
+      <view class="plus-icon">+</view>
+    </view>
   </view>
 </template>
 
@@ -234,13 +101,16 @@
       items: ['鏈彁浜�', '宸叉彁浜�'],
       current: 0,
       data: [],
+      tipShow: false, // 鏄惁鏄剧ず椤堕儴鎻愮ず妗�
+      uncheckedCount: 0,
+      checkedCount: '宸叉彁浜�',
+      searchValue: '',
       pageIndex: 1,
       limit: 20,
       totalPage: 0,
       totalCount: 0,
       noData: false, // 娌℃湁鏇村鏁版嵁浜�
       isLoading: false, // 鏄惁姝e湪鍔犺浇
-      tipShow: false
     };
   },
   onLoad() {
@@ -249,9 +119,8 @@
   },
   methods: {
     init() {
-
       let result = "鏈畬鎴�";
-      if (this.current == 1) {
+      if (this.current === 1) {
         result = "宸插畬鎴�";
       }
 
@@ -266,25 +135,32 @@
           pageIndex: this.pageIndex,
           limit: this.limit,
           createUser: this.$loginInfo.account,
-          result: result
+          result: result,
+          searchValue: this.searchValue
         }
       }).then(res => {
         if (this.pageIndex === 1) {
           // 濡傛灉鏄涓�椤碉紝鐩存帴瑕嗙洊鍘熸暟鎹�
           this.data = res.data.tbBillList;
         } else {
-
           if (res.data.tbBillList.length > 0) {
             // 濡傛灉鏄笅涓�椤碉紝杩藉姞鏂版暟鎹�
             this.data = [...this.data, ...res.data.tbBillList];
           }
-
         }
-        this.totalCount = res.data.totalCount;
+
+        this.totalCount = res.totalCount;
         this.totalPage = Math.ceil(this.totalCount / this.limit);
 
         this.noData = this.pageIndex >= this.totalPage;
         this.isLoading = false; // 缁撴潫鍔犺浇
+
+        // 鏇存柊璁℃暟
+        if (this.current === 1) {
+          this.checkedCount = '宸叉彁浜わ紙' + this.totalCount + '锛�';
+        } else {
+          this.uncheckedCount = this.totalCount;
+        }
       }).catch(() => {
         this.isLoading = false; // 鍑虹幇閿欒鏃剁粨鏉熷姞杞�
       });
@@ -302,19 +178,30 @@
         this.init();
       }
     },
+    handleSearch() {
+      this.pageIndex = 1;
+      this.data = [];
+      this.init();
+    },
+    navigateToDetail(item) {
+      uni.navigateTo({
+        url: 'Add?id=' + item.id + '&releaseNo=' + item.releaseNo
+      });
+    }
   },
   /**
    * 涓嬫媺鍒锋柊鍥炶皟鍑芥暟
    */
   onPullDownRefresh() {
     this.pageIndex = 1;
+    this.data = [];
     //閲嶆柊鎵ц涓�閬嶆煡璇�
     this.init();
     this.tipShow = true;
     //鍏抽棴鍔ㄧ敾
     uni.stopPullDownRefresh();
 
-    setTimeout(function () {
+    setTimeout(() => {
       this.tipShow = false;
     }, 3000);
   },
@@ -330,76 +217,223 @@
     //姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
     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>
+/* 鍩虹鏍峰紡閲嶇疆 */
+.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 {
+/* 鏂板鎼滅储妗嗘牱寮� */
+.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;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.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;
+  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: 80px;
-  /* 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;
+}
+
+.status {
   font-size: 12px;
-  background-color: #FFFFFF;
-  /* Adjust the font size as per your requirement */
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 500;
 }
 
-.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;
+.status-pending {
+  background-color: #f39c12;
+  color: white;
 }
 
-page {
+.status-pass {
+  background-color: #00cd00;
+  color: white;
+}
+
+.status-fail {
+  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;
 }
 
+.info-item {
+  flex: 1;
+}
+
+.info-label {
+  display: block;
+  font-size: 12px;
+  color: #7f8c8d;
+  margin-bottom: 4px;
+}
+
+.info-content {
+  font-size: 14px;
+  color: #2c3e50;
+  line-height: 1.5;
+}
+
+.highlight {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 16px;
+}
+
+.meta-info {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #95a5a6;
+  margin-top: 12px;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.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;
+}
+
+/* 鍒锋柊鎻愮ず鏍峰紡 */
 .tips {
   color: #67c23a;
   font-size: 14px;
@@ -418,36 +452,53 @@
   opacity: 1;
 }
 
-.content {
-  width: 100%;
+/* 鍔犲彿鎸夐挳鏍峰紡 */
+.plus-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #3498db;
+  color: #ffffff;
+  text-align: center;
+  line-height: 59px;
+  font-size: 24px;
+  cursor: pointer;
+  z-index: 1000;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.list-picture {
-  width: 100%;
-  height: 145px;
+/* 鍝嶅簲寮忚璁� */
+@media (min-width: 768px) {
+  .inspection-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  }
+
+  .info-row {
+    flex-direction: row;
+  }
 }
 
-.thumb-image {
-  width: 100%;
-  height: 100%;
-}
+@media (min-width: 300px) {
+  .inspection-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
 
-.ellipsis {
-  display: flex;
-  overflow: hidden;
-}
+  .info-row {
+    flex-direction: row;
+  }
 
-.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;
+  .picker {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: white;
+    font-size: 14px;
+    min-width: 10px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/QC/RKJ/detail.vue b/pages/QC/RKJ/detail.vue
index 60a1bf8..09257d2 100644
--- a/pages/QC/RKJ/detail.vue
+++ b/pages/QC/RKJ/detail.vue
@@ -1,147 +1,254 @@
 <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.qsCode"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">妫�楠屾爣鍑嗗悕绉�:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.qsName"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">妫�楠屾按骞�:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.fcheckLevel"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">鎺ユ敹姘村钩:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.facLevel"/>
-        </view>
-        <view class="form-group">
-          <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">AC鏁�:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.freQty - 1"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">RE鏁�:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.freQty"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">涓嶅悎鏍兼暟:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.unqualified"/>
-        </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 class="container">
+    <!-- 澶撮儴 -->
+    <view class="header">
+      <view class="title">鍏ュ簱妫�楠岄」鐩槑缁�</view>
+      <view class="order-number">褰撳墠妫�楠屽崟鍙�: {{ formData.billNo }}</view>
     </view>
-    <view>
-      <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/>
+
+    <!-- 鏍囩鏍� -->
+    <view class="tabs-container">
+      <scroll-view :show-scrollbar="false" class="tabs-scroll" scroll-x="true">
+        <view class="tabs">
+          <view v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}" class="tab"
+                @tap="switchTab(index, tab.id)">
+            <view class="tab-text">{{ tab.projName || tab.fcheckItem || '椤圭洰' + (index + 1) }}</view>
+          </view>
+        </view>
+      </scroll-view>
     </view>
-    <view class="list-container">
-      <uni-table ref="table" border emptyText="鏆傛棤鏇村鏁版嵁">
-        <uni-tr>
-          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">缂栧彿</uni-th>
-          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">鍒ゅ畾鏍囪瘑</uni-th>
-          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">妫�楠岀粨鏋�</uni-th>
-          <uni-th width="150" align="center"
-                  style="color: #FFFFFF;background-color: lightskyblue;">淇敼
-          </uni-th>
-        </uni-tr>
-        <uni-tr v-for="(item, index) in tableData" :key="index">
-          <uni-td align="center">
-            {{ index + 1 }}
-          </uni-td>
-          <uni-td align="center">
-            <input class="form-input" disabled="true" type="text" v-model="item.fstand"/>
-          </uni-td>
-          <uni-td align="center">
-            <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
-          </uni-td>
-          <uni-td>
-            <view class="uni-group">
-              <button type="warn" v-if="isNumber" @click="toDetail(item)">淇敼</button>
-              <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
+
+    <view class="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>
-          </uni-td>
-        </uni-tr>
-      </uni-table>
+            <view class="info-item">
+              <view class="info-label">璐ㄩ噺瑕佹眰</view>
+              <view class="info-value">{{ formData.itemMod }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾柟娉�</view>
+              <view class="info-value">{{ formData.inspectionMethod }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">浣跨敤浠〃</view>
+              <view class="info-value">{{ formData.usingInstruments }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾暟</view>
+              <view class="info-value">{{ formData.levelNum }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾爣鍑嗙紪鐮�</view>
+              <view class="info-value">{{ formData.qsCode }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 妫�楠屾爣鍑� -->
+      <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.qsName }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾按骞�</view>
+              <view class="info-value">{{ formData.fcheckLevel }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">鎺ユ敹姘村钩</view>
+              <view class="info-value">{{ formData.facLevel }}</view>
+            </view>
+            <view v-if="formData.minValue" class="info-item">
+              <view class="info-label">涓嬮檺</view>
+              <view class="info-value">{{ formData.minValue }}</view>
+            </view>
+            <view v-if="formData.standardValue" class="info-item">
+              <view class="info-label">鏍囧噯鍊�</view>
+              <view class="info-value">{{ formData.standardValue }}</view>
+            </view>
+            <view v-if="formData.maxValue" 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">
+          <view class="info-grid">
+            <view class="info-item">
+              <view class="info-label">AC鏁�</view>
+              <view class="info-value">{{ formData.freQty ? (formData.freQty - 1) : '' }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">RE鏁�</view>
+              <view class="info-value">{{ formData.freQty }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">涓嶅悎鏍兼暟</view>
+              <view class="info-value">{{ formData.unqualified }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">棰勮缁撴灉</view>
+              <view :class="{danger: formData.result === '涓嶅悎鏍�'}" class="info-value">{{ formData.result }}</view>
+            </view>
+          </view>
+
+          <view v-if="formData.remarks" class="result-remarks">
+            <view class="info-label">涓嶅悎鏍兼弿杩�</view>
+            <view class="info-value danger">{{ formData.remarks }}</view>
+          </view>
+
+          <view v-if="!formData.maxValue || !formData.minValue" class="hint-text">
+            <view class="danger">娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級</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 color="#fff" size="16" type="upload"></uni-icons>
+                涓婁紶/鏌ョ湅鍥剧墖
+              </button>
+              <button v-if="this.current" class="btn upload-btn" @tap="saveRemarks">
+                <uni-icons color="#fff" size="16" type="compose"></uni-icons>
+                涓嶅悎鏍兼弿杩�
+              </button>
+              <input v-if="(tableData.length < formData.levelNum)"
+                     v-model="formData.fcheckResu" class="result-input" placeholder="璇疯緭鍏ユ楠岀粨鏋�..."
+                     type="text"/>
+              <button v-if="(tableData.length < formData.levelNum)"
+                      class="btn primary-btn"
+                      style="margin: 0px;background-color: #3498db;color:#ffffff ;" @tap="submit">淇濆瓨缁撴灉
+              </button>
+            </view>
+          </view>
+
+          <!-- 绉诲姩绔�傞厤鐨勮緭鍏ュ尯 -->
+          <view class="input-group input2">
+            <view class="input-wrapper">
+              <button class="btn upload-btn" @tap="chooseImage">
+                <uni-icons color="#fff" size="16" type="upload"></uni-icons>
+                涓婁紶/鏌ョ湅鍥剧墖
+              </button>
+              <button v-if="this.current" class="btn upload-btn" @tap="saveRemarks">
+                <uni-icons color="#fff" size="16" type="compose"></uni-icons>
+                涓嶅悎鏍兼弿杩�
+              </button>
+            </view>
+            <view class="input-wrapper" style="margin-top: 15px;">
+              <input v-if="(tableData.length < formData.levelNum)"
+                     v-model="formData.fcheckResu" class="result-input" placeholder="璇疯緭鍏ユ楠岀粨鏋�..."
+                     type="text"/>
+              <button v-if="(tableData.length < formData.levelNum)"
+                      class="btn primary-btn"
+                      style="margin: 0px;background-color: #3498db;color:#ffffff ;" @tap="submit">淇濆瓨缁撴灉
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 缁撴灉琛ㄦ牸 -->
+      <view v-if="tableData.length>0" class="simple-table-container">
+        <view class="simple-table-header">
+          <view class="simple-title">妫�楠岃褰� ({{ tableData.length }}/{{ formData.levelNum }})</view>
+          <view :class="{'completed': !(tableData.length < formData.levelNum)}" class="simple-status">
+            {{ tableData.length < formData.levelNum ? '杩涜涓�' : '宸插畬鎴�' }}
+          </view>
+        </view>
+
+        <view class="simple-table">
+          <view class="simple-header-row">
+            <view class="simple-header-cell">缂栧彿</view>
+            <view class="simple-header-cell">妫�楠岀粨鏋�</view>
+            <view v-if="current" class="simple-header-cell">鎿嶄綔</view>
+          </view>
+
+          <view v-for="(item, index) in tableData" :key="index" class="simple-data-row">
+            <view class="simple-data-cell simple-index">
+              {{ index + 1 }}
+            </view>
+            <view class="simple-data-cell simple-result">
+              <!-- 鏁板瓧缁撴灉鏍峰紡 -->
+              <view v-if="isNumber && !isNaN(parseFloat(item.fstand))" class="simple-number-result">
+                <view class="result-value">{{ item.fstand }}</view>
+                <view v-if="formData.unitName" class="result-unit">{{ formData.unitName }}</view>
+                <view :class="{'pass': isInRange(item.fstand), 'fail': !isInRange(item.fstand)}" class="result-status">
+                  {{ isInRange(item.fstand) ? '鍚堟牸' : '涓嶅悎鏍�' }}
+                </view>
+              </view>
+
+              <!-- NG/OK鐘舵�佹牱寮� -->
+              <view v-else class="simple-status-result">
+                <view :class="{'pass': item.fcheckResu === '1', 'fail': item.fcheckResu !== '1'}" class="simple-status">
+                  {{ item.fcheckResu === '1' ? '鍚堟牸' : '涓嶅悎鏍�' }}
+                </view>
+              </view>
+            </view>
+            <view v-if="current" class="simple-data-cell simple-action">
+              <button v-if="!isNumber" class="simple-btn" @tap="numberEdit(item)">
+                {{ editResult(item.fcheckResu) }}
+              </button>
+              <button v-if="isNumber" class="simple-btn" @tap="toDetail(item)">
+                淇敼
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+
     </view>
 
-    <view class="plus-button">
-      <button type="warn" @click="saveRemarks">娣诲姞涓嶅悎鏍兼弿杩�</button>
-    </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"/>
+            <input v-model="editData.fcheckResu" class="form-input" type="text"/>
           </view>
-          <button type="warn" @click="eidt">淇敼</button>
-          <button @click="showPopup = !showPopup">鍙栨秷</button>
+          <view class="popup-buttons">
+            <button class="btn primary-btn" @click="eidt">淇敼</button>
+            <button class="btn cancel-btn" @click="showPopup = !showPopup">鍙栨秷</button>
+          </view>
         </form>
       </view>
     </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"/>
+            <input v-model="remarks" class="form-input" type="text"/>
           </view>
-          <button type="warn" @click="editRemarks">淇敼</button>
-          <button @click="remarksPopup = !remarksPopup">鍙栨秷</button>
+          <view class="popup-buttons">
+            <button class="btn primary-btn" @click="editRemarks">淇敼</button>
+            <button class="btn cancel-btn" @click="remarksPopup = !remarksPopup">鍙栨秷</button>
+          </view>
         </form>
       </view>
     </view>
@@ -158,7 +265,6 @@
       checkItem: "",
       id: 0,
       gid: 0,
-      itemInId: 0,
       billNo: "",
       showPopup: false,
       editData: {},
@@ -167,10 +273,17 @@
       base64Image: "",
       remarks: "",
       remarksPopup: false,
-	  fcheckResu: null
+      currentTab: 0,
+      tabs: [],
+      current: true // 娣诲姞current灞炴�э紝榛樿涓簍rue
     }
   },
   methods: {
+    switchTab(index, id) {
+      this.currentTab = index;
+      this.id = id;
+      this.refreshResult();
+    },
 
     previewImage() {
       uni.previewImage({
@@ -265,7 +378,6 @@
     toDetail(item) {
       this.showPopup = !this.showPopup;
       this.editData = item;
-	  this.fcheckResu = this.editData.fcheckResu;
     },
     eidt() {
 
@@ -279,7 +391,7 @@
       }
 
       let fstand = "鈭�";
-	   
+
       if (this.formData.maxValue && this.formData.minValue) {
 
         if (!this.editData.fcheckResu) {
@@ -318,20 +430,14 @@
           id: this.editData.id,
           pid: this.id,
           gid: this.gid,
-          itemInId: this.itemInId,
           fstand: fstand,
           fcheckResu: this.editData.fcheckResu,
           updateBy: this.editData.updater,
         }
       }).then(res => {
         this.showPopup = !this.showPopup;
-		if(res.status == 0){
-			this.$showMessage("淇敼鎴愬姛");
-			this.refreshResult(); //鍒锋柊椤甸潰
-		}else{
-			this.$showMessage(res.message);
-			this.editData.fcheckResu = this.fcheckResu;
-		}
+        this.$showMessage("淇敼鎴愬姛");
+        this.refreshResult(); //鍒锋柊椤甸潰
       })
     },
 
@@ -351,18 +457,13 @@
           id: item.id,
           pid: item.pid,
           gid: item.gid,
-          itemInId: this.itemInId,
           fstand: fstand,
           fcheckResu: fcheckResu,
           updateBy: this.$loginInfo.account,
         }
       }).then(res => {
-        if(res.status == 0){
-        	this.$showMessage("淇敼鎴愬姛");
-        	this.refreshResult(); //鍒锋柊椤甸潰
-        }else{
-        	this.$showMessage(res.message);
-        }
+        this.$showMessage("淇敼鎴愬姛");
+        this.refreshResult(); //鍒锋柊椤甸潰
       })
     },
     saveRemarks() {
@@ -386,6 +487,55 @@
           }
         })
       }
+    },
+    // 鍔犺浇妫�楠岄」鐩垪琛�
+    loadTabItems() {
+      this.$post({
+        url: "/RKJ/getItems",
+        data: {
+          pid: this.gid,
+        }
+      }).then(res => {
+        if (res.data && res.data.tbBillList) {
+          this.tabs = res.data.tbBillList;
+          // 鎸夋娴嬬粨鏋滄帓搴忥紝鏈畬鎴愮殑鎺掑湪鍓嶉潰
+          this.tabs.sort((a, b) => {
+            if (a.result === '鏈畬鎴�' && b.result !== '鏈畬鎴�') {
+              return -1;
+            } else if (a.result !== '鏈畬鎴�' && b.result === '鏈畬鎴�') {
+              return 1;
+            } else {
+              return 0;
+            }
+          });
+        } else {
+          // 娌℃湁椤圭洰鏃惰嚦灏戞坊鍔犲綋鍓嶉」鐩埌鏍囩
+          this.tabs = [{id: this.id, projName: this.formData.projName || '褰撳墠椤圭洰'}];
+        }
+      })
+    },
+    // 鍒ゆ柇鏁板瓧鏄惁鍦ㄨ寖鍥村唴
+    isInRange(value) {
+      if (!this.formData.maxValue || !this.formData.minValue) return true;
+      const numValue = parseFloat(value);
+      return numValue >= parseFloat(this.formData.minValue) &&
+          numValue <= parseFloat(this.formData.maxValue);
+    },
+    // 鑾峰彇鏁板瓧缁撴灉鐨勬牱寮忕被
+    getNumberResultClass(value) {
+      if (!this.formData.maxValue || !this.formData.minValue) return 'number-normal';
+      return this.isInRange(value) ? 'number-pass' : 'number-fail';
+    },
+    // 鑾峰彇鐘舵�佺粨鏋滅殑鏍峰紡绫�
+    getStatusClass(status) {
+      return status === '1' ? 'status-pass' : 'status-fail';
+    },
+
+    // 鍥剧墖鏌ョ湅
+    chooseImage() {
+      uni.navigateTo({
+        url: 'ImageItem?id=' + this.formData.id
+      });
     }
   },
   onLoad(options) {
@@ -395,57 +545,539 @@
     this.id = params["id"];
     this.billNo = params["billNo"];
     this.gid = params["gid"];
-    this.itemInId = params["itemInId"];
+    this.currentTab = parseInt(params["index"] || 0);
+
+    // 澶勭悊鏉冮檺鍙傛暟
+    if (params["current"] === 'true' || params["current"] === true) {
+      this.current = true;
+    } else if (params["current"] === 'false' || params["current"] === false) {
+      this.current = false;
+    }
 
     this.refreshResult();
+    this.loadTabItems();
   }
 }
 </script>
 
-<style>
-.form-group {
-  display: flex;
-  align-items: center;
-  border: 1px solid #c9c9c9;
-  background-color: #d4d4d4;
+<style lang="scss">
+$primary-color: #409EFF;
+$success-color: #67C23A;
+$danger-color: #F56C6C;
+$border-color: #DCDFE6;
+$bg-color: #f5f7fa;
+
+.container {
+  padding: 20px;
+  background-color: #fff;
 }
 
-.form-label {
-  margin-bottom: 0;
-  padding: 5px;
-}
+.header {
+  padding: 20px;
+  border-bottom: 1px solid $border-color;
+  background: linear-gradient(90deg, #f0f7ff, #e1f0ff);
 
-.form-input {
-  flex: 1;
-  margin-bottom: 0;
-  padding: 5px;
-}
+  .title {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 10px;
+  }
 
-/* 榛樿鏍峰紡 */
-.list-container {
-  height: calc(100vh - 750px);
-  /* 璁剧疆鍒楄〃瀹瑰櫒鐨勯珮搴︿负鍓╀綑绌洪棿锛屽苟鍑忓幓琛ㄥ崟瀹瑰櫒鐨勯珮搴� */
-  overflow-y: auto;
-  /* 鍏佽鍒楄〃瀹瑰櫒鍨傜洿婊氬姩 */
-  padding: 10px;
-  /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇鍒楄〃鍐呭鏇寸編瑙� */
-}
-
-/* 鍦ㄥ皬灞忓箷璁惧涓婏紝閲嶇疆楂樺害涓洪�傚簲灞忓箷 */
-@media (max-width: 768px) {
-  .list-container {
-    height: calc(100vh - 485px);
-    /* 閫傚綋璋冩暣楂樺害 */
+  .order-number {
+    color: #666;
+    font-size: 14px;
   }
 }
 
-.form-container {
-  /* 璁剧疆琛ㄥ崟瀹瑰櫒鐨勯珮搴︼紝浣垮叾鍙互婊氬姩 */
-  overflow-y: auto;
-  /* 鍏佽琛ㄥ崟瀹瑰櫒鍨傜洿婊氬姩 */
-  padding: 10px;
-  /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇琛ㄥ崟鍐呭鏇寸編瑙� */
+.tabs-container {
+  background-color: $bg-color;
+  border-bottom: 1px solid $border-color;
+  position: relative;
 }
+
+.tabs-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.tabs {
+  display: flex;
+  background-color: $bg-color;
+  min-width: 100%;
+  width: max-content;
+
+  .tab {
+    flex-shrink: 0;
+    min-width: 120px;
+    max-width: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 16px;
+    border-right: 1px solid $border-color;
+    color: #666;
+    transition: all 0.3s;
+    cursor: pointer;
+    position: relative;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      background-color: rgba($primary-color, 0.05);
+    }
+
+    &.active {
+      background-color: #fff;
+      color: $primary-color;
+      font-weight: bold;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 60%;
+        height: 3px;
+        background: linear-gradient(90deg, transparent, $primary-color, transparent);
+        border-radius: 2px;
+      }
+    }
+
+    .tab-text {
+      text-align: center;
+      line-height: 1.4;
+      word-break: break-word;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 14px;
+      z-index: 1;
+      position: relative;
+    }
+  }
+}
+
+
+.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;
+    }
+  }
+}
+
+.hint-text {
+  margin-top: 16px;
+  padding: 8px;
+  background-color: rgba(231, 76, 60, 0.1);
+  border-radius: 4px;
+}
+
+.result-remarks {
+  margin-top: 16px;
+  padding: 12px;
+  background-color: rgba(231, 76, 60, 0.05);
+  border-radius: 4px;
+}
+
+.input-group {
+  margin: 16px 0;
+}
+
+.input-wrapper {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.result-input {
+  flex: 1;
+  height: 45px;
+  padding: 0 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  min-width: 0; /* 闃叉flex瀛愰」婧㈠嚭 */
+}
+
+.result-input:focus {
+  outline: none;
+  border-color: #409EFF;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.btn {
+  padding: 8px 20px;
+  border-radius: 6px;
+  margin: 0;
+  font-size: 14px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.primary-btn {
+  background-color: var(--primary-color);
+  color: #000000;
+  min-width: 80px;
+  white-space: nowrap;
+}
+
+.secondary-btn {
+  background-color: #909399;
+  color: #fff;
+}
+
+.danger-btn {
+  background-color: $danger-color;
+  color: #fff;
+  padding: 6px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  min-width: 60px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 4px;
+}
+
+/* 绉诲姩绔崱鐗囨牱寮� */
+.result-card {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 15px;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-action {
+  padding: 4px 8px;
+  font-size: 11px;
+  min-width: 50px;
+}
+
+.card-body {
+  padding: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.upload-btn {
+  background-color: #909399;
+  color: #fff;
+}
+
+.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;
+    }
+  }
+}
+
+.table-header {
+  display: flex;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.th {
+  flex: 1;
+  padding: 12px 8px;
+  font-weight: bold;
+  text-align: center;
+  font-size: 14px;
+  color: #606266;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.table-row {
+  display: flex;
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.2s ease;
+}
+
+.table-row:hover {
+  background-color: rgba(64, 158, 255, 0.05);
+}
+
+.table-row:nth-child(even) {
+  background-color: rgba(248, 249, 250, 0.5);
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.td {
+  flex: 1;
+  padding: 12px 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  word-break: break-word;
+  min-width: 0;
+}
+
+.result-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.result-badge.OK {
+  background-color: rgba(46, 204, 113, 0.1);
+  color: var(--success-color);
+}
+
+.result-badge.NG {
+  background-color: rgba(231, 76, 60, 0.1);
+  color: var(--danger-color);
+}
+
+// 鏂扮殑缁撴灉鏄剧ず鏍峰紡
+.result-display {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 40px;
+}
+
+// 鏁板瓧缁撴灉鏍峰紡
+.number-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  min-width: 60px;
+  position: relative;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+
+  &.number-pass {
+    background: linear-gradient(135deg, #e8f5e8, #f0f9f0);
+    border: 2px solid #67C23A;
+  }
+
+  &.number-fail {
+    background: linear-gradient(135deg, #fdeaea, #fef0f0);
+    border: 2px solid #F56C6C;
+  }
+
+  &.number-normal {
+    background: linear-gradient(135deg, #f5f7fa, #fafbfc);
+    border: 2px solid #909399;
+  }
+
+  .number-value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 2px;
+  }
+
+  .number-unit {
+    font-size: 10px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .number-status {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    background: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 鐘舵�佺粨鏋滄牱寮�
+.status-result {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: bold;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+
+  &.status-pass {
+    background: linear-gradient(135deg, #67C23A, #85ce61);
+    color: white;
+  }
+
+  &.status-fail {
+    background: linear-gradient(135deg, #F56C6C, #f78989);
+    color: white;
+  }
+
+  .status-icon {
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  .status-text {
+    font-size: 14px;
+    letter-spacing: 0.5px;
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 淇濈暀鍘熸湁鏍峰紡浣滀负澶囩敤
+.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;
+  }
+}
+
+.danger {
+  color: var(--danger-color);
+}
+
+.image-preview {
+  width: 120px;
+  height: 120px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.image-preview:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.image-preview image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 
 .overlay {
   position: fixed;
@@ -465,12 +1097,361 @@
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 68vw;
-  /* 璁剧疆瀹藉害涓鸿鍙e搴︾殑80% */
   height: 25vh;
-  /* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */
 }
 
-.edit {
-  background-color: white;
+.form-group {
+  margin-bottom: 16px;
+
+  .form-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .form-input {
+    width: 100%;
+    height: 40px;
+    padding: 0 12px;
+    border: 1px solid $border-color;
+    border-radius: 4px;
+    font-size: 14px;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: $primary-color;
+      outline: none;
+    }
+  }
 }
+
+.input1 {
+  display: block;
+}
+
+.input2 {
+  display: none;
+}
+
+.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;
+    }
+  }
+}
+
+.result-preview {
+  .info-label {
+    font-weight: bold;
+    color: #333;
+  }
+
+  .info-value {
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.result-ng {
+  .info-label {
+    font-weight: bold;
+    color: #333;
+  }
+
+  .info-value {
+    color: $danger-color;
+    font-weight: 500;
+  }
+}
+
+.danger {
+  color: $danger-color;
+}
+
+/* 绠�娲佽〃鏍兼牱寮� - 閫傚悎骞撮暱鐢ㄦ埛 */
+.simple-table-container {
+  margin: 20px 0;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.simple-table-header {
+  padding: 15px 20px;
+  background: #f5f7fa;
+  border-bottom: 2px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.simple-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.simple-status {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  background: #ffc107;
+  color: #333;
+}
+
+.simple-status.completed {
+  background: #28a745;
+  color: #fff;
+}
+
+.simple-table {
+  width: 100%;
+}
+
+.simple-header-row {
+  display: flex;
+  background: #e9ecef;
+  border-bottom: 2px solid #ddd;
+}
+
+.simple-header-cell {
+  flex: 1;
+  padding: 15px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  border-right: 1px solid #ddd;
+}
+
+.simple-header-cell:first-child {
+  flex: 0 0 80px;
+}
+
+.simple-header-cell:last-child {
+  border-right: none;
+  flex: 0 0 120px;
+}
+
+.simple-data-row {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+}
+
+.simple-data-row:nth-child(even) {
+  background: #f8f9fa;
+}
+
+.simple-data-cell {
+  flex: 1;
+  padding: 15px 20px;
+  text-align: center;
+  border-right: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.simple-index {
+  flex: 0 0 80px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.simple-result {
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.simple-action {
+  border-right: none;
+  flex: 0 0 120px;
+}
+
+.simple-number-result {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.result-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
+
+.result-unit {
+  font-size: 14px;
+  color: #666;
+}
+
+.result-status {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: auto;
+}
+
+.result-status.pass {
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.result-status.fail {
+  background: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+.simple-status-result {
+  width: 100%;
+}
+
+.simple-status {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+}
+
+.simple-status.pass {
+  background: #28a745;
+  color: #fff;
+}
+
+.simple-status.fail {
+  background: #dc3545;
+  color: #fff;
+}
+
+.simple-btn {
+  padding: 10px 16px;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  min-width: 80px;
+}
+
+.simple-btn:active {
+  background: #0056b3;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+  .simple-table-header {
+    padding: 12px 16px;
+  }
+
+  .simple-title {
+    font-size: 16px;
+  }
+
+  .simple-header-cell,
+  .simple-data-cell {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+
+  .simple-index {
+    flex: 0 0 60px;
+  }
+
+  .simple-action {
+    flex: 0 0 100px;
+  }
+
+  .result-value {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 500px) {
+  .input1 {
+    display: none;
+  }
+
+  .input2 {
+    display: block;
+  }
+
+  .simple-table-container {
+    margin: 16px -10px;
+    border-radius: 0;
+  }
+
+  .simple-table-header {
+    padding: 10px 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .simple-title {
+    font-size: 14px;
+  }
+
+  .simple-status {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+
+  .simple-header-cell,
+  .simple-data-cell {
+    padding: 10px 8px;
+    font-size: 12px;
+  }
+
+  .simple-index {
+    flex: 0 0 50px;
+  }
+
+  .simple-action {
+    flex: 0 0 80px;
+  }
+
+  .simple-btn {
+    padding: 8px 10px;
+    font-size: 12px;
+    min-width: 60px;
+  }
+
+  .result-value {
+    font-size: 16px;
+  }
+
+  .simple-status {
+    font-size: 14px;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/pages/QC/SJ/Add.vue b/pages/QC/SJ/Add.vue
index d1f0357..fcc02df 100644
--- a/pages/QC/SJ/Add.vue
+++ b/pages/QC/SJ/Add.vue
@@ -1,675 +1,1196 @@
 <template>
-	<view class="inspection-sheet">
-		<!-- 澶撮儴淇℃伅 -->
-		<view class="sheet-header">
-			<h1>棣栨妫�楠屽崟</h1>
-			<view class="inspection-number">妫�楠屽崟鍙凤細{{formData.billNo}}</view>
+  <view class="inspection-sheet">
+    <!-- 澶撮儴淇℃伅 -->
+    <view class="sheet-header">
+      <h1>棣栨鍗�</h1>
+      <view class="inspection-number">妫�楠屽崟鍙凤細{{ formData.billNo }}</view>
+    </view>
 
+    <!-- 鍩烘湰淇℃伅鍖� -->
+    <view class="basic-info">
+      <view class="info-row">
+        <span class="info-label">鍒涘缓鏃堕棿锛�</span>
+        <span class="info-value">{{ formData.createTime }}</span>
+        <span class="info-label">璐熻矗浜猴細</span>
+        <span class="info-value">{{ formData.statusUser }}</span>
+      </view>
+    </view>
 
-		</view>
+    <!-- 鐗╂枡淇℃伅鍖� -->
+    <view class="material-info">
+      <view class="info-block">
+        <view class="info-label">鐢熶骇绾垮埆锛�</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.line }}</view>
+        <superwei-combox v-else v-model="formData.line" :candidates="DAA020List"
+                         class="picker info-value-input" placeholder="璇烽�夋嫨鎴栬緭鍏�"
+                         @select="onDaa020Change"></superwei-combox>
+      </view>
+      <view class="info-block">
+        <view class="info-label">鐗╂枡缂栫爜锛�</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.itemNo }}</view>
+        <superwei-combox v-else v-model="formData.itemNo" :candidates="boardItems" :isJSON="true"
+                         class="picker info-value-input" keyName="itemName" placeholder="璇烽�夋嫨鎴栬緭鍏�"
+                         @select="onItemChange"></superwei-combox>
+      </view>
+      <view class="info-block">
+        <view class="info-label">璁″垝缂栧彿锛�</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.daa001 }}</view>
+        <picker v-else :range="DAA001List" class="picker info-value-input" name="selector"
+                @change="onDaa001Change">
+          <view>{{ DAA001List[DAA001Index] }}</view>
+        </picker>
+      </view>
+      <view class="info-block">
+        <view class="info-label">浜у搧鍚嶇О锛�</view>
+        <view class="info-value">{{ formData.daa003 }}</view>
+      </view>
+      <view class="info-block">
+        <view class="info-label">瑙勬牸鍨嬪彿锛�</view>
+        <view class="info-value">{{ formData.daa004 }}</view>
+      </view>
+      <view class="info-block">
+        <view class="info-label">宸ュ崟鏁伴噺锛�</view>
+        <view class="info-value highlight">{{ formData.daa008 }}</view>
+      </view>
+      <view v-if="formData.remarks" class="info-block">
+        <view class="info-label">涓嶅悎鏍兼弿杩帮細</view>
+        <view class="info-value">{{ formData.remarks }}</view>
+      </view>
+      <view v-if="formData.comments" class="info-block">
+        <view class="info-label">澶囨敞锛�</view>
+        <view class="info-value">{{ formData.comments }}</view>
+      </view>
+    </view>
 
-		<!-- 鍩烘湰淇℃伅鍖� -->
-		<view class="basic-info">
-			<view class="info-row">
-				<span class="info-label">鍒涘缓浜猴細</span>
-				<span class="info-value">{{formData.fName}}</span>
-			</view>
-			<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>
+    <!-- 鎿嶄綔鎸夐挳鍖� -->
+    <view v-if="isUpdate" class="action-buttons">
+      <button class="secondary-btn" @click="getTable">鑾峰彇妫�楠岄」鐩�</button>
+    </view>
 
-		<!-- 鐗╂枡淇℃伅鍖� -->
-		<view class="material-info">
-			<view class="info-block">
-				<view class="info-label">鐗╂枡缂栫爜锛�</view>
-				<view class="info-value">{{formData.itemNo}}</view>
-			</view>
-			<view class="info-block">
-				<view class="info-label">浜у搧鍚嶇О锛�</view>
-				<view class="info-value">{{formData.daa003}}</view>
-			</view>
-			<view class="info-block">
-				<view class="info-label">瑙勬牸鍨嬪彿锛�</view>
-				<view class="info-value">{{formData.daa004}}</view>
-			</view>
-			<view class="info-block">
-				<view class="info-label">鐢熶骇绾垮埆锛�</view>
-				<view class="info-value">{{formData.line}}</view>
-			</view>
+    <!-- 妫�楠岄」鐩〃鏍� -->
+    <view v-if="tableData.length > 0" class="inspection-table">
+      <!-- 琛ㄦ牸澶撮儴缁熻淇℃伅 -->
+      <view class="table-header-stats">
+        <view class="stats-left">
+          <view class="stats-title">妫�楠岄」鐩竻鍗�</view>
+          <view class="stats-subtitle">鍏� {{ tableData.length }} 涓楠岄」鐩�</view>
+        </view>
+        <view class="stats-right">
+          <view class="stat-item passed">
+            <span class="stat-count">{{ getPassedCount() }}</span>
+            <span class="stat-label">宸插悎鏍�</span>
+          </view>
+          <view class="stat-item failed">
+            <span class="stat-count">{{ getFailedCount() }}</span>
+            <span class="stat-label">涓嶅悎鏍�</span>
+          </view>
+          <view class="stat-item pending">
+            <span class="stat-count">{{ getPendingCount() }}</span>
+            <span class="stat-label">寰呮楠�</span>
+          </view>
+        </view>
+      </view>
+      <table>
+        <thead>
+        <tr>
+          <th style="text-align: center;" width="15%">妫�楠岄」鐩�</th>
+          <th style="text-align: center;" width="50%">妫�楠屾弿杩�</th>
+          <th style="text-align: center;" width="20%">璁板綍(鐐瑰嚮)</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <td>
+            <view class="project-name-wrapper">
+								<span :class="{
+									'status-approved': item.result=='鍚堟牸',
+									'status-rejected': item.result=='涓嶅悎鏍�',
+									'status-pending': item.result=='鏈畬鎴�'
+								}" class="status-indicator"></span>
+              {{ item.projName }}
+            </view>
+          </td>
+          <td>
+            <view v-if="item.result=='鍚堟牸'" class="watermark approved">鍚堟牸</view>
+            <view v-if="item.result=='涓嶅悎鏍�'" class="watermark rejected">涓嶅悎鏍�</view>
+            <view v-if="item.result=='鏈畬鎴�'" class="watermark pending">寰呯‘璁�</view>
+            <view class="description-text">{{ item.itemMod }}</view>
+          </td>
+          <td>
+            <button v-if="item.isCheck < item.levelNum" class="record-btn record-btn-fill"
+                    @click="toDetail(item, index)">
+              濉啓 ({{ item.isCheck }}/{{ item.levelNum }})
+            </button>
+            <button v-else class="record-btn record-btn-view" @click="toDetail(item, index)">
+              鏌ョ湅 ({{ item.isCheck }}/{{ item.levelNum }})
+            </button>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </view>
 
-			<view class="info-block">
+    <!-- 鎿嶄綔鎸夐挳鍖� -->
+    <view class="action-buttons">
+      <button v-if="isUpdate && !isShowTable" class="secondary-btn" @click="save">鍒涘缓妫�楠屽崟骞剁敓鎴愰儴鍒嗛粯璁ゅ��</button>
+      <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="toImage">涓婁紶/鏌ョ湅鍥剧墖</button>
+      <button v-if="!isUpdate && !formData.statusUser && !isShowTable" class="secondary-btn" @click="removeXJ">
+        鍒犻櫎鍗曟嵁
+      </button>
+      <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="saveRemarks">娣诲姞涓嶅悎鏍兼弿杩�</button>
+      <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="saveComments">娣诲姞澶囨敞</button>
+      <button v-if="!isUpdate && !isShowTable" class="primary-btn" @click="submit">瀹℃牳鍗曟嵁</button>
+      <button v-if="isShowTable" class="secondary-btn" @click="getTable">鑾峰彇妫�楠岄」鐩�</button>
+      <button v-if="isShowTable && isUpdate" class="primary-btn" @click="saveTable">鐢熸垚妫�楠岄」鐩�</button>
+    </view>
 
-				<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 v-if="remarksPopup" class="overlay">
+      <view class="popup">
+        <h3>淇敼涓嶅悎鏍兼弿杩�</h3>
+        <form>
+          <view class="form-group">
+            <label class="form-label">涓嶅悎鏍兼弿杩�:</label>
+            <input v-model="remarks" class="form-input" type="text"/>
+          </view>
+          <button class="updateBut" @click="editRemarks">淇敼</button>
+          <button @click="remarksPopup = !remarksPopup">鍙栨秷</button>
+        </form>
+      </view>
+    </view>
 
-				<view class="info-label">鏁伴噺锛�</view>
-				<view class="info-value highlight">{{formData.daa008}}</view>
-			</view>
-			<view class="info-block" v-if="formData.fngDesc!=null">
-				<view class="info-label">涓嶈壇鎻忚堪锛�</view>
-				<view class="info-value">{{formData.fngDesc}}</view>
-			</view>
-			<view class="info-block" v-if="formData.newFngDesc!=null">
-				<view class="info-label">涓婃涓嶈壇锛�</view>
-				<view class="info-value">{{formData.newFngDesc}}</view>
-			</view>
-		</view>
-
-		<!-- 鎿嶄綔鎸夐挳鍖� -->
-		<!--    <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 v-if="item.result=='涓嶅悎鏍�'" class="watermark rejected">{{ getStatusText(item.result) }}
-							</view>
-							<view v-if="item.result=='鏈畬鎴�'" class="watermark pending">{{ getStatusText(item.result) }}
-							</view>
-							<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="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">
-				<h3>淇敼涓嶅悎鏍兼弿杩�</h3>
-				<form>
-					<view class="form-group">
-						<label class="form-label">涓嶅悎鏍兼弿杩�:</label>
-						<input class="form-input" type="text" v-model="remarks" />
-					</view>
-
-				</form>
-				<button class="updateBut" @click="editRemarks">淇敼</button>
-				<button @click="remarksPopup = !remarksPopup">鍙栨秷</button>
-			</view>
-		</view>
-	</view>
+    <view v-if="commentsPopup" class="overlay">
+      <view class="popup">
+        <h3>淇敼澶囨敞</h3>
+        <form>
+          <view class="form-group">
+            <label class="form-label">澶囨敞:</label>
+            <input v-model="comments" class="form-input" type="text"/>
+          </view>
+          <button class="updateBut" @click="editComments">淇敼</button>
+          <button @click="commentsPopup = !commentsPopup">鍙栨秷</button>
+        </form>
+      </view>
+    </view>
+  </view>
 </template>
-
 <script>
-	export default {
-		data() {
-			return {
-				formData: {
-					id: "",
-					releaseNo: "",
-					createBy: "",
-					createDate: "",
-					lotNo: "",
-					itemNo: "",
-					billNo: "",
-					fcovertQty: "",
-					detailMem: "",
-					taskNo: "",
-					fcheckResu: "",
-					boardModel: "",
-					planQty: "",
-					mocode: "",
-					boardStyle: ""
-				},
-				tableData: [],
-				remarksPopup: false,
-				current: true
-			}
-		},
-		onLoad(options) {
-			//options涓寘鍚簡url闄勫甫鐨勫弬鏁�
-			let params = options;
+export default {
+  data() {
+    return {
+      formData: {
+        createTime: "",
+        id: "",
+        billNo: "",
+        itemNo: "",
+        itemName: "",
+        workshopCode: "",
+        workshopName: "",
+        line: "",
+        lineName: "",
+        comments: "",
+        statusUser: "",
+        itemId: "",
+      },
 
-			if (params["id"]) {
-				this.formData.id = params["id"];
-				this.formData.releaseNo = params["releaseNo"];
-				this.formData.lotNo = params["lotNo"];
-				this.msgId = params["msgId"];
+      DAA020List: [],
 
-				if (params["current"] === 'A') {
-					this.current = true;
-				} else if (params["current"] === 'B') {
-					this.current = false;
-				}
+      DAA001List: [],
+      schemeResult: [],
+      DAA001Index: -1,
 
-				if (this.msgId > 0) {
-					this.msgRead();
-				}
+      ItemList: [],
 
-			} else {
-				//鍒濆鍖栨楠屽崟鍙�
-				this.$post({
-					url: "/LLJ/getMaxReleaseNo"
-				}).then(res => {
-					this.formData.releaseNo = res.data.tbBillList;
-					this.formData.createBy = this.$loginInfo.account;
-					this.formData.createDate = this.$getDate("yyyy-mm-dd");
-				});
+      boardItems: [],
 
-			}
+      womdaaList: [],
 
-		},
-		methods: {
-			getStatusText(status) {
-				const statusMap = {
-					approved: '鍚堟牸',
-					rejected: '涓嶅悎鏍�',
-					pending: '寰呯‘璁�'
-				}
-				if (status == '鏈畬鎴�') {
-					return statusMap['pending'] || ''
-				} else if (status == '鍚堟牸') {
-					return statusMap['approved'] || ''
-				} else {
-					return statusMap['rejected'] || ''
-				}
+      tableData: [],
 
-			},
-			getInspectionItems() {
-				// 鑾峰彇妫�楠岄」鐩殑閫昏緫
-				this.$post({
-					url: "/LLJ/setJYItem",
-					data: {
-						itemNo: this.formData.itemNo,
-						quantity: this.formData.fcovertQty,
-						releaseNo: this.formData.releaseNo
-					}
-				}).then(res => {
-					if (res.status == 0) {
-						uni.showToast({
-							title: res.message.toString(),
-							//灏嗗�艰缃负 success 鎴栬�呯洿鎺ヤ笉鐢ㄥ啓icon杩欎釜鍙傛暟
-							icon: 'success',
-							//鏄剧ず鎸佺画鏃堕棿涓� 2绉�
-							duration: 2000
-						})
-						// 濡傛灉鏈夐〉闈㈣烦杞紝闇�瑕佺敤瀹氭椂鍣ㄥ欢杩�
-						setTimeout(() => {
-							this.init();
-						}, 2000);
+      isSubmit: true,
 
-					} else {
-						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) {
+      isUpdate: true,
 
-						uni.showToast({
-							title: res.message.toString(),
-							icon: 'success',
-							duration: 2000
-						})
-						// 濡傛灉鏈夐〉闈㈣烦杞紝闇�瑕佺敤瀹氭椂鍣ㄥ欢杩�
-						setTimeout(() => {
-							uni.navigateTo({
-								url: 'List'
-							});
-						}, 2000); // 淇濇寔涓� duration 鐩稿悓鐨勬椂闀�
+      isShowTable: false,
 
-					} else {
-						uni.showModal({
-							title: "鎻愮ず",
-							content: res.message.toString(),
-							confirmText: "纭畾",
-							showCancel: false,
-							success: (res) => {
+      remarks: "",
+      remarksPopup: false,
 
-							}
-						})
-					}
-				})
-			},
-			onShow() {
-				//姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
-				if (this.formData.id) {
-					this.init();
-				}
-			},
-			init() {
-				let userName = this.$loginInfo.account;
+      comments: "",
+      commentsPopup: false,
 
-				this.$post({
-					url: "/SJ/GetPage",
-					data: {
-						pageIndex: 1,
-						limit: 1,
-						id: this.formData.id
-					}
-				}).then(res => {
-					let data = res.data.tbBillList[0];
-					if (data) {
-						this.formData = data;
+    };
+  },
+  onLoad(options) {
+    //options涓寘鍚簡url闄勫甫鐨勫弬鏁�
 
-						this.$post({
-							url: "/SJ/getQSItems",
-							data: {
-								pid: this.formData.id
-							}
-						}).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.tableData = tableData;
-							if (this.tableData.length === 0) {
-								this.isShowTable = true;
-							}
-							this.tableData.forEach((item, index) => {
-								this.$set(item, 'current', this.current);
+    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");
+      });
 
-						})
-					}
-				});
-			},
-			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: 'FileUrlByU9List2?type=' + type + '&itemID=' + u9No
-					});
-				}
-			},
+      //浜у搧缂栫爜涓嬫媺妗嗙殑鍒濆鍖�
+      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: {
+    // 鑾峰彇鍚堟牸椤圭洰鏁伴噺
+    getPassedCount() {
+      return this.tableData.filter(item => item.result === '鍚堟牸').length;
+    },
+    // 鑾峰彇涓嶅悎鏍奸」鐩暟閲�
+    getFailedCount() {
+      return this.tableData.filter(item => item.result === '涓嶅悎鏍�').length;
+    },
+    // 鑾峰彇寰呮楠岄」鐩暟閲�
+    getPendingCount() {
+      return this.tableData.filter(item => item.result === '鏈畬鎴�').length;
+    },
+    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("璇峰厛閫夋嫨妫�楠屽崟鍙�");
+      }
+    },
 
-			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("淇濆瓨鎴愬姛");
-						}
-					})
-				} 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("淇濆瓨鎴愬姛");
-						}
-					})
-				}
-			},
-		}
-	}
+    submit() {
+      this.$post({
+        url: "/SJ/SJQaSubmit",
+        data: {
+          userNo: this.$loginInfo.account,
+          gid: this.formData.id
+        }
+      }).then(res => {
+
+        //2024-11-28 kyy 鏍¢獙鍚堟牸鎻愪氦澧炲姞鎻愮ず
+        console.log("Status Code鐨勫��:", res.statusCode);
+        if (res.statusCode === 200) {
+
+          this.$showMessage("鎴愬姛鎻愪氦妫�楠�");
+          // 浣跨敤setTimeout鍦�7绉掑悗闅愯棌娑堟伅
+          setTimeout(() => {
+            this.hideCustomMessage();
+          }, 7000); // 7000姣绛変簬7绉�
+        } else {
+          this.$showMessage(res.data.message);
+        }
+      })
+    },
+
+    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: {
+            itemId: this.formData.itemNo
+          }
+        }).then(res => {
+          if (res.data.tbBillList.length > 0) {
+            this.tableData = res.data.tbBillList; // 鍦ㄧ澶村嚱鏁颁腑锛宼his 鎸囧悜澶栧眰浣滅敤鍩熺殑 this
+            this.isSubmit = false;
+          } else {
+            this.$showMessage("姝ょ墿鏂欐病鏈夊惎鐢ㄧ殑妫�楠岄」鐩紝璇风淮鎶�!");
+            this.isSubmit = true;
+            this.tableData = [];
+          }
+        });
+
+      });
+    },
+    toDetail(item, index) {
+      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 + '&index=' + index
+        });
+      }
+    },
+    getTable() {
+      this.$post({
+        url: "/SJ/SetQSItems",
+        data: {
+          itemId: this.formData.itemNo
+        }
+      }).then(res => {
+        if (res.data.tbBillList.length > 0) {
+          this.tableData = res.data.tbBillList; // 鍦ㄧ澶村嚱鏁颁腑锛宼his 鎸囧悜澶栧眰浣滅敤鍩熺殑 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;
+    },
+    saveComments() {
+      this.commentsPopup = !this.commentsPopup;
+      this.comments = this.formData.comments;
+    },
+    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("淇濆瓨鎴愬姛");
+          }
+        })
+      }
+    },
+    editComments() {
+      if (this.comments) {
+        //saveRemarksGid
+        this.$post({
+          url: "/SJ/saveCommentGid",
+          data: {
+            gid: this.formData.id,
+            comments: this.comments
+          }
+        }).then(res => {
+          if (res.data.tbBillList > 0) {
+            this.formData.comments = this.comments;
+            this.commentsPopup = !this.commentsPopup;
+            this.$showMessage("淇濆瓨鎴愬姛");
+          }
+        })
+      }
+    },
+    toImage() {
+      uni.navigateTo({
+        url: 'ImageItem?id=' + this.formData.id
+      });
+    }
+  },
+  onShow() {
+    //姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
+    this.init();
+  }
+};
 </script>
 
 <style>
-	/* 鍩虹鏍峰紡 */
-	.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);
-	}
+/* 鍩虹鏍峰紡 */
+.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 {
+  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;
-	}
+.sheet-header h1 {
+  color: #2c3e50;
+  font-size: 24px;
+  margin-bottom: 5px;
+}
 
-	.inspection-number {
-		font-size: 16px;
-		font-weight: bold;
-		color: #3498db;
-	}
+.inspection-number {
+  font-size: 16px;
+  font-weight: bold;
+  color: #3498db;
+}
 
-	/* 鍩烘湰淇℃伅鍖烘牱寮� */
-	.basic-info,
-	.material-info {
-		margin-bottom: 20px;
-	}
+/* 鍩烘湰淇℃伅鍖烘牱寮� */
+.basic-info,
+.material-info {
+  margin-bottom: 20px;
+}
 
-	.info-row {
-		display: flex;
-		margin-bottom: 10px;
-		flex-wrap: wrap;
-	}
+.info-row {
+  display: flex;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
 
-	.info-label {
-		font-weight: bold;
-		color: #34495e;
-		min-width: 80px;
-		margin-right: 5px;
-	}
+.info-label {
+  font-weight: bold;
+  color: #34495e;
+  min-width: 80px;
+  margin-right: 5px;
+}
 
-	.info-value {
-		color: #2c3e50;
-		margin-right: 20px;
-	}
+.info-value {
+  color: #2c3e50;
+  margin-right: 20px;
+}
 
-	.highlight {
-		font-weight: bold;
-		color: #e74c3c;
-	}
+.highlight {
+  font-weight: bold;
+  color: #e74c3c;
+}
 
-	/* 鐗╂枡淇℃伅鍖烘牱寮� */
-	.material-info {
-		border: 1px solid #eee;
-		padding: 15px;
-		border-radius: 5px;
-	}
+/* 鐗╂枡淇℃伅鍖烘牱寮� */
+.material-info {
+  border: 1px solid #eee;
+  padding: 15px;
+  border-radius: 5px;
+}
 
-	.info-block {
-		display: flex;
-		align-items: center;
-		margin-bottom: 10px;
-		flex-wrap: wrap;
-	}
+.info-block {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
 
-	.doc-links {
-		margin-left: auto;
-	}
+.info-value-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  background: #ffffff;
+  font-size: 14px;
+  margin-top: 6px;
+}
 
-	.doc-link {
-		color: #3498db;
-		text-decoration: none;
-		margin-left: 15px;
-		padding: 3px 8px;
-		border: 1px solid #3498db;
-		border-radius: 3px;
-		font-size: 12px;
-	}
+.picker {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  background: #ffffff;
+  font-size: 14px;
+  margin-top: 6px;
+}
 
-	.sysLike {
-		color: #3498db;
-		text-decoration: none;
-		margin-left: 15px;
-		padding: 3px 8px;
-		border-radius: 3px;
-		font-size: 12px;
-	}
+/* 琛ㄦ牸鏍峰紡 */
+.inspection-table {
+  margin: 25px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: #fff;
+}
 
-	.doc-link:hover {
-		background-color: #f0f8ff;
-	}
+/* 琛ㄦ牸澶撮儴缁熻淇℃伅 */
+.table-header-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid #e0e0e0;
+}
 
-	/* 琛ㄦ牸鏍峰紡 */
-	.inspection-table {
-		margin: 25px 0;
-	}
+.stats-left .stats-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #2c3e50;
+  margin-bottom: 4px;
+}
 
-	.inspection-table table {
-		width: 100%;
-		border-collapse: collapse;
-	}
+.stats-left .stats-subtitle {
+  font-size: 14px;
+  color: #7f8c8d;
+}
 
-	.inspection-table th,
-	.inspection-table td {
-		padding: 12px 15px;
-		border: 1px solid #ddd;
-		text-align: left;
-	}
+.stats-right {
+  display: flex;
+  gap: 16px;
+}
 
-	.inspection-table th {
-		background-color: #f8f9fa;
-		font-weight: bold;
-		color: #34495e;
-	}
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  min-width: 60px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
 
-	.inspection-table tr:nth-child(even) {
-		background-color: #f9f9f9;
-	}
+.stat-item.passed {
+  background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.2));
+  border: 1px solid rgba(39, 174, 96, 0.3);
+}
 
-	.inspection-table tr:hover {
-		background-color: #f1f5f9;
-	}
+.stat-item.failed {
+  background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(230, 126, 34, 0.2));
+  border: 1px solid rgba(230, 126, 34, 0.3);
+}
 
-	/* 鎸夐挳鏍峰紡 */
-	.action-buttons {
-		display: flex;
-		justify-content: flex-end;
-		gap: 10px;
-		margin-top: 20px;
-	}
+.stat-item.pending {
+  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.2));
+  border: 1px solid rgba(243, 156, 18, 0.3);
+}
 
-	.primary-btn,
-	.secondary-btn {
-		padding: 10px 20px;
-		border: none;
-		border-radius: 4px;
-		font-size: 14px;
-		cursor: pointer;
-		transition: all 0.3s;
-	}
+.stat-count {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1;
+  margin-bottom: 2px;
+}
 
-	.primary-btn {
-		background-color: #3498db;
-		color: white;
-	}
+.stat-item.passed .stat-count {
+  color: #27ae60;
+}
 
-	.primary-btn:hover {
-		background-color: #2980b9;
-	}
+.stat-item.failed .stat-count {
+  color: #e67e22;
+}
 
-	.secondary-btn {
-		background-color: #ecf0f1;
-		color: #7f8c8d;
-	}
+.stat-item.pending .stat-count {
+  color: #f39c12;
+}
 
-	.secondary-btn:hover {
-		background-color: #d5dbdb;
-	}
+.stat-label {
+  font-size: 12px;
+  color: #7f8c8d;
+  font-weight: 500;
+}
 
-	.record-btn {
-		padding: 6px 12px;
-		background-color: #f8f9fa;
-		border: 1px solid #ddd;
-		/* border-radius: 3px; */
-		cursor: pointer;
-		transition: all 0.2s;
-	}
+.inspection-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
 
-	.record-btn:hover {
-		background-color: #e9ecef;
-	}
+.inspection-table th, .inspection-table td {
+  padding: 16px 20px;
+  border: none;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
 
-	/* 姘村嵃鏍峰紡 */
-	.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);
-	}
+.inspection-table th {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-weight: 600;
+  color: #fff;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+  position: relative;
+}
 
-	.watermark.approved {
-		color: #2ecc71;
-		/* 缁胯壊 */
-	}
+.inspection-table tbody tr {
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+}
 
-	.watermark.rejected {
-		color: #e74c3c;
-		/* 绾㈣壊 */
-	}
+.inspection-table tbody tr:nth-child(even) {
+  background-color: #f8fafc;
+}
 
-	.watermark.pending {
-		color: #f39c12;
-		/* 姗欒壊 */
-	}
+.inspection-table tbody tr:hover {
+  background-color: #e8f4fd;
+  border-left-color: #3498db;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
+}
 
-	/* 鎻忚堪鏂囨湰瀹瑰櫒 */
-	.description-text {
-		position: relative;
-		z-index: 2;
-		padding: 25px;
-		background-color: rgba(255, 255, 255, 0.7);
-	}
+/* 妫�楠岄」鐩垪鏍峰紡 */
+.inspection-table td:first-child {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 15px;
+}
 
-	/* 璋冩暣琛ㄦ牸鍗曞厓鏍� */
-	.inspection-table td:nth-child(2) {
-		position: relative;
-		overflow: hidden;
-		padding: 0;
-	}
+/* 椤圭洰鍚嶇О鍖呰鍣� */
+.project-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-	.overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		z-index: 10;
-	}
+/* 鐘舵�佹寚绀哄櫒 */
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+}
 
-	.popup {
-		background-color: #fff;
-		padding: 20px;
-		border: 1px solid #ccc;
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-		width: 68vw;
-		/* 璁剧疆瀹藉害涓鸿鍙e搴︾殑80% */
-		height: 25vh;
-		/* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */
-	}
+.status-indicator.status-approved {
+  background-color: #27ae60;
+  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3);
+}
 
-	.form-group {
-		display: flex;
-		align-items: center;
-		border-bottom: 1px solid #c9c9c9;
-	}
+.status-indicator.status-rejected {
+  background-color: #e67e22;
+  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3);
+}
 
-	.updateBut {
-		background-color: #3498db;
-		color: white;
-	}
+.status-indicator.status-pending {
+  background-color: #f39c12;
+  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3);
+}
 
-	/* 鍝嶅簲寮忚璁� */
-	@media (max-width: 500px) {
+/* 妫�楠屾弿杩板垪鐗规畩鏍峰紡 */
+.inspection-table td:nth-child(2) {
+  position: relative;
+  min-height: 80px;
+  vertical-align: top;
+  padding: 16px 20px;
+}
 
-		.info-row,
-		.info-block {
-			flex-direction: column;
-			align-items: flex-start;
-		}
+/* 鎸夐挳鏍峰紡 */
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
 
-		.doc-links {
-			margin-left: 0;
-			margin-top: 10px;
-		}
+.primary-btn,
+.secondary-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
 
-		.action-buttons {
-			flex-direction: column;
-		}
+.primary-btn {
+  background-color: #3498db;
+  color: white;
+}
 
-		.inspection-table table {
-			display: block;
-			overflow-x: auto;
-		}
-	}
+.primary-btn:hover {
+  background-color: #2980b9;
+}
+
+.secondary-btn {
+  background-color: #ecf0f1;
+  color: #7f8c8d;
+}
+
+.secondary-btn:hover {
+  background-color: #d5dbdb;
+}
+
+.record-btn {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  font-size: 13px;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+}
+
+.record-btn:hover {
+  background: linear-gradient(135deg, #2980b9, #1f618d);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
+}
+
+.record-btn:active {
+  transform: translateY(0);
+}
+
+/* 濉啓鐘舵�佹寜閽� */
+.record-btn-fill {
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+  box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3);
+}
+
+.record-btn-fill:hover {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4);
+}
+
+/* 鏌ョ湅鐘舵�佹寜閽� */
+.record-btn-view {
+  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+  box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3);
+}
+
+.record-btn-view:hover {
+  background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
+  box-shadow: 0 4px 8px rgba(149, 165, 166, 0.4);
+}
+
+/* 姘村嵃鏍峰紡 */
+.watermark {
+  position: absolute;
+  font-size: 32px;
+  font-weight: bold;
+  opacity: 0.4;
+  z-index: 3;
+  pointer-events: none;
+  bottom: 8px;
+  right: 8px;
+  transform: rotate(-15deg);
+  transform-origin: bottom right;
+  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
+  min-width: 60px;
+  text-align: center;
+}
+
+.watermark.approved {
+  color: #27ae60; /* 鏇存贰鐨勭豢鑹� */
+}
+
+.watermark.rejected {
+  color: #e67e22; /* 鏇存贰鐨勭孩鑹� */
+}
+
+.watermark.pending {
+  color: #f39c12; /* 姗欒壊 */
+}
+
+/* 鎻忚堪鏂囨湰鏍峰紡 */
+.description-text {
+  position: relative;
+  z-index: 2;
+  padding: 12px 16px;
+  background: transparent;
+  line-height: 1.6;
+  font-size: 14px;
+  color: #555;
+  margin: 0;
+  word-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+  /* 纭繚鏂囧瓧涓嶄細澶暱閬尅姘村嵃 */
+  padding-right: 80px;
+  min-height: 20px;
+  display: block;
+}
+
+.sysLike {
+  color: #3498db;
+  text-decoration: none;
+  margin-left: 15px;
+  padding: 3px 8px;
+  border: 1px solid #3498db;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.sysLike:hover {
+  background-color: #f0f8ff;
+}
+
+/* 寮瑰嚭灞傛牱寮� */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.popup {
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 68vw;
+  height: 25vh;
+  border-radius: 8px;
+}
+
+.popup h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+  font-size: 16px;
+  text-align: center;
+}
+
+.popup .form-group {
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup .form-label {
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.popup .form-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.popup-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.updateBut {
+  background-color: #3498db;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 4px;
+  margin-right: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.updateBut:hover {
+  background-color: #2980b9;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 500px) {
+  .info-row,
+  .info-block {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  /* 绉诲姩绔〃鏍煎ご閮ㄧ粺璁� */
+  .table-header-stats {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 12px 16px;
+  }
+
+  .stats-right {
+    width: 100%;
+    justify-content: space-around;
+    gap: 8px;
+  }
+
+  .stat-item {
+    flex: 1;
+    min-width: auto;
+    padding: 6px 8px;
+  }
+
+  .stat-count {
+    font-size: 16px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
+
+  .stats-left .stats-title {
+    font-size: 16px;
+  }
+
+  .stats-left .stats-subtitle {
+    font-size: 13px;
+  }
+
+  .inspection-table {
+    margin: 15px -10px;
+    border-radius: 0;
+  }
+
+  .inspection-table th,
+  .inspection-table td {
+    padding: 12px 8px;
+    font-size: 13px;
+  }
+
+  .inspection-table th {
+    font-size: 12px;
+  }
+
+  .description-text {
+    padding: 8px 12px;
+    padding-right: 50px;
+    font-size: 13px;
+  }
+
+  .record-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  /* 绉诲姩绔按鍗版牱寮忚皟鏁� */
+  .watermark {
+    font-size: 24px;
+    bottom: 4px;
+    right: 4px;
+  }
+
+  /* 绉诲姩绔〃鏍糷over鏁堟灉鍑忓急 */
+  .inspection-table tbody tr:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  /* 绉诲姩绔姸鎬佹寚绀哄櫒璋冩暣 */
+  .project-name-wrapper {
+    gap: 6px;
+  }
+
+  .status-indicator {
+    width: 6px;
+    height: 6px;
+  }
+}
+
+/* 骞虫澘璁惧鏍峰紡 */
+@media (min-width: 501px) and (max-width: 768px) {
+  .watermark {
+    font-size: 28px;
+    bottom: 6px;
+    right: 6px;
+  }
+
+  .inspection-table th,
+  .inspection-table td {
+    padding: 14px 16px;
+  }
+
+  .description-text {
+    font-size: 14px;
+    padding-right: 70px;
+  }
+
+  .record-btn {
+    padding: 7px 14px;
+    font-size: 13px;
+  }
+}
+
+/* 澶у睆璁惧浼樺寲 */
+@media (min-width: 1200px) {
+  .inspection-table {
+    margin: 30px 0;
+  }
+
+  .watermark {
+    font-size: 36px;
+    bottom: 10px;
+    right: 10px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/QC/SJ/ImageItem.vue b/pages/QC/SJ/ImageItem.vue
index 9660916..d2f00ed 100644
--- a/pages/QC/SJ/ImageItem.vue
+++ b/pages/QC/SJ/ImageItem.vue
@@ -5,25 +5,34 @@
     <view>
       <view class="uni-common-mt">
         <view class="uni-list list-pd" style="padding: 15px;">
-          <view class="uni-flex" style="margin-bottom: 10px;">
-            <view class="uni-list-cell-left">鐐瑰嚮鍙瑙堥�夊ソ鐨勫浘鐗�</view>
-            <view style="margin-left: auto;">
-              <text class="click-t">{{ qsImage.length }}/{{ countIndex + 1 }}</text>
+          <view class="image-header">
+            <view class="header-title">
+              <uni-icons color="#3498db" size="20" type="image"></uni-icons>
+              <view class="title-text">鍥剧墖绠$悊</view>
             </view>
+            <view class="image-counter">
+              <view class="counter-text">{{ qsImage.length }}/{{ countIndex + 1 }}</view>
+            </view>
+          </view>
+          <view class="description-text">
+            <view>鐐瑰嚮鍥剧墖鍙瑙堬紝鐐瑰嚮鍒犻櫎鎸夐挳鍙Щ闄ゅ浘鐗�</view>
           </view>
           <view class="uni-flex" style="flex-wrap: wrap;">
             <view v-for="(image,index) in qsImage" :key="index" class="uni-uploader__input-box"
                   style="position: relative; border: 0;">
-              <image :src="image.img" :data-src="image.img"
+              <image :data-src="image.img" :src="image.img"
                      @tap="previewImage(index)"></image>
-              <image src="/static/plus.png" class="image-remove" @click="removeImage(index,image.id)"></image>
+              <image class="image-remove" src="/static/plus.png" @click="removeImage(index,image.id)"></image>
             </view>
-            <image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
+            <image class="uni-uploader__input-box" src="/static/plus.png" @tap="chooseImage"></image>
           </view>
         </view>
       </view>
-      <view class="plus-button">
-        <button type="warn" @click="save">涓婁紶鍥剧墖</button>
+      <view class="action-buttons">
+        <button class="save-btn" @click="save">
+          <uni-icons color="#fff" size="16" type="cloud-upload"></uni-icons>
+          淇濆瓨鍥剧墖
+        </button>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -33,7 +42,7 @@
 
 <script>
 
-import {pathToBase64, base64ToPath} from '../../../js_sdk/mmmm-image-tools/index'
+import {pathToBase64} from '../../../js_sdk/mmmm-image-tools/index'
 
 var sourceTypeArray = [
   ['camera'],
@@ -142,12 +151,12 @@
       });
     },
     previewImage(index) {
-      uni.previewImage({
-        current: index, // 璁剧疆褰撳墠鏄剧ず鍥剧墖鐨勯摼鎺�
-        urls: this.qsImage.map(s=>s.img), // 闇�瑕侀瑙堢殑鍥剧墖閾炬帴鍒楄〃
-        loop: false, // 鏄惁寮�鍚浘鐗囪疆鎾紝榛樿涓� false
-        indicator: 'default',// 鍥剧墖鎸囩ず鍣ㄧ被鍨嬶紝鍙�夊�间负 "default"銆�"number"銆�"pointer"锛岄粯璁や负 "default"
-      });
+      // uni.previewImage({
+      //   current: index, // 璁剧疆褰撳墠鏄剧ず鍥剧墖鐨勯摼鎺�
+      //   urls: this.qsImage.map(s=>s.img), // 闇�瑕侀瑙堢殑鍥剧墖閾炬帴鍒楄〃
+      //   loop: false, // 鏄惁寮�鍚浘鐗囪疆鎾紝榛樿涓� false
+      //   indicator: 'default',// 鍥剧墖鎸囩ず鍣ㄧ被鍨嬶紝鍙�夊�间负 "default"銆�"number"銆�"pointer"锛岄粯璁や负 "default"
+      // });
     },
     init() {
       this.$post({
@@ -180,8 +189,49 @@
 </script>
 
 <style>
-.click-t {
-  color: darkgray;
+/* 澶撮儴鏍峰紡 */
+.image-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.image-counter {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.counter-text {
+  color: white;
+}
+
+.description-text {
+  color: #7f8c8d;
+  font-size: 14px;
+  margin-bottom: 15px;
+  padding: 8px 12px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border-left: 3px solid #3498db;
 }
 
 .list-pd {
@@ -190,38 +240,79 @@
 
 .uni-uploader__input-box {
   margin: 5px;
-  border: 1px solid #D9D9D9;
+  border: 2px solid #E8E8E8;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.uni-uploader__input-box:hover {
+  border-color: #3498db;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
 }
 
 .image-remove {
   transform: rotate(45deg);
-  width: 25px;
-  height: 25px;
+  width: 24px;
+  height: 24px;
   position: absolute;
-  top: 0;
-  right: 0;
-  border-radius: 13px;
-  background-color: #FF0000;
+  top: -8px;
+  right: -8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
+  transition: all 0.2s;
+  z-index: 10;
+}
+
+.image-remove:active {
+  transform: rotate(45deg) scale(0.9);
 }
 
 .uni-common-mt {
   background-color: #ffffff;
-  /* 绾㈣壊鑳屾櫙 */
+  min-height: 100vh;
 }
 
-.plus-button {
+/* 鎿嶄綔鎸夐挳鏍峰紡 */
+.action-buttons {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
-  background-color: #ffffff; /* 鑳屾櫙棰滆壊 */
-  padding: 10px;
-  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 娣诲姞搴曢儴闃村奖鏁堟灉 */
-  z-index: 999; /* 纭繚鎸夐挳浣嶄簬椤跺眰 */
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 1) 100%);
+  padding: 20px 15px 15px;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+}
+
+.save-btn {
+  width: 100%;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+  transition: all 0.3s;
+}
+
+.save-btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
 }
 
 .uni-flex {
-  max-height: calc(100vh - 240px); /* 灞忓箷楂樺害鍑忓幓涓婁紶鎸夐挳楂樺害 */
-  overflow-y: auto; /* 褰撳唴瀹硅秴鍑洪珮搴︽椂鍑虹幇鍨傜洿婊氬姩鏉� */
+  max-height: calc(100vh - 280px);
+  overflow-y: auto;
+  padding-bottom: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/pages/QC/SJ/List.vue b/pages/QC/SJ/List.vue
index fbfe619..0360664 100644
--- a/pages/QC/SJ/List.vue
+++ b/pages/QC/SJ/List.vue
@@ -1,523 +1,628 @@
 <template>
-	<view class="inspection-app">
-		<view class="filter-section">
-			<view class="filter-controls">
-	 
-				<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 class="inspection-app">
+    <!-- 鍒锋柊椤甸潰鍚庣殑椤堕儴鎻愮ず妗� -->
+    <view :class="{ 'tips-ani': tipShow }" class="tips">鍒锋柊鎴愬姛</view>
 
-			</view>
-		</view>
+    <!-- 椤堕儴绛涢�夊尯 -->
+    <view class="filter-section">
+      <view class="filter-controls" style="margin-bottom: 5px;">
+        <view class="status-tabs">
+          <button :class="['tab-button', current === 0 ? 'active' : '']"
+                  @click="onClickItem({currentIndex: 0})">鏈畬鎴�({{ uncheckedCount }})
+          </button>
+          <button :class="['tab-button', current === 1 ? 'active' : '']"
+                  @click="onClickItem({currentIndex: 1})">{{ checkedCount }}
+          </button>
+        </view>
+      </view>
 
-		<!-- 妫�楠屽崟鍒楄〃 -->
-		<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="filter-controls" style="margin-bottom: 5px;">
+        <view class="search-container">
+          <input v-model="searchValue" class="search-input" placeholder="璇疯緭鍏ユ楠屽崟鍙锋垨鐗╂枡缂栫爜"
+                 @confirm="handleSearch"/>
+          <button class="search-button" @click="handleSearch">鎼滅储</button>
+        </view>
+      </view>
+    </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 class="inspection-list">
+      <!-- 妫�楠屽崟鍗$墖 -->
+      <view v-for="(item, index) in data" :key="item.id" class="inspection-card"
+            @click="navigateToDetail(item)">
+        <view class="card-header">
+          <!-- 娣诲姞鏍囪瘑badge -->
+          <view v-if="item.urgent == 1" class="badge urgent">鎬ユ枡</view>
+          <view v-if="item.isFirst == 1" class="badge normal">棣栨</view>
+          <view class="card-title">妫�楠屽崟鍙�: {{ item.billNo }}</view>
+          <view :class="{'status-pending': current === 0, 'status-assigned': current === 0 && item.statusUser, 'status-pass': current === 1 && item.result === '鍚堟牸', 'status-fail': current === 1 && item.result === '涓嶅悎鏍�'}"
+                class="status">
+            {{ current === 0 ? (item.statusUser ? '宸插垎閰�' : '鏈彁浜�') : (item.result ? item.result : '宸叉彁浜�') }}
+          </view>
+        </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 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>
-						<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="card-body">
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">鐗╂枡淇℃伅</view>
+              <view class="info-content">{{ item.itemNo }} | {{ item.daa003 }}<br>{{ item.daa004 }}</view>
+            </view>
+          </view>
 
-					<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="info-row">
+            <view class="info-item">
+              <view class="info-label">浜х嚎</view>
+              <view class="info-content">{{ item.line }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">宸ュ崟鏁伴噺</view>
+              <view class="info-content highlight">{{ item.daa008 }}</view>
+            </view>
+          </view>
 
-				<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>
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">鍒涘缓浜�</view>
+              <view class="info-content">{{ item.fName }}</view>
+            </view>
+            <view v-if="item.statusUser" class="info-item">
+              <view class="info-label">妫�楠屼汉</view>
+              <view class="info-content">{{ item.statusUser }}</view>
+            </view>
+          </view>
+
+          <!-- 鍦ㄦ湭瀹屾垚鐘舵�佷笅鏄剧ず鍒涘缓鏃堕棿锛屽凡瀹屾垚鐘舵�佷笅鏄剧ず妫�娴嬬粨鏋� -->
+          <view v-if="current === 0" class="meta-info">
+            <view class="meta-item">{{ item.statusDate }}</view>
+            <view class="meta-item">鍒涘缓浜�: {{ item.fName }}</view>
+          </view>
+
+          <view v-if="current === 1" class="meta-info">
+            <view class="meta-item">{{ item.statusDate }}</view>
+            <view v-if="item.result" class="meta-item">妫�楠岀粨鏋�: {{ item.result }}</view>
+          </view>
+        </view>
+
+        <view class="card-actions">
+          <button class="primary">{{ current === 0 ? '缁х画妫�楠�' : '鏌ョ湅璇︽儏' }}</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 娣诲姞鎸夐挳 -->
+    <view v-if="current === 0" class="plus-button" @click="handleFabClick">
+      <view class="plus-icon">+</view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				projectIndex: 0,
-				optionsIndex: 0,
-				projects: ['褰撳墠', '鍏ㄩ儴'],
-				activeTab: 0, // 0-鏈楠�, 1-宸叉楠�
-				uncheckedCount: 0,
-				checkedCount: '宸叉楠�',
-				inspectionList: [],
-				pageIndex: 1,
-				limit: 20,
-				IQCJL: 0,
-				options: ['椤圭洰', '鐗╂枡缂栧彿', '鐗╂枡鍚嶇О', '渚涘簲鍟�', '閲囪喘鍛�'],
-				searchValue: ''
+export default {
+  components: {},
+  data() {
+    return {
+      items: ['鏈畬鎴�', '宸插畬鎴�'],
+      current: 0,
+      data: [],
+      pageIndex: 1,
+      limit: 20,
+      totalPage: 0,
+      totalCount: 0,
+      noData: false, // 娌℃湁鏇村鏁版嵁浜�
+      isLoading: false, // 鏄惁姝e湪鍔犺浇
+      tipShow: false, // 鏄惁鏄剧ず椤堕儴鎻愮ず妗�
+      searchValue: '',
+      uncheckedCount: 0,
+      checkedCount: '宸插畬鎴�'
+    };
+  },
+  onLoad() {
+    //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
+    this.init();
+  },
+  methods: {
+    init() {
+      let result = "鏈畬鎴�";
+      if (this.current === 1) {
+        result = "宸插畬鎴�";
+      }
 
-			}
-		},
-		onLoad() {
-			//椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
-			this.init();
-		},
-		methods: {
-			init() {
+      if (this.isLoading) return; // 濡傛灉姝e湪鍔犺浇鍒欎笉缁х画鎵ц
 
-				let result = "鏈畬鎴�";
-				if (this.activeTab === 1) {
-					result = "宸插畬鎴�";
-				}
+      this.isLoading = true;
 
-				if (this.isLoading) return; // 濡傛灉姝e湪鍔犺浇鍒欎笉缁х画鎵ц
+      //鑾峰彇褰撳墠鐧诲綍鐨勭敤鎴�
+      let userName = this.$loginInfo.account;
 
-				this.isLoading = true;
+      //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
+      this.$post({
+        url: "/SJ/GetPage",
+        data: {
+          pageIndex: this.pageIndex,
+          limit: this.limit,
+          statusUser: userName,
+          result: result,
+          searchValue: this.searchValue
+        }
+      }).then(res => {
+        if (this.pageIndex === 1) {
+          // 濡傛灉鏄涓�椤碉紝鐩存帴瑕嗙洊鍘熸暟鎹�
+          this.data = res.data.tbBillList;
+        } else {
+          if (res.data.tbBillList.length > 0) {
+            // 濡傛灉鏄笅涓�椤碉紝杩藉姞鏂版暟鎹�
+            this.data = [...this.data, ...res.data.tbBillList];
+          }
+        }
+        this.totalCount = res.totalCount;
+        this.totalPage = Math.ceil(this.totalCount / this.limit);
 
-				//鑾峰彇褰撳墠鐧诲綍鐨勭敤鎴�
-				let userName = this.$loginInfo.account;
+        this.noData = this.pageIndex >= this.totalPage;
+        this.isLoading = false; // 缁撴潫鍔犺浇
 
+        // 鏇存柊璁℃暟
+        if (this.current === 1) {
+          this.checkedCount = '宸插畬鎴愶紙' + this.totalCount + '锛�';
+        } else {
+          this.uncheckedCount = this.totalCount;
+        }
+      }).catch(() => {
+        this.isLoading = false; // 鍑虹幇閿欒鏃剁粨鏉熷姞杞�
+      });
+    },
+    handleFabClick() {
+      uni.navigateTo({
+        url: 'Add?id'
+      });
+    },
+    onClickItem(index) {
+      if (this.current !== index.currentIndex) {
+        this.current = index.currentIndex;
+        this.data = [];
+        this.pageIndex = 1;
+        this.init();
+      }
+    },
+    handleSearch() {
+      this.pageIndex = 1;
+      this.data = [];
+      this.init();
+    },
+    navigateToDetail(item) {
+      uni.navigateTo({
+        url: 'Add?id=' + item.id + '&billNo=' + item.billNo
+      });
+    }
+  },
+  /**
+   * 涓嬫媺鍒锋柊鍥炶皟鍑芥暟
+   */
+  onPullDownRefresh() {
+    this.pageIndex = 1;
+    //閲嶆柊鎵ц涓�閬嶆煡璇�
+    this.init();
+    this.tipShow = true;
+    //鍏抽棴鍔ㄧ敾
+    uni.stopPullDownRefresh();
 
-				//椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
-				this.$post({
-					url: "/SJ/GetPage",
-					data: {
-					  pageIndex: this.pageIndex ,
-					  limit: 20,
-					  statusUser: this.$loginInfo.account,
-					  result: result
-					}
-				}).then(res => {
-					 
-					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; // 鍑虹幇閿欒鏃剁粨鏉熷姞杞�
-				});
-			},
-			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;
-				//鍏抽棴鍔ㄧ敾
-				uni.stopPullDownRefresh();
-
-				// setTimeout(function () {
-				//   this.tipShow = false;
-				// }, 6000);
-
-			},
-			/**
-			 * 涓婃媺鍔犺浇鍥炶皟鍑芥暟
-			 */
-			onReachBottom() {
-				if (this.noData || this.isLoading) return;
-				this.pageIndex++;
-				this.init(); // 鍔犺浇鏇村鏁版嵁
-			},
-			onShow() {
-				//姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
-				// this.pageIndex = 1;
-				// this.data = [];
-				// //this.current = 0
-				this.init();
-			}
-		}
-	}
+    setTimeout(() => {
+      this.tipShow = false;
+    }, 3000);
+  },
+  /**
+   * 涓婃媺鍔犺浇鍥炶皟鍑芥暟
+   */
+  onReachBottom() {
+    if (this.noData || this.isLoading) return;
+    this.pageIndex++;
+    this.init(); // 鍔犺浇鏇村鏁版嵁
+  },
+  onShow() {
+    //姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
+    this.pageIndex = 1;
+    this.data = [];
+    //this.current = 0
+    this.init();
+  }
+};
 </script>
 
 <style scoped>
-	/* 鍩虹鏍峰紡閲嶇疆 */
-	.inspection-app {
-		padding: 10px;
-		background-color: #f5f7fa;
-		min-height: 100vh;
-	}
+/* 鍩虹鏍峰紡閲嶇疆 */
+.inspection-app {
+  padding: 10px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
 
-	/* 椤堕儴绛涢�夊尯 */
-	.filter-section {
-		margin-bottom: 24px;
-	}
+/* 椤堕儴绛涢�夊尯 */
+.filter-section {
+  /* margin-bottom: 24px; */
+}
 
-	.filter-section h1 {
-		font-size: 24px;
-		font-weight: 600;
-		color: #2c3e50;
-		margin-bottom: 16px;
-	}
+.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 {
+/* 鎼滅储妗嗘牱寮� */
+.search-container {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  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: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  font-size: 14px;
+  margin: 0;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.search-button:hover {
+  background: linear-gradient(135deg, #2980b9, #1f618d);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+}
+
+.search-button:active {
+  transform: translateY(0);
+}
+
+.filter-controls {
+  display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 5px;
 }
 
 .dropdown-filter {
+  min-width: 70px;
+}
+
+.badge {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  margin-right: 8px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+.badge.urgent {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  color: white;
+  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
+}
+
+.badge.normal {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  color: white;
+  box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3);
+}
+
+.meta-info {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #95a5a6;
+  margin-top: 12px;
+}
+
+.meta-item {
   display: flex;
   align-items: center;
+  gap: 4px;
+}
+
+.picker {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white;
+  font-size: 14px;
+  min-width: 120px;
+}
+
+.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;
+  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: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+}
+
+/* 妫�楠屽崟鍒楄〃 */
+.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 ease;
+  border: 1px solid rgba(52, 152, 219, 0.1);
+}
+
+.inspection-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(52, 152, 219, 0.3);
+}
+
+.card-header {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  flex: 1;
+  margin: 0 8px;
+  color: #2c3e50;
+}
+
+.badge {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-right: 8px;
+}
+
+.badge.urgent {
+  background-color: #e74c3c;
+  color: white;
+}
+
+.badge.normal {
+  background-color: #ffaa00;
+  color: white;
+}
+
+.status {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.status-pending {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  color: white;
+}
+
+.status-assigned {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+}
+
+.status-pass {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  color: white;
+}
+
+.status-fail {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  color: white;
+}
+
+.card-body {
+  padding: 16px;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 12px;
+  gap: 16px;
+}
+
+.info-item {
+  flex: 1;
+}
+
+.info-label {
+  display: block;
+  font-size: 12px;
+  color: #7f8c8d;
+  margin-bottom: 4px;
+}
+
+.info-content {
+  font-size: 14px;
+  color: #2c3e50;
+  line-height: 1.5;
+}
+
+.highlight {
+  font-weight: 600;
+  color: #e74c3c;
+  font-size: 16px;
+}
+
+.meta-info {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #95a5a6;
+  margin-top: 12px;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.card-actions {
+  padding: 12px 16px;
+  border-top: 1px solid #eee;
+  display: flex;
   gap: 8px;
-} */
-	.filter-controls {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 10px;
-	}
+}
 
-	.dropdown-filter {
-		min-width: 70px;
-	}
+button {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white;
+  font-size: 14px;
+  transition: all 0.2s;
+  flex: 1;
+}
 
-	.filter-label {
-		font-size: 14px;
-		color: #7f8c8d;
-	}
+button.primary {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  border-color: #2980b9;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+  transition: all 0.3s ease;
+}
 
-	.picker {
-		padding: 8px 12px;
-		border: 1px solid #ddd;
-		border-radius: 4px;
-		background-color: white;
-		font-size: 14px;
-		min-width: 120px;
-	}
+button.primary:hover {
+  background: linear-gradient(135deg, #2980b9, #1f618d);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
+}
 
-	.status-tabs {
-		display: flex;
-		border-radius: 4px;
-		overflow: hidden;
-		background-color: #ecf0f1;
-	}
+button.primary:active {
+  transform: translateY(0);
+}
 
-	.status-tabs {
-		flex: 1;
-		min-width: 200px;
-	}
+/* 娣诲姞鎸夐挳鏍峰紡 */
+.plus-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: #ffffff;
+  text-align: center;
+  line-height: 59px;
+  font-size: 24px;
+  cursor: pointer;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
+  transition: all 0.3s ease;
+}
 
-	.tab-button {
-		padding: 0px 16px;
-		border: none;
-		background: none;
-		font-size: 14px;
-		transition: all 0.3s;
-		margin: 0;
-		height: 35px;
-	}
+.plus-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.5);
+}
 
-	.tab-button.active {
-		background-color: #3498db;
-		color: white;
-	}
+.plus-button:active {
+  transform: translateY(0);
+}
 
-	/* 妫�楠屽崟鍒楄〃 */
-	.inspection-list {
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-	}
+/* 鍝嶅簲寮忚璁� */
+@media (min-width: 768px) {
+  .inspection-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  }
 
-	/* 妫�楠屽崟鍗$墖 */
-	.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;
-	}
+  .info-row {
+    flex-direction: row;
+  }
+}
 
-	.card-header {
-		padding: 16px;
-		border-bottom: 1px solid #eee;
-		display: flex;
-		align-items: center;
-	}
+/* 鍝嶅簲寮忚璁� */
+@media (min-width: 300px) {
+  .inspection-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
 
-	.card-title {
-		font-size: 16px;
-		font-weight: 600;
-		flex: 1;
-		margin: 0 8px;
-	}
+  .info-row {
+    flex-direction: row;
+  }
 
-	.badge {
-		font-size: 12px;
-		padding: 2px 6px;
-		border-radius: 10px;
-		margin-right: 8px;
-	}
+  .picker {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: white;
+    font-size: 14px;
+    min-width: 10px;
+  }
+}
 
-	.badge.urgent {
-		background-color: #e74c3c;
-		color: white;
-	}
+/* 鍒锋柊鎻愮ず鏍峰紡 */
+.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;
+}
 
-	.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;
-		margin-bottom: 12px;
-		gap: 16px;
-	}
-
-	.info-item {
-		flex: 1;
-	}
-
-	.info-label {
-		display: block;
-		font-size: 12px;
-		color: #7f8c8d;
-		margin-bottom: 4px;
-	}
-
-	.info-content {
-		font-size: 14px;
-		color: #2c3e50;
-		line-height: 1.5;
-	}
-
-	.highlight {
-		font-weight: 600;
-		color: #2c3e50;
-		font-size: 16px;
-	}
-
-	.meta-info {
-		display: flex;
-		gap: 16px;
-		font-size: 12px;
-		color: #95a5a6;
-		margin-top: 12px;
-	}
-
-	.meta-item {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	.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%;
-    } */
-	}
+.tips-ani {
+  transform: translateY(0);
+  height: 40px;
+  opacity: 1;
+}
 </style>
\ No newline at end of file
diff --git a/pages/QC/SJ/detail.vue b/pages/QC/SJ/detail.vue
index 2cde35f..366942d 100644
--- a/pages/QC/SJ/detail.vue
+++ b/pages/QC/SJ/detail.vue
@@ -1,751 +1,1094 @@
 <template>
-	<view class="container">
-		<!-- 澶撮儴 -->
-		<view class="header">
-			<view class="title">棣栨妫�楠岄」鐩槑缁�</view>
-			<view class="order-number">褰撳墠妫�楠屽崟鍙�: {{releaseNo}}</view>
-		</view>
+  <view class="container">
+    <!-- 澶撮儴 -->
+    <view class="header">
+      <view class="title">棣栨椤圭洰鏄庣粏</view>
+      <view class="order-number">褰撳墠妫�楠屽崟鍙�: {{ formData.billNo }}</view>
+    </view>
 
-		<!-- 鏍囩鏍� -->
-		<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 class="tabs-container">
+      <scroll-view class="tabs" scroll-x="true" show-scrollbar="false">
+        <view v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}" class="tab"
+              @tap="switchTab(index, tab.id)">
+          {{ tab.projName || tab.fcheckItem || '椤圭洰' + (index + 1) }}
+        </view>
+      </scroll-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="tab-content">
+      <!-- 鍩烘湰淇℃伅 -->
+      <view class="section">
+        <view class="section-header">鍩烘湰淇℃伅</view>
+        <view class="section-body">
+          <view class="info-grid">
+            <view class="info-item">
+              <view class="info-label">椤圭洰鍚嶇О</view>
+              <view class="info-value">{{ formData.projName }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">璐ㄩ噺瑕佹眰</view>
+              <view class="info-value">{{ formData.itemMod }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾柟娉�</view>
+              <view class="info-value">{{ formData.inspectionMethod }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">浣跨敤浠〃</view>
+              <view class="info-value">{{ formData.usingInstruments }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾暟</view>
+              <view class="info-value">{{ formData.levelNum }}</view>
+            </view>
+            <view v-if="formData.minValue" class="info-item">
+              <view class="info-label">涓嬮檺</view>
+              <view class="info-value">{{ formData.minValue }}</view>
+            </view>
+            <view v-if="formData.standardValue" class="info-item">
+              <view class="info-label">鏍囧噯鍊�</view>
+              <view class="info-value">{{ formData.standardValue }}</view>
+            </view>
+            <view v-if="formData.maxValue" class="info-item">
+              <view class="info-label">涓婇檺</view>
+              <view class="info-value">{{ formData.maxValue }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">鏇存柊浜�</view>
+              <view class="info-value">{{ formData.updater }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">鏇存柊鏃堕棿</view>
+              <view class="info-value">{{ formData.updateTime }}</view>
+            </view>
+          </view>
+        </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 class="section">
+        <view class="section-header">妫�楠岀粨鏋�</view>
+        <view class="section-body">
+          <view class="info-grid">
+            <view v-if="formData.result" class="info-item">
+              <view class="info-label">棰勮缁撴灉</view>
+              <view class="info-value">{{ formData.result }}</view>
+            </view>
+            <view v-if="formData.remarks" class="info-item">
+              <view class="info-label">涓嶅悎鏍兼弿杩�</view>
+              <view class="info-value danger">{{ formData.remarks }}</view>
+            </view>
+          </view>
+        </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 v-if="!formData.maxValue && !formData.minValue" class="info-item edit">
+            <view class="info-label" style="color: #F56C6C">鎻愮ず</view>
+            <view class="info-value" style="color: #F56C6C">娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級</view>
+          </view>
 
-			<!-- 缁撴灉褰曞叆 -->
-			<view class="section">
-				<view class="section-header">妫�楠岀粨鏋滃綍鍏�</view>
-				<view class="section-body">
-					<view class="input-group input1">
-						<view class="input-wrapper">
+          <view class="input-group input1">
+            <view class="input-wrapper">
+              <input v-if="tableData.length < formData.levelNum" v-model="formData.fcheckResu" class="result-input"
+                     placeholder="璇疯緭鍏ユ楠岀粨鏋�..." type="number"/>
+              <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit">淇濆瓨缁撴灉
+              </button>
+              <button v-if="isShowImg" class="btn upload-btn" @click="previewImage">
+                <uni-icons color="#fff" size="16" type="image"></uni-icons>
+                鏌ョ湅鍥剧墖
+              </button>
+              <button class="btn upload-btn" @click="saveRemarks">
+                <uni-icons color="#fff" size="16" type="compose"></uni-icons>
+                涓嶅悎鏍兼弿杩�
+              </button>
+            </view>
+          </view>
 
-							<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 v-if="isShowImg" class="btn upload-btn" @click="previewImage">
+                <uni-icons color="#fff" size="16" type="image"></uni-icons>
+                鏌ョ湅鍥剧墖
+              </button>
+              <button class="btn upload-btn" @click="saveRemarks">
+                <uni-icons color="#fff" size="16" type="compose"></uni-icons>
+                涓嶅悎鏍兼弿杩�
+              </button>
+            </view>
+            <view class="input-wrapper" style="margin-top: 15px;">
+              <input v-if="tableData.length < formData.levelNum" v-model="formData.fcheckResu" class="result-input"
+                     placeholder="璇疯緭鍏ユ楠岀粨鏋�..." type="number"/>
+              <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit">淇濆瓨缁撴灉
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
 
-					<view class="input-group input2">
-						<view class="input-wrapper">
+      <!-- 缁撴灉琛ㄦ牸 -->
+      <view v-if="tableData.length > 0" class="simple-table-container">
+        <view class="simple-table-header">
+          <view class="simple-title">妫�楠岃褰� ({{ tableData.length }}/{{ formData.levelNum }})</view>
+          <view :class="{'completed': !(tableData.length < formData.levelNum)}" class="simple-status">
+            {{ tableData.length < formData.levelNum ? '杩涜涓�' : '宸插畬鎴�' }}
+          </view>
+        </view>
 
-							<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;">
+        <view class="simple-table">
+          <view class="simple-header-row">
+            <view class="simple-header-cell">缂栧彿</view>
+            <view class="simple-header-cell">妫�楠岀粨鏋�</view>
+            <view class="simple-header-cell">鎿嶄綔</view>
+          </view>
 
-							<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-for="(item, index) in tableData" :key="index" class="simple-data-row">
+            <view class="simple-data-cell simple-index">
+              {{ index + 1 }}
+            </view>
+            <view class="simple-data-cell simple-result">
+              <!-- 鏁板瓧缁撴灉鏍峰紡 -->
+              <view v-if="isNumber && !isNaN(parseFloat(item.fcheckResu))" class="simple-number-result">
+                <view class="result-value">{{ item.fcheckResu }}</view>
+                <view v-if="formData.unitName" class="result-unit">{{ formData.unitName }}</view>
+                <view :class="{'pass': isInRange(item.fcheckResu), 'fail': !isInRange(item.fcheckResu)}"
+                      class="result-status">
+                  {{ isInRange(item.fcheckResu) ? '鍚堟牸' : '涓嶅悎鏍�' }}
+                </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>
+              <!-- NG/OK鐘舵�佹牱寮� -->
+              <view v-else class="simple-status-result">
+                <view :class="{'pass': item.fcheckResu === '1', 'fail': item.fcheckResu !== '1'}" class="simple-status">
+                  {{ item.fcheckResu === '1' ? '鍚堟牸' : '涓嶅悎鏍�' }}
+                </view>
+              </view>
+            </view>
+            <view class="simple-data-cell simple-action">
+              <button v-if="!isNumber" class="simple-btn" @click="numberEdit(item)">
+                {{ editResult(item.fcheckResu) }}
+              </button>
+              <button v-if="isNumber" class="simple-btn" @click="toDetail(item)">
+                淇敼
+              </button>
+            </view>
+          </view>
+        </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>
-					<form>
-						<view class="form-group">
-							<label class="form-label">涓嶅悎鏍兼弿杩�:</label>
-							<input class="form-input" type="text" v-model="remarks" />
-						</view>
-						<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>
-					<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 v-if="remarksPopup" class="overlay">
+        <view class="popup">
+          <h3>淇敼涓嶅悎鏍兼弿杩�</h3>
+          <form>
+            <view class="form-group">
+              <label class="form-label">涓嶅悎鏍兼弿杩�:</label>
+              <input v-model="remarks" class="form-input" type="text"/>
+            </view>
+            <view class="popup-buttons">
+              <button class="btn primary-btn" type="warn" @click="editRemarks">淇敼</button>
+              <button class="btn cancel-btn" @click="remarksPopup = !remarksPopup">鍙栨秷</button>
+            </view>
+          </form>
+        </view>
+      </view>
 
-		</view>
-	</view>
+      <!-- 寮瑰嚭灞� - 淇敼妫�楠岀粨鏋� -->
+      <view v-if="showPopup" class="overlay">
+        <view class="popup">
+          <h3>淇敼妫�楠岀粨鏋�</h3>
+          <form :modelValue="editData">
+            <view class="form-group">
+              <label class="form-label">妫�楠岀粨鏋�:</label>
+              <input v-model="editData.fcheckResu" class="form-input" type="text"/>
+            </view>
+            <view class="popup-buttons">
+              <button class="btn primary-btn" type="warn" @click="eidt">淇敼</button>
+              <button class="btn cancel-btn" @click="showPopup = !showPopup">鍙栨秷</button>
+            </view>
+          </form>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import {
-		compile
-	} from "vue";
+export default {
+  data() {
+    return {
+      formData: {},
+      isNumber: false,
+      checkItem: "",
+      id: 0,
+      gid: 0,
+      billNo: "",
+      showPopup: false,
+      editData: {},
+      tableData: [],
+      base64Image: "",
+      isShowImg: false,
+      remarks: "",
+      remarksPopup: false,
+      currentTab: 0,
+      tabs: []
+    }
+  },
+  methods: {
+    // 鍒囨崲鏍囩椤�
+    switchTab(index, id) {
+      this.currentTab = index;
+      this.id = id;
+      this.refreshResult();
+    },
 
-	export default {
-		data() {
-			return {
-				formData: {},
-				tableData: {},
-				mainId: '',
-				isNumber: false,
-				currentTab: 0,
-				tabs: [],
-				inputResult: '',
-				remarksPopup: false,
-				showPopup: false,
-				editData: {},
-				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;
+    // 鍔犺浇鏍囩椤�
+    loadTabItems() {
+      this.$post({
+        url: "/SJ/getQSItems",
+        data: {
+          pid: this.gid,
+        }
+      }).then(res => {
+        if (res.data && res.data.tbBillList) {
+          this.tabs = res.data.tbBillList;
+          // 鎸夋娴嬬粨鏋滄帓搴忥紝鏈畬鎴愮殑鎺掑湪鍓嶉潰
+          this.tabs.sort((a, b) => {
+            if (a.result === '鏈畬鎴�' && b.result !== '鏈畬鎴�') {
+              return -1;
+            } else if (a.result !== '鏈畬鎴�' && b.result === '鏈畬鎴�') {
+              return 1;
+            } else {
+              return 0;
+            }
+          });
+        } else {
+          // 娌℃湁椤圭洰鏃惰嚦灏戞坊鍔犲綋鍓嶉」鐩埌鏍囩
+          this.tabs = [{id: this.id, projName: this.formData.projName || '褰撳墠椤圭洰'}];
+        }
+      });
+    },
 
-				if (item.fcheckResu == '1') {
-					fstand = "脳";
-					fcheckResu = 0;
-				}
+    previewImage() {
+      uni.previewImage({
+        urls: [this.base64Image],
+      });
+    },
+    editResult(fcheckResu) {
+      if (fcheckResu == '1') {
+        return "鏀逛负涓嶅悎鏍�";
+      } else {
+        return "鏀逛负鍚堟牸";
+      }
+    },
+    submit() {
 
-				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
-				});
-			},
-			upRemarks() {
-				this.remarksPopup = true;
-			},
-			saveResult() {
-				let count = this.formData.levelNum;
-				let fstand = "鈭�";
+      let count = this.formData.levelNum;
+      let fstand = "鈭�";
 
-				//鏈夋渶澶у�煎拰鏈�灏忓�煎氨鏍规嵁鏄惁绗﹀悎鏍囧噯鍊兼洿鏂板垽瀹氱粨鏋滐紝娌℃湁鏈�澶у�煎拰鏈�灏忓�煎氨鏍规嵁鏄惁閫氳繃妫�楠屽垽瀹氱粨鏋�
-				if (this.formData.maxValue && this.formData.minValue) {
+      //鏈夋渶澶у�煎拰鏈�灏忓�煎氨鏍规嵁鏄惁绗﹀悎鏍囧噯鍊兼洿鏂板垽瀹氱粨鏋滐紝娌℃湁鏈�澶у�煎拰鏈�灏忓�煎氨鏍规嵁鏄惁閫氳繃妫�楠屽垽瀹氱粨鏋�
+      if (this.formData.maxValue && this.formData.minValue) {
 
-					if (!this.formData.fcheckResu) {
-						this.$showMessage("璇疯緭鍏ユ楠屽��");
-						return;
-					}
+        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.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) {
+          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;
-				}
+        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.formData.updater = this.$loginInfo.account;
 
-				this.$post({
-					url: "/SJ/SetQSItemDetail",
-					data: {
-						pid: this.mainId,
-						gid: this.formID,
-						fstand: fstand,
-						fcheckResu: this.formData.fcheckResu,
-						updateBy: this.formData.updater,
-						count: count
-					}
-				}).then(res => {
-					this.formData.fcheckResu = null;
-					this.$showMessage("淇濆瓨鎴愬姛");
-					this.refreshResult();
-				})
+      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();
+        // 閲嶆柊鍔犺浇鏍囩椤逛互鏇存柊鐘舵��
+        this.loadTabItems();
+      })
 
+    },
+    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;
+        }
+      })
 
-			},
-			goBack() {
-				uni.navigateBack()
-			},
-			//鑾峰彇妫�楠屽崟璇︽儏
-			refreshResult() {
-				this.$post({
-					url: "/SJ/getQSItems",
-					data: {
-						id: this.mainId
-					}
-				}).then(res => {
+      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() {
 
-					this.formData = res.data.tbBillList[0];
-					this.$post({
-						url: "/SJ/getQSItemDetail",
-						data: {
-							pid: this.mainId,
-							gid: this.formID
-						}
-					}).then(res => {
-						this.tableData = res.data.tbBillList;
-					})
-					// this.tableData = res.data.tbBillList.itemXj02s;
+      if (!this.editData.fcheckResu) {
+        this.$showMessage("璇疯緭鍏ユ楠岀粨鏋�");
+      }
 
-					if (this.formData.imageData) {
-						this.isShowImg = true;
-						this.base64Image = 'data:image/jpeg;base64,' + this.formData.imageData;
-					}
+      if (this.formData.fcheckResu == this.editData.fcheckResu) {
+        this.$showMessage("淇敼鎴愬姛");
+        return;
+      }
 
-					//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() {
+      let fstand = "鈭�";
 
-				if (!this.editData.fcheckResu) {
-					this.$showMessage("璇疯緭鍏ユ楠岀粨鏋�");
-				}
+      if (this.formData.maxValue && this.formData.minValue) {
 
-				if (this.formData.fcheckResu == this.editData.fcheckResu) {
-					this.$showMessage("淇敼鎴愬姛");
-					return;
-				}
+        if (!this.editData.fcheckResu) {
+          this.$showMessage("璇疯緭鍏ユ楠屽��");
+          return;
+        }
 
-				let fstand = "鈭�";
+        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.formData.maxValue && this.formData.minValue) {
+        if (!this.editData.fcheckResu) {
+          this.editData.fcheckResu = 1
+        }
 
-					if (!this.editData.fcheckResu) {
-						this.$showMessage("璇疯緭鍏ユ楠屽��");
-						return;
-					}
+        if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) {
+          if (this.editData.fcheckResu == 0) {
+            fstand = "脳";
+          }
+        } else {
+          this.$showMessage("鏃犳爣鍑嗗�兼椂锛屾楠岀粨鏋滃彧鑳戒负0鎴�1!");
+          return;
+        }
+      }
 
-					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
-						fstand = "脳";
-					}
-				} else {
+      this.editData.updater = this.$loginInfo.account;
 
-					if (!this.editData.fcheckResu) {
-						this.editData.fcheckResu = 1
-					}
+      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();//鍒锋柊椤甸潰
+        // 閲嶆柊鍔犺浇鏍囩椤逛互鏇存柊鐘舵��
+        this.loadTabItems();
+      })
+    },
+    numberEdit(item) {
 
-					if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) {
-						if (this.editData.fcheckResu == 0) {
-							fstand = "脳";
-						}
-					} else {
-						this.$showMessage("鏃犳爣鍑嗗�兼椂锛屾楠岀粨鏋滃彧鑳戒负0鎴�1!");
-						return;
-					}
-				}
+      let fstand = "鈭�";
+      let fcheckResu = 1;
 
-				this.editData.updater = this.$loginInfo.account;
+      if (item.fcheckResu == '1') {
+        fstand = "脳";
+        fcheckResu = 0;
+      }
 
-				this.$post({
-					url: "/SJ/UpdateQSItemDetail",
-					data: {
-						id: this.editData.id,
-						pid: this.mainId,
-						gid: this.formID,
-						fstand: fstand,
-						fcheckResu: this.editData.fcheckResu,
-						updateBy: this.editData.updater,
-					}
-				}).then(res => {
-					this.showPopup = !this.showPopup;
-					this.$showMessage("淇敼鎴愬姛");
-					this.refreshResult(); //鍒锋柊椤甸潰
-				})
-			},
-		},
-		onLoad(options) {
-			//options涓寘鍚簡url闄勫甫鐨勫弬鏁�
-			let params = options;
-			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);
-			})
-		}
-	}
+      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(); //鍒锋柊椤甸潰
+        // 閲嶆柊鍔犺浇鏍囩椤逛互鏇存柊鐘舵��
+        this.loadTabItems();
+      })
+    },
+    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("淇濆瓨鎴愬姛");
+            // 閲嶆柊鍔犺浇鏍囩椤逛互鏇存柊鐘舵��
+            this.loadTabItems();
+          }
+        })
+      }
+    },
+    // 鍒ゆ柇鏁板瓧鏄惁鍦ㄨ寖鍥村唴
+    isInRange(value) {
+      if (!this.formData.maxValue || !this.formData.minValue) return true;
+      const numValue = parseFloat(value);
+      return numValue >= parseFloat(this.formData.minValue) &&
+          numValue <= parseFloat(this.formData.maxValue);
+    },
+    // 鑾峰彇鏁板瓧缁撴灉鐨勬牱寮忕被
+    getNumberResultClass(value) {
+      if (!this.formData.maxValue || !this.formData.minValue) return 'number-normal';
+      return this.isInRange(value) ? 'number-pass' : 'number-fail';
+    },
+    // 鑾峰彇鐘舵�佺粨鏋滅殑鏍峰紡绫�
+    getStatusClass(status) {
+      return status === '鈭�' ? 'status-pass' : 'status-fail';
+    }
+  },
+  onLoad(options) {
+    //options涓寘鍚簡url闄勫甫鐨勫弬鏁�
+    let params = options;
+
+    this.id = params["id"];
+    this.billNo = params["billNo"];
+    this.gid = params["gid"];
+    this.currentTab = parseInt(params["index"] || 0);
+
+    this.refreshResult();
+    this.loadTabItems();
+  }
+}
 </script>
 
 <style lang="scss">
-	$primary-color: #409EFF;
-	$success-color: #67C23A;
-	$danger-color: #F56C6C;
-	$border-color: #DCDFE6;
-	$bg-color: #f5f7fa;
+$primary-color: #409EFF;
+$success-color: #67C23A;
+$danger-color: #F56C6C;
+$border-color: #DCDFE6;
+$bg-color: #f5f7fa;
 
-	.container {
-		padding: 20px;
-		background-color: #fff;
-	}
+.container {
+  padding: 20px;
+  background-color: #fff;
+}
 
-	.header {
-		padding: 20px;
-		border-bottom: 1px solid $border-color;
-		background: linear-gradient(90deg, #f0f7ff, #e1f0ff);
+.header {
+  padding: 20px;
+  border-bottom: 1px solid $border-color;
+  background: linear-gradient(90deg, #f0f7ff, #e1f0ff);
+  margin-bottom: 0; /* 璋冩暣锛屽洜涓轰笅闈㈡湁tab鏍� */
+}
 
-		.title {
-			font-size: 24px;
-			color: #333;
-			margin-bottom: 10px;
-		}
+.header .title {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 10px;
+}
 
-		.order-number {
-			color: #666;
-			font-size: 14px;
-		}
-	}
+.header .order-number {
+  color: #666;
+  font-size: 14px;
+}
 
-	.tabs {
-		display: flex;
-		background-color: $bg-color;
-		border-bottom: 1px solid $border-color;
+/* 鏍囩鏍忔牱寮� */
+.tabs-container {
+  width: 100%;
+  position: relative;
+  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;
+.tabs {
+  display: flex;
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
 
-			&:last-child {
-				border-right: none;
-			}
+.tabs::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
 
-			&.active {
-				background-color: #fff;
-				color: $primary-color;
-				font-weight: bold;
-				position: relative;
+.tab {
+  display: inline-block;
+  padding: 12px 20px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  border-right: 1px solid $border-color;
+  min-width: 100px;
+}
 
-				&::after {
-					content: '';
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					height: 2px;
-					background-color: $primary-color;
-				}
-			}
-		}
-	}
+.tab.active {
+  background-color: #fff;
+  color: $primary-color;
+  font-weight: bold;
+  position: relative;
+}
 
-	.section {
-		margin: 20px 0;
-		border: 1px solid $border-color;
-		border-radius: 4px;
+.tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: $primary-color;
+}
 
-		&-header {
-			padding: 12px 16px;
-			background-color: $bg-color;
-			border-bottom: 1px solid $border-color;
-			font-weight: bold;
-		}
+.tab-content {
+  padding-top: 20px;
+}
 
-		&-body {
-			padding: 16px;
-		}
-	}
+.section {
+  margin: 20px 0;
+  border: 1px solid $border-color;
+  border-radius: 4px;
 
-	.info-grid {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 16px;
+  &-header {
+    padding: 12px 16px;
+    background-color: $bg-color;
+    border-bottom: 1px solid $border-color;
+    font-weight: bold;
+  }
 
-		.info-item {
-			margin-bottom: 12px;
+  &-body {
+    padding: 16px;
+  }
+}
 
-			.info-label {
-				color: #909399;
-				font-size: 14px;
-				margin-bottom: 4px;
-			}
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
 
-			.info-value {
-				color: #333;
-				font-weight: 500;
-			}
-		}
-	}
+  .info-item {
+    margin-bottom: 12px;
 
-	.input-group {
-		margin: 16px 0;
+    .info-label {
+      color: #909399;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
 
-		.input-wrapper {
-			display: flex;
-			gap: 12px;
+    .info-value {
+      color: #333;
+      font-weight: 500;
+    }
+  }
+}
 
-			.result-input {
-				flex: 1;
-				height: 45px;
-				padding: 0 12px;
-				border: 1px solid $border-color;
-				border-radius: 4px;
-				font-size: 14px;
-			}
+.input-group {
+  margin: 16px 0;
 
-			.upload-btn {
-				background-color: #909399;
-				color: #fff;
-				padding: 0 10px;
-				margin: 0;
-				//height: 40rpx;
-			}
-		}
-	}
+  .input-wrapper {
+    display: flex;
+    gap: 12px;
 
-	.table-container {
-		border: 1px solid $border-color;
-		border-radius: 4px;
-		margin-top: 20px;
+    .result-input {
+      flex: 1;
+      height: 45px;
+      padding: 0 12px;
+      border: 1px solid $border-color;
+      border-radius: 4px;
+      font-size: 14px;
+    }
 
-		.table-header {
-			display: flex;
-			background-color: $bg-color;
-			border-bottom: 1px solid $border-color;
+    .upload-btn {
+      background-color: #909399;
+      color: #fff;
+      padding: 0 10px;
+      margin: 0;
+    }
+  }
+}
 
-			.th {
-				flex: 1;
-				padding: 12px;
-				font-weight: bold;
-			}
-		}
+/* 绠�娲佽〃鏍兼牱寮� - 閫傚悎骞撮暱鐢ㄦ埛 */
+.simple-table-container {
+  margin: 20px 0;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+}
 
-		.table-row {
-			display: flex;
-			border-bottom: 1px solid $border-color;
-			padding: 12px;
+.simple-table-header {
+  padding: 15px 20px;
+  background: #f5f7fa;
+  border-bottom: 2px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-			&:last-child {
-				border-bottom: none;
-			}
+.simple-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
 
-			.td {
-				flex: 1;
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
+.simple-status {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  background: #ffc107;
+  color: #333;
+}
 
-	.result-badge {
-		display: inline-block;
-		padding: 4px 8px;
-		border-radius: 4px;
-		font-size: 12px;
-		font-weight: bold;
+.simple-status.completed {
+  background: #28a745;
+  color: #fff;
+}
 
-		&.OK {
-			background-color: rgba($success-color, 0.1);
-			color: $success-color;
-		}
+.simple-table {
+  width: 100%;
+}
 
-		&.NG {
-			background-color: rgba($danger-color, 0.1);
-			color: $danger-color;
-		}
-	}
+.simple-header-row {
+  display: flex;
+  background: #e9ecef;
+  border-bottom: 2px solid #ddd;
+}
 
-	.action-buttons {
-		margin-top: 20px;
-		display: flex;
-		justify-content: flex-end;
-		gap: 12px;
+.simple-header-cell {
+  flex: 1;
+  padding: 15px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  border-right: 1px solid #ddd;
+}
 
-		.btn {
-			padding: 8px 20px;
-			border-radius: 4px;
+.simple-header-cell:first-child {
+  flex: 0 0 80px;
+}
 
-			&.primary-btn {
-				background-color: $primary-color;
-				color: #fff;
+.simple-header-cell:last-child {
+  border-right: none;
+  flex: 0 0 120px;
+}
 
-			}
+.simple-data-row {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+}
 
-			&.cancel-btn {
-				background-color: #909399;
-				color: #fff;
-			}
-		}
-	}
+.simple-data-row:nth-child(even) {
+  background: #f8f9fa;
+}
 
-	.danger {
-		color: $danger-color;
-	}
+.simple-data-cell {
+  flex: 1;
+  padding: 15px 20px;
+  text-align: center;
+  border-right: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-	.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;
-	}
+.simple-index {
+  flex: 0 0 80px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
 
-	.popup {
-		background-color: #fff;
-		padding: 20px;
-		border: 1px solid #ccc;
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-		width: 68vw;
-		/* 璁剧疆瀹藉害涓鸿鍙e搴︾殑80% */
-		height: 25vh;
-		/* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */
-	}
+.simple-result {
+  text-align: left;
+  justify-content: flex-start;
+}
 
-	.updateBut {
-		background-color: #3498db;
-		color: white;
-	}
+.simple-action {
+  border-right: none;
+  flex: 0 0 120px;
+}
 
-	.input1 {
-		display: block;
-	}
+.simple-number-result {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
 
-	.input2 {
-		display: none;
-	}
+.result-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
 
-	/* 鍝嶅簲寮忚璁� */
-	@media (max-width: 500px) {
-		.input1 {
-			display: none;
-		}
+.result-unit {
+  font-size: 14px;
+  color: #666;
+}
 
-		.input2 {
-			display: block;
-		}
-	}
+.result-status {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: auto;
+}
+
+.result-status.pass {
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.result-status.fail {
+  background: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+.simple-status-result {
+  width: 100%;
+}
+
+.simple-status {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+}
+
+.simple-status.pass {
+  background: #28a745;
+  color: #fff;
+}
+
+.simple-status.fail {
+  background: #dc3545;
+  color: #fff;
+}
+
+.simple-btn {
+  padding: 10px 16px;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  min-width: 80px;
+}
+
+.simple-btn:active {
+  background: #0056b3;
+}
+
+// 鏂扮殑缁撴灉鏄剧ず鏍峰紡
+.result-display {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+// 鏁板瓧缁撴灉鏍峰紡
+.number-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  min-width: 60px;
+  position: relative;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  &.number-pass {
+    background: linear-gradient(135deg, #e8f5e8, #f0f9f0);
+    border: 2px solid #67C23A;
+  }
+
+  &.number-fail {
+    background: linear-gradient(135deg, #fdeaea, #fef0f0);
+    border: 2px solid #F56C6C;
+  }
+
+  &.number-normal {
+    background: linear-gradient(135deg, #f5f7fa, #fafbfc);
+    border: 2px solid #909399;
+  }
+
+  .number-value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 2px;
+  }
+
+  .number-unit {
+    font-size: 10px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .number-status {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    background: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 鐘舵�佺粨鏋滄牱寮�
+.status-result {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: bold;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+
+  &.status-pass {
+    background: linear-gradient(135deg, #67C23A, #85ce61);
+    color: white;
+  }
+
+  &.status-fail {
+    background: linear-gradient(135deg, #F56C6C, #f78989);
+    color: white;
+  }
+
+  .status-icon {
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  .status-text {
+    font-size: 14px;
+    letter-spacing: 0.5px;
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 淇濈暀鍘熸湁鏍峰紡浣滀负澶囩敤
+.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;
+  }
+}
+
+.btn {
+  padding: 8px 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1;
+
+  &.primary-btn {
+    background-color: $primary-color;
+    color: #fff;
+  }
+
+  &.danger-btn {
+    background-color: $danger-color;
+    color: #fff;
+  }
+
+  &.cancel-btn {
+    background-color: #909399;
+    color: #fff;
+  }
+}
+
+.danger {
+  color: $danger-color;
+}
+
+.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-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  width: 80%;
+  max-width: 500px;
+
+  h3 {
+    margin-top: 0;
+    color: #2c3e50;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-label {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  .form-input {
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+
+  .popup-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+  }
+}
+
+.input1 {
+  display: block;
+}
+
+.input2 {
+  display: none;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 500px) {
+  .input1 {
+    display: none;
+  }
+
+  .input2 {
+    display: block;
+  }
+
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .simple-table-header {
+    padding: 12px 16px;
+  }
+
+  .simple-title {
+    font-size: 16px;
+  }
+
+  .simple-header-cell,
+  .simple-data-cell {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+
+  .simple-index {
+    flex: 0 0 60px;
+  }
+
+  .simple-action {
+    flex: 0 0 100px;
+  }
+
+  .result-value {
+    font-size: 18px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/QC/Suspend/Suspend.vue b/pages/QC/Suspend/Suspend.vue
index 91bfcea..3a61b71 100644
--- a/pages/QC/Suspend/Suspend.vue
+++ b/pages/QC/Suspend/Suspend.vue
@@ -29,11 +29,11 @@
           <radio-group name="gender" ref="suspendRadio" v-model="formData.isSuspend" @change="radioChange">
             <label>
               <radio value="0"/>
-              <text>鏁呴殰/寮傚父</text>
+              <view>鏁呴殰/寮傚父</view>
             </label>
             <label>
               <radio value="0"/>
-              <text>浜х嚎浼戞伅</text>
+              <view>浜х嚎浼戞伅</view>
             </label>
           </radio-group>
         </view>
diff --git a/pages/QC/XJ/Add.vue b/pages/QC/XJ/Add.vue
index 9a3048f..1930b90 100644
--- a/pages/QC/XJ/Add.vue
+++ b/pages/QC/XJ/Add.vue
@@ -1,124 +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.releaseNo"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">鍒涘缓浜�:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.createBy"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">鍒涘缓鏃堕棿:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.createDate"/>
-        </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="DAA020List"
-                  @change="onDaa020Change">
-            <text>{{ DAA020List[DAA020Index] }}</text>
-          </picker>
-          <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa020"/>
-        </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="ItemList"
-                  @change="onItemChange">
-            <text>{{ ItemList[ItemIndex] }}</text>
-          </picker>
-          <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.billNo"/>
-        </view>
-
-        <view class="form-group">
-          <label class="form-label">鐗╂枡鍚嶇О:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.itemName"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">瑙勬牸鍨嬪彿:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.itemModel"/>
-        </view>
-        <view class="form-group">
-          <label class="form-label">宸ュ崟鏁伴噺:</label>
-          <input class="form-input" disabled="true" type="text" v-model="formData.planQty"/>
-        </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 class="inspection-sheet">
+    <!-- 澶撮儴淇℃伅 -->
+    <view class="sheet-header">
+      <h1>宸℃鍗�</h1>
+      <view class="inspection-number">妫�楠屽崟鍙凤細{{ formData.releaseNo }}</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>
-          </uni-td>
-        </uni-tr>
-      </uni-table>
-    </view>
-
-    <view class="plus-button">
-      <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem">鍒涘缓妫�楠屽崟骞剁敓鎴愰儴鍒嗛粯璁ゅ��</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.fcheckResu && !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 class="basic-info">
+      <view class="info-row">
+        <span class="info-label">鍒涘缓浜猴細</span>
+        <span class="info-value">{{ formData.createBy }}</span>
+        <span class="info-label">鍒涘缓鏃堕棿锛�</span>
+        <span class="info-value">{{ formData.createDate }}</span>
       </view>
     </view>
 
+    <!-- 鐗╂枡淇℃伅鍖� -->
+    <view class="material-info">
+      <view class="info-block">
+        <view class="info-label">绾夸綋缂栧彿锛�</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.daa020 }}</view>
+        <picker v-if="isUpdate" :range="DAA020List" class="picker info-value-input" name="selector"
+                @change="onDaa020Change">
+          <view>{{ DAA020List[DAA020Index] }}</view>
+        </picker>
+      </view>
+      <view class="info-block">
+        <view class="info-label">鐗╂枡缂栫爜锛�</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.itemNo }}</view>
+        <picker v-if="isUpdate" :range="ItemList" class="picker info-value-input" name="selector"
+                @change="onItemChange">
+          <view>{{ ItemList[ItemIndex] }}</view>
+        </picker>
+      </view>
+      <view class="info-block">
+        <view class="info-label">璁″垝缂栧彿锛�</view>
+        <view v-if="!isUpdate" class="info-value">{{ formData.billNo }}</view>
+        <picker v-if="isUpdate" :range="DAA001List" class="picker info-value-input" name="selector"
+                @change="onDaa001Change">
+          <view>{{ DAA001List[DAA001Index] }}</view>
+        </picker>
+      </view>
+      <view class="info-block">
+        <view class="info-label">鐗╂枡鍚嶇О锛�</view>
+        <view class="info-value">{{ formData.itemName }}</view>
+      </view>
+      <view class="info-block">
+        <view class="info-label">瑙勬牸鍨嬪彿锛�</view>
+        <view class="info-value">{{ formData.itemModel }}</view>
+      </view>
+      <view class="info-block">
+        <view class="info-label">宸ュ崟鏁伴噺锛�</view>
+        <view class="info-value highlight">{{ formData.planQty }}</view>
+      </view>
+      <view v-if="formData.remarks" class="info-block">
+        <view class="info-label">涓嶅悎鏍兼弿杩帮細</view>
+        <view class="info-value">{{ formData.remarks }}</view>
+      </view>
+    </view>
+
+    <!-- 鎿嶄綔鎸夐挳鍖� - 妫�楠岄」鐩幏鍙� -->
+    <view v-if="isUpdate && !isShowTable" class="action-buttons">
+      <button class="primary-btn" @click="getItem">鍒涘缓妫�楠屽崟</button>
+    </view>
+
+    <view v-if="isShowTable" class="action-buttons">
+      <button class="secondary-btn" @click="getTable">鑾峰彇椤圭洰</button>
+      <button v-if="isUpdate" class="primary-btn" @click="saveTable">鐢熸垚椤圭洰</button>
+    </view>
+
+    <!-- 妫�楠岄」鐩〃鏍� -->
+    <view v-if="tableData.length > 0" class="inspection-table">
+      <!-- 琛ㄦ牸澶撮儴缁熻淇℃伅 -->
+      <view class="table-header-stats">
+        <view class="stats-left">
+          <view class="stats-title">妫�楠岄」鐩竻鍗�</view>
+          <view class="stats-subtitle">鍏� {{ tableData.length }} 涓楠岄」鐩�</view>
+        </view>
+        <view class="stats-right">
+          <view class="stat-item passed">
+            <span class="stat-count">{{ getPassedCount() }}</span>
+            <span class="stat-label">宸插悎鏍�</span>
+          </view>
+          <view class="stat-item failed">
+            <span class="stat-count">{{ getFailedCount() }}</span>
+            <span class="stat-label">涓嶅悎鏍�</span>
+          </view>
+          <view class="stat-item pending">
+            <span class="stat-count">{{ getPendingCount() }}</span>
+            <span class="stat-label">寰呮楠�</span>
+          </view>
+        </view>
+      </view>
+      <table>
+        <thead>
+        <tr>
+          <th style="text-align: center;" width="15%">妫�楠岄」鐩�</th>
+          <th style="text-align: center;" width="50%">妫�楠屾弿杩�</th>
+          <th style="text-align: center;" width="20%">璁板綍(鐐瑰嚮)</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <td>
+            <view class="project-name-wrapper">
+								<span :class="{
+									'status-approved': item.result=='鍚堟牸',
+									'status-rejected': item.result=='涓嶅悎鏍�',
+									'status-pending': item.result=='鏈畬鎴�'
+								}" class="status-indicator"></span>
+              <span>{{ item.projName }}</span>
+            </view>
+          </td>
+          <td>
+            <view v-if="item.result=='鍚堟牸'" class="watermark approved">
+              鍚堟牸
+            </view>
+            <view v-if="item.result=='涓嶅悎鏍�'" class="watermark rejected">
+              涓嶅悎鏍�
+            </view>
+            <view v-if="item.result=='鏈畬鎴�'" class="watermark pending">
+              寰呮楠�
+            </view>
+            <view class="description-text">{{ item.itemMod }}</view>
+          </td>
+          <td>
+            <button :class="{
+								'record-btn-fill': item.isCheck >= item.levelNum,
+								'record-btn-view': item.isCheck < item.levelNum
+							}" class="record-btn" @click="toDetail(item)">
+              {{ item.isCheck >= item.levelNum ? '鏌ョ湅' : '濉啓' }}
+            </button>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </view>
+
+    <!-- 鎿嶄綔鎸夐挳鍖� - 搴曢儴鎿嶄綔 -->
+    <view v-if="!isUpdate && !isShowTable" class="action-buttons">
+      <button class="secondary-btn" @click="toImage">鍥剧墖绠$悊</button>
+      <button class="secondary-btn" @click="saveRemarks">娣诲姞鎻忚堪</button>
+      <button v-if="!formData.fcheckResu" class="primary-btn"
+              style="background: linear-gradient(135deg, #e74c3c, #c0392b);" @click="removeXJ">鍒犻櫎鍗曟嵁
+      </button>
+    </view>
+
+    <!-- 涓嶅悎鏍兼弿杩板脊绐� -->
+    <view v-if="remarksPopup" class="overlay">
+      <view class="popup">
+        <h3>淇敼涓嶅悎鏍兼弿杩�</h3>
+        <view class="form-group">
+          <label class="form-label">涓嶅悎鏍兼弿杩�:</label>
+          <input v-model="remarks" class="form-input" placeholder="璇疯緭鍏ヤ笉鍚堟牸鎻忚堪" type="text"/>
+        </view>
+        <view class="popup-buttons">
+          <button class="updateBut" @click="editRemarks">淇敼</button>
+          <button class="secondary-btn" @click="remarksPopup = !remarksPopup">鍙栨秷</button>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -202,6 +244,18 @@
     }
   },
   methods: {
+    // 鑾峰彇鍚堟牸椤圭洰鏁伴噺
+    getPassedCount() {
+      return this.tableData.filter(item => item.result === '鍚堟牸').length;
+    },
+    // 鑾峰彇涓嶅悎鏍奸」鐩暟閲�
+    getFailedCount() {
+      return this.tableData.filter(item => item.result === '涓嶅悎鏍�').length;
+    },
+    // 鑾峰彇寰呮楠岄」鐩暟閲�
+    getPendingCount() {
+      return this.tableData.filter(item => !item.result || item.result === '').length;
+    },
     removeXJ() {
       if (this.formData.id) {
         this.$post({
@@ -454,65 +508,439 @@
   }
 };
 </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;
-}
-.form-input {
+
+.info-value-input {
   flex: 1;
-  margin-bottom: 0;
-  padding: 5px;
+  padding: 8px 12px;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  background: #ffffff;
+  font-size: 14px;
+  margin-top: 6px;
 }
+
 .picker {
-  flex: 1;
-  margin-bottom: 0;
-  padding: 5px;
-  font-size: 12px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  background: #ffffff;
+  font-size: 14px;
+  margin-top: 6px;
 }
-.uni-form-item {
+
+/* 琛ㄦ牸鏍峰紡 */
+.inspection-table {
+  margin: 25px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: #fff;
+}
+
+/* 琛ㄦ牸澶撮儴缁熻淇℃伅 */
+.table-header-stats {
   display: flex;
-  border-bottom: 1px solid #c9c9c9;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid #e0e0e0;
 }
-.edit {
-  background-color: white;
+
+.stats-left .stats-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #2c3e50;
+  margin-bottom: 4px;
 }
-/* 榛樿鏍峰紡 */
-.list-container {
-  height: 60vh;
-  /* 璁剧疆鍒楄〃瀹瑰櫒鐨勯珮搴︿负鍓╀綑绌洪棿锛屽苟鍑忓幓琛ㄥ崟瀹瑰櫒鐨勯珮搴� */
-  overflow-y: auto;
-  /* 鍏佽鍒楄〃瀹瑰櫒鍨傜洿婊氬姩 */
-  padding: 10px;
-  /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇鍒楄〃鍐呭鏇寸編瑙� */
+
+.stats-left .stats-subtitle {
+  font-size: 14px;
+  color: #7f8c8d;
 }
-/* 鍦ㄥ皬灞忓箷璁惧涓婏紝閲嶇疆楂樺害涓洪�傚簲灞忓箷 */
-@media (max-width: 768px) {
-  .list-container {
-    height: calc(100vh - 376px);
-    /* 閫傚綋璋冩暣楂樺害 */
+
+.stats-right {
+  display: flex;
+  gap: 16px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  min-width: 60px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stat-item.passed {
+  background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.2));
+  border: 1px solid rgba(39, 174, 96, 0.3);
+}
+
+.stat-item.failed {
+  background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(230, 126, 34, 0.2));
+  border: 1px solid rgba(230, 126, 34, 0.3);
+}
+
+.stat-item.pending {
+  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.2));
+  border: 1px solid rgba(243, 156, 18, 0.3);
+}
+
+.stat-count {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1;
+  margin-bottom: 2px;
+}
+
+.stat-item.passed .stat-count {
+  color: #27ae60;
+}
+
+.stat-item.failed .stat-count {
+  color: #e67e22;
+}
+
+.stat-item.pending .stat-count {
+  color: #f39c12;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #7f8c8d;
+  font-weight: 500;
+}
+
+/* 绉诲姩绔〃鏍煎ご閮ㄧ粺璁� */
+@media (max-width: 500px) {
+  .table-header-stats {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 12px 16px;
+  }
+
+  .stats-right {
+    width: 100%;
+    justify-content: space-around;
+    gap: 8px;
+  }
+
+  .stat-item {
+    flex: 1;
+    min-width: auto;
+    padding: 6px 8px;
+  }
+
+  .stat-count {
+    font-size: 16px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
+
+  .stats-left .stats-title {
+    font-size: 16px;
+  }
+
+  .stats-left .stats-subtitle {
+    font-size: 13px;
   }
 }
-.form-container {
-  padding: 10px;
-  /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇琛ㄥ崟鍐呭鏇寸編瑙� */
+
+.inspection-table table {
+  width: 100%;
+  border-collapse: collapse;
 }
-.th {
-  background-color: lightskyblue;
-  color: #FFFFFF;
+
+.inspection-table th, .inspection-table td {
+  padding: 16px 20px;
+  border: none;
+  text-align: left;
+  border-bottom: 1px solid #eee;
 }
-.plus-button {
-  line-height: 59px;
-  font-size: 24px;
+
+.inspection-table th {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-weight: 600;
+  color: #fff;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+  position: relative;
+}
+
+.inspection-table tbody tr {
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+}
+
+.inspection-table tbody tr:nth-child(even) {
+  background-color: #f8fafc;
+}
+
+.inspection-table tbody tr:hover {
+  background-color: #e8f4fd;
+  border-left-color: #3498db;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
+}
+
+/* 妫�楠岄」鐩垪鏍峰紡 */
+.inspection-table td:first-child {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 15px;
+}
+
+/* 椤圭洰鍚嶇О鍖呰鍣� */
+.project-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 鐘舵�佹寚绀哄櫒 */
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.status-indicator.status-approved {
+  background-color: #27ae60;
+  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3);
+}
+
+.status-indicator.status-rejected {
+  background-color: #e67e22;
+  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3);
+}
+
+.status-indicator.status-pending {
+  background-color: #f39c12;
+  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3);
+}
+
+/* 妫�楠屾弿杩板垪鐗规畩鏍峰紡 */
+.inspection-table td:nth-child(2) {
+  position: relative;
+  min-height: 80px;
+  vertical-align: top;
+  padding: 16px 20px;
+}
+
+/* 鎸夐挳鏍峰紡 */
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.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: 8px 16px;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  font-size: 13px;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+}
+
+.record-btn:hover {
+  background: linear-gradient(135deg, #2980b9, #1f618d);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
+}
+
+.record-btn:active {
+  transform: translateY(0);
+}
+
+/* 濉啓鐘舵�佹寜閽� */
+.record-btn-fill {
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+  box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3);
+}
+
+.record-btn-fill:hover {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4);
+}
+
+/* 鏌ョ湅鐘舵�佹寜閽� */
+.record-btn-view {
+  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+  box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3);
+}
+
+.record-btn-view:hover {
+  background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
+  box-shadow: 0 4px 8px rgba(149, 165, 166, 0.4);
+}
+
+/* 姘村嵃鏍峰紡 */
+.watermark {
+  position: absolute;
+  font-size: 32px;
+  font-weight: bold;
+  opacity: 0.4;
+  z-index: 3;
+  pointer-events: none;
+  bottom: 8px;
+  right: 8px;
+  transform: rotate(-15deg);
+  transform-origin: bottom right;
+  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
+  min-width: 60px;
+  text-align: center;
+}
+
+.watermark.approved {
+  color: #27ae60; /* 鏇存贰鐨勭豢鑹� */
+}
+
+.watermark.rejected {
+  color: #e67e22; /* 鏇存贰鐨勭孩鑹� */
+}
+
+.watermark.pending {
+  color: #f39c12; /* 姗欒壊 */
+}
+
+/* 鎻忚堪鏂囨湰鏍峰紡 */
+.description-text {
+  position: relative;
+  z-index: 2;
+  padding: 12px 16px;
+  background: transparent;
+  line-height: 1.6;
+  font-size: 14px;
+  color: #555;
+  margin: 0;
+  word-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+  /* 纭繚鏂囧瓧涓嶄細澶暱閬尅姘村嵃 */
+  padding-right: 80px;
+  min-height: 20px;
+  display: block;
+}
+
+/* 寮瑰嚭灞傛牱寮� */
 .overlay {
   position: fixed;
   top: 0;
@@ -523,15 +951,87 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 10;
 }
+
 .popup {
   background-color: #fff;
   padding: 20px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 68vw;
-  /* 璁剧疆瀹藉害涓鸿鍙e搴︾殑80% */
   height: 25vh;
-  /* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */
+  border-radius: 8px;
+}
+
+.popup h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+  font-size: 16px;
+  text-align: center;
+}
+
+.popup .form-group {
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup .form-label {
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.popup .form-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.popup-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.updateBut {
+  background-color: #3498db;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 4px;
+  margin-right: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.updateBut:hover {
+  background-color: #2980b9;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 500px) {
+  .info-row,
+  .info-block {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .inspection-table table {
+    display: block;
+    overflow-x: auto;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/QC/XJ/ImageItem.vue b/pages/QC/XJ/ImageItem.vue
index 944e46a..dfbb674 100644
--- a/pages/QC/XJ/ImageItem.vue
+++ b/pages/QC/XJ/ImageItem.vue
@@ -5,25 +5,34 @@
     <view>
       <view class="uni-common-mt">
         <view class="uni-list list-pd" style="padding: 15px;">
-          <view class="uni-flex" style="margin-bottom: 10px;">
-            <view class="uni-list-cell-left">鐐瑰嚮鍙瑙堥�夊ソ鐨勫浘鐗�</view>
-            <view style="margin-left: auto;">
-              <text class="click-t">{{ qsImage.length }}/{{ countIndex + 1 }}</text>
+          <view class="image-header">
+            <view class="header-title">
+              <uni-icons color="#3498db" size="20" type="image"></uni-icons>
+              <view class="title-text">鍥剧墖绠$悊</view>
             </view>
+            <view class="image-counter">
+              <view class="counter-text">{{ qsImage.length }}/{{ countIndex + 1 }}</view>
+            </view>
+          </view>
+          <view class="description-text">
+            <view>鐐瑰嚮鍥剧墖鍙瑙堬紝鐐瑰嚮鍒犻櫎鎸夐挳鍙Щ闄ゅ浘鐗�</view>
           </view>
           <view class="uni-flex" style="flex-wrap: wrap;">
             <view v-for="(image,index) in qsImage" :key="index" class="uni-uploader__input-box"
                   style="position: relative; border: 0;">
-              <image :src="image.img" :data-src="image.img"
+              <image :data-src="image.img" :src="image.img"
                      @tap="previewImage(index)"></image>
-              <image src="/static/plus.png" class="image-remove" @click="removeImage(index,image.id)"></image>
+              <image class="image-remove" src="/static/plus.png" @click="removeImage(index,image.id)"></image>
             </view>
-            <image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
+            <image class="uni-uploader__input-box" src="/static/plus.png" @tap="chooseImage"></image>
           </view>
         </view>
       </view>
-      <view class="plus-button">
-        <button type="warn" @click="save">涓婁紶鍥剧墖</button>
+      <view class="action-buttons">
+        <button class="save-btn" @click="save">
+          <uni-icons color="#fff" size="16" type="cloud-upload"></uni-icons>
+          淇濆瓨鍥剧墖
+        </button>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -33,7 +42,7 @@
 
 <script>
 
-import {pathToBase64, base64ToPath} from '../../../js_sdk/mmmm-image-tools/index'
+import {pathToBase64} from '../../../js_sdk/mmmm-image-tools/index'
 
 var sourceTypeArray = [
   ['camera'],
@@ -180,8 +189,49 @@
 </script>
 
 <style>
-.click-t {
-  color: darkgray;
+/* 澶撮儴鏍峰紡 */
+.image-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.image-counter {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.counter-text {
+  color: white;
+}
+
+.description-text {
+  color: #7f8c8d;
+  font-size: 14px;
+  margin-bottom: 15px;
+  padding: 8px 12px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border-left: 3px solid #3498db;
 }
 
 .list-pd {
@@ -190,38 +240,79 @@
 
 .uni-uploader__input-box {
   margin: 5px;
-  border: 1px solid #D9D9D9;
+  border: 2px solid #E8E8E8;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.uni-uploader__input-box:hover {
+  border-color: #3498db;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
 }
 
 .image-remove {
   transform: rotate(45deg);
-  width: 25px;
-  height: 25px;
+  width: 24px;
+  height: 24px;
   position: absolute;
-  top: 0;
-  right: 0;
-  border-radius: 13px;
-  background-color: #FF0000;
+  top: -8px;
+  right: -8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
+  transition: all 0.2s;
+  z-index: 10;
+}
+
+.image-remove:active {
+  transform: rotate(45deg) scale(0.9);
 }
 
 .uni-common-mt {
   background-color: #ffffff;
-  /* 绾㈣壊鑳屾櫙 */
+  min-height: 100vh;
 }
 
-.plus-button {
+/* 鎿嶄綔鎸夐挳鏍峰紡 */
+.action-buttons {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
-  background-color: #ffffff; /* 鑳屾櫙棰滆壊 */
-  padding: 10px;
-  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 娣诲姞搴曢儴闃村奖鏁堟灉 */
-  z-index: 999; /* 纭繚鎸夐挳浣嶄簬椤跺眰 */
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 1) 100%);
+  padding: 20px 15px 15px;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+}
+
+.save-btn {
+  width: 100%;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+  transition: all 0.3s;
+}
+
+.save-btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
 }
 
 .uni-flex {
-  max-height: calc(100vh - 240px); /* 灞忓箷楂樺害鍑忓幓涓婁紶鎸夐挳楂樺害 */
-  overflow-y: auto; /* 褰撳唴瀹硅秴鍑洪珮搴︽椂鍑虹幇鍨傜洿婊氬姩鏉� */
+  max-height: calc(100vh - 280px);
+  overflow-y: auto;
+  padding-bottom: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/pages/QC/XJ/List.vue b/pages/QC/XJ/List.vue
index 78147a2..4a165a2 100644
--- a/pages/QC/XJ/List.vue
+++ b/pages/QC/XJ/List.vue
@@ -1,187 +1,89 @@
 <template>
-  <view>
+  <view class="inspection-app">
     <!-- 鍒锋柊椤甸潰鍚庣殑椤堕儴鎻愮ず妗� -->
-    <view class="tips" :class="{ 'tips-ani': tipShow }">鍒锋柊鎴愬姛</view>
+    <view :class="{ 'tips-ani': tipShow }" class="tips">鍒锋柊鎴愬姛</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+'&releaseNo='+item.releaseNo">
-              <!-- 閫氳繃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.releaseNo"/>
-                </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.createDate"/>
-                      </view>
-                    </view>
-                    <view class="uni-note" >
-                      <view class="form-group">
-                        <label class="form-label lab">鍒涘缓浜�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
-                      </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.daa020"/>
-                      </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.itemName"/>
-                      </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.itemModel"/>
-                      </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.planQty"/>
-                      </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.fcheckBy"/>
-                      </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.fcheckResu"/>
-                      </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+'&releaseNo='+item.releaseNo">
-              <!-- 閫氳繃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.releaseNo"/>
-                </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.createDate"/>
-                      </view>
-                    </view>
-                    <view class="uni-note" >
-                      <view class="form-group">
-                        <label class="form-label lab">鍒涘缓浜�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
-                      </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.daa020"/>
-                      </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.itemName"/>
-                      </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.itemModel"/>
-                      </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.planQty"/>
-                      </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.fcheckBy"/>
-                      </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.fcheckResu"/>
-                      </view>
-                    </view>
-                  </view>
-                </view>
-              </template>
-            </uni-list-item>
-          </uni-list>
+    <!-- 椤堕儴绛涢�夊尯 -->
+    <view class="filter-section">
+      <view class="filter-controls" style="margin-bottom: 5px;">
+        <view class="status-tabs">
+          <button :class="['tab-button', current === 0 ? 'active' : '']"
+                  @click="onClickItem({currentIndex: 0})">鏈彁浜�({{ uncheckedCount }})
+          </button>
+          <button :class="['tab-button', current === 1 ? 'active' : '']"
+                  @click="onClickItem({currentIndex: 1})">宸叉彁浜�({{ checkedCount }})
+          </button>
         </view>
       </view>
+
+      <view class="filter-controls" style="margin-bottom: 5px;">
+        <view class="search-container">
+          <input v-model="searchValue" class="search-input" placeholder="璇疯緭鍏ユ楠屽崟鍙锋垨鐗╂枡缂栫爜"
+                 @confirm="handleSearch"/>
+          <button class="search-button" @click="handleSearch">鎼滅储</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 妫�楠屽崟鍒楄〃 -->
+    <view class="inspection-list">
+      <!-- 妫�楠屽崟鍗$墖 -->
+      <view v-for="item in data" :key="item.id" class="inspection-card"
+            @click="navigateToDetail(item)">
+        <view class="card-header">
+          <view class="card-title">妫�楠屽崟鍙�: {{ item.releaseNo }}</view>
+          <view :class="{'status-pending': current === 0, 'status-pass': current === 1 && item.fcheckResu === '鍚堟牸', 'status-fail': current === 1 && item.fcheckResu === '涓嶅悎鏍�'}"
+                class="status">
+            {{ current === 0 ? '鏈彁浜�' : (item.fcheckResu ? item.fcheckResu : '宸叉彁浜�') }}
+          </view>
+        </view>
+
+        <view class="card-body">
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">鐗╂枡淇℃伅</view>
+              <view class="info-content">{{ item.itemNo }} | {{ item.itemName }}<br>{{ item.itemModel }}</view>
+            </view>
+          </view>
+
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">浜х嚎</view>
+              <view class="info-content">{{ item.daa020 }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">宸ュ崟鏁伴噺</view>
+              <view class="info-content highlight">{{ item.planQty }}</view>
+            </view>
+          </view>
+
+          <view class="info-row">
+            <view class="info-item">
+              <view class="info-label">鍒涘缓浜�</view>
+              <view class="info-content">{{ item.createBy }}</view>
+            </view>
+            <view v-if="item.fcheckBy" class="info-item">
+              <view class="info-label">妫�楠屼汉</view>
+              <view class="info-content">{{ item.fcheckBy }}</view>
+            </view>
+          </view>
+
+          <view class="meta-info">
+            <view class="meta-item">{{ item.createDate }}</view>
+            <view class="meta-item">鍒涘缓浜�: {{ item.createBy }}</view>
+            <view v-if="item.fcheckResu" class="meta-item">妫�楠岀粨鏋�: {{ item.fcheckResu }}</view>
+          </view>
+        </view>
+
+        <view class="card-actions">
+          <button class="primary">{{ current === 0 ? '缁х画妫�楠�' : '鏌ョ湅璇︽儏' }}</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 娣诲姞鎸夐挳 -->
+    <view v-if="current === 0" class="plus-button" @click="handleFabClick">
+      <view class="plus-icon">+</view>
     </view>
   </view>
 </template>
@@ -194,7 +96,16 @@
       items: ['鏈彁浜�', '宸叉彁浜�'],
       current: 0,
       data: [],
-      tipShow: false // 鏄惁鏄剧ず椤堕儴鎻愮ず妗�
+      pageIndex: 1,
+      limit: 20,
+      totalPage: 0,
+      totalCount: 0,
+      noData: false, // 娌℃湁鏇村鏁版嵁浜�
+      isLoading: false, // 鏄惁姝e湪鍔犺浇
+      tipShow: false, // 鏄惁鏄剧ず椤堕儴鎻愮ず妗�
+      searchValue: '',
+      uncheckedCount: 0,
+      checkedCount: 0
     };
   },
   onLoad() {
@@ -202,25 +113,59 @@
     this.init();
   },
   methods: {
+    handleSearch() {
+      this.pageIndex = 1;
+      this.data = [];
+      this.init();
+    },
     init() {
-
       let result = "鏈畬鎴�";
       if (this.current === 1) {
         result = "宸插畬鎴�";
       }
 
+      if (this.isLoading) return; // 濡傛灉姝e湪鍔犺浇鍒欎笉缁х画鎵ц
+
+      this.isLoading = true;
+
+      //鑾峰彇褰撳墠鐧诲綍鐨勭敤鎴�
+      let userName = this.$loginInfo.account;
+
       //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
       this.$post({
-        url: "/XJ/getPage",
+        url: "/XJ/GetPage",
         data: {
-          pageIndex: 1,
-          limit: 20,
-          createUser: this.$loginInfo.account,
-          result: result
+          pageIndex: this.pageIndex,
+          limit: this.limit,
+          createUser: userName,
+          result: result,
+          searchValue: this.searchValue
         }
       }).then(res => {
-        this.data = res.data.tbBillList;
-      })
+        if (this.pageIndex === 1) {
+          // 濡傛灉鏄涓�椤碉紝鐩存帴瑕嗙洊鍘熸暟鎹�
+          this.data = res.data.tbBillList;
+        } else {
+          if (res.data.tbBillList.length > 0) {
+            // 濡傛灉鏄笅涓�椤碉紝杩藉姞鏂版暟鎹�
+            this.data = [...this.data, ...res.data.tbBillList];
+          }
+        }
+        this.totalCount = res.totalCount;
+        this.totalPage = Math.ceil(this.totalCount / this.limit);
+
+        this.noData = this.pageIndex >= this.totalPage;
+        this.isLoading = false; // 缁撴潫鍔犺浇
+
+        // 鏇存柊璁℃暟
+        if (this.current === 1) {
+          this.checkedCount = this.totalCount;
+        } else {
+          this.uncheckedCount = this.totalCount;
+        }
+      }).catch(() => {
+        this.isLoading = false; // 鍑虹幇閿欒鏃剁粨鏉熷姞杞�
+      });
     },
     handleFabClick() {
       uni.navigateTo({
@@ -230,21 +175,29 @@
     onClickItem(index) {
       if (this.current !== index.currentIndex) {
         this.current = index.currentIndex;
+        this.data = [];
+        this.pageIndex = 1;
         this.init();
       }
     },
+    navigateToDetail(item) {
+      uni.navigateTo({
+        url: 'Add?id=' + item.id + '&releaseNo=' + item.releaseNo
+      });
+    }
   },
   /**
    * 涓嬫媺鍒锋柊鍥炶皟鍑芥暟
    */
   onPullDownRefresh() {
+    this.pageIndex = 1;
     //閲嶆柊鎵ц涓�閬嶆煡璇�
     this.init();
     this.tipShow = true;
     //鍏抽棴鍔ㄧ敾
     uni.stopPullDownRefresh();
 
-    setTimeout(function () {
+    setTimeout(() => {
       this.tipShow = false;
     }, 3000);
   },
@@ -252,52 +205,248 @@
    * 涓婃媺鍔犺浇鍥炶皟鍑芥暟
    */
   onReachBottom() {
-    this.init();
+    if (this.noData || this.isLoading) return;
+    this.pageIndex++;
+    this.init(); // 鍔犺浇鏇村鏁版嵁
   },
   onShow() {
     //姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
+    this.pageIndex = 1;
+    this.data = [];
     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 {
+/* 鎼滅储妗嗘牱寮� */
+.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: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  font-size: 14px;
+  margin: 0;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.search-button:hover {
+  background: linear-gradient(135deg, #2980b9, #1f618d);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+}
+
+.search-button:active {
+  transform: translateY(0);
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.status-tabs {
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #ecf0f1;
+  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: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+}
+
+/* 妫�楠屽崟鍒楄〃 */
+.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 ease;
+  border: 1px solid rgba(52, 152, 219, 0.1);
+}
+
+.inspection-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(52, 152, 219, 0.3);
+}
+
+.card-header {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
   display: flex;
   align-items: center;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
 }
 
-.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;
-  font-size: 12px;
-  background-color: #FFFFFF;
-  /* Adjust the font size as per your requirement */
+  margin: 0 8px;
+  color: #2c3e50;
 }
 
+.status {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.status-pending {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  color: white;
+}
+
+.status-pass {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  color: white;
+}
+
+.status-fail {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  color: white;
+}
+
+.card-body {
+  padding: 16px;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 12px;
+  gap: 16px;
+}
+
+.info-item {
+  flex: 1;
+}
+
+.info-label {
+  display: block;
+  font-size: 12px;
+  color: #7f8c8d;
+  margin-bottom: 4px;
+}
+
+.info-content {
+  font-size: 14px;
+  color: #2c3e50;
+  line-height: 1.5;
+}
+
+.highlight {
+  font-weight: 600;
+  color: #e74c3c;
+  font-size: 16px;
+}
+
+.meta-info {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #95a5a6;
+  margin-top: 12px;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.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: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  border-color: #2980b9;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
+  transition: all 0.3s ease;
+}
+
+button.primary:hover {
+  background: linear-gradient(135deg, #2980b9, #1f618d);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
+}
+
+button.primary:active {
+  transform: translateY(0);
+}
+
+/* 娣诲姞鎸夐挳鏍峰紡 */
 .plus-button {
   position: fixed;
   bottom: 20px;
@@ -305,25 +454,50 @@
   width: 60px;
   height: 60px;
   border-radius: 50%;
-  background-color: #007bff;
+  background: linear-gradient(135deg, #3498db, #2980b9);
   color: #ffffff;
   text-align: center;
   line-height: 59px;
   font-size: 24px;
   cursor: pointer;
   z-index: 1000;
-  margin-bottom: 35px;
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
+  transition: all 0.3s ease;
 }
 
-page {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  background-color: #efeff4;
-  min-height: 100%;
-  height: auto;
+.plus-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.5);
 }
 
+.plus-button:active {
+  transform: translateY(0);
+}
+
+/* 鍝嶅簲寮忚璁� */
+@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;
+  }
+}
+
+/* 鍒锋柊鎻愮ず鏍峰紡 */
 .tips {
   color: #67c23a;
   font-size: 14px;
@@ -340,38 +514,5 @@
   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>
\ No newline at end of file
diff --git a/pages/QC/XJ/detail.vue b/pages/QC/XJ/detail.vue
index 4ad5f47..6383ad3 100644
--- a/pages/QC/XJ/detail.vue
+++ b/pages/QC/XJ/detail.vue
@@ -1,128 +1,218 @@
 <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 class="container">
+    <!-- 澶撮儴 -->
+    <view class="header">
+      <view class="title">宸℃椤圭洰鏄庣粏</view>
+      <view class="order-number">褰撳墠妫�楠屽崟鍙�: {{ billNo }}</view>
     </view>
-    <view>
-      <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/>
+
+    <!-- 鏍囩鏍� -->
+    <view class="tabs-container">
+      <scroll-view class="tabs" scroll-x="true" show-scrollbar="false">
+        <view v-for="(tab, index) in tabs" :key="index" :class="{active: currentTab === index}" class="tab"
+              @tap="switchTab(index, tab.id)">
+          {{ tab.projName || tab.fcheckItem || '椤圭洰' + (index + 1) }}
+        </view>
+      </scroll-view>
     </view>
-    <view class="list-container">
-      <uni-table ref="table" border emptyText="鏆傛棤鏇村鏁版嵁">
-        <uni-tr>
-          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">缂栧彿</uni-th>
-          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">鍒ゅ畾鏍囪瘑</uni-th>
-          <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">妫�楠岀粨鏋�</uni-th>
-          <uni-th width="150" align="center"
-                  style="color: #FFFFFF;background-color: lightskyblue;">淇敼
-          </uni-th>
-        </uni-tr>
-        <uni-tr v-for="(item, index) in tableData" :key="index">
-          <uni-td align="center">
-            {{ index + 1 }}
-          </uni-td>
-          <uni-td align="center">
-            <input class="form-input" disabled="true" type="text" v-model="item.fstand"/>
-          </uni-td>
-          <uni-td align="center">
-            <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
-          </uni-td>
-          <uni-td>
-            <view class="uni-group">
-              <button type="warn" v-if="isNumber" @click="toDetail(item)">淇敼</button>
-              <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button>
+
+    <view class="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>
-          </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 class="info-item">
+              <view class="info-label">璐ㄩ噺瑕佹眰</view>
+              <view class="info-value">{{ formData.itemMod }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾柟娉�</view>
+              <view class="info-value">{{ formData.inspectionMethod }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">浣跨敤浠〃</view>
+              <view class="info-value">{{ formData.usingInstruments }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">妫�楠屾暟</view>
+              <view class="info-value">{{ formData.levelNum }}</view>
+            </view>
+            <view v-if="formData.minValue" class="info-item">
+              <view class="info-label">涓嬮檺</view>
+              <view class="info-value">{{ formData.minValue }}</view>
+            </view>
+            <view v-if="formData.standardValue" class="info-item">
+              <view class="info-label">鏍囧噯鍊�</view>
+              <view class="info-value">{{ formData.standardValue }}</view>
+            </view>
+            <view v-if="formData.maxValue" class="info-item">
+              <view class="info-label">涓婇檺</view>
+              <view class="info-value">{{ formData.maxValue }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">鏇存柊浜�</view>
+              <view class="info-value">{{ formData.updater }}</view>
+            </view>
+            <view class="info-item">
+              <view class="info-label">鏇存柊鏃堕棿</view>
+              <view class="info-value">{{ formData.updateTime }}</view>
+            </view>
           </view>
-          <button type="warn" @click="editRemarks">淇敼</button>
-          <button @click="remarksPopup = !remarksPopup">鍙栨秷</button>
-        </form>
+        </view>
       </view>
-    </view>
 
-    <view v-if="showPopup" class="overlay">
-      <view class="popup">
-        <h3>淇敼妫�楠岀粨鏋�</h3>
-        <form :modelValue="editData">
-          <view class="form-group">
-            <label class="form-label">妫�楠岀粨鏋�:</label>
-            <input class="form-input" type="text" v-model="editData.fcheckResu"/>
+      <!-- 妫�楠岀粨鏋� -->
+      <view class="section">
+        <view class="section-header">妫�楠岀粨鏋�</view>
+        <view class="section-body">
+          <view class="info-grid">
+            <view v-if="formData.result" class="info-item">
+              <view class="info-label">棰勮缁撴灉</view>
+              <view class="info-value">{{ formData.result }}</view>
+            </view>
+            <view v-if="formData.remarks" class="info-item">
+              <view class="info-label">涓嶅悎鏍兼弿杩�</view>
+              <view class="info-value danger">{{ formData.remarks }}</view>
+            </view>
           </view>
-          <button type="warn" @click="eidt">淇敼</button>
-          <button @click="showPopup = !showPopup">鍙栨秷</button>
-        </form>
+        </view>
+      </view>
+
+      <!-- 缁撴灉褰曞叆 -->
+      <view class="section">
+        <view class="section-header">妫�楠岀粨鏋滃綍鍏�</view>
+        <view class="section-body">
+          <view v-if="!formData.maxValue && !formData.minValue" class="info-item edit">
+            <view class="info-label" style="color: #F56C6C">鎻愮ず</view>
+            <view class="info-value" style="color: #F56C6C">娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級</view>
+          </view>
+
+          <view class="input-group input1">
+            <view class="input-wrapper">
+              <input v-if="tableData.length < formData.levelNum" v-model="formData.fcheckResu" class="result-input"
+                     placeholder="璇疯緭鍏ユ楠岀粨鏋�..." type="number"/>
+              <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit">淇濆瓨缁撴灉
+              </button>
+              <button v-if="isShowImg" class="btn upload-btn" @click="previewImage">
+                <uni-icons color="#fff" size="16" type="image"></uni-icons>
+                鏌ョ湅鍥剧墖
+              </button>
+              <button class="btn upload-btn" @click="saveRemarks">
+                <uni-icons color="#fff" size="16" type="compose"></uni-icons>
+                涓嶅悎鏍兼弿杩�
+              </button>
+            </view>
+          </view>
+
+          <!-- 鍝嶅簲寮忚璁$殑绗簩涓緭鍏ョ粍 -->
+          <view class="input-group input2">
+            <view class="input-wrapper">
+              <button v-if="isShowImg" class="btn upload-btn" @click="previewImage">
+                <uni-icons color="#fff" size="16" type="image"></uni-icons>
+                鏌ョ湅鍥剧墖
+              </button>
+              <button class="btn upload-btn" @click="saveRemarks">
+                <uni-icons color="#fff" size="16" type="compose"></uni-icons>
+                涓嶅悎鏍兼弿杩�
+              </button>
+            </view>
+            <view class="input-wrapper" style="margin-top: 15px;">
+              <input v-if="tableData.length < formData.levelNum" v-model="formData.fcheckResu" class="result-input"
+                     placeholder="璇疯緭鍏ユ楠岀粨鏋�..." type="number"/>
+              <button v-if="tableData.length < formData.levelNum" class="btn primary-btn" @click="submit">淇濆瓨缁撴灉
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 缁撴灉琛ㄦ牸 -->
+      <view v-if="tableData.length > 0" class="simple-table-container">
+        <view class="simple-table-header">
+          <view class="simple-title">妫�楠岃褰� ({{ tableData.length }}/{{ formData.levelNum }})</view>
+          <view :class="{'completed': !(tableData.length < formData.levelNum)}" class="simple-status">
+            {{ tableData.length < formData.levelNum ? '杩涜涓�' : '宸插畬鎴�' }}
+          </view>
+        </view>
+
+        <view class="simple-table">
+          <view class="simple-header-row">
+            <view class="simple-header-cell">缂栧彿</view>
+            <view class="simple-header-cell">妫�楠岀粨鏋�</view>
+            <view class="simple-header-cell">鎿嶄綔</view>
+          </view>
+
+          <view v-for="(item, index) in tableData" :key="index" class="simple-data-row">
+            <view class="simple-data-cell simple-index">
+              {{ index + 1 }}
+            </view>
+            <view class="simple-data-cell simple-result">
+              <!-- 鏁板瓧缁撴灉鏍峰紡 -->
+              <view v-if="isNumber && !isNaN(parseFloat(item.fcheckResu))" class="simple-number-result">
+                <view class="result-value">{{ item.fcheckResu }}</view>
+                <view v-if="formData.unitName" class="result-unit">{{ formData.unitName }}</view>
+                <view :class="{'pass': isInRange(item.fcheckResu), 'fail': !isInRange(item.fcheckResu)}"
+                      class="result-status">
+                  {{ isInRange(item.fcheckResu) ? '鍚堟牸' : '涓嶅悎鏍�' }}
+                </view>
+              </view>
+
+              <!-- NG/OK鐘舵�佹牱寮� -->
+              <view v-else class="simple-status-result">
+                <view :class="{'pass': item.fcheckResu === '1', 'fail': item.fcheckResu !== '1'}" class="simple-status">
+                  {{ item.fcheckResu === '1' ? '鍚堟牸' : '涓嶅悎鏍�' }}
+                </view>
+              </view>
+            </view>
+            <view class="simple-data-cell simple-action">
+              <button v-if="!isNumber" class="simple-btn" @click="numberEdit(item)">
+                {{ editResult(item.fcheckResu) }}
+              </button>
+              <button v-if="isNumber" class="simple-btn" @click="toDetail(item)">
+                淇敼
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 寮瑰嚭灞� - 涓嶅悎鏍兼弿杩� -->
+      <view v-if="remarksPopup" class="overlay">
+        <view class="popup">
+          <h3>淇敼涓嶅悎鏍兼弿杩�</h3>
+          <form>
+            <view class="form-group">
+              <label class="form-label">涓嶅悎鏍兼弿杩�:</label>
+              <input v-model="remarks" class="form-input" placeholder="璇疯緭鍏ヤ笉鍚堟牸鎻忚堪" type="text"/>
+            </view>
+            <view class="popup-buttons">
+              <button class="btn primary-btn" type="warn" @click="editRemarks">淇敼</button>
+              <button class="btn cancel-btn" @click="remarksPopup = !remarksPopup">鍙栨秷</button>
+            </view>
+          </form>
+        </view>
+      </view>
+
+      <!-- 寮瑰嚭灞� - 淇敼妫�楠岀粨鏋� -->
+      <view v-if="showPopup" class="overlay">
+        <view class="popup">
+          <h3>淇敼妫�楠岀粨鏋�</h3>
+          <form :modelValue="editData">
+            <view class="form-group">
+              <label class="form-label">妫�楠岀粨鏋�:</label>
+              <input v-model="editData.fcheckResu" class="form-input" placeholder="璇疯緭鍏ユ楠岀粨鏋�" type="text"/>
+            </view>
+            <view class="popup-buttons">
+              <button class="btn primary-btn" type="warn" @click="eidt">淇敼</button>
+              <button class="btn cancel-btn" @click="showPopup = !showPopup">鍙栨秷</button>
+            </view>
+          </form>
+        </view>
       </view>
     </view>
   </view>
@@ -142,12 +232,47 @@
       editData: {},
       tableData: [],
       isShowImg: false,
-      base64Image:"",
+      base64Image: "",
       remarks: "",
       remarksPopup: false,
+      currentTab: 0,
+      tabs: []
     }
   },
   methods: {
+    // 鍒囨崲鏍囩椤�
+    switchTab(index, id) {
+      this.currentTab = index;
+      this.id = id;
+      this.refreshResult();
+    },
+
+    // 鍔犺浇鏍囩椤�
+    loadTabItems() {
+      this.$post({
+        url: "/XJ/getJYItem",
+        data: {
+          pid: this.gid,
+        }
+      }).then(res => {
+        if (res.data && res.data.tbBillList) {
+          this.tabs = res.data.tbBillList;
+          // 鎸夋娴嬬粨鏋滄帓搴忥紝鏈畬鎴愮殑鎺掑湪鍓嶉潰
+          this.tabs.sort((a, b) => {
+            if (a.result === '鏈畬鎴�' && b.result !== '鏈畬鎴�') {
+              return -1;
+            } else if (a.result !== '鏈畬鎴�' && b.result === '鏈畬鎴�') {
+              return 1;
+            } else {
+              return 0;
+            }
+          });
+        } else {
+          // 娌℃湁椤圭洰鏃惰嚦灏戞坊鍔犲綋鍓嶉」鐩埌鏍囩
+          this.tabs = [{id: this.id, projName: this.formData.projName || '褰撳墠椤圭洰'}];
+        }
+      });
+    },
 
     previewImage() {
       uni.previewImage({
@@ -347,6 +472,22 @@
           }
         })
       }
+    },
+    // 鍒ゆ柇鏁板瓧鏄惁鍦ㄨ寖鍥村唴
+    isInRange(value) {
+      if (!this.formData.maxValue || !this.formData.minValue) return true;
+      const numValue = parseFloat(value);
+      return numValue >= parseFloat(this.formData.minValue) &&
+          numValue <= parseFloat(this.formData.maxValue);
+    },
+    // 鑾峰彇鏁板瓧缁撴灉鐨勬牱寮忕被
+    getNumberResultClass(value) {
+      if (!this.formData.maxValue || !this.formData.minValue) return 'number-normal';
+      return this.isInRange(value) ? 'number-pass' : 'number-fail';
+    },
+    // 鑾峰彇鐘舵�佺粨鏋滅殑鏍峰紡绫�
+    getStatusClass(status) {
+      return status === '鈭�' ? 'status-pass' : 'status-fail';
     }
   },
   onLoad(options) {
@@ -356,55 +497,479 @@
     this.id = params["id"];
     this.billNo = params["billNo"];
     this.gid = params["gid"];
+    this.currentTab = parseInt(params["index"] || 0);
 
     this.refreshResult();
+    this.loadTabItems();
   }
 }
 </script>
 
-<style>
-.form-group {
+<style lang="scss">
+$primary-color: #409EFF;
+$success-color: #67C23A;
+$danger-color: #F56C6C;
+$border-color: #DCDFE6;
+$bg-color: #f5f7fa;
+
+.container {
+  padding: 20px;
+  background-color: #fff;
+}
+
+.header {
+  padding: 20px;
+  border-bottom: 1px solid $border-color;
+  background: linear-gradient(90deg, #f0f7ff, #e1f0ff);
+  margin-bottom: 0; /* 璋冩暣锛屽洜涓轰笅闈㈡湁tab鏍� */
+}
+
+.header .title {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.header .order-number {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 鏍囩鏍忔牱寮� */
+.tabs-container {
+  width: 100%;
+  position: relative;
+  background-color: $bg-color;
+  border-bottom: 1px solid $border-color;
+}
+
+.tabs {
   display: flex;
-  align-items: center;
-  border: 1px solid #c9c9c9;
-  background-color: #d4d4d4;
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
 }
 
-.form-label {
-  margin-bottom: 0;
-  padding: 5px;
+.tabs::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
 }
 
-.form-input {
-  flex: 1;
-  margin-bottom: 0;
-  padding: 5px;
+.tab {
+  display: inline-block;
+  padding: 12px 20px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  border-right: 1px solid $border-color;
+  min-width: 100px;
 }
 
-/* 榛樿鏍峰紡 */
-.list-container {
-  height: calc(100vh - 750px);
-  /* 璁剧疆鍒楄〃瀹瑰櫒鐨勯珮搴︿负鍓╀綑绌洪棿锛屽苟鍑忓幓琛ㄥ崟瀹瑰櫒鐨勯珮搴� */
-  overflow-y: auto;
-  /* 鍏佽鍒楄〃瀹瑰櫒鍨傜洿婊氬姩 */
-  padding: 10px;
-  /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇鍒楄〃鍐呭鏇寸編瑙� */
+.tab.active {
+  background-color: #fff;
+  color: $primary-color;
+  font-weight: bold;
+  position: relative;
 }
 
-/* 鍦ㄥ皬灞忓箷璁惧涓婏紝閲嶇疆楂樺害涓洪�傚簲灞忓箷 */
-@media (max-width: 768px) {
-  .list-container {
-    height: calc(100vh - 485px);
-    /* 閫傚綋璋冩暣楂樺害 */
+.tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: $primary-color;
+}
+
+.tab-content {
+  padding-top: 20px;
+}
+
+.section {
+  margin: 20px 0;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+
+  &-header {
+    padding: 12px 16px;
+    background-color: $bg-color;
+    border-bottom: 1px solid $border-color;
+    font-weight: bold;
+  }
+
+  &-body {
+    padding: 16px;
   }
 }
 
-.form-container {
-  /* 璁剧疆琛ㄥ崟瀹瑰櫒鐨勯珮搴︼紝浣垮叾鍙互婊氬姩 */
-  overflow-y: auto;
-  /* 鍏佽琛ㄥ崟瀹瑰櫒鍨傜洿婊氬姩 */
-  padding: 10px;
-  /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇琛ㄥ崟鍐呭鏇寸編瑙� */
+.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;
+    }
+  }
+}
+
+/* 绠�娲佽〃鏍兼牱寮� - 閫傚悎骞撮暱鐢ㄦ埛 */
+.simple-table-container {
+  margin: 20px 0;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.simple-table-header {
+  padding: 15px 20px;
+  background: #f5f7fa;
+  border-bottom: 2px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.simple-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.simple-status {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  background: #ffc107;
+  color: #333;
+}
+
+.simple-status.completed {
+  background: #28a745;
+  color: #fff;
+}
+
+.simple-table {
+  width: 100%;
+}
+
+.simple-header-row {
+  display: flex;
+  background: #e9ecef;
+  border-bottom: 2px solid #ddd;
+}
+
+.simple-header-cell {
+  flex: 1;
+  padding: 15px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  border-right: 1px solid #ddd;
+}
+
+.simple-header-cell:first-child {
+  flex: 0 0 80px;
+}
+
+.simple-header-cell:last-child {
+  border-right: none;
+  flex: 0 0 120px;
+}
+
+.simple-data-row {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+}
+
+.simple-data-row:nth-child(even) {
+  background: #f8f9fa;
+}
+
+.simple-data-cell {
+  flex: 1;
+  padding: 15px 20px;
+  text-align: center;
+  border-right: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.simple-index {
+  flex: 0 0 80px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.simple-result {
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.simple-action {
+  border-right: none;
+  flex: 0 0 120px;
+}
+
+.simple-number-result {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.result-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
+
+.result-unit {
+  font-size: 14px;
+  color: #666;
+}
+
+.result-status {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: auto;
+}
+
+.result-status.pass {
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.result-status.fail {
+  background: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+.simple-status-result {
+  width: 100%;
+}
+
+.simple-status {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+}
+
+.simple-status.pass {
+  background: #28a745;
+  color: #fff;
+}
+
+.simple-status.fail {
+  background: #dc3545;
+  color: #fff;
+}
+
+.simple-btn {
+  padding: 10px 16px;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  min-width: 80px;
+}
+
+.simple-btn:active {
+  background: #0056b3;
+}
+
+// 鏂扮殑缁撴灉鏄剧ず鏍峰紡
+.result-display {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+// 鏁板瓧缁撴灉鏍峰紡
+.number-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  min-width: 60px;
+  position: relative;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  &.number-pass {
+    background: linear-gradient(135deg, #e8f5e8, #f0f9f0);
+    border: 2px solid #67C23A;
+  }
+
+  &.number-fail {
+    background: linear-gradient(135deg, #fdeaea, #fef0f0);
+    border: 2px solid #F56C6C;
+  }
+
+  &.number-normal {
+    background: linear-gradient(135deg, #f5f7fa, #fafbfc);
+    border: 2px solid #909399;
+  }
+
+  .number-value {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 2px;
+  }
+
+  .number-unit {
+    font-size: 10px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .number-status {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    background: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 鐘舵�佺粨鏋滄牱寮�
+.status-result {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: bold;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+
+  &.status-pass {
+    background: linear-gradient(135deg, #67C23A, #85ce61);
+    color: white;
+  }
+
+  &.status-fail {
+    background: linear-gradient(135deg, #F56C6C, #f78989);
+    color: white;
+  }
+
+  .status-icon {
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  .status-text {
+    font-size: 14px;
+    letter-spacing: 0.5px;
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 淇濈暀鍘熸湁鏍峰紡浣滀负澶囩敤
+.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;
+  }
+}
+
+.btn {
+  padding: 8px 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1;
+
+  &.primary-btn {
+    background-color: $primary-color;
+    color: #fff;
+  }
+
+  &.danger-btn {
+    background-color: $danger-color;
+    color: #fff;
+  }
+
+  &.cancel-btn {
+    background-color: #909399;
+    color: #fff;
+  }
+}
+
+.danger {
+  color: $danger-color;
 }
 
 .overlay {
@@ -417,20 +982,101 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1000;
 }
 
 .popup {
   background-color: #fff;
   padding: 20px;
-  border: 1px solid #ccc;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  width: 68vw;
-  /* 璁剧疆瀹藉害涓鸿鍙e搴︾殑80% */
-  height: 25vh;
-  /* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  width: 80%;
+  max-width: 500px;
+
+  h3 {
+    margin-top: 0;
+    color: #2c3e50;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-label {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  .form-input {
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+
+  .popup-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+  }
 }
 
-.edit {
-  background-color: white;
+.input1 {
+  display: block;
+}
+
+.input2 {
+  display: none;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 500px) {
+  .input1 {
+    display: none;
+  }
+
+  .input2 {
+    display: block;
+  }
+
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .simple-table-header {
+    padding: 12px 16px;
+  }
+
+  .simple-title {
+    font-size: 16px;
+  }
+
+  .simple-header-cell,
+  .simple-data-cell {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+
+  .simple-index {
+    flex: 0 0 60px;
+  }
+
+  .simple-action {
+    flex: 0 0 100px;
+  }
+
+  .result-value {
+    font-size: 18px;
+  }
 }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3