¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <el-dialog v-model="upload.open" :title="upload.title" :width="500"> |
| | | <FileUpload |
| | | ref="fileUploadRef" |
| | | accept=".xlsx, .xls, .pdf" |
| | | :headers="upload.headers" |
| | | :autoUpload="true" |
| | | :action="upload.url" |
| | | :disabled="upload.isUploading" |
| | | :showTip="false" |
| | | :limit="10" |
| | | @success="handleFileSuccess" |
| | | @remove="removeFile" |
| | | /> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitFileForm">ç¡® å®</el-button> |
| | | <el-button @click="upload.open = false">å æ¶</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { reactive } from "vue"; |
| | | import { getToken } from "@/utils/auth.js"; |
| | | import { FileUpload } from "@/components/Upload"; |
| | | import { ElMessage } from "element-plus"; |
| | | import { ref } from "vue"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | |
| | | defineOptions({ |
| | | name: "æ¥ç¥¨å°è´¦éä»¶è¡¥å
", |
| | | }); |
| | | |
| | | const { form, resetForm } = useFormData({ |
| | | id: undefined, |
| | | tempFileIds: [], |
| | | }); |
| | | const emits = defineEmits(["uploadSuccess"]); |
| | | const fileUploadRef = ref(); |
| | | const upload = reactive({ |
| | | // æ¯å¦æ¾ç¤ºå¼¹åºå±ï¼ä¾åºå导å
¥ï¼ |
| | | open: false, |
| | | // å¼¹åºå±æ é¢ï¼ä¾åºå导å
¥ï¼ |
| | | title: "", |
| | | // æ¯å¦ç¦ç¨ä¸ä¼ |
| | | isUploading: false, |
| | | // 设置ä¸ä¼ ç请æ±å¤´é¨ |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | // ä¸ä¼ çå°å |
| | | url: import.meta.env.VITE_APP_BASE_API + "/file/upload", |
| | | }); |
| | | // ç¹å»å¯¼å
¥ |
| | | const handleImport = (id) => { |
| | | form.id = id; |
| | | upload.open = true; |
| | | upload.title = "æ¥ç¥¨å°è´¦éä»¶è¡¥å
"; |
| | | }; |
| | | |
| | | const submitFileForm = () => { |
| | | upload.open = false; |
| | | resetForm(); |
| | | emits("uploadSuccess", form); |
| | | }; |
| | | |
| | | const handleFileSuccess = (response) => { |
| | | const { code, msg } = response; |
| | | form.tempFileIds.push(response.data.tempId); |
| | | if (code == 200) { |
| | | ElMessage({ message: "导å
¥æå", type: "success" }); |
| | | } else { |
| | | ElMessage({ message: msg, type: "error" }); |
| | | } |
| | | }; |
| | | |
| | | const removeFile = (file) => { |
| | | const { tempId } = file.response.data; |
| | | form.tempFileIds = form.tempFileIds.filter((item) => item !== tempId); |
| | | }; |
| | | |
| | | defineExpose({ |
| | | handleImport, |
| | | }); |
| | | </script> |