no message

src/views/business/production/IndividualIncomeTaxIs/FormDialog.vue

@@ -26,40 +26,34 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="个税金额">
-                <el-input-number
-                  v-if="!isView"
-                  placeholder="个税金额"
-                  v-model="emptyForm.amount"
-                  :precision="2"
-                  style="
+                <el-input-number v-if="!isView" placeholder="个税金额" v-model="emptyForm.amount" :precision="2" style="
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                  "
-                  :controls="false"
-                  @keypress.enter.prevent
-                />
+                  " :controls="false" @keypress.enter.prevent />
                 <div v-else>{{ rowNum(emptyForm.amount) }}</div>
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="备注:">
-                <el-input
-                  v-if="!isView"
-                  type="textarea"
-                  rows="2"
-                  maxlength="200"
-                  show-word-limit
-                  v-model="emptyForm.remark"
-                />
+                <el-input v-if="!isView" type="textarea" rows="2" maxlength="200" show-word-limit
+                  v-model="emptyForm.remark" />
                 <span v-else>{{ emptyForm.remark }}</span>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <div class="details-btns-container">
                 <el-form-item label="凭证文件" prop="evidenceFile" required>
-                  <el-upload
+                  <dragUpload :accept="accept" style="width:100%" @file="upload"
+                    v-if="emptyForm.evidenceFile == null || emptyForm.evidenceFile == ''" />
+                  <img v-else style="height: 148px; width: 148px" :src="`${baseUrl}/${emptyForm.evidenceFile}`"
+                    class="avatar" @click="openEvidience('evidenceFile')" />
+                    <el-icon v-if="emptyForm.evidenceFile !== '' ||emptyForm.evidenceFile == null " @click="emptyForm.evidenceFile = ''"
+                    class="delete-button">
+                    <Delete />
+                  </el-icon>
+                  <!-- <el-upload
                     v-if="!isView"
                     action="#"
                     :http-request="upload"
@@ -78,8 +72,8 @@
                       class="avatar"
                     />
                     <i v-else class="el-icon-plus avatar-uploader-icon" />
-                  </el-upload>
-                  <img
+                  </el-upload> -->
+                  <!-- <img
                     v-else-if="
                       emptyForm.evidenceFile != null &&
                       emptyForm.evidenceFile !== ''
@@ -88,65 +82,34 @@
                     :src="`${baseUrl}/${emptyForm.evidenceFile}`"
                     class="avatar"
                     @click="openEvidience('evidenceFile')"
-                  />
+                  /> -->
                 </el-form-item>
+                <!-- 删除按钮 -->
+         
               </div>
             </el-col>
             <el-col :span="24" style="padding: 15px 15px 16px 15px">
               <div class="details-btns-container">
                 <el-form-item label="报表文件" prop="reportFile" required>
-                  <el-upload
-                    v-if="!isView"
-                    action="#"
-                    :http-request="uploadextFile"
-                    :with-credentials="true"
-                    :show-file-list="false"
-                    multiple
-                  >
-                    <el-button size="small" type="primary" icon="Upload"
-                      >点击上传</el-button
-                    >
+                  <el-upload v-if="!isView" action="#" :http-request="uploadextFile" :with-credentials="true"
+                    :show-file-list="false" multiple>
+                    <el-button size="small" type="primary" icon="Upload">点击上传</el-button>
                   </el-upload>
                 </el-form-item>
               </div>
               <div class="details-body" style="height: 100px">
-                <el-table
-                  ref="filesTable"
-                  :data="reportFiles"
-                  size="small"
-                  height="100%"
-                  border
-                  header-row-class-name="list-header-row"
-                >
-                  <el-table-column
-                    label="文件名"
-                    prop="fileName"
-                    align="center"
-                  >
+                <el-table ref="filesTable" :data="reportFiles" size="small" height="100%" border
+                  header-row-class-name="list-header-row">
+                  <el-table-column label="文件名" prop="fileName" align="center">
                     <template #default="scope">
