From d9390dc918302864ab2011575cf701bb328cb023 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: Mon, 04 Jul 2022 11:10:04 +0800
Subject: [PATCH] 应急队伍管理弹窗
---
src/views/contingencyManagement/contingency/component/upData.vue | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 109 insertions(+), 0 deletions(-)
diff --git a/src/views/contingencyManagement/contingency/component/upData.vue b/src/views/contingencyManagement/contingency/component/upData.vue
new file mode 100644
index 0000000..07a7958
--- /dev/null
+++ b/src/views/contingencyManagement/contingency/component/upData.vue
@@ -0,0 +1,109 @@
+<template>
+ <el-dialog
+ v-model="dialogVisible"
+ title="导入Excel"
+ width="50%"
+ draggable
+ >
+ <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";
+
+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
+ }
+ return {
+ dialogVisible,
+ fileList,
+ handleRemove,
+ handlePreview,
+ handleExceed,
+ beforeRemove,
+ openDialog,
+ };
+ },
+});
+</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