| | |
| | | <template> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | title="导入Excel" |
| | | width="50%" |
| | | draggable |
| | | :fullscreen="full" |
| | | > |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-upload |
| | | v-model:file-list="fileList" |
| | | class="upload-demo" |
| | | action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" |
| | | multiple |
| | | :on-preview="handlePreview" |
| | | :on-remove="handleRemove" |
| | | :before-remove="beforeRemove" |
| | | :limit="3" |
| | | :on-exceed="handleExceed" |
| | | > |
| | | <el-button size="default">下载模板</el-button> |
| | | <el-button size="default" type="primary">点击上传</el-button> |
| | | <template #tip> |
| | | <div class="el-upload__tip"> |
| | | 只允许导入“xls”或“xlsx”格式文件! |
| | | </div> |
| | | </template> |
| | | </el-upload> |
| | | </el-dialog> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { ref, |
| | | defineComponent, |
| | | } from "vue"; |
| | | import { |
| | | ElMessage, |
| | | ElMessageBox |
| | | } from "element-plus"; |
| | | import type { |
| | | UploadProps, |
| | | UploadUserFile, |
| | | } from "element-plus"; |
| | | import { |
| | | FullScreen |
| | | } from '@element-plus/icons-vue' |
| | | export default defineComponent({ |
| | | setup() { |
| | | let dialogVisible =ref<boolean>(false) |
| | | const fileList = ref<UploadUserFile[]>([ |
| | | // { |
| | | // name: "element-plus-logo.svg", |
| | | // url: "https://element-plus.org/images/element-plus-logo.svg", |
| | | // }, |
| | | // { |
| | | // name: "element-plus-logo2.svg", |
| | | // url: "https://element-plus.org/images/element-plus-logo.svg", |
| | | // }, |
| | | ]); |
| | | |
| | | const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => { |
| | | console.log(file, uploadFiles); |
| | | }; |
| | | |
| | | const handlePreview: UploadProps["onPreview"] = (uploadFile) => { |
| | | console.log(uploadFile); |
| | | }; |
| | | |
| | | const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => { |
| | | ElMessage.warning( |
| | | `The limit is 3, you selected ${ |
| | | files.length |
| | | } files this time, add up to ${ |
| | | files.length + uploadFiles.length |
| | | } totally` |
| | | ); |
| | | }; |
| | | |
| | | const beforeRemove: UploadProps["beforeRemove"] = ( |
| | | uploadFile, |
| | | uploadFiles |
| | | ) => { |
| | | return ElMessageBox.confirm( |
| | | `Cancel the transfert of ${uploadFile.name} ?` |
| | | ).then( |
| | | () => true, |
| | | () => false |
| | | ); |
| | | }; |
| | | // 打开弹窗 |
| | | const openDialog = (type:string,value:any,projectList: any,projectId:string) => { |
| | | dialogVisible.value=true |
| | | } |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | | if (full.value == false) { |
| | | full.value = true; |
| | | } else { |
| | | full.value = false; |
| | | } |
| | | }; |
| | | return { |
| | | dialogVisible, |
| | | fileList, |
| | | handleRemove, |
| | | handlePreview, |
| | | handleExceed, |
| | | beforeRemove, |
| | | openDialog, |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .el-upload__tip{ |
| | | margin-left: 100px; |
| | | margin-top: 20px; |
| | | } |
| | | ::v-deep .el-dialog__header{ |
| | | border-bottom: 1px solid #e8e8e8; |
| | | } |
| | | </style> |