From 0f075e80d7c9fbe731419891ee55948be6f8fb65 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 13 三月 2026 16:47:20 +0800
Subject: [PATCH] 军泰伟业 1.产品数据添加导入功能
---
src/api/basicData/product.js | 8 ++
src/views/basicData/product/index.vue | 133 +++++++++++++++++++++++++++++++++++++++++---
2 files changed, 132 insertions(+), 9 deletions(-)
diff --git a/src/api/basicData/product.js b/src/api/basicData/product.js
index 10f8fd1..68e27d5 100644
--- a/src/api/basicData/product.js
+++ b/src/api/basicData/product.js
@@ -56,3 +56,11 @@
params: query
})
}
+// 涓嬭浇浜у搧瀵煎叆妯℃澘
+export function downloadTemplate() {
+ return request({
+ url: '/basic/product/downloadTemplate',
+ method: 'get',
+ responseType: 'blob'
+ })
+}
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index 5cdf463..cc1e1b5 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="app-container product-view">
<div class="left">
- <div>
+ <div class="left-header">
<el-input
v-model="search"
style="width: 210px"
@@ -11,12 +11,17 @@
clearable
prefix-icon="Search"
/>
- <el-button
- type="primary"
- @click="openProDia('addOne')"
- style="margin-left: 10px"
- >鏂板浜у搧澶х被</el-button
- >
+ <div class="button-group">
+ <el-button
+ type="primary"
+ @click="openProDia('addOne')"
+ >鏂板浜у搧澶х被</el-button>
+ <el-button
+ type="success"
+ @click="handleImport"
+ icon="Upload"
+ >瀵煎叆</el-button>
+ </div>
</div>
<div ref="containerRef">
<el-tree
@@ -124,8 +129,7 @@
</div>
</template>
</el-dialog>
- <el-dialog
- v-model="modelDia"
+ <el-dialog v-model="modelDia"
title="瑙勬牸鍨嬪彿"
width="400px"
@close="closeModelDia"
@@ -182,12 +186,47 @@
</div>
</template>
</el-dialog>
+ <el-dialog v-model="importDia" title="浜у搧瀵煎叆" width="600px">
+ <el-upload
+ ref="importUploadRef"
+ :limit="1"
+ accept=".xlsx,.xls"
+ :action="importUpload.url"
+ :headers="importUpload.headers"
+ :before-upload="importUpload.beforeUpload"
+ :on-success="importUpload.onSuccess"
+ :on-error="importUpload.onError"
+ :on-progress="importUpload.onProgress"
+ :on-change="importUpload.onChange"
+ :auto-upload="false"
+ drag
+ >
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">
+ 灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em>
+ </div>
+ <template #tip>
+ <div class="el-upload__tip">
+ 浠呮敮鎸� xls/xlsx锛屽ぇ灏忎笉瓒呰繃 10MB銆�
+ <el-button link type="primary" @click="importTemplate">涓嬭浇瀵煎叆妯℃澘</el-button>
+ </div>
+ </template>
+ </el-upload>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitImport">纭瀵煎叆</el-button>
+ <el-button @click="importDia = false">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
+import { getToken } from "@/utils/auth.js";
+import { FileUpload } from "@/components/Upload";
import {
addOrEditProduct,
addOrEditProductModel,
@@ -195,15 +234,18 @@
delProductModel,
modelListPage,
productTreeList,
+ downloadTemplate,
} from "@/api/basicData/product.js";
import ImportExcel from "./ImportExcel/index.vue";
const { proxy } = getCurrentInstance();
const tree = ref(null);
const containerRef = ref(null);
+const importUploadRef = ref(null);
const productDia = ref(false);
const modelDia = ref(false);
+const importDia = ref(false);
const modelOperationType = ref("");
const search = ref("");
const currentId = ref("");
@@ -271,6 +313,53 @@
},
});
const { form, rules, modelForm, modelRules } = toRefs(data);
+
+const importUpload = reactive({
+ title: "浜у搧瀵煎叆",
+ open: false,
+ url: import.meta.env.VITE_APP_BASE_API + "/basic/product/import",
+ headers: { Authorization: "Bearer " + getToken() },
+ isUploading: false,
+ beforeUpload: (file) => {
+ const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
+ const isLt10M = file.size / 1024 / 1024 < 10;
+ if (!isExcel) {
+ proxy.$modal.msgError("涓婁紶鏂囦欢鍙兘鏄� xlsx/xls 鏍煎紡!");
+ return false;
+ }
+ if (!isLt10M) {
+ proxy.$modal.msgError("涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 10MB!");
+ return false;
+ }
+ return true;
+ },
+ onChange: (file, fileList) => {
+ console.log('鏂囦欢鐘舵�佹敼鍙�', file, fileList);
+ },
+ onProgress: (event, file, fileList) => {
+ console.log('涓婁紶涓�...', event.percent);
+ },
+ onSuccess: (response, file, fileList) => {
+ console.log('涓婁紶鎴愬姛', response, file, fileList);
+ importUpload.isUploading = false;
+ if (response.code === 200) {
+ proxy.$modal.msgSuccess("瀵煎叆鎴愬姛");
+ importDia.value = false;
+ if (importUploadRef.value) {
+ importUploadRef.value.clearFiles();
+ }
+ getProductTreeList();
+ } else {
+ proxy.$modal.msgError(response.msg || "瀵煎叆澶辫触");
+ }
+ },
+ onError: (error, file, fileList) => {
+ console.log('涓婁紶澶辫触', error, file, fileList);
+ importUpload.isUploading = false;
+ proxy.$modal.msgError("瀵煎叆澶辫触");
+ }
+});
+
// 鏌ヨ浜у搧鏍�
const getProductTreeList = () => {
treeLoad.value = true;
@@ -478,6 +567,22 @@
// 娌″尮閰嶅埌杩斿洖false
return false;
};
+
+const handleImport = () => {
+ importDia.value = true;
+ if (importUploadRef.value) {
+ importUploadRef.value.clearFiles();
+ }
+};
+
+const submitImport = () => {
+ importUploadRef.value.submit();
+};
+
+const importTemplate = () => {
+ proxy.download("/basic/product/downloadTemplate", {}, "浜у搧瀵煎叆妯℃澘.xlsx");
+};
+
getProductTreeList();
</script>
@@ -491,6 +596,16 @@
padding: 16px;
background: #ffffff;
}
+.left-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 16px;
+}
+.button-group {
+ display: flex;
+ gap: 10px;
+}
.right {
flex: 1;
min-width: 0;
--
Gitblit v1.9.3