From 8b34fa36bfc735e53460159ac13814ff073c908a Mon Sep 17 00:00:00 2001 From: zjh <2207896513@qq.com> Date: 星期三, 23 四月 2025 19:41:11 +0800 Subject: [PATCH] 来料检页面大更新,适配手机,平板等多种设备 --- pages/QC/LLJ/detail.vue | 788 ++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 515 insertions(+), 273 deletions(-) diff --git a/pages/QC/LLJ/detail.vue b/pages/QC/LLJ/detail.vue index 5522bb2..c3ee72e 100644 --- a/pages/QC/LLJ/detail.vue +++ b/pages/QC/LLJ/detail.vue @@ -1,211 +1,277 @@ <template> - <view> - <view class="form-container"> - <form :modelValue="formData"> - <view class="form-group"> - <label class="form-label">椤圭洰鍚嶇О:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fcheckItem" /> - </view> - <view class="form-group"> - <label class="form-label">瑙勬牸瑕佹眰:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fspecRequ" /> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾弿杩�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fcheckItemDesc" /> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屽伐鍏�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fcheckTool" /> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾暟:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.checkQyt" /> - </view> - <view class="form-group"> - <label class="form-label">妫�楠屾爣鍑嗙紪鐮�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.sampleSizeNo" /> - </view> + <view class="container"> + <!-- 澶撮儴 --> + <view class="header"> + <view class="title">鏉ユ枡妫�楠岄」鐩槑缁�</view> + <view class="order-number">褰撳墠妫�楠屽崟鍙�: {{formData.releaseNo}}</view> + </view> - <view class="form-group"> - <label class="form-label">妫�楠屾按骞�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fcheckLevel" /> - </view> - <view class="form-group"> - <label class="form-label">鎺ユ敹姘村钩:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.facLevel" /> - </view> - <view class="form-group"> - <label class="form-label">涓嬮檺:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fdownAllow" /> - </view> - <view class="form-group"> - <label class="form-label">鏍囧噯鍊�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fstand" /> - </view> - <view class="form-group"> - <label class="form-label">涓婇檺:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fupAllow" /> - </view> - <view class="form-group"> - <label class="form-label">AC鏁�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.facQty" /> - </view> - <view class="form-group"> - <label class="form-label">RE鏁�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.freQty" /> - </view> - <view class="form-group"> - <label class="form-label">涓嶅悎鏍兼暟:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.fngQty" /> - </view> - <view class="form-group"> - <label class="form-label">棰勮缁撴灉:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.result" /> - </view> - <view class="form-group"> - <label class="form-label">涓嶅悎鏍兼弿杩�:</label> - <input class="form-input" disabled="true" type="text" v-model="formData.remarks" /> - </view> - <view class="form-group edit"> - <!-- <input class="form-input" style="color: red" disabled="true" type="text" - value="娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級" /> --> - </view> - <view class="form-group edit" v-if="tableData.length < formData.checkQyt"> - <label class="form-label">妫�娴嬬粨鏋�:</label> - <input class="form-input" type="number" v-model="formData.fcheckResu" /> - </view> - <view class="form-group edit" v-if="formData.isUpImg===1"> - <label class="form-label" style="text-align: center;color: red;">璇ラ」鐩负妫�楠屽浘鐗囧繀浼犻」鐩紝璇峰畬鎴愭楠屽悗涓婁紶鍥剧墖锛�</label> - </view> - <view class="form-group edit" v-if="!(tableData.length < formData.checkQyt)"> - <label class="form-label" style="text-align: center;color: red;">妫�娴嬬粨鏋滆緭鍏ュ凡瀹屾垚锛�</label> - </view> - <button type="primary" v-if="tableData.length < formData.checkQyt" @click="submit">淇濆瓨</button> - <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">涓婁紶/鏌ョ湅鍥剧墖</button> - </form> + <!-- 鏍囩鏍� --> + <view class="tabs"> + <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{active: currentTab === index}" + @tap="switchTab(index,tab.id)"> + {{ tab.fcheckItem }} + </view> </view> - <view> - <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage" /> - </view> - <view class="list-container"> - <uni-table ref="table" border emptyText="鏆傛棤鏇村鏁版嵁"> - <uni-tr> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">缂栧彿</uni-th> - <!-- <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">鍒ゅ畾鏍囪瘑</uni-th> --> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">妫�楠岀粨鏋�</uni-th> - <uni-th width="150" align="center" style="color: #FFFFFF;background-color: lightskyblue;">淇敼 - </uni-th> - </uni-tr> - <uni-tr v-for="(item, index) in tableData" :key="index"> - <uni-td align="center"> - {{ index + 1 }} - </uni-td> - <!-- <uni-td align="center"> - <input class="form-input" disabled="true" type="text" v-model="item.fstand"/> - </uni-td> --> - <uni-td align="center"> - <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu" /> - </uni-td> - <uni-td> - <view class="uni-group"> - <button type="warn" v-if="isNumber" @click="toDetail(item)">淇敼</button> - <button type="warn" v-if="!isNumber" - @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button> + <view class="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.fcheckItem }}</view> </view> - </uni-td> - </uni-tr> - </uni-table> - </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" /> + <view class="info-item"> + <view class="info-label">妫�楠屽伐鍏�</view> + <view class="info-value">{{ formData.fcheckTool }}</view> + </view> + <view class="info-item"> + <view class="info-label">妫�楠屾暟閲�</view> + <view class="info-value">{{ formData.checkQyt }}</view> + </view> + <view class="info-item"> + <view class="info-label">妫�楠屾爣鍑�</view> + <view class="info-value">{{ formData.sampleSizeNo }}</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.fdownAllow!=null" class="info-item"> + <view class="info-label">涓嬮檺</view> + <view class="info-value">{{ formData.fdownAllow }}</view> + </view> + <view v-if="formData.fstand!=null" class="info-item"> + <view class="info-label">鏍囧噯鍊�</view> + <view class="info-value">{{ formData.fstand }}</view> + </view> + <view v-if="formData.fupAllow!=null" class="info-item"> + <view class="info-label">涓婇檺</view> + <view class="info-value">{{ formData.fupAllow }}</view> + </view> </view> - <button type="warn" @click="eidt">淇敼</button> - <button @click="showPopup = !showPopup">鍙栨秷</button> - </form> + </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 type="warn" @click="editRemarks">淇敼</button> - <button @click="remarksPopup = !remarksPopup">鍙栨秷</button> - </form> + <!-- 瑙勬牸瑕佹眰 --> + <view class="section"> + <view class="section-header">瑙勬牸瑕佹眰</view> + <view class="section-body"> + <text class="spec-text">{{ formData.fspecRequ }}</text> + </view> </view> + <!-- 瑙勬牸瑕佹眰 --> + <view class="section"> + <view class="section-header">妫�楠屾弿杩�</view> + <view class="section-body"> + <text class="spec-text">{{ formData.fcheckItemDesc }}</text> + </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.facQty}}</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.fngQty}}</view> + </view> + </view> + + <view v-if="formData.result!=null" class="result-preview"> + <view class="info-label">棰勮缁撴灉</view> + <view class="info-value">{{formData.result}}</view> + </view> + + <view v-if="formData.remarks!=null" class="result-ng"> + <view class="info-label">涓嶈壇鎻忚堪</view> + <view class="info-value danger">{{formData.remarks}}</view> + </view> + </view> + </view> + + <!-- 缁撴灉褰曞叆 --> + <view class="section"> + <view class="section-header">妫�楠岀粨鏋滃綍鍏�</view> + <view class="section-body"> + <view class="input-group"> + <view class="input-wrapper"> + + <button class="btn upload-btn" @tap="chooseImage"> + <uni-icons type="upload" size="16" color="#fff"></uni-icons> + 涓婁紶/鏌ョ湅鍥剧墖 + </button> + <button v-if="this.current" class="btn upload-btn" @tap="upRemarks"> + <uni-icons type="compose" size="16" color="#fff"></uni-icons> + 涓嶈壇鎻忚堪 + </button> + <input v-if="(tableData.length < formData.checkQyt)" @input="search($event)" + v-model="inputTxt" type="text" class="result-input" placeholder="璇疯緭鍏ユ楠岀粨鏋�..." + placeholder-class="placeholder" /> + <button v-if="(tableData.length < formData.checkQyt)" + style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn" + @tap="saveResult">淇濆瓨缁撴灉</button> + </view> + </view> + </view> + </view> + + <!-- 缁撴灉琛ㄦ牸 --> + <view v-if="tableData.length>0" class="table-container"> + <view class="table-header"> + <view class="th">缂栧彿</view> + <view class="th">妫�楠岀粨鏋�<i style="color: rgb(0 212 68);" v-if="!(tableData.length < formData.checkQyt)">锛堣緭鍏ュ凡瀹屾垚锛�</i></view> + <view class="th" v-if="current">鎿嶄綔</view> + </view> + + <view v-for="(item, index) in tableData" :key="index" class="table-row"> + <view class="td">{{ index + 1 }}</view> + <view 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> </view> </template> <script> + import { + compile + } from "vue"; + export default { data() { return { formData: {}, + tableData: {}, + mainId: '', isNumber: false, - checkItem: "", - id: 0, - gid: 0, - billNo: "", + currentTab: 0, + tabs: [], + inputResult: '', + remarksPopup: false, showPopup: false, editData: {}, - tableData: [], - isShowImg: false, - base64Image: "", - remarks: "", - remarksPopup: false, + inputTxt: '', + formID:'', + releaseNo:'', + current:false } }, methods: { + switchTab(index,mainIds) { + this.currentTab = index + this.mainId = mainIds; + this.refreshResult(); + }, + //妫�娴嬭緭鍏ユ鐨勮緭鍏ワ紝骞剁粰鍙橀噺璧嬪�� + search(event) { + this.formData.fcheckResu = event.detail.value; + }, + toggleResult(item) { + let fstand = "鈭�"; + let fcheckResu = "OK"; - previewImage() { - uni.previewImage({ - urls: [this.base64Image], + if (item.fcheckResu == 'OK') { + fstand = "脳"; + fcheckResu = "NG"; + } + + this.$post({ + url: "/LLJ/UpdateQSItemDetail", + data: { + id: item.id, + mainId: this.formData.id, + releaseNo: this.formData.releaseNo, + fstand: fstand, + fcheckResu: fcheckResu, + updateBy: this.$loginInfo.account, + } + }).then(res => { + this.$showMessage("淇敼鎴愬姛"); + this.refreshResult(); //鍒锋柊椤甸潰 + }) + }, + chooseImage() { + uni.navigateTo({ + url: 'ImageItem?id=' + this.formData.id }); }, - - editResult(fcheckResu) { - if (fcheckResu == 'OK') { - return "鏀逛负涓嶅悎鏍�"; - } else { - return "鏀逛负鍚堟牸"; - } + upRemarks() { + this.remarksPopup = true; }, - submit() { - + saveResult() { + let count = this.formData.checkQyt; let fstand = "鈭�"; //鏈夋渶澶у�煎拰鏈�灏忓�煎氨鏍规嵁鏄惁绗﹀悎鏍囧噯鍊兼洿鏂板垽瀹氱粨鏋滐紝娌℃湁鏈�澶у�煎拰鏈�灏忓�煎氨鏍规嵁鏄惁閫氳繃妫�楠屽垽瀹氱粨鏋� if (this.formData.fupAllow && this.formData.fdownAllow) { - if (!this.formData.fcheckResu) { this.$showMessage("璇疯緭鍏ユ纭殑妫�楠屽��"); return; } - - if(isNaN(parseFloat(this.formData.fcheckResu))){ + + if (isNaN(parseFloat(this.formData.fcheckResu))) { this.$showMessage("璇疯緭鍏ユ纭殑妫�楠屽��"); return; } - if (parseFloat(this.formData.fcheckResu) >= parseFloat(this.formData.fdownAllow) && parseFloat(this.formData + if (parseFloat(this.formData.fcheckResu) >= parseFloat(this.formData.fdownAllow) && parseFloat(this + .formData .fcheckResu) <= parseFloat(this.formData.fupAllow)) { fstand = "鈭�" } else { @@ -243,19 +309,19 @@ this.formData.fcheckResu = null; this.$showMessage("淇濆瓨鎴愬姛"); this.refreshResult(); + this.inputTxt = ''; }) }, - toImage() { - uni.navigateTo({ - url: 'ImageItem?id=' + this.formData.id - }); + goBack() { + uni.navigateBack() }, + //鑾峰彇妫�楠屽崟璇︽儏 refreshResult() { this.$post({ url: "/LLJ/getXjDetail02ById", data: { - id: this.id + id: this.mainId } }).then(res => { this.formData = res.data.tbBillList.itemXj01; @@ -270,12 +336,53 @@ //fupAllow fdownAllow standardValue if (this.formData.fupAllow && this.formData.fdownAllow && this.formData.fstand) { this.isNumber = true; + }else{ + this.isNumber = false; } }) + }, + editResult(fcheckResu) { + if (fcheckResu == 'OK') { + return "鏀逛负涓嶅悎鏍�"; + } else { + return "鏀逛负鍚堟牸"; + } }, toDetail(item) { this.showPopup = !this.showPopup; this.editData = item; + }, + editRemarks() { + if (this.remarks) { + //saveRemarksGid + this.$post({ + url: "/LLJ/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: "/LLJ/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() { @@ -297,7 +404,8 @@ return; } - if (parseFloat(this.editData.fcheckResu) >= parseFloat(this.formData.fdownAllow) && parseFloat(this.editData + if (parseFloat(this.editData.fcheckResu) >= parseFloat(this.formData.fdownAllow) && parseFloat(this + .editData .fcheckResu) <= parseFloat(this.formData.fupAllow)) { this.editData.isPass = 1 } else { @@ -325,11 +433,6 @@ this.$post({ url: "/LLJ/UpdateQSItemDetail", data: { - // mainId: this.editData.id, - //releaseNo: this.editData.releaseNo, - // fstand: fstand, - // fcheckResu: this.editData.fcheckResu, - id: this.editData.id, mainId: this.formData.id, releaseNo: this.formData.releaseNo, @@ -343,115 +446,253 @@ this.refreshResult(); //鍒锋柊椤甸潰 }) }, - - numberEdit(item) { - - let fstand = "鈭�"; - let fcheckResu = "OK"; - - if (item.fcheckResu == 'OK') { - fstand = "脳"; - fcheckResu = "NG"; - } - - this.$post({ - url: "/LLJ/UpdateQSItemDetail", - data: { - // mainId: item.id, - //releaseNo: this.editData.releaseNo, - // fstand: fstand, - // fcheckResu: fcheckResu, - // updateBy: this.$loginInfo.account, - id: item.id, - mainId: this.formData.id, - releaseNo: this.formData.releaseNo, - fstand: fstand, - fcheckResu: fcheckResu, - updateBy: this.$loginInfo.account, - } - }).then(res => { - this.$showMessage("淇敼鎴愬姛"); - this.refreshResult(); //鍒锋柊椤甸潰 - }) - }, - saveRemarks() { - this.remarksPopup = !this.remarksPopup; - this.remarks = this.formData.remarks; - }, - editRemarks() { - if (this.remarks) { - //saveRemarksGid - this.$post({ - url: "/LLJ/saveRemarksPid", - data: { - pid: this.formData.id, - remarks: this.remarks - } - }).then(res => { - if (res.data.tbBillList > 0) { - this.formData.remarks = this.remarks; - this.remarksPopup = !this.remarksPopup; - this.$showMessage("淇濆瓨鎴愬姛"); - } - }) - } - } }, onLoad(options) { //options涓寘鍚簡url闄勫甫鐨勫弬鏁� let params = options; - - this.id = params["mainId"]; - - + 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: "/LLJ/getJYItem", + data: { + id: this.formID, + releaseNo: this.releaseNo + } + }).then(res1 => { + let tableData = res1.data.tbBillList + //褰撳凡妫�楠屼釜鏁伴兘涓嶄负绌烘椂鎸夌収妫�娴嬬粨鏋勬帓搴� + tableData.sort((a, b) => { + if (a.result === '鏈畬鎴�' && b.result === '鍚堟牸') { + return -1; + } else if (a.result === '鍚堟牸' && b.result === '鏈畬鎴�') { + return 1; + } else { + return 0; + } + }); + this.tabs = tableData; + // if (this.tableData.length === 0) { + // this.isShowTable = true; + // } + this.tableData.forEach((item, index) => { + this.set(item, 'current', this.current); + }); + console.log(this.tableData); + }) } } </script> -<style> - .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 { + display: flex; + background-color: $bg-color; + border-bottom: 1px solid $border-color; + + .tab { + flex: 1; + text-align: center; + padding: 12px 0; + border-right: 1px solid $border-color; + color: #666; + transition: all 0.3s; + + &:last-child { + border-right: none; + } + + &.active { + background-color: #fff; + color: $primary-color; + font-weight: bold; + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background-color: $primary-color; + } + } + } + } + + .section { + margin: 20px 0; + border: 1px solid $border-color; + border-radius: 4px; + + &-header { + padding: 12px 16px; + background-color: $bg-color; + border-bottom: 1px solid $border-color; + font-weight: bold; + } + + &-body { + padding: 16px; + } + } + + .info-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + + .info-item { + margin-bottom: 12px; + + .info-label { + color: #909399; + font-size: 14px; + margin-bottom: 4px; + } + + .info-value { + color: #333; + font-weight: 500; + } + } + } + + .input-group { + margin: 16px 0; + + .input-wrapper { + display: flex; + gap: 12px; + + .result-input { + flex: 1; + height: 45px; + padding: 0 12px; + border: 1px solid $border-color; + border-radius: 4px; + font-size: 14px; + } + + .upload-btn { + background-color: #909399; + color: #fff; + padding: 0 10px; + margin: 0; + //height: 40rpx; + } + } + } + + .table-container { + border: 1px solid $border-color; + border-radius: 4px; + margin-top: 20px; + + .table-header { + display: flex; + background-color: $bg-color; + border-bottom: 1px solid $border-color; + + .th { + flex: 1; + padding: 12px; + font-weight: bold; + } + } + + .table-row { + display: flex; + border-bottom: 1px solid $border-color; + padding: 12px; + + &:last-child { + border-bottom: none; + } + + .td { + flex: 1; + display: flex; + align-items: center; + } + } + } + + .result-badge { + display: inline-block; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + font-weight: bold; + + &.OK { + background-color: rgba($success-color, 0.1); + color: $success-color; + } + + &.NG { + background-color: rgba($danger-color, 0.1); + color: $danger-color; + } + } + + .action-buttons { + margin-top: 20px; + display: flex; + justify-content: flex-end; + gap: 12px; + + .btn { + padding: 8px 20px; + border-radius: 4px; + + &.primary-btn { + background-color: $primary-color; + color: #fff; + + } + + &.cancel-btn { + background-color: #909399; + color: #fff; + } + } + } + + .danger { + color: $danger-color; } .overlay { @@ -477,7 +718,8 @@ /* 璁剧疆楂樺害涓鸿鍙i珮搴︾殑80% */ } - .edit { - background-color: white; + .updateBut { + background-color: #3498db; + color: white; } </style> \ No newline at end of file -- Gitblit v1.9.3