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 + '¤t=' + 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"> 璐熻矗浜猴細</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 + '¤t=' + 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 + '¤t=B' - }) - } else { - uni.navigateTo({ - url: 'Add?id=' + item.id + '¤t=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