From b9b64ceb5a7bc42ae1eed36434cefca81bc13259 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=9A=93=E6=9C=88=E5=BD=92=E5=B0=98?= Date: Mon, 21 Apr 2025 01:53:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=BF=9B=E5=BA=A6=E5=AF=B9=E8=AF=9D=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 codes、data/import 和 data/maintain 模块中添加上传进度对话框 - 对话框包含上传步骤、提示信息和加载动画 - 优化了上传逻辑，增加了步骤状态更新 - 修改了上传相关提示信息，统一为英文 - 调整了下载模板文件名，使用 "UploadTemplate" 前缀 --- src/views/codes/index/index.vue | 36 +++++++++++++++++++++++++ src/views/codes/index/utils/hook.tsx | 28 +++++++++++++++---- src/views/data/import/index.vue | 36 +++++++++++++++++++++++++ src/views/data/import/utils/hook.tsx | 30 +++++++++++++++++---- src/views/data/maintain/index.vue | 37 ++++++++++++++++++++++++++ src/views/data/maintain/utils/hook.tsx | 37 +++++++++++++++++++++----- vite.config.ts | 2 +- 7 files changed, 188 insertions(+), 18 deletions(-) diff --git a/src/views/codes/index/index.vue b/src/views/codes/index/index.vue index 732b373..b1ca534 100644 --- a/src/views/codes/index/index.vue +++ b/src/views/codes/index/index.vue @@ -101,6 +101,40 @@ + + + + + + + + + @@ -351,6 +385,8 @@ const { queryResult, selectedNum, showUploadArea, + dialogVisible, + activeStep, fileIds, fileList, uploadStatus, diff --git a/src/views/codes/index/utils/hook.tsx b/src/views/codes/index/utils/hook.tsx index 5661f7f..7af80c3 100644 --- a/src/views/codes/index/utils/hook.tsx +++ b/src/views/codes/index/utils/hook.tsx @@ -58,6 +58,10 @@ export const useIndex = (tableRef: Ref) => { const fileId = ref(""); /**上传按钮状态 */ const uploadStatus = ref(false); + /**上传对话框 */ + const dialogVisible = ref(false); + /**当前上传步骤 */ + const activeStep = ref(1); /** * 查询结果 */ @@ -201,7 +205,7 @@ export const useIndex = (tableRef: Ref) => { // 创建 元素并触发下载 const link = document.createElement("a"); link.href = url; - link.download = `上传模版.${type}`; // 设置下载文件名，确保后缀名正确 + link.download = `UploadTemplate.${type}`; // 设置下载文件名，确保后缀名正确 document.body.appendChild(link); // 将 元素添加到 DOM 中 link.click(); // 模拟点击下载 @@ -227,7 +231,7 @@ export const useIndex = (tableRef: Ref) => { // const maxSize = 20 * 1024 * 1024; // 20MB 限制 if (!isExcel) { - message("只能上传 xlsx 或 xls 文件!", { type: "error" }); + message("Only xlsx or xls files can be uploaded!", { type: "error" }); return false; } /* @@ -242,8 +246,14 @@ export const useIndex = (tableRef: Ref) => { /**处理文件上传 */ const handleUpload = async () => { + activeStep.value = 1; + dialogVisible.value = true; if (fileList.value.length === 0) { - message("请先上传文件！", { type: "error", duration: 5000 }); + message("Please select the file first!", { + type: "error", + duration: 5000 + }); + dialogVisible.value = false; return; } uploadStatus.value = true; @@ -252,7 +262,7 @@ export const useIndex = (tableRef: Ref) => { if (file.status === "success") { const data = await getQueryCodeAPI(fileId.value); if (data.success) { - message("查询成功！", { type: "success" }); + message(data.msg, { type: "success" }); queryResult.value = data.data; dataList.value = data.data.response_result; pagination.total = data.data.result_count; @@ -266,7 +276,10 @@ export const useIndex = (tableRef: Ref) => { if (res.success) { file.status = "success"; fileId.value = res.data.id; - message(`${res.data.name}上传成功！`, { type: "success" }); + message(`${res.data.name} Uploaded successfully!`, { + type: "success" + }); + activeStep.value = 2; fileIds.value.push(res.data); const data = await getQueryCodeAPI(fileId.value); if (data.success) { @@ -295,6 +308,9 @@ export const useIndex = (tableRef: Ref) => { } } catch (error) { console.error(error); + } finally { + dialogVisible.value = false; + activeStep.value = 1; } } uploadStatus.value = false; @@ -536,6 +552,8 @@ export const useIndex = (tableRef: Ref) => { queryResult, selectedNum, showUploadArea, + dialogVisible, + activeStep, fileIds, fileList, uploadStatus, diff --git a/src/views/data/import/index.vue b/src/views/data/import/index.vue index c8143a0..c36cbc8 100644 --- a/src/views/data/import/index.vue +++ b/src/views/data/import/index.vue @@ -192,6 +192,40 @@ + + + + + + + + +
{ const fileIds = ref([]); /**上传按钮状态 */ const uploadStatus = ref(false); + /**上传对话框 */ + const dialogVisible = ref(false); + /**当前上传步骤 */ + const activeStep = ref(1); const getStatusTag = (status: number) => { switch (status) { @@ -366,7 +370,7 @@ export const useCode = (tableRef: Ref) => { // 创建 元素并触发下载 const link = document.createElement("a"); link.href = url; - link.download = `上传模版.${type}`; // 设置下载文件名，确保后缀名正确 + link.download = `UploadTemplate.${type}`; // 设置下载文件名，确保后缀名正确 document.body.appendChild(link); // 将 元素添加到 DOM 中 link.click(); // 模拟点击下载 @@ -391,7 +395,7 @@ export const useCode = (tableRef: Ref) => { // const maxSize = 20 * 1024 * 1024; // 20MB 限制 if (!isExcel) { - message("只能上传 xlsx 或 xls 文件!", { type: "error" }); + message("Only xlsx or xls files can be uploaded!", { type: "error" }); return false; } /* @@ -406,8 +410,14 @@ export const useCode = (tableRef: Ref) => { /** 处理文件上传 */ const handleUpload = async () => { + activeStep.value = 1; + dialogVisible.value = true; if (fileList.value.length === 0) { - message("请先选择文件！", { type: "error", duration: 5000 }); + message("Please select the file first!", { + type: "error", + duration: 5000 + }); + dialogVisible.value = false; return; } @@ -422,14 +432,18 @@ export const useCode = (tableRef: Ref) => { if (res.success) { file.status = "success"; fileIds.value.push(res.data); // 记录成功上传的文件ID - message(`${res.data.name} 上传成功！`, { type: "success" }); + message(`${res.data.name} Uploaded successfully!`, { + type: "success" + }); } else { file.status = "fail"; - message(`${file.name} 上传失败！`, { type: "error" }); + message(`${file.name} Upload failed!`, { type: "error" }); + dialogVisible.value = false; } } catch (error) { console.error(error); file.status = "fail"; + dialogVisible.value = false; } } @@ -442,12 +456,16 @@ export const useCode = (tableRef: Ref) => { getKeyList(fileIds.value, "id") ); if (data.success) { + activeStep.value = 3; message("批量导入成功！", { type: "success" }); await onSearch(); } } catch (error) { console.error(error); message("批量导入失败！", { type: "error" }); + } finally { + dialogVisible.value = false; + activeStep.value = 1; } } }; @@ -657,6 +675,8 @@ export const useCode = (tableRef: Ref) => { selectedNum, showUploadArea, departments, + dialogVisible, + activeStep, fileIds, fileList, uploadStatus, diff --git a/src/views/data/maintain/index.vue b/src/views/data/maintain/index.vue index 1994bab..dca69de 100644 --- a/src/views/data/maintain/index.vue +++ b/src/views/data/maintain/index.vue @@ -184,6 +184,40 @@
+ + + + + + + + +
{ const fileIds = ref([]); /**上传按钮状态 */ const uploadStatus = ref(false); + /**上传对话框 */ + const dialogVisible = ref(false); + /**当前上传步骤 */ + const activeStep = ref(1); /** * 表格列设置 */ @@ -305,7 +309,7 @@ export const useCode = (tableRef: Ref) => { // 创建 元素并触发下载 const link = document.createElement("a"); link.href = url; - link.download = "上传模版.xlsx"; // 设置下载文件名，确保后缀名正确 + link.download = "UploadTemplate.xlsx"; // 设置下载文件名，确保后缀名正确 document.body.appendChild(link); // 将 元素添加到 DOM 中 link.click(); // 模拟点击下载 @@ -330,7 +334,7 @@ export const useCode = (tableRef: Ref) => { // const maxSize = 20 * 1024 * 1024; // 20MB 限制 if (!isExcel) { - message("只能上传 xlsx 或 xls 文件!", { type: "error" }); + message("Only xlsx or xls files can be uploaded!", { type: "error" }); return false; } /* @@ -345,30 +349,43 @@ export const useCode = (tableRef: Ref) => { /** 处理文件上传 */ const handleUpload = async () => { + activeStep.value = 1; + dialogVisible.value = true; if (fileList.value.length === 0) { - message("请先选择文件！", { type: "error", duration: 5000 }); + message("Please select the file first!", { + type: "error", + duration: 5000 + }); + dialogVisible.value = false; return; } uploadStatus.value = true; for (const file of fileList.value) { - if (file.status === "success") continue; // 已上传成功的跳过 + if (file.status === "success") { + activeStep.value = 2; + continue; + } // 已上传成功的跳过 try { const res = await postUploadFileAPI({ file: file.raw }); - if (res.success) { file.status = "success"; fileIds.value.push(res.data); // 记录成功上传的文件ID - message(`${res.data.name} 上传成功！`, { type: "success" }); + activeStep.value = 2; + message(`${res.data.name} Uploaded successfully!`, { + type: "success" + }); } else { file.status = "fail"; - message(`${file.name} 上传失败！`, { type: "error" }); + message(`${file.name} Upload failed!`, { type: "error" }); + dialogVisible.value = false; } } catch (error) { console.error(error); file.status = "fail"; + dialogVisible.value = false; } } @@ -381,12 +398,16 @@ export const useCode = (tableRef: Ref) => { getKeyList(fileIds.value, "id") ); if (data.success) { + activeStep.value = 3; message("批量导入成功！", { type: "success" }); await onSearch(); } } catch (error) { console.error(error); message("批量导入失败！", { type: "error" }); + } finally { + dialogVisible.value = false; + activeStep.value = 1; } } }; @@ -457,6 +478,8 @@ export const useCode = (tableRef: Ref) => { selectedNum, departments, showUploadArea, + dialogVisible, + activeStep, fileIds, fileList, uploadStatus, diff --git a/vite.config.ts b/vite.config.ts index f3fd123..d05971d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -27,7 +27,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => { proxy: { "/api": { // 这里填写后端地址 - target: "http://localhost:8082", + target: "http://127.0.0.1:8082", changeOrigin: true, rewrite: path => path.replace(/^\/api/, "") }