-                      <el-button
-                        @click="openEvidenceFile(scope.row)"
-                        type="primary"
-                        link
-                      >
+                      <el-button @click="openEvidenceFile(scope.row)" type="primary" link>
                         {{ scope.row.fileName }}
                       </el-button>
                     </template>
                   </el-table-column>
-                  <el-table-column
-                    v-if="!isView"
-                    label="操作"
-                    width="50"
-                    align="center"
-                  >
+                  <el-table-column v-if="!isView" label="操作" width="50" align="center">
                     <template #default="scope">
-                      <el-button
-                        size="small"
-                        link
-                        type="danger"
-                        @click="handleDelFile(scope.$index)"
-                        >删除</el-button
-                      >
+                      <el-button size="small" link type="danger" @click="handleDelFile(scope.$index)">删除</el-button>
                     </template>
                   </el-table-column>
                 </el-table>
@@ -157,22 +120,11 @@
       </div>
     </div>
     <div class="form-btns-container" v-if="!isView" style="height: 40px">
-      <el-button
-        size="small"
-        icon="close"
-        style="float: right; margin-left: 12px; margin-right: 12px"
-        @click="close"
-      >
+      <el-button size="small" icon="close" style="float: right; margin-left: 12px; margin-right: 12px" @click="close">
         取消
       </el-button>
-      <el-button
-        type="primary"
-        size="small"
-        icon="Finished"
-        v-hasPermi="['business:individualIncomeTaxDetail:saveDetail']"
-        style="float: right"
-        @click="handleSave"
-      >
+      <el-button type="primary" size="small" icon="Finished"
+        v-hasPermi="['business:individualIncomeTaxDetail:saveDetail']" style="float: right" @click="handleSave">
         保存
       </el-button>
     </div>
@@ -181,278 +133,286 @@
 
 
 <script setup>
-const { proxy } = getCurrentInstance();
-import { rowNum } from "@/utils/index";
-/** 父组件传参 */
-const props = defineProps({
-  getList: {
-    type: Function,
-    default: () => {},
-  },
-});
-const { getList } = toRefs(props);
-/** 字典数组区 */
-const { develop_type } = proxy.useDict("develop_type");
-/** 表单抽屉 页变量 */
-const title = ref("");
-const loading = ref(false);
-const multiple = ref(true);
-const visible = ref(false);
-const editStatus = ref(false);
-const isFullscreen = ref(false);
-const addDetailNum = ref(1);
-const isAdd = ref(false);
-const isView = ref(false);
-const mainInfo = ref({});
-const monthInfo = ref({});
-const currentMember = ref({});
-const year = ref({});
-const month = ref({});
-const cities = ref([]);
-const districts = ref([]);
-const fileList = ref([]);
-const reportFiles = ref([]);
-const sourceCategories = ref([]);
-const tenantId = ref(0);
-const addType = ref(1);
-
-const emptyForm = ref({
-  financialIndividualIncomeTaxId: null,
-  companyId: null,
-  parentId: "0",
-  name: "",
-  code: "",
-  receiveDate: proxy.moment().format("YYYY-MM-DD HH:mm:ss"),
-  receiveDateRange: proxy.moment().format("YYYY-MM-DD"),
-  receiveTimeRange: "08:00:00",
-  evidenceFile: "",
-  reportFile: "",
-  originalFileName: "",
-  status: null,
-  fileName: "",
-  fileList: [],
-  year: "",
-  month: "",
-  reportFiles: [],
-  workOrderId: null,
-});
+  const { proxy } = getCurrentInstance();
+  import { rowNum } from "@/utils/index";
 
