From eaa506e57403d1b8502f16ca5dd6e82c347724d0 Mon Sep 17 00:00:00 2001 From: 啊鑫 <t2856754968@163.com> Date: 星期四, 17 七月 2025 23:09:32 +0800 Subject: [PATCH] 优化QC模块样式统一和功能完善 --- pages/QC/SJ/detail.vue | 705 ++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 553 insertions(+), 152 deletions(-) diff --git a/pages/QC/SJ/detail.vue b/pages/QC/SJ/detail.vue index 4de2ef6..5cd7f31 100644 --- a/pages/QC/SJ/detail.vue +++ b/pages/QC/SJ/detail.vue @@ -1,126 +1,206 @@ <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">棣栨鍗曞彿: {{formData.billNo}}</view> </view> - <view> - <img v-if="isShowImg" :src="base64Image" style="width:100%" @click="previewImage"/> + + <!-- 鏍囩鏍� - 濡傛灉鏈夊涓楠岄」鐩彲浠ュ垏鎹� --> + <view class="tabs" v-if="tabs && tabs.length > 1"> + <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="list-container"> - <uni-table ref="table" border emptyText="鏆傛棤鏇村鏁版嵁"> - <uni-tr> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">缂栧彿</uni-th> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">鍒ゅ畾鏍囪瘑</uni-th> - <uni-th align="center" style="color: #FFFFFF;background-color: lightskyblue;">妫�楠岀粨鏋�</uni-th> - <uni-th width="150" align="center" style="color: #FFFFFF;background-color: lightskyblue;">淇敼</uni-th> - </uni-tr> - <uni-tr v-for="(item, index) in tableData" :key="index"> - <uni-td align="center"> - {{ index + 1 }} - </uni-td> - <uni-td align="center"> - <input class="form-input" disabled="true" type="text" v-model="item.fstand"/> - </uni-td> - <uni-td align="center"> - <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/> - </uni-td> - <uni-td> - <view class="uni-group edit"> - <button type="warn" v-if="isNumber" @click="toDetail(item)">淇敼</button> - <button type="warn" v-if="!isNumber" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button> + + <view 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" v-if="formData.itemMod"> + <view class="info-label">璐ㄩ噺瑕佹眰</view> + <view class="info-value">{{ formData.itemMod }}</view> + </view> + <view class="info-item" v-if="formData.inspectionMethod"> + <view class="info-label">妫�楠屾柟娉�</view> + <view class="info-value">{{ formData.inspectionMethod }}</view> + </view> + <view class="info-item" v-if="formData.usingInstruments"> + <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" v-if="formData.minValue"> + <view class="info-label">涓嬮檺</view> + <view class="info-value">{{ formData.minValue }}</view> + </view> + <view class="info-item" v-if="formData.standardValue"> + <view class="info-label">鏍囧噯鍊�</view> + <view class="info-value">{{ formData.standardValue }}</view> + </view> + <view class="info-item" v-if="formData.maxValue"> + <view class="info-label">涓婇檺</view> + <view class="info-value">{{ formData.maxValue }}</view> + </view> + <view class="info-item" v-if="formData.updater"> + <view class="info-label">鏇存柊浜�</view> + <view class="info-value">{{ formData.updater }}</view> + </view> + <view class="info-item" v-if="formData.updateTime"> + <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 class="section" v-if="formData.specRequ"> + <view class="section-header">瑙勬牸瑕佹眰</view> + <view class="section-body"> + <text class="spec-text">{{ formData.specRequ }}</text> + </view> + </view> + + <!-- 妫�楠屾弿杩� --> + <view class="section" v-if="formData.itemMod"> + <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"> + <view class="info-grid"> + <view class="info-item" v-if="formData.result"> + <view class="info-label">棰勮缁撴灉</view> + <view class="info-value">{{formData.result}}</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="saveRemarks"> + <uni-icons type="compose" size="16" color="#fff"></uni-icons> + 涓嶅悎鏍兼弿杩� + </button> + + <input v-if="tableData.length < formData.levelNum" + v-model="formData.fcheckResu" + type="text" + class="result-input" + placeholder="娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級" + placeholder-class="placeholder" /> + <button v-if="(tableData.length < formData.levelNum)" + style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn" + @tap="submit">淇濆瓨缁撴灉</button> + </view> + </view> + </view> + </view> + + <!-- 缁撴灉琛ㄦ牸 --> + <view v-if="tableData.length > 0" class="table-container"> + <view class="table-header"> + <view class="th">缂栧彿</view> + <view class="th">妫�楠岀粨鏋�<i style="color: rgb(0 212 68);" + v-if="!(tableData.length < formData.levelNum)">锛堣緭鍏ュ凡瀹屾垚锛�</i></view> + <view class="th">鎿嶄綔</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', getResultClass(item.fcheckResu, item.fstand)]"> + {{ item.fcheckResu }} + </view> + </view> + <view class="td"> + <button v-if="!isNumber" class="btn danger-btn" @tap="numberEdit(item)"> + {{ editResult(item.fcheckResu) }} + </button> + <button v-if="isNumber" class="btn danger-btn" @tap="toDetail(item)"> + 淇敼 + </button> + </view> + </view> + </view> + + <!-- 鍥剧墖棰勮 --> + <view v-if="isShowImg" class="section"> + <view class="section-header">鐩稿叧鍥剧墖</view> + <view class="section-body"> + <view class="image-preview" @click="previewImage"> + <image :src="base64Image" mode="aspectFit" class="preview-image"/> + </view> + </view> </view> </view> + <!-- 淇敼涓嶅悎鏍兼弿杩板脊鍑烘 --> + <view v-if="remarksPopup" class="overlay"> + <view class="popup"> + <view class="popup-header"> + <h3>淇敼涓嶅悎鏍兼弿杩�</h3> + </view> + <view class="popup-content"> + <view class="input-group"> + <view class="input-label">涓嶅悎鏍兼弿杩帮細</view> + <input class="input-field" type="text" v-model="remarks" placeholder="璇疯緭鍏ヤ笉鍚堟牸鎻忚堪"/> + </view> + </view> + <view class="popup-actions"> + <button class="action-btn primary" @click="editRemarks">淇敼</button> + <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">鍙栨秷</button> + </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="popup-header"> + <h3>淇敼妫�楠岀粨鏋�</h3> + </view> + <view class="popup-content"> + <view class="input-group"> + <view class="input-label">妫�楠岀粨鏋滐細</view> + <input class="input-field" type="text" v-model="editData.fcheckResu" placeholder="璇疯緭鍏ユ楠岀粨鏋�"/> </view> - <button type="warn" @click="eidt">淇敼</button> - <button @click="showPopup = !showPopup">鍙栨秷</button> - </form> + </view> + <view class="popup-actions"> + <button class="action-btn primary" @click="eidt">淇敼</button> + <button class="action-btn secondary" @click="showPopup = !showPopup">鍙栨秷</button> + </view> </view> </view> </view> @@ -143,9 +223,31 @@ isShowImg: false, remarks: "", remarksPopup: false, + // ===== 鏂板LLJ鏍峰紡鐩稿叧鏁版嵁 ===== + currentTab: 0, + tabs: [] } }, methods: { + getResultClass(fcheckResu, fstand) { + // 鏍规嵁妫�楠岀粨鏋滃拰鍒ゅ畾鏍囪瘑纭畾鏍峰紡绫� + if (fstand === '鈭�' || fcheckResu === 'OK') { + return 'OK'; + } else if (fstand === '脳' || fcheckResu === 'NG') { + return 'NG'; + } else { + // 瀵逛簬鏁板瓧缁撴灉锛屾牴鎹甪stand鍒ゆ柇 + return fstand === '鈭�' ? 'OK' : 'NG'; + } + }, + + // ===== 鏂板鏍囩鍒囨崲鏂规硶 ===== + switchTab(index, id) { + this.currentTab = index; + // 濡傛灉闇�瑕佸垏鎹㈡楠岄」鐩紝鍙互鍦ㄨ繖閲屾坊鍔犻�昏緫 + // this.gid = id; + // this.refreshResult(); + }, previewImage() { uni.previewImage({ @@ -365,50 +467,258 @@ } </script> -<style> +<style lang="scss"> +$primary-color: #409EFF; +$success-color: #67C23A; +$danger-color: #F56C6C; +$border-color: #DCDFE6; +$bg-color: #f5f7fa; -.form-group { - display: flex; - align-items: center; - border: 1px solid #c9c9c9; - background-color: #d4d4d4; +.container { + padding: 20px; + background-color: #fff; } -.form-label { - margin-bottom: 0; - padding: 5px; -} +.header { + padding: 20px; + border-bottom: 1px solid $border-color; + background: linear-gradient(90deg, #f0f7ff, #e1f0ff); -.form-input { - flex: 1; - margin-bottom: 0; - padding: 5px; -} + .title { + font-size: 24px; + color: #333; + margin-bottom: 10px; + } -/* 榛樿鏍峰紡 */ -.list-container { - height: calc(100vh - 750px); - /* 璁剧疆鍒楄〃瀹瑰櫒鐨勯珮搴︿负鍓╀綑绌洪棿锛屽苟鍑忓幓琛ㄥ崟瀹瑰櫒鐨勯珮搴� */ - overflow-y: auto; - /* 鍏佽鍒楄〃瀹瑰櫒鍨傜洿婊氬姩 */ - padding: 10px; - /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇鍒楄〃鍐呭鏇寸編瑙� */ -} - -/* 鍦ㄥ皬灞忓箷璁惧涓婏紝閲嶇疆楂樺害涓洪�傚簲灞忓箷 */ -@media (max-width: 768px) { - .list-container { - height: calc(100vh - 485px); - /* 閫傚綋璋冩暣楂樺害 */ + .order-number { + color: #666; + font-size: 14px; } } -.form-container { - /* 璁剧疆琛ㄥ崟瀹瑰櫒鐨勯珮搴︼紝浣垮叾鍙互婊氬姩 */ - overflow-y: auto; - /* 鍏佽琛ㄥ崟瀹瑰櫒鍨傜洿婊氬姩 */ - padding: 10px; - /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇琛ㄥ崟鍐呭鏇寸編瑙� */ +.tabs { + display: flex; + background-color: $bg-color; + border-bottom: 1px solid $border-color; + + .tab { + flex: 1; + text-align: center; + padding: 12px 0; + border-right: 1px solid $border-color; + color: #666; + transition: all 0.3s; + + &:last-child { + border-right: none; + } + + &.active { + background-color: #fff; + color: $primary-color; + font-weight: bold; + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background-color: $primary-color; + } + } + } +} + +.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; + } + } +} + +.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; + } +} + +.spec-text { + font-size: 14px; + color: #333; + line-height: 1.5; +} + +.result-preview { + margin: 16px 0; + padding: 12px; + background-color: #f8f9fa; + border-radius: 4px; + display: flex; + align-items: center; + gap: 12px; + + .info-label { + color: #909399; + font-size: 14px; + min-width: 80px; + } + + .info-value { + color: #333; + font-weight: 500; + } +} + +.result-ng { + margin: 16px 0; + padding: 12px; + background-color: rgba($danger-color, 0.1); + border-radius: 4px; + display: flex; + align-items: center; + gap: 12px; + + .info-label { + color: $danger-color; + font-size: 14px; + min-width: 80px; + } + + .info-value { + color: $danger-color; + font-weight: 500; + } +} + +.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 { @@ -421,6 +731,7 @@ display: flex; justify-content: center; align-items: center; + z-index: 1000; } .popup { @@ -428,11 +739,101 @@ 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% */ + width: 68vw; + height: 25vh; + border-radius: 8px; } -.edit { - background-color: white; +.popup-header { + padding: 20px; + border-bottom: 1px solid #eee; + + h3 { + font-size: 18px; + font-weight: 600; + color: #2c3e50; + margin: 0; + } +} + +.popup-content { + padding: 20px; + + .input-group { + margin-bottom: 15px; + + .input-label { + font-size: 14px; + color: #7f8c8d; + margin-right: 10px; + min-width: 80px; + } + + .input-field { + flex: 1; + padding: 8px 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; + background-color: white; + } + } +} + +.popup-actions { + padding: 20px; + border-top: 1px solid #eee; + display: flex; + gap: 10px; + justify-content: flex-end; + + .action-btn { + padding: 12px 20px; + border: none; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; + + &.primary { + background-color: #3498db; + color: white; + } + + &.secondary { + background-color: #95a5a6; + color: white; + } + } +} + +/* 鍥剧墖棰勮 */ +.image-preview { + text-align: center; + cursor: pointer; +} + +.preview-image { + max-width: 100%; + max-height: 300px; + border-radius: 4px; + border: 1px solid #ddd; +} + +/* 鍝嶅簲寮忚璁� */ +@media (max-width: 768px) { + .info-grid { + grid-template-columns: 1fr; + } + + .input-group { + flex-direction: column; + align-items: flex-start; + } + + .input-label { + margin-bottom: 5px; + } } </style> \ No newline at end of file -- Gitblit v1.9.3