fix: 更新组件

src/components/XTCard/src/DescCard.vue

@@ -63,8 +63,8 @@
     id?: string;
     // 标题
     title: string;
-
-    showHead: boolean;
+    // 是否显示head 部分
+    showHead?: boolean;
     // icon
     icon?: string | unknown;
     iconType?: string;

src/components/XTUpload/src/XTUpload.vue

@@ -60,7 +60,7 @@
         </div>
         <div class="flex">
           <span class="upload-filelist--error" v-if="item.status == 'error'">上传失败</span>
-          <span class="upload-filelist--color" @click="handleRemove(item, 0)">删除</span>
+          <span class="upload-filelist--color pointer" @click="handleRemove(item, 0)">删除</span>
         </div>
       </div>
     </div>
@@ -116,6 +116,7 @@
       const isUploadingRef = ref(false);
       const fileList = ref<any[]>([]);
       const fileListRef = ref<FileItem[]>([]);
+      const isMultiCount = ref(0);
       const previewFile = ref<any>({});
       const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 
@@ -138,9 +139,34 @@
       );
 
       // 上传前校验
-      async function beforeUpload(file: File) {
-        const { size, name } = file;
+      async function beforeUpload(file: File, fileList) {
+        // console.log('🚀 ~ file: XTUpload.vue:142 ~ beforeUpload ~ file:', file);
+        // console.log('🚀 ~ file: XTUpload.vue:142 ~ beforeUpload ~ fileList:', fileList);
+        // console.log('几个文件', fileList.length);
+        if (fileList.length == 1) {
+          handleFile(file);
+          await handleStartUpload();
+          console.log(
+            '🚀 ~ file: XTUpload.vue:150 ~ beforeUpload ~ fileListRef.value:',
+            fileListRef.value,
+          );
+        } else {
+          isMultiCount.value += 1;
+          if (isMultiCount.value == fileList.length) {
+            console.log('上传操作');
+            fileList.forEach(ele => {
+              handleFile(ele);
+            });
+            await handleStartUpload();
+          }
+        }
+        return false;
+        // return false 会停止自动上传
+      }
+      // 设置上传文件
+      function handleFile(file) {
         const { maxSize } = props;
+        const { size, name } = file;
         // 设置最大值，则判断
         if (maxSize && file.size / 1024 / 1024 >= maxSize) {
           createMessage.error(`只能上传不超过${maxSize}MB的文件!`);
@@ -156,9 +182,6 @@
         };
         // 生成文件列表
         fileListRef.value = [...unref(fileListRef), commonItem];
-        await handleStartUpload();
-        return false;
-        // return false 会停止自动上传
       }
       // 删除
       async function handleRemove(record, bool) {
@@ -199,7 +222,10 @@
         }
         return status;
       }
-      async function uploadApiByItem(item: FileItem) {
+      async function uploadApiByItem(item: FileItem, idx: number, len: number) {
+        console.log('🚀 ~ file: XTUpload.vue:226 ~ uploadApiByItem ~ len:', len);
+        console.log('🚀 ~ file: XTUpload.vue:226 ~ uploadApiByItem ~ idx:', idx);
+        console.log('🚀 ~ file: XTUpload.vue:226 ~ uploadApiByItem ~ item:', item);
         const { api } = props;
         if (!api || !isFunction(api)) {
           return warn('upload api must exist and be a function');
@@ -223,20 +249,42 @@
           item.status =
             data.code == ResultEnum.SUCCESS ? UploadResultStatus.SUCCESS : UploadResultStatus.ERROR;
           item.responseData = data;
-          fileListRef.value.forEach(ele => {
-            const responseData = ele.responseData as any;
-            if (responseData.code == ResultEnum.SUCCESS) {
-              fileList.value.push(responseData.data);
-            } else {
-              createMessage.error(responseData.errorMsg);
-            }
-          });
-          fileListRef.value = fileListRef.value.filter(ele => {
-            return (
-              ele.status != UploadResultStatus.SUCCESS ||
-              String(ele.responseData?.code) != ResultEnum.SUCCESS
-            );
-          });
+
+          // console.log('🚀 ~ file: XTUpload.vue:250 ~ uploadApiByItem ~ item:', item);
+          // console.log(
+          //   '🚀 ~ file: XTUpload.vue:259 ~ uploadApiByItem ~ fileListRef.value:',
+          //   fileListRef.value,
+          // );
+          // console.log(
+          //   '🚀 ~ file: XTUpload.vue:259 ~ uploadApiByItem ~ fileListRef.value:',
+          //   fileList.value,
+          // );
+          if (idx + 1 == len) {
+            // console.log('执行赋值操作');
+            // console.log(
+            //   '🚀 ~ file: XTUpload.vue:259 ~ uploadApiByItem ~ fileListRef.value:',
+            //   fileListRef.value,
+            // );
+            // console.log(
+            //   '🚀 ~ file: XTUpload.vue:259 ~ uploadApiByItem ~ fileListRef.value:',
+            //   fileList.value,
+            // );
+            fileListRef.value.forEach(ele => {
+              const responseData = ele.responseData as any;
+              if (responseData?.code == ResultEnum.SUCCESS) {
+                fileList.value.push(responseData.data);
+              } else {
+                createMessage.error(responseData?.errorMsg);
+              }
+            });
+            fileListRef.value = fileListRef.value.filter(ele => {
+              return (
+                ele.status != UploadResultStatus.SUCCESS ||
+                String(ele.responseData?.code) != ResultEnum.SUCCESS
+              );
+            });
+          }
+
           return {
             success: data.code == ResultEnum.SUCCESS ? true : false,
             error: data.code == ResultEnum.SUCCESS ? null : data.errorMsg,
@@ -261,9 +309,20 @@
           // 只上传不是成功状态的
           const uploadFileList =
             fileListRef.value.filter(item => item.status !== UploadResultStatus.SUCCESS) || [];
+          console.log(
+            '🚀 ~ file: XTUpload.vue:267 ~ handleStartUpload ~ fileListRef.value:',
+            fileListRef.value,
+          );
+
+          console.log(
+            '🚀 ~ file: XTUpload.vue:263 ~ handleStartUpload ~ uploadFileList:',
+            uploadFileList,
+          );
+          // console.log('fileList.value', fileList.value);
+
           const data = await Promise.all(
-            uploadFileList.map(item => {
-              const result = uploadApiByItem(item);
+            uploadFileList.map((item, idx) => {
+              const result = uploadApiByItem(item, idx, uploadFileList.length);
               return result;
             }),
           );