-watch(addType, (value) => {
-  switch (value) {
-    case "1":
-      break;
-    case "2":
-      break;
-    default:
-      break;
-  }
-});
+  /** 父组件传参 */
+  const props = defineProps({
+    getList: {
+      type: Function,
+      default: () => { },
+    },
+  });
+  const { getList } = toRefs(props);
+  /** 字典数组区 */
+  const { develop_type } = proxy.useDict("develop_type");
+  /** 表单抽屉 页变量 */
+  const title = ref("");
+  const loading = ref(false);
+  const multiple = ref(true);
+  const visible = ref(false);
+  const editStatus = ref(false);
+  const isFullscreen = ref(false);
+  const addDetailNum = ref(1);
+  const isAdd = ref(false);
+  const isView = ref(false);
+  const mainInfo = ref({});
+  const monthInfo = ref({});
+  const currentMember = ref({});
+  const year = ref({});
+  const month = ref({});
+  const cities = ref([]);
+  const districts = ref([]);
+  const fileList = ref([]);
+  const reportFiles = ref([]);
+  const sourceCategories = ref([]);
+  const tenantId = ref(0);
+  const addType = ref(1);
 
-import { uploadFile } from "@/api/tool/file";
-import {
-  addIndividualIncomeTaxDetail,
-  updateIndividualIncomeTaxDetail,
-  getDetail,
-  getInfo,
-} from "@/api/business/production/detail";
+  const emptyForm = ref({
+    financialIndividualIncomeTaxId: null,
+    companyId: null,
+    parentId: "0",
+    name: "",
+    code: "",
+    receiveDate: proxy.moment().format("YYYY-MM-DD HH:mm:ss"),
+    receiveDateRange: proxy.moment().format("YYYY-MM-DD"),
+    receiveTimeRange: "08:00:00",
+    evidenceFile: "",
+    reportFile: "",
+    originalFileName: "",
+    status: null,
+    fileName: "",
+    fileList: [],
+    year: "",
+    month: "",
+    reportFiles: [],
+    workOrderId: null,
+  });
 
-import { ref } from "vue";
-// import { de } from "element-plus/es/locale";
-// import { de } from "element-plus/es/locale";
-const baseUrl = import.meta.env.VITE_APP_BASE_API;
+  watch(addType, (value) => {
+    switch (value) {
+      case "1":
+        break;
+      case "2":
+        break;
+      default:
+        break;
+    }
+  });
 
-const followQuery = ref({});
+  import { uploadFile } from "@/api/tool/file";
+  import {
+    addIndividualIncomeTaxDetail,
+    updateIndividualIncomeTaxDetail,
+    getDetail,
+    getInfo,
+  } from "@/api/business/production/detail";
+  import dragUpload from "./dragUpload"
+  import { ref } from "vue";
+  // import { de } from "element-plus/es/locale";
+  // import { de } from "element-plus/es/locale";
+  const baseUrl = import.meta.env.VITE_APP_BASE_API;
 
-/***********************  表单页方法 ****************************/
+  const followQuery = ref({});
 
