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/RKJ/detail.vue | 706 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 527 insertions(+), 179 deletions(-) diff --git a/pages/QC/RKJ/detail.vue b/pages/QC/RKJ/detail.vue index 60a1bf8..2c96752 100644 --- a/pages/QC/RKJ/detail.vue +++ b/pages/QC/RKJ/detail.vue @@ -1,148 +1,204 @@ <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> - <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> - </uni-td> - </uni-tr> - </uni-table> + <view class="container"> + <!-- 澶撮儴 --> + <view class="header"> + <view class="title">鍏ュ簱妫�楠岄」鐩槑缁�</view> + <view class="order-number">妫�楠屽崟鍙�: {{formData.id}}</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"/> + <!-- 鍩烘湰淇℃伅 --> + <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> - <button type="warn" @click="eidt">淇敼</button> - <button @click="showPopup = !showPopup">鍙栨秷</button> - </form> + <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.qsCode"> + <view class="info-label">妫�楠屾爣鍑嗙紪鐮�</view> + <view class="info-value">{{ formData.qsCode }}</view> + </view> + <view class="info-item" v-if="formData.qsName"> + <view class="info-label">妫�楠屾爣鍑嗗悕绉�</view> + <view class="info-value">{{ formData.qsName }}</view> + </view> + <view class="info-item" v-if="formData.fcheckLevel"> + <view class="info-label">妫�楠屾按骞�</view> + <view class="info-value">{{ formData.fcheckLevel }}</view> + </view> + <view class="info-item" v-if="formData.facLevel"> + <view class="info-label">鎺ユ敹姘村钩</view> + <view class="info-value">{{ formData.facLevel }}</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> </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 : 0}}</view> + </view> + <view class="info-item"> + <view class="info-label">RE鏁�</view> + <view class="info-value">{{formData.freQty || 0}}</view> + </view> + <view class="info-item"> + <view class="info-label">涓嶅悎鏍兼暟</view> + <view class="info-value">{{formData.unqualified || 0}}</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="inspection-hint"> + <view class="hint-text">娌℃湁鏈�澶у�煎拰鏈�灏忓�兼椂濉啓0锛堟湭閫氳繃妫�楠岋級鎴�1锛堥�氳繃妫�楠岋級</view> + </view> + <view class="input-group"> + <view class="input-wrapper"> + <input v-if="tableData.length < formData.levelNum" + v-model="formData.fcheckResu" + type="number" + class="result-input" + placeholder="璇疯緭鍏ユ楠岀粨鏋�" + placeholder-class="placeholder" /> + <button v-if="(tableData.length < formData.levelNum)" + class="btn primary-btn" + @click="submit">淇濆瓨缁撴灉</button> + </view> + </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 v-if="tableData.length > 0" class="section"> + <view class="section-header">妫�楠岃褰�</view> + <view class="section-body"> + <view class="table-container"> + <view class="table-header"> + <view class="th">缂栧彿</view> + <view class="th">鍒ゅ畾鏍囪瘑</view> + <view class="th">妫�楠岀粨鏋�</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" :class="item.fstand === '鈭�' ? 'OK' : 'NG'"> + {{ item.fstand }} + </view> + </view> + <view class="td"> + <view class="result-badge" :class="item.fcheckResu === '1' ? 'OK' : 'NG'"> + {{ item.fcheckResu }} + </view> + </view> + <view class="td"> + <button v-if="isNumber" class="btn danger-btn" @click="toDetail(item)">淇敼</button> + <button v-if="!isNumber" class="btn danger-btn" @click="numberEdit(item)">{{ editResult(item.fcheckResu) }}</button> + </view> + </view> + </view> + </view> + </view> + + <!-- 鎿嶄綔鎸夐挳 --> + <view class="action-buttons"> + <button class="action-btn warning" @click="saveRemarks">娣诲姞涓嶅悎鏍兼弿杩�</button> + </view> + + <!-- 淇敼妫�楠岀粨鏋滃脊鍑烘 --> + <view v-if="showPopup" 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="editData.fcheckResu" placeholder="璇疯緭鍏ユ楠岀粨鏋�"/> + </view> + </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 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="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> - <button type="warn" @click="editRemarks">淇敼</button> - <button @click="remarksPopup = !remarksPopup">鍙栨秷</button> - </form> + </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> @@ -402,49 +458,274 @@ } </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; +$warning-color: #E6A23C; +$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; - /* 鍏佽琛ㄥ崟瀹瑰櫒鍨傜洿婊氬姩 */ +.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; + } + } +} + +.inspection-hint { + background-color: #fff3cd; padding: 10px; - /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇琛ㄥ崟鍐呭鏇寸編瑙� */ + border-radius: 4px; + margin-bottom: 15px; +} + +.hint-text { + font-size: 12px; + color: #856404; +} + +.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; + } + } +} + +.btn { + padding: 8px 16px; + border: none; + border-radius: 4px; + font-size: 14px; + cursor: pointer; + transition: all 0.2s; + + &.primary-btn { + background-color: $primary-color; + color: white; + } + + &.danger-btn { + background-color: $danger-color; + color: white; + } +} + +.table-container { + border: 1px solid $border-color; + border-radius: 4px; + overflow: hidden; + width: 100%; + + .table-header { + display: flex; + background-color: $bg-color; + border-bottom: 1px solid $border-color; + + .th { + flex: 1; + padding: 12px; + font-weight: bold; + text-align: center; + border-right: 1px solid $border-color; + + &:last-child { + border-right: none; + } + } + } + + .table-row { + display: flex; + border-bottom: 1px solid $border-color; + align-items: center; + min-height: 50px; + + &:last-child { + border-bottom: none; + } + + .td { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + border-right: 1px solid $border-color; + + &:last-child { + border-right: none; + } + } + } +} + +.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; + } +} + +.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; + } +} + +.image-preview { + text-align: center; + cursor: pointer; +} + +.preview-image { + max-width: 100%; + max-height: 300px; + border-radius: 4px; + border: 1px solid #ddd; +} + +.action-buttons { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 20px; +} + +.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: $primary-color; + color: white; + } + + &.secondary { + background-color: #95a5a6; + color: white; + } + + &.warning { + background-color: $warning-color; + color: white; + } } .overlay { @@ -457,20 +738,87 @@ 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% */ + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + width: 90%; + max-width: 400px; + max-height: 80vh; + overflow-y: auto; } -.edit { +.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 { + display: flex; + flex-direction: column; + gap: 8px; +} + +.input-label { + font-size: 14px; + color: #7f8c8d; + font-weight: 500; +} + +.input-field { + 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; +} + +.danger { + color: $danger-color; +} + +/* 鍝嶅簲寮忚璁� */ +@media (max-width: 768px) { + .info-grid { + grid-template-columns: 1fr; + } + + .input-wrapper { + flex-direction: column; + } + + .table-container { + .table-header .th { + font-size: 12px; + padding: 8px 4px; + } + + .table-row .td { + font-size: 12px; + padding: 8px 4px; + } + } +} </style> \ No newline at end of file -- Gitblit v1.9.3