Your Name
2022-09-08 5a1616f169d75ece07d2d12a8edac3e5f660a920
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>