json转换取消

zhaojiale

2022-09-08 1be21989c76f0eb9a43b9ebcab322d7171dbccd6

 src/components/updata/updata.vue

@@ -1,92 +1,88 @@
<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>下载模板</el-button>
      <el-button type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只允许导入“xls”或“xlsx”格式文件！
        </div>
      </template>
    </el-upload>
  </el-dialog>
   <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"
         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>下载模板</el-button>
         <el-button 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,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)
    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",
      },
    ]);
   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 handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
         console.log(file, uploadFiles);
      };

    const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
      console.log(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(
        () => true,
        () => false
      );
    };
   // 打开弹窗
         const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
        dialogVisible.value=true
      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
    };
  },
      };
      return {
         dialogVisible,
         fileList,
         handleRemove,
         handlePreview,
         handleExceed,
         beforeRemove,
         openDialog,
      full,
      toggleFullscreen,
      FullScreen
      };
   },
});
</script>
<style scoped>