| | |
| | | <el-button type="info" plain icon="Upload" @click="handleImport"> |
| | | 导入 |
| | | </el-button> |
| | | <el-dialog v-model="upload.open" :title="upload.title"> |
| | | <FileUpload |
| | | ref="fileUploadRef" |
| | | accept=".xlsx, .xls" |
| | | :headers="upload.headers" |
| | | :action="upload.url + '?updateSupport=' + upload.updateSupport" |
| | | :disabled="upload.isUploading" |
| | | @success="handleFileSuccess" |
| | | /> |
| | | <el-dialog v-model="upload.open" :title="upload.title" @close="handleDialogClose"> |
| | | <FileUpload ref="fileUploadRef" accept=".xlsx, .xls" :headers="upload.headers" :action="uploadUrl" |
| | | :disabled="upload.isUploading" :showTip="true" @success="handleFileSuccess" |
| | | :downloadTemplate="handleDownloadTemplate" /> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitFileForm">确 定</el-button> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { reactive } from "vue"; |
| | | import { reactive, computed } from "vue"; |
| | | import { getToken } from "@/utils/auth.js"; |
| | | import { FileUpload } from "@/components/Upload"; |
| | | import { ElMessage } from "element-plus"; |
| | | import { downloadProductModelImportTemplate } from "@/api/basicData/product.js"; |
| | | |
| | | defineOptions({ |
| | | name: "产品维护导入", |
| | | }); |
| | | |
| | | const props = defineProps({ |
| | | productId: { type: [String, Number], default: "" }, |
| | | }); |
| | | const emits = defineEmits(["uploadSuccess"]); |
| | | const fileUploadRef = ref(); |
| | | const upload = reactive({ |
| | |
| | | isUploading: false, |
| | | // 设置上传的请求头部 |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | // 上传的地址 |
| | | url: import.meta.env.VITE_APP_BASE_API + "/system/supplier/import", |
| | | }); |
| | | // 上传的地址(携带 productId 参数,传给后端的 importProduct 接口) |
| | | const uploadUrl = computed( |
| | | () => |
| | | import.meta.env.VITE_APP_BASE_API + |
| | | "/basic/product/import" + |
| | | (props.productId ? `?productId=${props.productId}` : "") |
| | | ); |
| | | // 点击导入 |
| | | const handleImport = () => { |
| | | if (!props.productId) { |
| | | ElMessage({ message: "请先选择产品", type: "warning" }); |
| | | return; |
| | | } |
| | | upload.open = true; |
| | | upload.title = "产品导入"; |
| | | }; |
| | | |
| | | const submitFileForm = () => { |
| | | fileUploadRef.value.uploadApi(); |
| | | }; |
| | | |
| | | // 关闭弹窗时清除已选文件 |
| | | const handleDialogClose = () => { |
| | | fileUploadRef.value?.clearFiles?.(); |
| | | }; |
| | | |
| | | const handleFileSuccess = (response) => { |
| | |
| | | ElMessage({ message: msg, type: "error" }); |
| | | } |
| | | }; |
| | | |
| | | // 下载 Excel 导入模板 |
| | | const handleDownloadTemplate = () => { |
| | | downloadProductModelImportTemplate() |
| | | .then((blobData) => { |
| | | const blob = |
| | | blobData instanceof Blob |
| | | ? blobData |
| | | : new Blob([blobData], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); |
| | | const url = window.URL.createObjectURL(blob); |
| | | const link = document.createElement("a"); |
| | | link.href = url; |
| | | link.download = "产品导入模板.xlsx"; |
| | | document.body.appendChild(link); |
| | | link.click(); |
| | | document.body.removeChild(link); |
| | | window.URL.revokeObjectURL(url); |
| | | ElMessage({ message: "模板下载成功", type: "success" }); |
| | | }) |
| | | .catch(() => { |
| | | ElMessage({ message: "模板下载失败", type: "error" }); |
| | | }); |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .import-tip { |
| | | margin-top: 12px; |
| | | font-size: 12px; |
| | | color: var(--el-text-color-secondary); |
| | | } |
| | | |
| | | .import-tip .el-button { |
| | | margin-left: 8px; |
| | | } |
| | | </style> |