css

shj

2022-07-18 9f4e449a4159c9debf5520a797393bd5df2e5908

 src/components/updata/updata.vue

@@ -1,10 +1,6 @@
<template>
  <el-dialog
    v-model="dialogVisible"
    title="导入Excel"
    width="50%"
    draggable
  >
   <el-dialog v-model="dialogVisible" title="导入Excel" width="50%" :fullscreen="full" draggable>
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
@@ -19,64 +15,61 @@
    <el-button>下载模板</el-button>
      <el-button type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只允许导入“xls”或“xlsx”格式文件！
        </div>
            <div class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script lang="ts">
import { ref,toRefs, reactive,defineComponent,computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { ref, toRefs, reactive, defineComponent, computed } 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)
      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-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",
            name: 'element-plus-logo2.svg',
            url: 'https://element-plus.org/images/element-plus-logo.svg',
      },
    ]);

    const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
      const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
      console.log(file, uploadFiles);
    };

    const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
      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 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(
      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
         dialogVisible.value = true;
      };
       //全屏
      const full = ref(false);
      const toggleFullscreen = () => {
         if (full.value == false) {
            full.value = true;
         }else{
        full.value = false;
      }
      };
    return {
      dialogVisible,
      fileList,
@@ -84,7 +77,10 @@
      handlePreview,
      handleExceed,
      beforeRemove,
      openDialog
         openDialog,
      full,
      toggleFullscreen,
      FullScreen
    };
  },
});