From 4a8806223a474087e49e027b2d5a17b6c066debc Mon Sep 17 00:00:00 2001
From: peerless_hero <peerless_hero@outlook.com>
Date: Wed, 30 Aug 2023 15:31:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BC=BA=E5=B0=91=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0id=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/upload-list/index.vue | 44 ++++++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/upload-list/index.vue b/packages/upload-list/index.vue
index 3be7fdc..183db85 100644
--- a/packages/upload-list/index.vue
+++ b/packages/upload-list/index.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-16 17:33:41
- * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-22 14:16:22
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-08-30 15:24:13
  * @FilePath: \vue3\packages\upload-list\index.vue
  * @Description:
  *
@@ -14,6 +14,8 @@
     :disabled="disabled"
     :before-upload="beforeUpload"
     :http-request="httpRequest"
+    @preview="preview"
+    @success="success"
     @remove="remove"
   >
     <slot>
@@ -49,6 +51,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (event: 'update:file-list', file: FileVO[]): void
+  (event: 'preview', file: UploadFile): void
 }>()
 
 const userFiles = ref<UploadUserFile[]>([])
@@ -79,19 +82,36 @@ async function httpRequest({ file, onProgress, onSuccess, onError }: UploadReque
   }
 }
 
-userFiles.value = props.fileList.map(file => ({
-  ...file,
-  status: 'success',
-  percentage: 100,
-  uid: file.id,
-}))
+function preview(uploadFile: UploadFile) {
+  emit('preview', uploadFile)
+}
+
+const { pause, resume } = watchPausable(
+  () => props.fileList, (fileList) => {
+    userFiles.value = fileList.map(file => ({
+      ...file,
+      status: 'success',
+      percentage: 100,
+      uid: file.id,
+    }))
+  },
+  { immediate: true },
+)
+
+function success(response: FileVO, uploadFile: UploadFile, uploadFiles: UploadFiles) {
+  // 将返回响应合并到文件上
+  Object.assign(uploadFile, response)
+  // 手动更新，暂停监听，避免因props.fileList更新再次更新uploadFile
+  pause()
+  emit('update:file-list', uploadFiles)
+  resume()
+}
 
 function remove(_uploadFile: UploadFile, uploadFiles: UploadFiles) {
   userFiles.value = uploadFiles
+  // 手动更新，暂停监听，避免因props.fileList更新再次更新uploadFile
+  pause()
   emit('update:file-list', uploadFiles)
+  resume()
 }
-
-watch(() => userFiles.value, (uploadFiles) => {
-  emit('update:file-list', uploadFiles)
-})
 </script>