导入优化

2024-12-18 17:22:30 +08:00 · 2024-12-18 17:22:30 +08:00 · 7b001872a8
commit 7b001872a8
parent e6c1599cb2
4 changed files with 283 additions and 289 deletions
--- a/src/components/Upload/Images.vue
+++ b/src/components/Upload/Images.vue
@ -47,14 +47,9 @@
 <script setup lang="ts">
  import { computed, ref } from 'vue';
  import { generateUUID } from '@/utils/auth';
-  import type { UploadFileInfo } from 'naive-ui'
-  import {
-    PlusOutlined,
-    EditOutlined,
-    DeleteOutlined,
-    ZoomInOutlined,
-  } from '@vicons/antd';
-import { useNotification } from 'naive-ui'
+  import type { UploadFileInfo } from 'naive-ui';
+  import { PlusOutlined, EditOutlined, DeleteOutlined, ZoomInOutlined } from '@vicons/antd';
+  import { useNotification } from 'naive-ui';

  const uploadRef = ref();
  import { upload } from '@/api/common';
@ -112,7 +107,7 @@ import { useNotification } from 'naive-ui'
  // 生成组件唯一id
  const uuid = ref('id-' + generateUUID());

-  const notification = useNotification()
+  const notification = useNotification();

  // 判断是否禁用上传和删除
  const self_disabled = computed(() => {
@ -121,7 +116,7 @@ import { useNotification } from 'naive-ui'

  const fileList = computed({
    get: () => {
-    console.log(props.fileLists)
+      console.log(props.fileLists);
      return props.fileLists;
    },
    set: (val) => {
@ -171,7 +166,7 @@ import { useNotification } from 'naive-ui'
      if (props.multiple) {
        emit('upload', fileList.value, props.zIndex);
      } else {
-        uploadRef.value!.clear();
+        uploadRef.value?.clear();
        emit('upload', '', props.zIndex);
      }
      options.onError(error as any);
@ -181,7 +176,7 @@ import { useNotification } from 'naive-ui'
    }
  };
  const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
-  handleHttpUpload(data)
+    handleHttpUpload(data);
  };
  const onPreview = (index: any) => {
    window.open(fileList.value[index].filePath);
@ -201,7 +196,7 @@ const handleUploadChange= (data: { fileList: UploadFileInfo[] })=> {
        props.zIndex,
      );
    } else {
-      uploadRef.value!.clear();
+      uploadRef.value?.clear();
      emit('upload', '', props.zIndex);
    }
  };
@ -221,7 +216,7 @@ const handleUploadChange= (data: { fileList: UploadFileInfo[] })=> {
   * @param rawFile 选择的文件
   * */
  const beforeUpload = (rawFile) => {
-    console.log(rawFile)
+    console.log(rawFile);
    const imgSize = rawFile.file.file.size / 1024 / 1024 < props.fileSize;
    if (!imgSize) {
      notification.warning({
--- a/src/components/Upload/file.vue
+++ b/src/components/Upload/file.vue
@ -1,12 +1,29 @@
 <template>
  <div :class="isBtn ? 'file-upload-box2' : 'file-upload-box'">
-    <n-upload action="#" :id="uuid" class="upload-demo my-upload-file"
-      :class="fileList.length > 0 && !loading ? 'success-file' : ''" :multiple="multiple" ref="uploadRef" directory-dnd
-      :disabled="loading ? true : self_disabled" v-model:file-list="fileList"
-      @change="handleUploadChange" @remove="handleRemove" @before-upload="beforeUpload" :show-file-list="showFileList"
-      :max="limit" >
+    <n-upload
+      action="#"
+      :id="uuid"
+      class="upload-demo my-upload-file"
+      :class="fileList.length > 0 && !loading ? 'success-file' : ''"
+      :multiple="multiple"
+      ref="uploadRef"
+      directory-dnd
+      :disabled="loading ? true : self_disabled"
+      v-model:file-list="fileList"
+      @change="handleUploadChange"
+      @remove="handleRemove"
+      @before-upload="beforeUpload"
+      :show-file-list="showFileList"
+      :max="limit"
+    >
      <template v-if="isBtn">
-        <n-tooltip v-if="isBtn && btnTip" class="box-item" effect="dark" :content="btnTip" placement="top">
+        <n-tooltip
+          v-if="isBtn && btnTip"
+          class="box-item"
+          effect="dark"
+          :content="btnTip"
+          placement="top"
+        >
          <n-button icon="Upload" type="primary">点击上传</n-button>
        </n-tooltip>
        <n-button v-else icon="Upload" type="primary">点击上传</n-button>
@ -45,8 +62,8 @@ import {
    DeleteOutlined,
    ZoomInOutlined,
  } from '@vicons/antd';
-import { useNotification } from 'naive-ui'
-import type { UploadFileInfo } from 'naive-ui'
+  import { useNotification } from 'naive-ui';
+  import type { UploadFileInfo } from 'naive-ui';
  import { generateUUID } from '@/utils/auth';

  const uploadRef = ref();
@ -111,11 +128,11 @@ const props = defineProps({
  // 生成组件唯一id
  const uuid = ref('id-' + generateUUID());

-const delFlag= ref(false)
+  const delFlag = ref(false);

  const fileList = computed({
    get: () => {
-    props.fileLists.map(item=>item.status='finished')
+      props.fileLists.map((item) => (item.status = 'finished'));
      return props.fileLists;
    },
    set: (val) => {
@ -123,7 +140,7 @@ const fileList = computed({
    },
  });

-const notification = useNotification()
+  const notification = useNotification();

  // 判断是否禁用上传和删除
  const self_disabled = computed(() => {
@ -151,7 +168,7 @@ const handleHttpUpload = async (options) => {
          name: res.originalName,
          filePath: res.fileUrl,
          fileName: res.originalName,
-        status:'finished'
+          status: 'finished',
        });
        emit('upload', list, props.zIndex);
      } else {
@ -166,7 +183,7 @@ const handleHttpUpload = async (options) => {
      if (props.multiple) {
        emit('upload', fileList.value, props.zIndex);
      } else {
-      uploadRef.value!.clear();
+        uploadRef.value?.clear();
        emit('upload', '', '', props.zIndex);
      }
      options.onError(error as any);
@ -175,14 +192,14 @@ const handleHttpUpload = async (options) => {
    }
  };
  const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
-  console.log(data)
+    console.log(data);
    if (!delFlag.value) {
-    handleHttpUpload(data)
+      handleHttpUpload(data);
    }
  };

  const handleRemove = (file: any) => {
-  delFlag.value = true
+    delFlag.value = true;
    if (props.multiple) {
      emit(
        'upload',
@ -190,7 +207,7 @@ const handleRemove = (file: any) => {
        props.zIndex,
      );
    } else {
-    uploadRef.value!.clear();
+      uploadRef.value?.clear();
      emit('upload', '', '', props.zIndex);
    }
  };
--- a/src/views/system/level/userUpload.vue
+++ b/src/views/system/level/userUpload.vue
@ -1,14 +1,5 @@
 <template>
-  <n-modal
-    v-model:show="props.visible"
-    preset="dialog"
-    style="width: 450px"
-    @close="dialogClose"
-    positive-text="确定"
-    negative-text="取消"
-    @positive-click="dialogSubmit"
-    @negative-click="dialogClose"
-  >
+  <n-modal v-model:show="props.visible" preset="dialog" style="width: 450px" @close="dialogClose">
    <template #header>
      {{ dialogTitle }}
    </template>
@ -17,7 +8,6 @@
      :headers="uploadHeaders"
      name="file"
      ref="uploadRef"
-      :default-upload="false"
      @change="handleChange"
      @before-upload="beforeUpload"
      v-model:file-list="fileList"
@ -39,7 +29,7 @@

 <script lang="ts" setup>
  import { getTemplateByCode } from '@/api/system/user';
-  import { computed, reactive, ref } from 'vue';
+  import { computed, reactive, ref, nextTick } from 'vue';
  import { CloudUploadOutlined } from '@vicons/antd';
  import { useMessage } from 'naive-ui';
  import { useUserStore } from '@/store/modules/user';
@ -100,18 +90,19 @@
   * 执行上传文件
   * @param param0 参数
   */
-  const handleChange = ({ file }) => {
-    const status = file.status;
-    if (status === 'done') {
-      let data = file.response;
+  const handleChange = async (file) => {
+    if (file.file.status === 'finished') {
+      let data = JSON.parse(file.event.target.response);
      if (data.code != 0) {
+        await nextTick();
+        fileList.value = [];
        message.error(data.msg || '导入失败');
      } else {
        message.success('导入成功');
        emit('update:visible', false);
        emit('success');
      }
-    } else if (status === 'error') {
+    } else if (file.file.status === 'error') {
      message.error('导入失败');
    }
  };
--- a/src/views/system/user/userUpload.vue
+++ b/src/views/system/user/userUpload.vue
@ -1,14 +1,5 @@
 <template>
-  <n-modal
-    v-model:show="props.visible"
-    preset="dialog"
-    style="width: 450px"
-    @close="dialogClose"
-    positive-text="确定"
-    negative-text="取消"
-    @positive-click="dialogSubmit"
-    @negative-click="dialogClose"
-  >
+  <n-modal v-model:show="props.visible" preset="dialog" style="width: 450px" @close="dialogClose">
    <template #header>
      {{ dialogTitle }}
    </template>
@ -17,7 +8,6 @@
      :headers="uploadHeaders"
      name="file"
      ref="uploadRef"
-      :default-upload="false"
      @change="handleChange"
      @before-upload="beforeUpload"
      v-model:file-list="fileList"
@ -40,7 +30,7 @@

 <script lang="ts" setup>
  import { getTemplateByCode } from '@/api/system/user';
-  import { computed, reactive, ref } from 'vue';
+  import { computed, reactive, ref, nextTick } from 'vue';
  import { CloudUploadOutlined } from '@vicons/antd';
  import { useMessage } from 'naive-ui';
  import { useUserStore } from '@/store/modules/user';
@ -101,18 +91,19 @@
   * 执行上传文件
   * @param param0 参数
   */
-  const handleChange = ({ file }) => {
-    const status = file.status;
-    if (status === 'done') {
-      let data = file.response;
+  const handleChange = async (file) => {
+    if (file.file.status === 'finished') {
+      let data = JSON.parse(file.event.target.response);
      if (data.code != 0) {
+        await nextTick();
+        fileList.value = [];
        message.error(data.msg || '导入失败');
      } else {
        message.success('导入成功');
        emit('update:visible', false);
        emit('success');
      }
-    } else if (status === 'error') {
+    } else if (file.file.status === 'error') {
      message.error('导入失败');
    }
  };