🧑‍💻🐳 chore: 扩展上传组件事件

wangxiang4 · Feb 23, 2023 · 9f87e98 · 9f87e98 · vercel · Feb 23, 2023
1 parent 42c96b1
commit 9f87e98
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 99 deletions.
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
     <Space>
-      <a-button type="primary" preIcon="carbon:cloud-upload" @click="openUploadModal">
-        {{ t('component.upload.upload') }}
+      <a-button type="primary"
+                preIcon="carbon:cloud-upload"
+                @click="openUploadModal"
+      >{{ t('component.upload.upload') }}
       </a-button>
       <Tooltip v-if="showPreview" placement="bottom">
         <template #title>
@@ -19,20 +21,16 @@
         </a-button>
       </Tooltip>
     </Space>
-    <UploadModal
-      v-bind="bindValue"
-      :previewFileList="fileList"
-      @register="registerUploadModal"
-      @change="handleChange"
-      @delete="handleDelete"
-      @success="handleSuccess"
+    <UploadModal v-bind="bindValue"
+                 :previewFileList="fileList"
+                 @register="registerUploadModal"
+                 @change="handleChange"
+                 @delete="handleDelete"
     />
-
-    <UploadPreviewModal
-      :value="fileList"
-      @register="registerPreviewModal"
-      @list-change="handlePreviewChange"
-      @delete="handlePreviewDelete"
+    <UploadPreviewModal :value="fileList"
+                        @register="registerPreviewModal"
+                        @list-change="handlePreviewChange"
+                        @delete="handlePreviewDelete"
     />
   </div>
 </template>
@@ -57,7 +55,7 @@
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
       // 上传modal
-      const [registerUploadModal, { openModal: openUploadModal, closeModal: closeUploadModal }] = useModal();
+      const [registerUploadModal, { openModal: openUploadModal }] = useModal();
 
       // 预览modal
       const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
@@ -97,10 +95,6 @@
         emit('change', fileList.value);
       }
 
-      function handleSuccess() {
-        emit('success', closeUploadModal);
-      }
-
       function handleDelete(record: Recordable) {
         emit('delete', record);
       }
@@ -112,7 +106,6 @@
       return {
         registerUploadModal,
         openUploadModal,
-        handleSuccess,
         handleChange,
         handlePreviewChange,
         registerPreviewModal,

diff --git a/src/components/Upload/src/UploadModal.vue b/src/components/Upload/src/UploadModal.vue
@@ -48,7 +48,7 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, toRefs, unref, computed, PropType } from 'vue';
+  import { defineComponent, ref, toRefs, unref, computed, PropType } from 'vue';
   import { Upload, Alert } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { useUploadType } from './useUpload';
@@ -62,7 +62,7 @@
   import { warn } from '/@/utils/log';
   import FileList from './FileList.vue';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { BasicColumn } from '/@/components/Table';
 
   export default defineComponent({
     components: { BasicModal, Upload, Alert, FileList },
@@ -73,54 +73,36 @@
         default: () => [],
       },
     },
-    emits: ['change', 'register', 'delete', 'success'],
+    emits: ['change', 'register', 'delete'],
     setup(props, { emit }) {
-      const state = reactive<{ fileList: FileItem[] }>({
-        fileList: [],
-      });
-
-      // 是否正在上传
+      const { t } = useI18n();
       const isUploadingRef = ref(false);
       const fileListRef = ref<FileItem[]>([]);
       const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-
-      const { t } = useI18n();
       const [register, { closeModal }] = useModalInner();
-
+      const { createMessage } = useMessage();
       const { getStringAccept, getHelpText } = useUploadType({
         acceptRef: accept,
         helpTextRef: helpText,
         maxNumberRef: maxNumber,
         maxSizeRef: maxSize,
       });
 
-      const { createMessage } = useMessage();
-
-      const getIsSelectFile = computed(() => {
-        return (
-            fileListRef.value.length > 0 &&
-            !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS)
-        );
-      });
+      const getIsSelectFile = computed(() =>
+          (fileListRef.value.length > 0 && !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS)));
 
       const getOkButtonProps = computed(() => {
-        const someSuccess = fileListRef.value.some(
-            (item) => item.status === UploadResultStatus.SUCCESS,
-        );
-        return {
-          disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
-        };
+        const someSuccess = fileListRef.value.some(item => item.status === UploadResultStatus.SUCCESS);
+        return { disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess };
       });
 
       const getUploadBtnText = computed(() => {
-        const someError = fileListRef.value.some(
-            (item) => item.status === UploadResultStatus.ERROR,
-        );
+        const someError = fileListRef.value.some(item => item.status === UploadResultStatus.ERROR);
         return isUploadingRef.value
-          ? t('component.upload.uploading')
-          : someError
-            ? t('component.upload.reUploadFailed')
-            : t('component.upload.startUpload');
+            ? t('component.upload.uploading')
+            : someError
+                ? t('component.upload.reUploadFailed')
+                : t('component.upload.startUpload');
       });
 
       // 上传前校验
