From af1c9e588f1de0240390648f9bb56aa486870aff Mon Sep 17 00:00:00 2001 From: chengxiangling <291105840@qq.com> Date: 星期五, 16 五月 2025 17:40:18 +0800 Subject: [PATCH] 提交高度修改; --- src/views/basicData/processRoute/index.vue | 475 ++++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 289 insertions(+), 186 deletions(-) diff --git a/src/views/basicData/processRoute/index.vue b/src/views/basicData/processRoute/index.vue index 43d75a9..a65b93f 100644 --- a/src/views/basicData/processRoute/index.vue +++ b/src/views/basicData/processRoute/index.vue @@ -1,23 +1,27 @@ <template> <div class="app-container"> - <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px"> + <el-form + :model="queryParams" + ref="queryRef" + :inline="true" + v-show="showSearch" + label-width="90px" + > <el-row :gutter="20"> - <el-col - :span="6"> - <el-form-item label="闆嗘垚鏃ユ湡" style="width: 308px"> - <el-date-picker - v-model="daterangeIntegrationDay" - value-format="YYYY-MM-DD HH:mm:ss" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - ></el-date-picker> - </el-form-item> + <el-col :span="6"> + <el-form-item label="闆嗘垚鏃ユ湡" style="width: 308px"> + <el-date-picker + v-model="daterangeIntegrationDay" + value-format="YYYY-MM-DD HH:mm:ss" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + ></el-date-picker> + </el-form-item> </el-col> - <el-col - :span="6"> - <el-form-item label="鏂欏彿" prop="itemNo"> + <el-col :span="6"> + <el-form-item label="鏂欏彿" prop="itemNo"> <el-input v-model="queryParams.itemNo" placeholder="璇疯緭鍏ユ枡鍙�" @@ -26,26 +30,27 @@ /> </el-form-item> </el-col> - <el-col - :span="12" - style="text-align: right;"> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-col :span="12" style="text-align: right"> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery" + >鎼滅储</el-button + > + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-col> - </el-row> + </el-row> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> - <el-button - type="info" - plain - icon="Upload" - @click="handleImport" - v-hasPermi="['processRoute:processRoute:import']" - >瀵煎叆</el-button> + <el-button + type="info" + plain + icon="Upload" + @click="handleImport" + v-hasPermi="['processRoute:processRoute:importData']" + >瀵煎叆</el-button + > </el-col> <el-col :span="1.5"> <el-button @@ -54,39 +59,69 @@ icon="Download" @click="handleExport" v-hasPermi="['processRoute:processRoute:export']" - >瀵煎嚭</el-button> + >瀵煎嚭</el-button + > </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + <right-toolbar + v-model:showSearch="showSearch" + @queryTable="getList" + ></right-toolbar> </el-row> <HxlhTable - style="width: 100%" - :columns="columns" - :data="processRouteList" - :loading="loading" - :height="height" - @on-checkbox="handleCheckboxChange" + style="width: 100%" + :columns="columns" + :showOverflow="true" + :virtualYConfig="virtualYConfig" + :data="processRouteList" + :loading="loading" + :height="height" + @bottomAutoLoadMore="handleAutoLoadMore" + @on-checkbox="handleCheckboxChange" > + <template #rowIndex="{ rowIndex }"> + {{ rowIndex }} + </template> </HxlhTable> - <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� --> - <el-dialog :title="upload.title" v-model="upload.open" width="90%" append-to-body> + <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� --> + <el-dialog + :title="upload.title" + v-model="upload.open" + width="90%" + append-to-body + @close="dialogCancel" + > <el-row :gutter="10"> <el-col> - <div style="border-bottom: 1px solid #ccc;" > - <p>涓婁紶Excel鏂囦欢锛屽寘鍚伐鑹鸿矾绾夸俊鎭�傜郴缁熷皢瑙f瀽鏁版嵁骞朵繚瀛樺埌鏈湴锛岀敤浜庡叧鑱斿埌闆朵欢璁″垝涓��</p> + <div style="border-bottom: 1px solid #ccc"> + <p> + 涓婁紶Excel鏂囦欢锛屽寘鍚伐鑹鸿矾绾夸俊鎭�傜郴缁熷皢瑙f瀽鏁版嵁骞朵繚瀛樺埌鏈湴锛岀敤浜庡叧鑱斿埌闆朵欢璁″垝涓�� + </p> </div> </el-col> - <el-col > + <el-col> <div></div> </el-col> </el-row> - <el-row :gutter="10" style="margin-top: 20px;"> - </el-row> + <el-row :gutter="10" style="margin-top: 20px"> </el-row> <el-row> <el-col> - <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="true" drag> + <el-upload + ref="uploadRef" + :limit="1" + accept=".xlsx, .xls" + :headers="upload.headers" + :action="upload.url + '?updateSupport=' + upload.updateSupport" + :disabled="upload.isUploading" + :on-progress="handleFileUploadProgress" + :on-success="handleFileSuccess" + :auto-upload="true" + drag + > <el-icon class="el-icon--upload"><upload-filled /></el-icon> - <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + <div class="el-upload__text"> + 灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em> + </div> <template #tip> <div class="el-upload__tip"> <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span> @@ -95,27 +130,25 @@ </el-upload> </el-col> </el-row> - <el-row style="margin-top: 20px;"> - <el-col> - <div> - <el-button - type="success" - plain - icon="Check" - :disabled="planned" - @click="uploadParse" - v-hasPermi="['processRoute:processRoute:confirmProcessRoute']" - >涓婁紶骞惰В鏋�</el-button> - </div> - </el-col> - </el-row> <el-row> - <el-col style="margin-top: 20px;"> + <el-col style="margin-top: 20px"> <div v-show="isVisible"> - <el-alert icon="Check" :show-icon="true" title="宸ヨ壓璺嚎鏁版嵁宸叉垚鍔熻В鏋�" type="success" :closable="false"/> + <el-alert + icon="Check" + :show-icon="true" + title="宸ヨ壓璺嚎鏁版嵁宸叉垚鍔熻В鏋�" + type="success" + :closable="false" + /> </div> <div v-show="isError"> - <el-alert icon="Close" :show-icon="true" title="宸ヨ壓璺嚎鏁版嵁宸茶В鏋愬け璐�" type="error" :closable="false"/> + <el-alert + icon="Close" + :show-icon="true" + title="宸ヨ壓璺嚎鏁版嵁宸茶В鏋愬け璐�" + type="error" + :closable="false" + /> </div> </el-col> </el-row> @@ -135,13 +168,25 @@ </HxlhTable> </el-col> <el-col> - <div style="text-align: right;"> - <h4>鍏变笂浼�<span style="color: blue;">{{ total }}</span>鏉″伐鑹鸿矾绾挎暟鎹�</h4> + <div style="text-align: right"> + <h4> + 鍏变笂浼�<span style="color: blue">{{ total }}</span + >鏉″伐鑹鸿矾绾挎暟鎹� + </h4> </div> </el-col> </el-row> <template #footer> <div class="dialog-footer"> + <el-button + type="success" + plain + icon="Check" + :disabled="planned" + @click="uploadParse" + v-hasPermi="['processRoute:processRoute:confirmProcessRoute']" + >纭涓婁紶</el-button + > <el-button @click="dialogCancel">鍙� 娑�</el-button> </div> </template> @@ -150,11 +195,20 @@ </template> <script setup name="ProcessRoute"> -import { listProcessRoute, getProcessRoute, delProcessRoute, addProcessRoute, updateProcessRoute,processRouteTempList,confirmProcessRoute } from "@/api/basicData/processRoute"; -import HxlhTable from '@/components/HxlhTable' +import { + listProcessRoute, + getProcessRoute, + delProcessRoute, + addProcessRoute, + updateProcessRoute, + processRouteTempList, + confirmProcessRoute, +} from "@/api/basicData/processRoute"; +import { throttle } from "@/utils/throttle"; +import HxlhTable from "@/components/HxlhTable"; import { getToken } from "@/utils/auth"; import { ref } from "vue"; -import { ElMessage } from 'element-plus' +// import { ElMessage } from "element-plus"; const { proxy } = getCurrentInstance(); const processRouteList = ref([]); @@ -168,7 +222,7 @@ const title = ref(""); const daterangeIntegrationDay = ref([]); //寮圭獥鐩稿叧 -const height = ref(document.documentElement.clientHeight - 260 + "px;") +const height = ref(document.documentElement.clientHeight - 230 + "px;"); const isVisible = ref(false); const isError = ref(false); const planned = ref(true); @@ -176,6 +230,11 @@ const exampleHeight = ref("500px"); const uploadRef = ref(); const exampleList = ref([]); +const virtualYConfig = { + enabled: true, + gt: 0, + threshold: 50, +}; /*** 鐢ㄦ埛瀵煎叆鍙傛暟 */ const upload = reactive({ // 鏄惁鏄剧ず寮瑰嚭灞傦紙鐢ㄦ埛瀵煎叆锛� @@ -189,153 +248,154 @@ // 璁剧疆涓婁紶鐨勮姹傚ご閮� headers: { Authorization: "Bearer " + getToken() }, // 涓婁紶鐨勫湴鍧� - url: import.meta.env.VITE_APP_BASE_API + "/aps/processRoute/importData" + url: import.meta.env.VITE_APP_BASE_API + "/aps/processRoute/importData", }); -// 琛ㄦ牸閰嶇疆-鍒楄〃 +// 琛ㄦ牸閰嶇疆-鍒楄〃 const columns = ref([ - { type: 'checkbox', width: 60, align:"center"}, - { type: 'seq', title: '搴忓彿', width: 60 }, + { type: "checkbox", width: 60, align: "center" }, + { type: "seq", title: "搴忓彿", width: 60 }, { - title: '鏂欏彿', - field: 'itemNo', + title: "鏂欏彿", + field: "itemNo", width: 150, - align:"center", + align: "center", }, { - title: '宸ュ崟鍙�', - field: 'workOrderNo', + title: "宸ュ崟鍙�", + field: "workOrderNo", width: 150, - align:"center", + align: "center", }, { - title: '宸ュ簭搴忓彿', - field: 'processNumber', + title: "宸ュ簭搴忓彿", + field: "processNumber", width: 100, - align:"center", + align: "center", }, { - title: '宸ュ簭鍚嶇О', - field: 'processName', + title: "宸ュ簭鍚嶇О", + field: "processName", width: 150, - align:"center", + align: "center", }, { - title: '宸ュ簭璁″垝寮�濮嬫棩鏈�', - field: 'processPlanStartDay', + title: "宸ュ簭璁″垝寮�濮嬫棩鏈�", + field: "processPlanStartDay", width: 200, - align:"center", + align: "center", }, { - title: '宸ュ簭璁″垝缁撴潫鏃ユ湡', - field: 'processPlanEndDay', + title: "宸ュ簭璁″垝缁撴潫鏃ユ湡", + field: "processPlanEndDay", width: 200, - align:"center", + align: "center", }, { - title: '鏈紑宸ユ暟閲�', - field: 'notStartWorkCount', + title: "鏈紑宸ユ暟閲�", + field: "notStartWorkCount", width: 90, - align:"center", + align: "center", }, { - title: '宸插畬鎴愭暟閲�', - field: 'completedCount', + title: "宸插畬鎴愭暟閲�", + field: "completedCount", width: 90, - align:"center", + align: "center", }, { - title: '搴熷純鏁伴噺', - field: 'discardCount', + title: "搴熷純鏁伴噺", + field: "discardCount", width: 90, - align:"center", + align: "center", }, { - title: '鏍囧噯宸ユ椂', - field: 'standardTime', + title: "鏍囧噯宸ユ椂", + field: "standardTime", width: 90, - align:"center", + align: "center", }, { - title: '宸ュ簭鎺掑簭', - field: 'processOrder', + title: "宸ュ簭鎺掑簭", + field: "processOrder", width: 90, - align:"center", + align: "center", }, { - title: '闆嗘垚鏃ユ湡', - field: 'integrationDay', + title: "闆嗘垚鏃ユ湡", + field: "integrationDay", width: 160, - align:"center", - } + align: "center", + }, ]); + // 琛ㄦ牸閰嶇疆-寮圭獥 const exampleColumns = ref([ - { type: 'seq', title: '搴忓彿', width: 60 }, + { type: "seq", title: "搴忓彿", width: 60, slots: { default: "rowIndex" } }, { - title: '鏂欏彿', - field: 'itemNo', + title: "鏂欏彿", + field: "itemNo", width: 150, - align:"center", + align: "center", }, { - title: '宸ュ崟鍙�', - field: 'workOrderNo', + title: "宸ュ崟鍙�", + field: "workOrderNo", width: 150, - align:"center", + align: "center", }, { - title: '宸ュ簭搴忓彿', - field: 'processNumber', + title: "宸ュ簭搴忓彿", + field: "processNumber", width: 85, - align:"center", + align: "center", }, { - title: '宸ュ簭鍚嶇О', - field: 'processName', + title: "宸ュ簭鍚嶇О", + field: "processName", width: 150, - align:"center", + align: "center", }, { - title: '宸ュ簭璁″垝寮�濮嬫棩鏈�', - field: 'processPlanStartDay', + title: "宸ュ簭璁″垝寮�濮嬫棩鏈�", + field: "processPlanStartDay", width: 200, - align:"center", + align: "center", }, { - title: '宸ュ簭璁″垝缁撴潫鏃ユ湡', - field: 'processPlanEndDay', + title: "宸ュ簭璁″垝缁撴潫鏃ユ湡", + field: "processPlanEndDay", width: 200, - align:"center", + align: "center", }, { - title: '鏈紑宸ユ暟閲�', - field: 'notStartWorkCount', + title: "鏈紑宸ユ暟閲�", + field: "notStartWorkCount", width: 140, - align:"center", + align: "center", }, { - title: '宸插畬鎴愭暟閲�', - field: 'completedCount', + title: "宸插畬鎴愭暟閲�", + field: "completedCount", width: 140, - align:"center", + align: "center", }, { - title: '搴熷純鏁伴噺', - field: 'discardCount', + title: "搴熷純鏁伴噺", + field: "discardCount", width: 140, - align:"center", + align: "center", }, { - title: '鏍囧噯宸ユ椂', - field: 'standardTime', + title: "鏍囧噯宸ユ椂", + field: "standardTime", width: 140, - align:"center", + align: "center", }, { - title: '宸ュ簭鎺掑簭', - field: 'processOrder', + title: "宸ュ簭鎺掑簭", + field: "processOrder", width: 140, - align:"center", + align: "center", }, // { // title: '闆嗘垚鏃ユ湡', @@ -344,35 +404,64 @@ // align:"center", // } ]); +const hasMore = ref(true); const data = reactive({ form: {}, queryParams: { pageNum: 1, - pageSize: 10, + pageSize: 100, itemNo: null, integrationDay: null, }, - rules: { - } + rules: {}, }); const { queryParams, form, rules } = toRefs(data); /** 鏌ヨ宸ヨ壓璺嚎鍒楄〃 */ -function getList() { +async function getList() { loading.value = true; queryParams.value.params = {}; - if (null != daterangeIntegrationDay && '' != daterangeIntegrationDay) { - queryParams.value.params["beginIntegrationDay"] = daterangeIntegrationDay.value[0]; - queryParams.value.params["endIntegrationDay"] = daterangeIntegrationDay.value[1]; + if (null != daterangeIntegrationDay && "" != daterangeIntegrationDay) { + queryParams.value.params["beginIntegrationDay"] = + daterangeIntegrationDay.value[0]; + queryParams.value.params["endIntegrationDay"] = + daterangeIntegrationDay.value[1]; } - listProcessRoute(queryParams.value).then(response => { - processRouteList.value = response.rows; - total.value = response.total; - loading.value = false; - }); -} + const response = await listProcessRoute(queryParams.value); + // processRouteList.value = response.rows; + if (processRouteList.value.length < queryParams.value.pageSize) { + hasMore.value = false; + processRouteList.value = response.rows; + } else { + processRouteList.value = [...processRouteList.value, ...response.rows]; + } + + // total.value = response.total; + loading.value = false; +} +// async function loadData() { +// try { +// const response = await fetch(`https://api.example.com/products?page=${this.page}&limit=${this.pageSize}`); +// const data = await response.json(); +// if (data.length < this.pageSize) { +// this.hasMore = false; +// } +// this.products.push(...data); +// this.page++; +// } catch (error) { +// console.error('Error fetching data:', error); +// } +// } +const throttledScroll = throttle(() => { + queryParams.value.pageNum++; + getList(); + console.log("1111") +}, 200); +function handleAutoLoadMore() { + throttledScroll() +} // 鍙栨秷鎸夐挳 function cancel() { open.value = false; @@ -401,7 +490,7 @@ createBy: null, createTime: null, updateBy: null, - updateTime: null + updateTime: null, }; proxy.resetForm("processRouteRef"); } @@ -421,7 +510,7 @@ // 澶氶�夋閫変腑鏁版嵁 function handleSelectionChange(selection) { - ids.value = selection.map(item => item.id); + ids.value = selection.map((item) => item.id); single.value = selection.length != 1; multiple.value = !selection.length; } @@ -436,8 +525,8 @@ /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { reset(); - const _id = row.id || ids.value - getProcessRoute(_id).then(response => { + const _id = row.id || ids.value; + getProcessRoute(_id).then((response) => { form.value = response.data; open.value = true; title.value = "淇敼宸ヨ壓璺嚎"; @@ -446,16 +535,16 @@ /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["processRouteRef"].validate(valid => { + proxy.$refs["processRouteRef"].validate((valid) => { if (valid) { if (form.value.id != null) { - updateProcessRoute(form.value).then(response => { + updateProcessRoute(form.value).then((response) => { proxy.$modal.msgSuccess("淇敼鎴愬姛"); open.value = false; getList(); }); } else { - addProcessRoute(form.value).then(response => { + addProcessRoute(form.value).then((response) => { proxy.$modal.msgSuccess("鏂板鎴愬姛"); open.value = false; getList(); @@ -468,25 +557,32 @@ /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { const _ids = row.id || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎宸ヨ壓璺嚎缂栧彿涓�"' + _ids + '"鐨勬暟鎹」锛�').then(function() { - return delProcessRoute(_ids); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + proxy.$modal + .confirm('鏄惁纭鍒犻櫎宸ヨ壓璺嚎缂栧彿涓�"' + _ids + '"鐨勬暟鎹」锛�') + .then(function () { + return delProcessRoute(_ids); + }) + .then(() => { + getList(); + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + }) + .catch(() => {}); } /** 瀵煎叆鎸夐挳鎿嶄綔 */ function handleImport() { upload.title = "宸ヨ壓璺嚎鏁版嵁涓婁紶"; upload.open = true; -}; +} /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download('aps/processRoute/export', { - ...queryParams.value - }, `processRoute_${new Date().getTime()}.xlsx`) + proxy.download( + "aps/processRoute/export", + { + ...queryParams.value, + }, + `processRoute_${new Date().getTime()}.xlsx` + ); } - /**鏂囦欢涓婁紶涓鐞� */ const handleFileUploadProgress = (event, file, fileList) => { @@ -495,15 +591,21 @@ /** 鏂囦欢涓婁紶鎴愬姛澶勭悊 */ const handleFileSuccess = (response, file, fileList) => { - if(response.code == '200'){ + if (response.code == "200") { batchNumber.value = response.data; isVisible.value = true; planned.value = false; isError.value = false; getExampleList(); - }else{ + } else { isError.value = true; - proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "瀵煎叆缁撴灉", { dangerouslyUseHTMLString: true }); + proxy.$alert( + "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + + response.msg + + "</div>", + "瀵煎叆缁撴灉", + { dangerouslyUseHTMLString: true } + ); } proxy.$refs["uploadRef"].handleRemove(file); upload.isUploading = false; @@ -513,7 +615,7 @@ loading.value = true; queryParams.value = {}; queryParams.value.batchNumber = batchNumber.value; - processRouteTempList(queryParams.value).then(response => { + processRouteTempList(queryParams.value).then((response) => { exampleList.value = response.rows; total.value = response.total; loading.value = false; @@ -523,7 +625,7 @@ function uploadParse() { queryParams.value.params = {}; queryParams.value.params["batchNumber"] = batchNumber.value; - confirmProcessRoute(queryParams.value).then(response => { + confirmProcessRoute(queryParams.value).then((response) => { exampleList.value = response.rows; loading.value = false; isVisible.value = false; @@ -531,15 +633,15 @@ planned.value = true; upload.open = false; ElMessage({ - message: '宸ヨ壓璺嚎鏁版嵁宸叉垚鍔熶笂浼犲拰瑙f瀽', - type: 'success', - }) + message: "宸ヨ壓璺嚎鏁版嵁宸叉垚鍔熶笂浼犲拰瑙f瀽", + type: "success", + }); getList(); }); } /** dialog鍙栨秷 */ -function dialogCancel(){ +function dialogCancel() { if (uploadRef.value) { uploadRef.value.clearFiles(); } @@ -547,6 +649,7 @@ isError.value = false; planned.value = true; upload.open = false; + upload.isUploading = false; } getList(); </script> -- Gitblit v1.9.3