From 5a1616f169d75ece07d2d12a8edac3e5f660a920 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 08 九月 2022 09:36:16 +0800 Subject: [PATCH] 合并 --- src/views/contingencyManagement/panManagement/component/upData.vue | 125 +++++++++++++++++++++++++++++++++++++++++ 1 files changed, 125 insertions(+), 0 deletions(-) diff --git a/src/views/contingencyManagement/panManagement/component/upData.vue b/src/views/contingencyManagement/panManagement/component/upData.vue index e69de29..cc3e2d0 100644 --- a/src/views/contingencyManagement/panManagement/component/upData.vue +++ b/src/views/contingencyManagement/panManagement/component/upData.vue @@ -0,0 +1,125 @@ +<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> \ No newline at end of file -- Gitblit v1.9.2