@@ -147,10 +129,7 @@
           getBase64WithFile(file).then(({ result: thumbUrl }) => {
             fileListRef.value = [
               ...unref(fileListRef),
-              {
-                thumbUrl,
-                ...commonItem,
-              },
+              { thumbUrl, ...commonItem }
             ];
           });
         } else {
@@ -168,24 +147,20 @@
 
       async function uploadApiByItem(item: FileItem) {
         const { api } = props;
-        if (!api || !isFunction(api)) {
+        if (!api || !isFunction(api))
           return warn('upload api must exist and be a function');
-        }
         try {
           item.status = UploadResultStatus.UPLOADING;
-          const { data } = await props.api?.(
-            {
-              data: {
-                ...(props.uploadParams || {}),
+          const { data } = await props.api?.({
+                data: {...(props.uploadParams || {})},
+                file: item.file,
+                name: props.name,
+                filename: props.filename,
+              },
+              function onUploadProgress(progressEvent: ProgressEvent) {
+                const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+                item.percent = complete;
               },
-              file: item.file,
-              name: props.name,
-              filename: props.filename,
-            },
-            function onUploadProgress(progressEvent: ProgressEvent) {
-              const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-              item.percent = complete;
-            },
           );
           item.status = UploadResultStatus.SUCCESS;
           item.responseData = data;
@@ -194,7 +169,6 @@
             error: null,
           };
         } catch (e) {
-          console.log(e);
           item.status = UploadResultStatus.ERROR;
           return {
             success: false,
@@ -212,20 +186,13 @@
         try {
           isUploadingRef.value = true;
           // 只上传不是成功状态的
-          const uploadFileList =
-              fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
-          const data = await Promise.all(
-              uploadFileList.map((item) => {
-                return uploadApiByItem(item);
-              }),
-          );
+          const uploadFileList = fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
+          const result = await Promise.all(uploadFileList.map((item) => uploadApiByItem(item)));
           isUploadingRef.value = false;
-          // 生产环境:抛出错误
-          const errorList = data.filter((item: any) => !item.success);
+          const errorList = result.filter((item: any) => !item.success);
           if (errorList.length > 0) throw errorList;
-          useTimeoutFn(() => {
-            emit('success');
-          }, 300);
+          // 当关闭上传保存按钮，默认选择开始上传按钮充当保存按钮
+          !props.showUploadSaveBtn && handleOk();
         } catch (e) {
           isUploadingRef.value = false;
           throw e;
@@ -271,16 +238,15 @@
       }
 
       return {
-        columns: createTableColumns() as any[],
-        actionColumn: createActionColumn(handleRemove) as any,
+        columns: createTableColumns() as BasicColumn[],
+        actionColumn: createActionColumn(handleRemove) as BasicColumn,
         register,
         closeModal,
         getHelpText,
         getStringAccept,
         getOkButtonProps,
         beforeUpload,
         fileListRef,
-        state,
         isUploadingRef,
         handleStartUpload,
         handleOk,

diff --git a/src/components/Upload/src/UploadPreviewModal.vue b/src/components/Upload/src/UploadPreviewModal.vue
@@ -15,7 +15,7 @@
   import FileList from './FileList.vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { previewProps } from './props';
-  import { PreviewFileItem } from './typing';
+  import { FileBasicColumn, PreviewFileItem } from './typing';
   import { downloadByUrl } from '/@/utils/file/download';
   import { createPreviewColumns, createPreviewActionColumn } from './data';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -73,8 +73,8 @@
         register,
         closeModal,
         fileListRef,
-        columns: createPreviewColumns() as any[],
-        actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any,
+        columns: createPreviewColumns() as FileBasicColumn[],
+        actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as FileBasicColumn,
       };
     },
   });

diff --git a/src/components/Upload/src/useUpload.ts b/src/components/Upload/src/useUpload.ts
@@ -2,11 +2,11 @@ import { Ref, unref, computed } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
 const { t } = useI18n();
 export function useUploadType({
-                                acceptRef,
-                                helpTextRef,
-                                maxNumberRef,
-                                maxSizeRef,
-                              }: {
+  acceptRef,
+  helpTextRef,
+  maxNumberRef,
+  maxSizeRef,
+}: {
   acceptRef: Ref<string[]>;
   helpTextRef: Ref<string>;
   maxNumberRef: Ref<number>;

diff --git a/src/views/system/file/index.vue b/src/views/system/file/index.vue
@@ -13,7 +13,7 @@
                      :api="commonUpload"
                      :accept="['image/*']"
                      multiple
-                     @success="handleUploadSuccess"
+                     @change="handleUploadSave"
         />
         <a-button v-auth="['file_del']"
                   type="primary"
@@ -107,10 +107,9 @@
     state.multiple = !rowSelection.length;
   }
 
-  /** 处理上传成功回调 */
-  function handleUploadSuccess(closeUploadModal: Fn) {
+  /** 处理上传成功保存回调 */
+  function handleUploadSave(fileList: string[]) {
     state.fileList = [];
-    closeUploadModal();
     handleRefreshTable();
   }