From 70b128785737df0d6065b09a75cf79b49efe22fa Mon Sep 17 00:00:00 2001 From: licp <lichunping@guanfang.com.cn> Date: 星期三, 24 四月 2024 15:41:25 +0800 Subject: [PATCH] 优化滚动分页,封装组件, --- src/components/tool/value-table.vue | 2 src/components/view/b4-daily-business-statistics.vue | 3 src/components/view/a6-device-overview.vue | 36 +-- src/components/view/b4-sample-defects.vue | 70 +++-- src/view/index.vue | 2 src/assets/api/controller.js | 1 src/components/view/notice-detail.vue | 30 +- src/components/tool/scroll-paging.vue | 82 +++++++ src/view/notice.vue | 112 ++++----- src/components/view/b1-report-preparation.vue | 3 src/main.js | 6 src/components/view/a6-device-management.vue | 166 ++++++++------ src/components/view/a6-personnel-overview.vue | 37 +-- src/components/view/b4-inspection-item-statistics.vue | 3 src/components/view/index-index.vue | 73 +++++ 15 files changed, 384 insertions(+), 242 deletions(-) diff --git a/src/assets/api/controller.js b/src/assets/api/controller.js index e94eab0..4608a64 100644 --- a/src/assets/api/controller.js +++ b/src/assets/api/controller.js @@ -138,6 +138,7 @@ delInsOrderTemplate: "/insOrder/delInsOrderTemplate", //鍒犻櫎妫�楠屽崟妯℃澘 selectSampleAndProductByOrderId: "/insOrder/selectSampleAndProductByOrderId", //閫氳繃妫�楠屽崟鏌ヨ妫�楠屾暟鎹紙鏁版嵁鏌ョ湅锛� costStatistics: "/insOrder/costStatistics", //璐圭敤缁熻 + selectSampleDefects: "/insOrder/selectSampleDefects", //鏍峰搧缂洪櫡鎸囨爣 } const sampleOrder = { diff --git a/src/components/tool/scroll-paging.vue b/src/components/tool/scroll-paging.vue new file mode 100644 index 0000000..c60265f --- /dev/null +++ b/src/components/tool/scroll-paging.vue @@ -0,0 +1,82 @@ +<template> + <div class="scroll-pagination" ref="content" @scroll="scrollFn"> + <slot></slot> + <el-button + v-if="isLoding" + type="text" + style="display: flex; margin: 0 auto; color: #909399" + ><i class="el-icon-loading" style="font-size:20px"></i + ></el-button> + <el-button + type="text" + v-if="finishLoding" + style="display: flex; margin: 0 auto; color: #909399" + >宸茬粡娌℃湁鏇村鍟</el-button + > + </div> +</template> + +<script> +export default { + name: 'ScrollPagination', + props: { + finishLoding: { + type:Boolean, + default:false + } + }, + data() { + return { + isLoding: false, + } + }, + mounted(){ + window.addEventListener("scroll", this.throttle(this.scrollFn, 20000)); + }, + methods: { + scrollFn() { + let content = this.$refs.content + if (content.scrollTop + content.clientHeight >= content.scrollHeight) { + if(!this.finishLoding){ + this.loadMore() + }else{ + this.isLoding = false + } + } + }, + loadMore(){ + if (this.isLoding) return + this.isLoding = true + // Simulate loading data (replace with your own API call) + setTimeout(() => { + this.$emit('load') + this.isLoding = false + }, 1000) + }, + throttle(fn, wait) { + // 灏佽鍑芥暟杩涜鑺傛祦 + var timer = null; + return function () { + var context = this; + var args = arguments; + if (!timer) { + timer = setTimeout(function () { + fn.apply(context, args); + timer = null; + }, wait); + } + }; + }, + }, + destroyed() { + window.removeEventListener("scroll", this.throttle(), false); + }, +} +</script> + +<style scoped> +.scroll-pagination { + height: 100%; + overflow-y: auto; +} +</style> diff --git a/src/components/tool/value-table.vue b/src/components/tool/value-table.vue index c71e5ca..5c37a1e 100644 --- a/src/components/tool/value-table.vue +++ b/src/components/tool/value-table.vue @@ -1059,7 +1059,7 @@ return count * 15 + 60 + 'px' }, handleSuccessUp(response,label){ - if(label){ + if(typeof label === 'string'){ if(response.code==200){ this.upData[label] = response.data.url; } diff --git a/src/components/view/a6-device-management.vue b/src/components/view/a6-device-management.vue index a491558..bec5b90 100644 --- a/src/components/view/a6-device-management.vue +++ b/src/components/view/a6-device-management.vue @@ -77,7 +77,7 @@ v-model="componentData.entity.specificationModel" @keyup.enter.native="refreshTable()"></el-input></div> </div> <div class="search_thing"> - <div class="search_label">璁惧澶х被锛�</div> + <div class="search_label">璁惧鍒嗙被锛�</div> <el-select v-model="componentData.entity.largeCategory" placeholder="璇烽�夋嫨"> <el-option v-for="item in equipmentList" :key="item.value" :label="item.label" :value="item.value"> </el-option> @@ -199,7 +199,7 @@ <el-form-item label="瑙勬牸鍨嬪彿:"> <el-input :disabled="isUp" v-model="formData.specificationModel" size="small"></el-input> </el-form-item> - <el-form-item label="璁惧鐘舵��:"> + <el-form-item label="褰撳墠鐘舵��:"> <el-select :disabled="isUp" v-model="formData.deviceStatus" placeholder="璇烽�夋嫨" size="small" style="width:100%"> <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value"> @@ -277,13 +277,20 @@ </div> </el-image> <!-- 琛ㄥ崟 --> - <el-form :label-position="labelPosition" :model="formData2" label-width="90px"> - <el-form-item label="鍑哄巶鏃ユ湡:"> - <el-date-picker style="width:100%" v-model="formData2.dateProduction" type="datetime" size="small" - format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="閫夋嫨鏃ユ湡"> - </el-date-picker> + <el-form :label-position="labelPosition" :model="formData2" label-width="100px"> + <el-form-item label="浠櫒鍚嶇О:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> </el-form-item> - <el-form-item label="璁惧璐熻矗浜�:"> + <el-form-item label="浠櫒鍚嶇ОEN:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <el-form-item label="瑙勬牸鍨嬪彿:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <el-form-item label="鐢熶骇鍘傚:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <!-- <el-form-item label="璁惧璐熻矗浜�:"> <el-select v-model="formData2.equipmentManager" placeholder="璇烽�夋嫨" size="small" style="width:100%"> <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label" :value="item.value"> @@ -309,87 +316,102 @@ separator="," clearable></el-cascader> </el-form-item> + --> </el-form> </el-col> </el-col> <!-- 涓棿甯冨眬 --> <el-col :span="7"> - <el-form :label-position="labelPosition" :model="formData2" label-width="116px"> - <el-form-item label="璁惧鍚嶇О:"> - <el-input v-model="formData2.deviceName" size="small"></el-input> - </el-form-item> - <el-form-item label="鍐呴儴缂栫爜:"> - <el-input v-model="formData2.internalCode" size="small"></el-input> - </el-form-item> - <el-form-item label="璧勪骇缂栫爜:"> - <el-input v-model="formData2.assetCode" size="small"></el-input> - </el-form-item> - <el-form-item label="鏍″噯鏃ユ湡锛堟湀锛�:"> - <el-date-picker v-model="formData2.calibrationDate" type="month" size="small" format="yyyy-MM" - value-format="yyyy-MM" style="width:100%" placeholder="閫夋嫨鏈�"> + <el-form :label-position="labelPosition" :model="formData2" label-width="110px"> + <el-form-item label="鐢熶骇鍘傚EN:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <el-form-item label="鍑哄巶缂栧彿:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <el-form-item label="绠$悊缂栧彿:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <el-form-item label="鎶�鏈寚鏍�:"> + <el-input v-model="formData2.deviceName" :rows="7" type="textarea" size="small"></el-input> + </el-form-item> + <el-form-item label="璐疆鏃ユ湡:"> + <el-date-picker style="width:100%" v-model="formData2.scrapTime" type="date" + format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" placeholder="閫夋嫨鏃ユ湡"> </el-date-picker> </el-form-item> - <el-form-item label="鎶ュ簾鏃堕棿:"> - <el-date-picker style="width:100%" v-model="formData2.scrapTime" type="datetime" - format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="閫夋嫨鏃堕棿"> + <el-form-item label="鍚敤鏃ユ湡:"> + <el-date-picker style="width:100%" v-model="formData2.scrapTime" type="date" + format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" placeholder="閫夋嫨鏃ユ湡"> </el-date-picker> </el-form-item> - <el-form-item label="楠屾敹璁板綍:"> - <el-input v-model="formData2.acceptanceRecords" size="small"></el-input> - </el-form-item> - <el-form-item label="璁惧缂栫爜:"> - <el-input v-model="formData2.factoryNo" size="small"></el-input> - </el-form-item> - <el-form-item label="璐疆鏃ユ湡:"> - <el-date-picker style="width:100%" v-model="formData2.acquisitionDate" type="datetime" size="small" - format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="閫夋嫨鏃ユ湡"> - </el-date-picker> - </el-form-item> - <el-form-item label="鍑嗙‘搴﹂噺鍊�:"> - <el-input v-model="formData2.accurateMeasurement" size="small"></el-input> - </el-form-item> - <el-form-item label="澶囨敞:"> - <el-input v-model="formData2.notes" size="small"></el-input> - </el-form-item> + <el-form-item label="绠$悊浜�:"> + <el-select v-model="formData2.equipmentManager" placeholder="璇烽�夋嫨" size="small" style="width:100%"> + <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="鍦板潃:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> </el-form> </el-col> <!-- 鍙宠竟甯冨眬 --> <el-col :span="7"> - <el-form :label-position="labelPosition" :model="formData2" label-width="110px" ref="ruleForm"> - <el-form-item label="瑙勬牸鍨嬪彿:"> - <el-input v-model="formData2.specificationModel" size="small"></el-input> + <el-form :label-position="labelPosition" :model="formData2" label-width="120px" ref="ruleForm"> + <!-- 瀹為獙瀹ゅ垪琛� --> + <el-form-item label="鎵�灞為儴闂�:"> + <el-select v-model="formData2.equipmentManager" placeholder="璇烽�夋嫨" size="small" style="width:100%"> + <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="妫�娴嬮」鐩�:"> + <el-cascader + v-model="formData.insProductIds" + :options="options" + :show-all-levels="false" + :props="props" + placeholder="璇烽�夋嫨" size="small" + style="width:100%" + collapse-tags + separator="," + clearable></el-cascader> + </el-form-item> + <el-form-item label="鏍″噯鏈嶅姟鏈烘瀯:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <el-form-item label="鏈�杩戞牎鍑嗘棩鏈�:"> + <el-date-picker style="width:100%" v-model="formData2.latestTraceability" format="yyyy-MM-dd" + value-format="yyyy-MM-dd" type="date" size="small" placeholder="閫夋嫨鏃ユ湡"> + </el-date-picker> </el-form-item> - <el-form-item label="璁惧鐘舵��:"> + <el-form-item label="涓嬫鏍″噯鏃ユ湡:"> + <el-date-picker style="width:100%" v-model="formData2.latestTraceability" format="yyyy-MM-dd" + value-format="yyyy-MM-dd" type="date" size="small" placeholder="閫夋嫨鏃ユ湡"> + </el-date-picker> + </el-form-item> + <el-form-item label="璁惧绫诲瀷:"> + <el-select v-model="formData2.equipmentManager" placeholder="璇烽�夋嫨" size="small" style="width:100%"> + <el-option v-for="item in equipmentList" :key="item.value" :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="鍗曚环(涓囧厓):"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> + <el-form-item label="褰撳墠鐘舵��:"> <el-select v-model="formData2.deviceStatus" placeholder="璇烽�夋嫨" size="small" style="width:100%"> <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> - <el-form-item label="瀛樻斁鐐�:"> - <el-input v-model="formData2.storagePoint" size="small"></el-input> - </el-form-item> - <el-form-item label="鏈�杩戣拷婧棩鏈�:"> - <el-date-picker style="width:100%" v-model="formData2.latestTraceability" format="yyyy-MM-dd HH:mm:ss" - value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="small" placeholder="閫夋嫨鏃ユ湡"> - </el-date-picker> - </el-form-item> - <el-form-item label="鍋滅敤鏃堕棿:"> - <el-date-picker style="width:100%" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" - v-model="formData2.downTime" type="datetime" size="small" placeholder="閫夋嫨鏃堕棿"> - </el-date-picker> - </el-form-item> - <el-form-item label="缁翠慨璁板綍:"> - <el-input v-model="formData2.maintenanceRecords" size="small"></el-input> - </el-form-item> - <el-form-item label="鐢熶骇鍘傚:"> - <el-input v-model="formData2.manufacturer" size="small"></el-input> - </el-form-item> - <el-form-item label="閲囪喘璐圭敤:"> - <el-input v-model="formData2.procurementCosts" size="small"></el-input> - </el-form-item> - <el-form-item label="鏍″噯璇佷功:"> - <el-input v-model="formData2.calibrationCerticate" size="small"></el-input> - </el-form-item> + <el-form-item label="鏍″噯鍛ㄦ湡锛堟湀锛�:"> + <el-input v-model="formData2.deviceName" size="small"></el-input> + </el-form-item> <el-form-item label="鍥剧墖:"> <div style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;"> @@ -434,7 +456,7 @@ options: [], labelPosition: 'right', dialogVisible: false, - dialogVisible2: false, + dialogVisible2: true, addPower: false, componentData: { entity: { @@ -518,7 +540,7 @@ responsiblePersonList: [], // 鎺堟潈浜哄垪琛� authorizerList: [], - // 璁惧鐘舵�佸垪琛� + // 褰撳墠鐘舵�佸垪琛� deviceStatusList: [], upLoad: false, upLoad2: false, diff --git a/src/components/view/a6-device-overview.vue b/src/components/view/a6-device-overview.vue index eb4bfab..196ea2e 100644 --- a/src/components/view/a6-device-overview.vue +++ b/src/components/view/a6-device-overview.vue @@ -151,8 +151,9 @@ <el-button size="small" type="primary" @click="currentPage= 1,list=[],finishLoding = false,refreshTable()">鏌� 璇�</el-button> </div> </div> - <div class="table" @scroll="scrollFn"> - <ul v-loading="loading" class="card"> + <div class="table" v-loading="loading"> + <scroll-pagination @load="refreshTable" :finishLoding="finishLoding"> + <ul class="card"> <li v-for="(m,i) in list" :key="i"> <el-image class="img" :src="javaApi+'/img/'+m.imageUpload"> <div slot="error" class="image-error" style="width: 112px; @@ -192,27 +193,18 @@ </div> </li> </ul> - <div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div> - <div v-if="list.length>0"> - <el-button - v-if="isLoding" - type="text" - style="display: flex; margin: 0 auto; color: #909399" - ><i class="el-icon-loading" style="font-size:20px"></i - ></el-button> - <el-button - type="text" - v-if="finishLoding" - style="display: flex; margin: 0 auto; color: #909399" - >宸茬粡娌℃湁鏇村鍟</el-button - > - </div> + </scroll-pagination> + <div v-if="list.length<1&&!loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div> </div> </div> </template> <script> +import ScrollPagination from '../tool/scroll-paging.vue' export default { + components: { + ScrollPagination + }, data() { return { entity:{ @@ -226,7 +218,6 @@ pageSize: 16, // 涓�椤�16鏉� total: '', loading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue - isLoding: false, // 鍔犺浇涓紝loading鍥炬爣,榛樿涓簍rue finishLoding: false // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡 } }, @@ -238,13 +229,8 @@ }, methods: { refreshTable() { - if(this.currentPage>1){ - this.isLoding = true - }else{ + if(this.currentPage==1){ this.loading = true - } - if(this.list.length==0){ - window.addEventListener("scroll", this.throttle(this.scrollFn, 20000)); } this.$axios.post(this.$api.deviceScope.selectDeviceParameter,{ page: { @@ -291,10 +277,10 @@ if(this.total==this.list.length){ this.finishLoding = true; } + this.currentPage++; } } this.loading = false - this.isLoding = false; }) }, refresh() { diff --git a/src/components/view/a6-personnel-overview.vue b/src/components/view/a6-personnel-overview.vue index bf88add..52b9a24 100644 --- a/src/components/view/a6-personnel-overview.vue +++ b/src/components/view/a6-personnel-overview.vue @@ -46,7 +46,6 @@ } .card li{ width: 320px; - /* height: 170px; */ border-radius: 8px 8px 8px 8px; box-shadow: 4px 4px 8px 0px rgba(51,51,51,0.04); border: 1px solid #EEEEEE; @@ -91,8 +90,9 @@ <el-button size="small" type="primary" @click="currentPage= 1,list=[],finishLoding = false,refreshTable()">鏌� 璇�</el-button> </div> </div> - <div class="table" @scroll="scrollFn"> - <ul v-loading="loading" class="card"> + <div class="table" v-loading="loading"> + <scroll-pagination @load="refreshTable" :finishLoding="finishLoding"> + <ul class="card" style="margin-top: 10px;"> <li v-for="(m,i) in list" :key="i"> <el-image style="width: 80px; height: 112px;" :src="javaApi+'/img/'+m.pictureUrl"> @@ -119,27 +119,18 @@ <div class="title">{{ m.name }}</div> </li> </ul> - <div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div> - <div v-if="list.length>0"> - <el-button - v-if="isLoding" - type="text" - style="display: flex; margin: 0 auto; color: #909399" - ><i class="el-icon-loading" style="font-size:20px"></i - ></el-button> - <el-button - type="text" - v-if="finishLoding" - style="display: flex; margin: 0 auto; color: #909399" - >宸茬粡娌℃湁鏇村鍟</el-button - > - </div> + </scroll-pagination> + <div v-if="list.length<1&&!loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div> </div> </div> </template> <script> +import ScrollPagination from '../tool/scroll-paging.vue' export default { + components: { + ScrollPagination + }, data() { return { entity:{ @@ -152,7 +143,6 @@ pageSize: 16, // 涓�椤�16鏉� total: '', loading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue - isLoding: false, // 鍔犺浇涓紝loading鍥炬爣,榛樿涓簍rue finishLoding: false // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡 } }, @@ -163,13 +153,8 @@ }, methods: { refreshTable() { - if(this.currentPage>1){ - this.isLoding = true - }else{ + if(this.currentPage==1){ this.loading = true - } - if(this.list.length==0){ - window.addEventListener("scroll", this.throttle(this.scrollFn, 20000)); } this.$axios.post(this.$api.user.selectUserList,{ page: { @@ -195,10 +180,10 @@ if(this.total==this.list.length){ this.finishLoding = true; } + this.currentPage++; } } this.loading = false - this.isLoding = false; }) }, refresh() { diff --git a/src/components/view/b1-report-preparation.vue b/src/components/view/b1-report-preparation.vue index 793fe08..f35498b 100644 --- a/src/components/view/b1-report-preparation.vue +++ b/src/components/view/b1-report-preparation.vue @@ -408,6 +408,7 @@ let url = row.urlS?row.urlS:row.url; const link = document.createElement('a'); link.href = this.javaApi + url; + link.target = '_blank'; document.body.appendChild(link); link.click(); }, @@ -455,7 +456,7 @@ this.$confirm('鏄惁鎻愪氦褰撳墠鎶ュ憡?', "鎻愪氦", { confirmButtonText: "鎻愪氦", cancelButtonText: "鍙栨秷", - type: "success" + type: "warning" }).then(() => { this.$axios.post(this.$api.insReport.writeReport, { id: row.id diff --git a/src/components/view/b4-daily-business-statistics.vue b/src/components/view/b4-daily-business-statistics.vue index 01a9951..594e47f 100644 --- a/src/components/view/b4-daily-business-statistics.vue +++ b/src/components/view/b4-daily-business-statistics.vue @@ -161,7 +161,8 @@ if (res.code == 201) return this.pageData = this.HaveJson(res.data) let xData = res.data.DAYS.map(m=>{ - return `${m[1]}-${m[2]}` + let arr = m.split('-') + return `${arr[1]}-${arr[2]}` }) this.chartData0.xData = xData this.chartData1.xData = xData diff --git a/src/components/view/b4-inspection-item-statistics.vue b/src/components/view/b4-inspection-item-statistics.vue index 4754f78..86e6156 100644 --- a/src/components/view/b4-inspection-item-statistics.vue +++ b/src/components/view/b4-inspection-item-statistics.vue @@ -203,7 +203,8 @@ if (res.code == 201) return this.pageData = this.HaveJson(res.data) let xData = res.data.DAYS.map(m=>{ - return `${m[1]}-${m[2]}` + let arr = m.split('-') + return `${arr[1]}-${arr[2]}` }) this.chartData0.xData = xData this.chartData1.xData = xData diff --git a/src/components/view/b4-sample-defects.vue b/src/components/view/b4-sample-defects.vue index da232f8..5637b5c 100644 --- a/src/components/view/b4-sample-defects.vue +++ b/src/components/view/b4-sample-defects.vue @@ -57,12 +57,12 @@ <div class="search_thing"> <div class="search_label">妫�楠岄」鐩細</div> <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable - v-model="entity.laboratoryName" @keyup.enter.native="refreshTable()"></el-input></div> + v-model="entity.inspectionItems" @keyup.enter.native="refreshTable()"></el-input></div> </div> <div class="search_thing"> <div class="search_label">濮旀墭缂栧彿锛�</div> <div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable - v-model="entity.laboratoryNumber" @keyup.enter.native="refreshTable()"></el-input></div> + v-model="entity.orderNumber" @keyup.enter.native="refreshTable()"></el-input></div> </div> <div class="search_thing" style="padding-left: 30px;"> <el-button size="small" @click="refresh()">閲� 缃�</el-button> @@ -79,30 +79,30 @@ default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column - prop="date" + prop="inspection_item" label="妫�楠岄」鐩�" sortable min-width="180"> <template slot-scope="scope"> <p> <el-tag style="margin-right: 10px;height: 24px;border-radius: 10px;line-height: 24px;border: 0;" :type="scope.row.level==2?'success':''">{{ '0' + scope.row.level }}</el-tag> - <span>{{ scope.row.date }}</span> + <span>{{ scope.row.inspection_item }}</span> </p> </template> </el-table-column> <el-table-column - prop="name" + prop="entrust_code" label="濮旀墭缂栧彿" sortable min-width="180"> </el-table-column> <el-table-column - prop="address" + prop="name" label="妫�楠屼汉" min-width="180"> </el-table-column> <el-table-column - prop="address" + prop="create_time" label="妫�楠屾椂闂�" min-width="180"> </el-table-column> @@ -121,27 +121,11 @@ export default { data() { return { - entity: {}, - tableData: [{ - id: 3, - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�', - level:1, - children: [{ - id: 31, - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�', - level:2, - }, { - id: 32, - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�', - level:2, - }] - }], + entity: { + orderNumber:null, + inspectionItems:null, + }, + tableData: [], page:{ current:1, size:20, @@ -151,15 +135,39 @@ } }, mounted() { - - this.getPower() + // this.getPower() + this.refreshTable() }, methods: { refreshTable(){ this.loading = true + this.$axios.post(this.$api.insOrder.selectSampleDefects, { + ...this.page, + ...this.entity + }).then(res => { + this.loading = false + if (res.code === 201) { + this.loading = false + return + } + this.total = res.data.total; + this.tableData = res.data.records.map(item=>{ + item.level = 1; + item.inspection_item = item.sample + item.children = item.children.map(m=>{ + m.id = Math.random(10000) + m.level = 2; + return m + }) + return item + }); + }) }, refresh(){ - this.page.size = 20; + this.entity = { + orderNumber:null, + inspectionItems:null, + }, this.page.current = 1; this.refreshTable(); }, diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue index c222aeb..f74e1ec 100644 --- a/src/components/view/index-index.vue +++ b/src/components/view/index-index.vue @@ -350,20 +350,26 @@ </div> <div class="right-3 card" style="overflow: hidden;"> <div class="right-3-tab"> - <div class="tab-item" style="cursor: pointer;" :class="{active:currentIndex==0}" @click="currentIndex=0">棰勮鎻愰啋 10</div> - <div class="tab-item" style="cursor: pointer;" :class="{active:currentIndex==1}" @click="currentIndex=1">閫氱煡閫氬憡 12</div> + <div class="tab-item" style="cursor: pointer;" :class="{active:currentIndex==4}" @click="currentIndex=4">棰勮鎻愰啋</div> + <div class="tab-item" style="cursor: pointer;" :class="{active:currentIndex==5}" @click="currentIndex=5">閫氱煡閫氬憡</div> </div> - <div class="right-3-list"> - <div class="list3-item" v-for="(m,i) in 5" :key="i"> + <div class="right-3-list" v-loading="listLoading"> + <scroll-pagination @load="getList" :finishLoding="finishLoding"> + <div class="list3-item" v-for="(m,i) in list" :key="i"> <div class="list3-item-title"> <img src="../../../static/img/index-tip.svg" alt=""> - <p>璁惧鍒版湡鎻愰啋</p> + <p>{{ m.theme }}</p> </div> <div class="list3-item-info"> - <p style="width: 73%;-webkit-line-clamp: 1;" class="ellipsis-multiline">缂栧彿<span style="color:#3A7BFA;"> SB20240101-001 </span>鐨勮澶囧皢浜�2023-09-09 11:11:11杩囨湡</p> - <p>2023-09-09 09:09:09</p> + <p style="width: 73%;-webkit-line-clamp: 1;" class="ellipsis-multiline"> + <!-- 缂栧彿<span style="color:#3A7BFA;"> SB20240101-001 </span>鐨勮澶囧皢浜�2023-09-09 11:11:11杩囨湡 --> + {{ m.content }} + </p> + <p>{{ m.createTime }}</p> </div> </div> + </scroll-pagination> + <div v-if="list.length<1&&!listLoading" style="color:#909399;font-size:14px;text-align: center;margin-top:80px" >鏆傛棤鏁版嵁</div> </div> </div> </el-col> @@ -405,13 +411,17 @@ import { getYearAndMonthAndDays } from '../../util/date' + import ScrollPagination from '../tool/scroll-paging.vue' export default { + components: { + ScrollPagination + }, data() { return { user: {}, now: null, calendarValue: new Date(), - currentIndex:0, + currentIndex:4, dialogVisible:false, query:{ time:'', @@ -424,11 +434,22 @@ weekdays:[], listScheduleByMe:[], scheduleLoading:false, + list:[], + currentPage:1, + pageSize: 8, // 涓�椤�7鏉� + total: null, + listLoading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue + finishLoding: false // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡 } }, watch:{ calendarValue(val){ this.getScheduleByMe() + }, + currentIndex(){ + this.currentPage = 1; + this.list = []; + this.getList(); } }, mounted() { @@ -440,8 +461,39 @@ this.init(); this.weekdays = this.getWeekdaysForNextWeek() this.getScheduleByMe() + this.currentPage = 1; + this.list = []; + this.getList(); }, methods: { + getList(){ + if(this.currentPage==1){ + this.listLoading = true + } + if(this.list.length==0){ + this.finishLoding = false; + } + this.$axios.get(this.$api.informationNotification.page+'?size='+this.pageSize+'¤t='+this.currentPage+'&messageType='+this.currentIndex).then(res => { + if(res.code === 201){ + return + } + let list = res.data.records; + this.total = res.data.total; + if(list.length==0){ + this.finishLoding = true; + }else{ + if(list.length<this.pageSize){ + this.finishLoding = true; + } + this.list = this.list.concat(list) + if(this.total==this.list.length){ + this.finishLoding = true; + } + this.currentPage++; + } + this.listLoading = false + }) + }, nowTime() { var date = new Date(); var y = date.getFullYear(); @@ -562,7 +614,8 @@ this.workList.push(res.data[`work${i}`]) } this.workDay = res.data.weekDays.map(m=>{ - return m[2] + let arr = m.split('-') + return arr[2] }) }) }, @@ -624,6 +677,6 @@ }) }) }, - } + }, } </script> diff --git a/src/components/view/notice-detail.vue b/src/components/view/notice-detail.vue index 8b11683..65e5518 100644 --- a/src/components/view/notice-detail.vue +++ b/src/components/view/notice-detail.vue @@ -1,22 +1,22 @@ <template> <div class="notice-detail-page"> <div class="notice-detail-head"> - <h4 style="margin-bottom: 16px;">娑堟伅涓婚</h4> + <h4 style="margin-bottom: 16px;">{{ noticeInfo.theme }}</h4> <p style="font-size: 12px;color: #999;margin-bottom: 20px;"> <!-- <span>娑堟伅绫诲瀷锛氬鎵� </span> --> - <span>鍙戦�佷汉锛�111 </span> + <span>鍙戦�佷汉锛歿{ noticeInfo.createUser }} </span> <span> </span> - <span>鏀朵欢浜猴細111</span> + <span>鏀朵欢浜猴細{{ noticeInfo.consigneeUser }}</span> <span> </span> - <span>鍙戜欢鏃堕棿锛�111</span> + <span>鍙戜欢鏃堕棿锛歿{ noticeInfo.createTime }}</span> </p> <div class="notice-detail-head-content"> <label>鍐呭锛�</label> - <div></div> + <div>{{ noticeInfo.content }}</div> </div> </div> - <div class="info-box"> - <component class="notice-content" :is="noticeInfo.u" style="height: 500px;"> + <div class="info-box" v-if="noticeInfo.jumpPath"> + <component class="notice-content" :is="noticeInfo.jumpPath" style="height: 500px;" > </component> </div> </div> @@ -37,11 +37,19 @@ components: comObj, data() { return{ - noticeInfo:{ - u:'b1-report-preparation' - }, + noticeInfo:{}, } - } + }, + created(){ + this.noticeInfo = JSON.parse(sessionStorage.getItem("noticeInfo")); + }, + mounted(){ + this.noticeInfo = JSON.parse(sessionStorage.getItem("noticeInfo")); + this.$bus.$on("change", (msg) => { + this.noticeInfo = JSON.parse(msg); + sessionStorage.setItem("noticeInfo", msg); + }); + }, } </script> diff --git a/src/main.js b/src/main.js index 72d3324..43d09d1 100644 --- a/src/main.js +++ b/src/main.js @@ -130,5 +130,9 @@ new Vue({ el: '#app', router, - render: h => h(App) + render: h => h(App), + beforeCreate() { + // 闇�瑕佸湪鍏ㄥ眬娣诲姞涓�涓睘鎬� + Vue.prototype.$bus = this + } }); diff --git a/src/view/index.vue b/src/view/index.vue index e444d61..827cf8e 100644 --- a/src/view/index.vue +++ b/src/view/index.vue @@ -463,7 +463,7 @@ this.timer&&clearInterval(this.timer); this.timer = setInterval(()=>{ this.checkForUnreadData() - },10000) + },20000) }, methods: { saveClick(){ diff --git a/src/view/notice.vue b/src/view/notice.vue index 691e041..4aae834 100644 --- a/src/view/notice.vue +++ b/src/view/notice.vue @@ -33,74 +33,64 @@ </el-dropdown-menu> </el-dropdown> </div> - <div class="notice-content" @scroll="scrollFn" v-loading="loading"> - <div class="notice-content-item" v-for="(m,i) in list" :key="i"> - <div class="btns" v-if="m"> - <el-dropdown style="margin-right: 20px;" trigger="click" @command="e=>handleDropdown(e,m)" v-if="m.messageType==2||m.messageType==3"> - <span class="el-dropdown-link"> - <span class="more" style="line-height: 26px;display: inline-block;">···</span> - </span> - <el-dropdown-menu slot="dropdown" v-if="m.messageType==2"> - <el-dropdown-item v-for="(n,j) in dropdownList0" :key="j" :command="n.value"> - {{ n.label }} - </el-dropdown-item> - </el-dropdown-menu> - <el-dropdown-menu slot="dropdown" v-if="m.messageType==3"> - <el-dropdown-item v-for="(n,j) in dropdownList1" :key="j" :command="n.value"> - {{ n.label }} - </el-dropdown-item> - </el-dropdown-menu> - </el-dropdown> - <i class="el-icon-close" style="cursor: pointer;" @click="handleDel(m)"></i> - </div> - <div class="content"> - <img :src="`../../static/img/notice-${m.messageType}.svg`" alt="" style="width: 50px;margin-right: 18px;"> - <div class="content-info"> - <h4 style="font-weight: normal;margin-bottom: 4px;display: flex;align-items: center;justify-content: space-between;"> - <span>{{ m.theme }}<el-tag :type="!m.messageStatus?'danger':'success'" size="small" v-if="m.messageType==1||m.messageType==2||m.messageType==3" style="margin-left: 8px;">{{ !m.messageStatus?'鏈鐞�':'宸插鐞�' }}</el-tag></span> - <span class="time" style="color: #999999;font-size: 12px;">{{ m.createTime }}</span> - </h4> - <p style="color: #999999;font-size: 14px;margin-bottom: 6px;cursor: pointer;" class="ellipsis-multiline" @click="goNoticeDetail(m)">{{ m.content }}</p> - <p style="font-size: 12px;color: #999999;display: flex;align-items: center;justify-content: space-between;"> - <span>鍙戦�佷汉锛歿{m.createUser}}</span> - <span>鏀朵欢浜猴細{{ m.consigneeUser }}</span> - </p> + <div class="notice-content" v-loading="loading"> + <scroll-pagination @load="refresh" :finishLoding="finishLoding"> + <div class="notice-content-item" v-for="(m,i) in list" :key="i"> + <div class="btns" v-if="m"> + <el-dropdown style="margin-right: 20px;" trigger="click" @command="e=>handleDropdown(e,m)" v-if="m.messageType==2||m.messageType==3"> + <span class="el-dropdown-link"> + <span class="more" style="line-height: 26px;display: inline-block;">···</span> + </span> + <el-dropdown-menu slot="dropdown" v-if="m.messageType==2"> + <el-dropdown-item v-for="(n,j) in dropdownList0" :key="j" :command="n.value"> + {{ n.label }} + </el-dropdown-item> + </el-dropdown-menu> + <el-dropdown-menu slot="dropdown" v-if="m.messageType==3"> + <el-dropdown-item v-for="(n,j) in dropdownList1" :key="j" :command="n.value"> + {{ n.label }} + </el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + <i class="el-icon-close" style="cursor: pointer;" @click="handleDel(m)"></i> + </div> + <div class="content"> + <img :src="`../../static/img/notice-${m.messageType}.svg`" alt="" style="width: 50px;margin-right: 18px;"> + <div class="content-info"> + <h4 style="font-weight: normal;margin-bottom: 4px;display: flex;align-items: center;justify-content: space-between;"> + <span>{{ m.theme }}<el-tag :type="!m.messageStatus?'danger':'success'" size="small" v-if="m.messageType==1||m.messageType==2||m.messageType==3" style="margin-left: 8px;">{{ !m.messageStatus?'鏈鐞�':'宸插鐞�' }}</el-tag></span> + <span class="time" style="color: #999999;font-size: 12px;">{{ m.createTime }}</span> + </h4> + <p style="color: #999999;font-size: 14px;margin-bottom: 6px;cursor: pointer;" class="ellipsis-multiline" @click="goNoticeDetail(m)">{{ m.content }}</p> + <p style="font-size: 12px;color: #999999;display: flex;align-items: center;justify-content: space-between;"> + <span>鍙戦�佷汉锛歿{m.createUser}}</span> + <span>鏀朵欢浜猴細{{ m.consigneeUser }}</span> + </p> + </div> + </div> + <div class="new-notice" v-if="!m.viewStatus"> + <span>new</span> </div> </div> - <div class="new-notice" v-if="!m.viewStatus"> - <span>new</span> - </div> - </div> - <div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div> - <div v-if="list.length>0"> - <el-button - v-if="isLoding" - type="text" - style="display: flex; margin: 0 auto; color: #909399" - ><i class="el-icon-loading" style="font-size:20px"></i - ></el-button> - <el-button - type="text" - v-if="finishLoding" - style="display: flex; margin: 0 auto; color: #909399" - >宸茬粡娌℃湁鏇村鍟</el-button - > - </div> + </scroll-pagination> + <div v-if="list.length<1&&!loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >鏆傛棤鏁版嵁</div> </div> </el-drawer> </div> </template> <script> - +import ScrollPagination from '../components/tool/scroll-paging.vue' export default { + components: { + ScrollPagination + }, data(){ return{ drawer:false, direction:'rtl', options:[], type:'0', - list:[], dropdownList0:[ { label:'閫氳繃', @@ -129,11 +119,11 @@ value:4 }, ], + list:[], currentPage:1, - pageSize: 16, // 涓�椤�16鏉� + pageSize: 8, // 涓�椤�7鏉� total: null, - loading: false, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue - isLoding: false, // 鍔犺浇涓紝loading鍥炬爣,榛樿涓簍rue + loading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue finishLoding: false // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡 } }, @@ -145,13 +135,11 @@ }, methods:{ refresh(){ - if(this.currentPage>1){ - this.isLoding = true - }else{ + if(this.currentPage==1){ this.loading = true } if(this.list.length==0){ - window.addEventListener("scroll", this.throttle(this.scrollFn, 20000)); + this.finishLoding = false } let type = this.type==0?null:this.type; this.$axios.get(this.$api.informationNotification.page+'?size='+this.pageSize+'¤t='+this.currentPage+(type?'&messageType='+type:'')).then(res => { @@ -170,9 +158,9 @@ if(this.total==this.list.length){ this.finishLoding = true; } + this.currentPage++ } this.loading = false - this.isLoding = false; }) }, open(){ @@ -192,6 +180,8 @@ goNoticeDetail(row){ this.$axios.put(this.$api.informationNotification.triggerModificationStatusToRead+'/'+row.id).then(res => { this.drawer = false; + row.num = Math.random(100); + this.$bus.$emit("change", JSON.stringify(row)); this.$parent.addTab({ v: "娑堟伅璇︽儏", i: "el-icon-s-tools", -- Gitblit v1.9.3