From 16f91db94f93b55a9e4863d0a90d3b725d29cc69 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Thu, 23 Feb 2023 20:09:55 +0800
Subject: [PATCH] =?UTF-8?q?:rocket:=20=E4=BC=81=E4=B8=9A=E8=AE=A4=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/src/BasicUpload.vue | 35 +++++-------
 src/components/Upload/src/UploadModal.vue | 68 ++++++-----------------
 src/components/Upload/src/useUpload.ts    | 10 ++--
 src/views/system/file/index.vue           |  7 +--
 4 files changed, 39 insertions(+), 81 deletions(-)

diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
index c80e3f5..bb082f9 100644
--- 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>
@@ -53,7 +51,6 @@
     components: { UploadModal, Space, UploadPreviewModal, Icon, Tooltip },
     props: uploadContainerProps,
     emits: ['change', 'delete', 'success', 'preview-delete', 'update:value'],
-
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
       // 上传modal
@@ -97,10 +94,6 @@
         emit('change', fileList.value);
       }
 
-      function handleSuccess() {
-        emit('success', closeUploadModal);
-      }
-
       function handleDelete(record: Recordable) {
         emit('delete', record);
       }
@@ -110,9 +103,9 @@
       }
 
       return {
+        closeUploadModal,
         registerUploadModal,
         openUploadModal,
-        handleSuccess,
         handleChange,
         handlePreviewChange,
         registerPreviewModal,
diff --git a/src/components/Upload/src/UploadModal.vue b/src/components/Upload/src/UploadModal.vue
index 26fdba6..3023064 100644
--- a/src/components/Upload/src/UploadModal.vue
+++ b/src/components/Upload/src/UploadModal.vue
@@ -69,24 +69,18 @@
     props: {
       ...basicProps,
       previewFileList: {
-        type: Array as PropType<FileItem[]>,
+        type: Array as PropType<string[]>,
         default: () => [],
       },
     },
     emits: ['change', 'register', 'delete', 'success'],
     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,
@@ -94,28 +88,16 @@
         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
@@ -147,10 +129,7 @@
           getBase64WithFile(file).then(({ result: thumbUrl }) => {
             fileListRef.value = [
               ...unref(fileListRef),
-              {
-                thumbUrl,
-                ...commonItem,
-              },
+              { thumbUrl, ...commonItem }
             ];
           });
         } else {
@@ -168,16 +147,12 @@
 
       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,
@@ -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;
@@ -280,7 +247,6 @@
         getOkButtonProps,
         beforeUpload,
         fileListRef,
-        state,
         isUploadingRef,
         handleStartUpload,
         handleOk,
diff --git a/src/components/Upload/src/useUpload.ts b/src/components/Upload/src/useUpload.ts
index c8dab62..694cc27 100644
--- 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
index 281fc23..1468514 100644
--- 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();
   }