From 97af26e2ad64d7974367df80a900c1f680bd19c5 Mon Sep 17 00:00:00 2001 From: 啊鑫 <t2856754968@163.com> Date: 星期三, 23 七月 2025 10:38:08 +0800 Subject: [PATCH] 首检,巡检,入库检 --- pages/QC/XJ/List.vue | 657 ++++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 399 insertions(+), 258 deletions(-) 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 -- Gitblit v1.9.3