From b0e84af3dafe8984b69858c4420b5611c9b58f30 Mon Sep 17 00:00:00 2001
From: CD配唱片 <CD配唱片>
Date: 星期四, 24 四月 2025 15:17:00 +0800
Subject: [PATCH] 提交工艺路线的表格触底加载
---
src/views/basicData/processRoute/index.vue | 410 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 244 insertions(+), 166 deletions(-)
diff --git a/src/views/basicData/processRoute/index.vue b/src/views/basicData/processRoute/index.vue
index 38a4cd4..cdad7f9 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"
+ <el-button
+ type="info"
+ plain
+ icon="Upload"
+ @click="handleImport"
v-hasPermi="['processRoute:processRoute:importData']"
- >瀵煎叆</el-button>
+ >瀵煎叆</el-button
+ >
</el-col>
<el-col :span="1.5">
<el-button
@@ -54,39 +59,65 @@
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"
+ :virtualYConfig="virtualYConfig"
+ :data="processRouteList"
+ :loading="loading"
+ :height="height"
+ @bottomAutoLoadMore="handleAutoLoadMore"
+ @on-checkbox="handleCheckboxChange"
>
</HxlhTable>
- <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� -->
- <el-dialog :title="upload.title" v-model="upload.open" width="90%" append-to-body @close="dialogCancel">
+ <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� -->
+ <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鏂囦欢锛屽寘鍚伐鑹鸿矾绾夸俊鎭�傜郴缁熷皢瑙ｆ瀽鏁版嵁骞朵繚瀛樺埌鏈湴锛岀敤浜庡叧鑱斿埌闆朵欢璁″垝涓��</p>
+ <div style="border-bottom: 1px solid #ccc">
+ <p>
+ 涓婁紶Excel鏂囦欢锛屽寘鍚伐鑹鸿矾绾夸俊鎭�傜郴缁熷皢瑙ｆ瀽鏁版嵁骞朵繚瀛樺埌鏈湴锛岀敤浜庡叧鑱斿埌闆朵欢璁″垝涓��
+ </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>
@@ -96,12 +127,24 @@
</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>
@@ -121,8 +164,11 @@
</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>
@@ -135,7 +181,8 @@
:disabled="planned"
@click="uploadParse"
v-hasPermi="['processRoute:processRoute:confirmProcessRoute']"
- >纭涓婁紶</el-button>
+ >纭涓婁紶</el-button
+ >
<el-button @click="dialogCancel">鍙� 娑�</el-button>
</div>
</template>
@@ -144,11 +191,19 @@
</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 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([]);
@@ -162,7 +217,7 @@
const title = ref("");
const daterangeIntegrationDay = ref([]);
//寮圭獥鐩稿叧
-const height = ref(document.documentElement.clientHeight - 260 + "px;")
+const height = ref(document.documentElement.clientHeight - 260 + "px;");
const isVisible = ref(false);
const isError = ref(false);
const planned = ref(true);
@@ -170,6 +225,11 @@
const exampleHeight = ref("500px");
const uploadRef = ref();
const exampleList = ref([]);
+const virtualYConfig = {
+ enabled: true,
+ gt: 0,
+ threshold: 50,
+};
/*** 鐢ㄦ埛瀵煎叆鍙傛暟 */
const upload = reactive({
// 鏄惁鏄剧ず寮瑰嚭灞傦紙鐢ㄦ埛瀵煎叆锛�
@@ -183,154 +243,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 },
{
- 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: '闆嗘垚鏃ユ湡',
@@ -343,12 +403,11 @@
form: {},
queryParams: {
pageNum: 1,
- pageSize: 10,
+ pageSize: 10000,
itemNo: null,
integrationDay: null,
},
- rules: {
- }
+ rules: {},
});
const { queryParams, form, rules } = toRefs(data);
@@ -357,17 +416,23 @@
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 => {
+ listProcessRoute(queryParams.value).then((response) => {
processRouteList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
+function handleAutoLoadMore(){
+ queryParams.value.pageNum++;
+ getList();
+}
// 鍙栨秷鎸夐挳
function cancel() {
open.value = false;
@@ -396,7 +461,7 @@
createBy: null,
createTime: null,
updateBy: null,
- updateTime: null
+ updateTime: null,
};
proxy.resetForm("processRouteRef");
}
@@ -416,7 +481,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;
}
@@ -431,8 +496,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 = "淇敼宸ヨ壓璺嚎";
@@ -441,16 +506,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();
@@ -463,25 +528,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) => {
@@ -490,15 +562,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;
@@ -508,7 +586,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;
@@ -518,7 +596,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;
@@ -526,15 +604,15 @@
planned.value = true;
upload.open = false;
ElMessage({
- message: '宸ヨ壓璺嚎鏁版嵁宸叉垚鍔熶笂浼犲拰瑙ｆ瀽',
- type: 'success',
- })
+ message: "宸ヨ壓璺嚎鏁版嵁宸叉垚鍔熶笂浼犲拰瑙ｆ瀽",
+ type: "success",
+ });
getList();
});
}
/** dialog鍙栨秷 */
-function dialogCancel(){
+function dialogCancel() {
if (uploadRef.value) {
uploadRef.value.clearFiles();
}
--
Gitblit v1.9.3