From 17d3d61e12f537eb2ee7ec6f4de1590102377afa Mon Sep 17 00:00:00 2001 From: zjh <2207896513@qq.com> Date: 星期二, 29 四月 2025 08:18:15 +0800 Subject: [PATCH] 代码提交 --- pages/QC/SJ/List.vue | 845 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 492 insertions(+), 353 deletions(-) diff --git a/pages/QC/SJ/List.vue b/pages/QC/SJ/List.vue index 2b95d77..fbfe619 100644 --- a/pages/QC/SJ/List.vue +++ b/pages/QC/SJ/List.vue @@ -1,384 +1,523 @@ <template> - <view> - <!-- 鍒锋柊椤甸潰鍚庣殑椤堕儴鎻愮ず妗� --> - <view class="tips" :class="{ 'tips-ani': tipShow }">鍒锋柊鎴愬姛</view> + <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="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+'&billNo='+item.billNo"> - <!-- 閫氳繃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.billNo"/> - </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.statusDate"/> - </view> - </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.line"/> - </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="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="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="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.daa003"/> - </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="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.daa004"/> - </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="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.daa008"/> - </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.fName"/> - </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.statusUser"/> - </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.result"/> - </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+'&billNo='+item.billNo"> - <!-- 閫氳繃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.billNo"/> - </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.statusDate"/> - </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.line"/> - </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.daa003"/> - </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.daa004"/> - </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.daa008"/> - </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.fName"/> - </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.statusUser"/> - </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.result"/> - </view> - </view> - </view> - </view> - </template> - </uni-list-item> - </uni-list> - </view> - </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> </template> <script> -export default { - components: {}, - data() { - return { - items: ['鏈畬鎴�', '宸插畬鎴�'], - current: 0, - data: [], - tipShow: false // 鏄惁鏄剧ず椤堕儴鎻愮ず妗� - }; - }, - onLoad() { - //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢 - this.init(); - }, - methods: { - init() { - let result = "鏈畬鎴�"; - if (this.current === 1) { - result = "宸插畬鎴�"; - } - //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢 - this.$post({ - url: "/SJ/GetPage", - data: { - pageIndex: 1, - limit: 20, - statusUser: this.$loginInfo.account, - result: result - } - }).then(res => { - this.data = res.data.tbBillList; - }) - }, - handleFabClick() { - uni.navigateTo({ - url: 'Add?id' - }); - }, - onClickItem(index) { - if (this.current !== index.currentIndex) { - this.current = index.currentIndex; - this.init(); - } - }, - }, - /** - * 涓嬫媺鍒锋柊鍥炶皟鍑芥暟 - */ - onPullDownRefresh() { - //閲嶆柊鎵ц涓�閬嶆煡璇� - this.init(); - this.tipShow = true; - //鍏抽棴鍔ㄧ敾 - uni.stopPullDownRefresh(); + 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: '' - setTimeout(function () { - this.tipShow = false; - }, 3000); - }, - /** - * 涓婃媺鍔犺浇鍥炶皟鍑芥暟 - */ - onReachBottom() { - this.init(); - }, - onShow() { - //姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉� - this.init(); - } -}; + } + }, + onLoad() { + //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢 + this.init(); + }, + methods: { + init() { + + let result = "鏈畬鎴�"; + if (this.activeTab === 1) { + result = "宸插畬鎴�"; + } + + if (this.isLoading) return; // 濡傛灉姝e湪鍔犺浇鍒欎笉缁х画鎵ц + + this.isLoading = true; + + //鑾峰彇褰撳墠鐧诲綍鐨勭敤鎴� + let userName = this.$loginInfo.account; + + + //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢 + 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(); + } + } + } </script> -<style lang="scss"> -@import '@/common/uni-ui.scss'; +<style scoped> + /* 鍩虹鏍峰紡閲嶇疆 */ + .inspection-app { + padding: 10px; + background-color: #f5f7fa; + min-height: 100vh; + } -.uni-note { - margin-top: 0; + /* 椤堕儴绛涢�夊尯 */ + .filter-section { + margin-bottom: 24px; + } + + .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 { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 16px; } -/* Set the input backgrounds to be gray */ -.form-input { - background-color: #f2f2f2; /* Or any other shade of gray you prefer */ -} - -/* Ensure automatic adaptation based on page size */ -.form-group { +.dropdown-filter { display: flex; align-items: center; -} + gap: 8px; +} */ + .filter-controls { + display: flex; + flex-wrap: wrap; + gap: 10px; + } -.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 */ -} + .dropdown-filter { + min-width: 70px; + } -.form-input { - 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 */ -} + .filter-label { + font-size: 14px; + color: #7f8c8d; + } -.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; -} + .picker { + padding: 8px 12px; + border: 1px solid #ddd; + border-radius: 4px; + background-color: white; + font-size: 14px; + min-width: 120px; + } -page { - display: flex; - flex-direction: column; - box-sizing: border-box; - background-color: #efeff4; - min-height: 100%; - height: auto; -} + .status-tabs { + display: flex; + border-radius: 4px; + overflow: hidden; + background-color: #ecf0f1; + } -.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; -} + .status-tabs { + flex: 1; + min-width: 200px; + } -.tips-ani { - transform: translateY(0); - height: 40px; - opacity: 1; -} + .tab-button { + padding: 0px 16px; + border: none; + background: none; + font-size: 14px; + transition: all 0.3s; + margin: 0; + height: 35px; + } -.content { - width: 100%; -} + .tab-button.active { + background-color: #3498db; + color: white; + } -.list-picture { - width: 100%; - height: 145px; -} + /* 妫�楠屽崟鍒楄〃 */ + .inspection-list { + display: flex; + flex-direction: column; + gap: 20px; + } -.thumb-image { - width: 100%; - height: 100%; -} + /* 妫�楠屽崟鍗$墖 */ + .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; + } -.ellipsis { - display: flex; - overflow: hidden; -} + .card-header { + padding: 16px; + border-bottom: 1px solid #eee; + display: flex; + align-items: center; + } -.uni-ellipsis-1 { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} + .card-title { + font-size: 16px; + font-weight: 600; + flex: 1; + margin: 0 8px; + } -.uni-ellipsis-2 { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} + .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: 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%; + } */ + } </style> \ No newline at end of file -- Gitblit v1.9.3