-/** 抽屉打开 */
-function open(id, mainRow, monthItem) {
-  visible.value = true;
-  tenantId.value = mainRow.tenantId;
-  mainInfo.value = mainRow;
-  monthInfo.value = monthItem;
-  console.log("id", id);
-  if (id == 0) {
-    isAdd.value = true;
-    isView.value = false;
-    loadData(id);
-  } else if (id == null || mainRow.detail.status == 3) {
-    isView.value = true;
-    console.log("查看");
-    getInfoId(id);
-  } else {
-    console.log("修改");
-    isView.value = false;
-    isAdd.value = false;
-    getInfoId(id);
-  }
+  /***********************  表单页方法 ****************************/
 
-  // getDetail(queryParams.value).then((response) => {
-  //   detailList.value = response.rows;
-  //   total.value = response.total;
-  //   loading.value = false;
-  // });
-}
+  /** 抽屉打开 */
+  function open(id, mainRow, monthItem) {
+    visible.value = true;
+    tenantId.value = mainRow.tenantId;
+    mainInfo.value = mainRow;
+    monthInfo.value = monthItem;
+    console.log("id", id);
+    if (id == 0) {
+      isAdd.value = true;
+      isView.value = false;
+      loadData(id);
+    } else if (id == null || mainRow.detail.status == 3) {
+      isView.value = true;
+      console.log("查看");
+      getInfoId(id);
+    } else {
+      console.log("修改");
+      isView.value = false;
+      isAdd.value = false;
+      getInfoId(id);
+    }
 
-function getInfoId(id) {
-  console.log("id", mainInfo.value);
-  getInfo(mainInfo.value.detail.id).then((response) => {
-    console.log("response", response);
-    mainInfo.value.detail = response.data;
-    reportFiles.value = response.data.reportFiles;
-    emptyForm.value = response.data;
-    loadData(id);
-  });
-}
+    // getDetail(queryParams.value).then((response) => {
+    //   detailList.value = response.rows;
+    //   total.value = response.total;
+    //   loading.value = false;
+    // });
+  }
 
-function loadData(id) {
-  console.log("monthInfo", mainInfo.value);
-  year.value = monthInfo.value.year;
-  month.value = monthInfo.value.month;
-  currentMember.value = mainInfo.value.companyName;
-  emptyForm.value.financialIndividualIncomeTaxId = mainInfo.value.id;
-  emptyForm.value.workOrderId = mainInfo.value.workOrderId;
-  if (!isAdd.value) {
-    reportFiles.value = mainInfo.value.detail.reportFiles;
-    if (mainInfo.value.detail.evidenceFile != "") {
-      const file = {};
-      file.url = mainInfo.value.evidenceFile;
-      file.fileUrl = mainInfo.value.detail.evidenceFile;
-      file.originalFileName = mainInfo.value.detail.originalFileName;
-      fileList.value.push(file);
-      emptyForm.value.evidenceFile = mainInfo.value.detail.evidenceFile;
-      emptyForm.value.originalFileName = mainInfo.value.detail.originalFileName;
-      emptyForm.value.fileName = mainInfo.value.detail.fileName;
-    }
+  function getInfoId(id) {
+    console.log("id", mainInfo.value);
+    getInfo(mainInfo.value.detail.id).then((response) => {
+      console.log("response", response);
+      mainInfo.value.detail = response.data;
+      reportFiles.value = response.data.reportFiles;
+      emptyForm.value = response.data;
+      loadData(id);
+    });
   }
-}
 
-/** 上传报表附件 */
-function uploadextFile(param) {
-  const formData = new FormData();
-  formData.append("file", param.file);
-  uploadFile(formData).then((res) => {
-    if (res.code === 200) {
-      const file = {};
-      file.fileName = res.newFileName;
-      file.fileUrl = res.fileName;
-      file.originalFileName = res.originalFilename;
-      file.fileType = param.file.type;
-      file.fileSize = param.file.size;
-      file.tenantId = tenantId.value;
-      reportFiles.value.push(file);
-      console.log(reportFiles.value);
-      console.log("成功", res);
-      emptyForm.value.reportFile = file.fileUrl;
-      console.log("文件", reportFiles.value);
+  function loadData(id) {
+    console.log("monthInfo", mainInfo.value);
+    year.value = monthInfo.value.year;
+    month.value = monthInfo.value.month;
+    currentMember.value = mainInfo.value.companyName;
+    emptyForm.value.financialIndividualIncomeTaxId = mainInfo.value.id;
+    emptyForm.value.workOrderId = mainInfo.value.workOrderId;
+    if (!isAdd.value) {
+      reportFiles.value = mainInfo.value.detail.reportFiles;
+      if (mainInfo.value.detail.evidenceFile != "") {
+        const file = {};
+        file.url = mainInfo.value.evidenceFile;
+        file.fileUrl = mainInfo.value.detail.evidenceFile;
+        file.originalFileName = mainInfo.value.detail.originalFileName;
+        fileList.value.push(file);
+        emptyForm.value.evidenceFile = mainInfo.value.detail.evidenceFile;
+        emptyForm.value.originalFileName = mainInfo.value.detail.originalFileName;
+        emptyForm.value.fileName = mainInfo.value.detail.fileName;
+      }
     }
-  });
-}
+  }
 
-function openEvidience() {
-  window.open(`${baseUrl}${emptyForm.value.evidenceFile}`);
-}
+  /** 上传报表附件 */
+  function uploadextFile(param) {
+    const formData = new FormData();
+    formData.append("file", param.file);
+    uploadFile(formData).then((res) => {
+      if (res.code === 200) {
+        const file = {};
+        file.fileName = res.newFileName;
+        file.fileUrl = res.fileName;
+        file.originalFileName = res.originalFilename;
+        file.fileType = param.file.type;
+        file.fileSize = param.file.size;
+        file.tenantId = tenantId.value;
+        reportFiles.value.push(file);
+        console.log(reportFiles.value);
+        console.log("成功", res);
+        emptyForm.value.reportFile = file.fileUrl;
+        console.log("文件", reportFiles.value);
+      }
+    });
+  }
 
-function handleDelFile(index) {
-  reportFiles.value.splice(index, 1);
-}
+  function openEvidience() {
+    window.open(`${baseUrl}${emptyForm.value.evidenceFile}`);
+  }
 
-/**  保存 */
-function handleSave() {
-  if (
-    emptyForm.value.evidenceFile == null ||
-    emptyForm.value.evidenceFile === ""
-  ) {
-    proxy.$message.error("请上传凭证");
-    return;
+  function handleDelFile(index) {
+    reportFiles.value.splice(index, 1);
   }
 
-  if (!reportFiles.value.length > 0) {
-    proxy.$message.error("请上传报表");
-    return;
+  /**  保存 */
+  function handleSave() {
+    if (
+      emptyForm.value.evidenceFile == null ||
+      emptyForm.value.evidenceFile === ""
+    ) {
+      proxy.$message.error("请上传凭证");
+      return;
+    }
+
+    if (!reportFiles.value.length > 0) {
+      proxy.$message.error("请上传报表");
+      return;
+    }
+    emptyForm.value.files = fileList.value;
+    emptyForm.value.year = year.value;
+    emptyForm.value.month = month.value;
+    emptyForm.value.status = 3;
+    emptyForm.value.reportFiles = reportFiles.value;
+    if (isAdd.value) {
+      emptyForm.value.companyId = mainInfo.value.companyId;
+      addIndividualIncomeTaxDetail(emptyForm.value)
+        .then((res) => {
+          console.log(res);
+          proxy.$modal.msgSuccess("保存成功!");
+          visible.value = false;
+
+          getList.value();
+        })
+        .catch((err) => {
+          proxy.$modal.lmsgError(err);
+          console.log(err);
+        });
+    } else {
+      mainInfo.value.detail.status = 3;
+      mainInfo.value.detail.fileName = emptyForm.value.fileName;
+      mainInfo.value.detail.originalFileName = emptyForm.value.originalFileName;
+      mainInfo.value.detail.evidenceFile = emptyForm.value.evidenceFile;
+      console.log("保存修改");
+      console.log(mainInfo.value.detail);
+      addIndividualIncomeTaxDetail(mainInfo.value.detail)
+        .then((res) => {
+          console.log(res);
+          proxy.$modal.msgSuccess("保存成功!");
+          visible.value = false;
+
+          getList.value();
+        })
+        .catch((err) => {
+          proxy.$modal.$modalMsgError(err);
+          console.log(err);
+        });
+    }
   }
-  emptyForm.value.files = fileList.value;
-  emptyForm.value.year = year.value;
-  emptyForm.value.month = month.value;
-  emptyForm.value.status = 3;
-  emptyForm.value.reportFiles = reportFiles.value;
-  if (isAdd.value) {
-    emptyForm.value.companyId = mainInfo.value.companyId;
-    addIndividualIncomeTaxDetail(emptyForm.value)
-      .then((res) => {
-        console.log(res);
-        proxy.$modal.msgSuccess("保存成功!");
-        visible.value = false;
 
-        getList.value();
-      })
-      .catch((err) => {
-        proxy.$modal.lmsgError(err);
-        console.log(err);
-      });
-  } else {
-    mainInfo.value.detail.status = 3;
-    mainInfo.value.detail.fileName = emptyForm.value.fileName;
-    mainInfo.value.detail.originalFileName = emptyForm.value.originalFileName;
-    mainInfo.value.detail.evidenceFile = emptyForm.value.evidenceFile;
-    console.log("保存修改");
-    console.log(mainInfo.value.detail);
-    addIndividualIncomeTaxDetail(mainInfo.value.detail)
-      .then((res) => {
-        console.log(res);
-        proxy.$modal.msgSuccess("保存成功!");
-        visible.value = false;
+  /** 文件上传 */
+  function upload(param) {
 
-        getList.value();
-      })
-      .catch((err) => {
-        proxy.$modal.$modalMsgError(err);
-        console.log(err);
-      });
+    const formData = new FormData();
+    formData.append("file", param);
+    uploadFile(formData).then((res) => {
+      if (res.code === 200) {
+        const file = {};
+        file.fileName = res.newFileName;
+        file.url = res.fileName;
+        file.originalFileName = res.originalFilename;
+        file.fileUrl = res.fileName;
+        fileList.value.push(file);
+        emptyForm.value.evidenceFile = file.fileUrl;
+        emptyForm.value.originalFileName = res.originalFilename;
+        emptyForm.value.fileName = res.newFileName;
+      }
+    });
   }
-}
 
-/** 文件上传 */
-function upload(param) {
-  const formData = new FormData();
-  formData.append("file", param.file);
-  uploadFile(formData).then((res) => {
+  function uploadSuccess(res, field) {
     if (res.code === 200) {
-      const file = {};
-      file.fileName = res.newFileName;
-      file.url = res.fileName;
-      file.originalFileName = res.originalFilename;
-      file.fileUrl = res.fileName;
-      fileList.value.push(file);
-      emptyForm.value.evidenceFile = file.fileUrl;
-      emptyForm.value.originalFileName = res.originalFilename;
-      emptyForm.value.fileName = res.newFileName;
-    }
-  });
-}
-
-function uploadSuccess(res, field) {
-  if (res.code === 200) {
-    form[field] = res.data.fileUrl;
-  } else proxy.$modal.msg.error("文件上传失败");
-}
+      form[field] = res.data.fileUrl;
+    } else proxy.$modal.msg.error("文件上传失败");
+  }
 
-/** 关闭 */
-function close() {
-  visible.value = false;
-  emptyForm.value = {};
-  reportFiles.value = [];
-}
+  /** 关闭 */
+  function close() {
+    visible.value = false;
+    emptyForm.value = {};
+    reportFiles.value = [];
+  }
 
-function openEvidenceFile(row) {
-  // console.log(`${baseUrl}${row.fileUrl}`);
-  window.open(`${baseUrl}${row.fileUrl}`);
-}
+  function openEvidenceFile(row) {
+    // console.log(`${baseUrl}${row.fileUrl}`);
+    window.open(`${baseUrl}${row.fileUrl}`);
+  }
 
-// 暴露给父组件的方法
-defineExpose({
-  open,
-});
+  // 暴露给父组件的方法
+  defineExpose({
+    open,
+  });
 </script>
 
-<style></style>
+<style  scoped>
+
+.delete-button {
+    margin-left: 20px;
+    cursor: pointer;
+  }
+</style>

src/views/business/production/IndividualIncomeTaxIs/dragUpload.vue

@@ -0,0 +1,141 @@
+<template>
+    <div tabindex="0" :class="['drag', { 'drag-active': active }]" ref="upload">
+        <el-icon size="52" color="#2260FF">
+            <UploadFilled />
+        </el-icon>
+        <p class="drag-subtile">
+            支持点击/粘贴/拖拽到此区域上传
+            <br />
+            单个文件夹最大支持10M
+        </p>
+        <input ref="fileIpt" class="filePaste-ipt" />
+        <input class="file-ipt" type="file" :accept="accept" multiple @change="changeFile" />
+    </div>
+</template>
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { UploadFilled } from '@element-plus/icons-vue'
+const upload = ref(null)
+const active = ref(false)
+const fileIpt = ref(null)
+defineProps(['accept'])
+const handleMouseover = function (event) {
+    fileIpt.value.focus()
+    // 粘贴
+    fileIpt.value.addEventListener('paste', handlePaste)
+}
+const handleMouseout = function (event) {
+    fileIpt.value.blur()
+    fileIpt.value.removeEventListener('paste', handlePaste)
+}
+onMounted(() => {
+    // 拖拽
+    upload.value.addEventListener('drop', handleDrop)
+    upload.value.addEventListener('dragleave', handleDragleave)
+    upload.value.addEventListener('dragenter', handleDragenter)
+    upload.value.addEventListener('dragover', handleDragenter)
+    upload.value.addEventListener('mouseover', handleMouseover);
+    upload.value.addEventListener('mouseout', handleMouseout);
+})
+ 
+onUnmounted(() => {
+    // upload.value.removeEventListener('drop', handleDrop)
+    // upload.value.removeEventListener('dragleave', handleDragleave)
+    // upload.value.removeEventListener('dragenter', handleDragenter)
+    // upload.value.removeEventListener('dragover', handleDragenter)
+    // upload.value.removeEventListener('mouseover', handleMouseover);
+    // upload.value.removeEventListener('mouseout', handleMouseout);
+})
+ 
+const emit = defineEmits(["file"])
+const handleFileName = (fileList) => {
+    let files = Array.from(fileList)
+    let renameReportFile = []
+    for (let i in files) {
+        renameReportFile.push(new File([files[i]], new Date().getTime() + files[i].name, { type: files[0].type }))
+    }
+    emit("file", renameReportFile[0])
+
+}
+const changeFile = (e) => {
+    e.preventDefault()
+    handleFileName(e.target.files)
+}
+ 
+const handleDragleave = (e) => {
+    active.value = false
+    e.preventDefault()
+}
+const handleDragenter = (e) => {
+    active.value = true
+    e.preventDefault()
+}
+ 
+const handleDrop = (e) => {
+    e.preventDefault()
+    active.value = false
+    handleFileName(e.dataTransfer.files)
+}
+ 
+const handlePaste = (e) => {
+    e.preventDefault()
+    handleFileName(e.clipboardData.files)
+}
+</script>
+ 
+<style lang="scss" scoped>
+@mixin borderColor($color: #2260FF) {
+    border: 1px dashed $color;
+}
+ 
+.drag {
+    position: relative;
+    height: 160px;
+    @include borderColor(#DEDEDE);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+ 
+    &:active {
+        @include borderColor
+    }
+ 
+    &:hover {
+        @include borderColor
+    }
+ 
+    &-active {
+        @include borderColor
+    }
+ 
+    &-title {
+        font-size: 14px;
+    }
+ 
+    &-subtile {
+        width: 450px;
+        font-size: 12px;
+        color: #999999;
+        margin-top: 0;
+        text-align: center;
+    }
+}
+ 
+.file-ipt {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+ 
+.filePaste-ipt {
+    position: fixed;
+    right: -100vw;
+    opacity: 0;
+}
+</style>