From da0a9144b04681fa9c9a328af7c421180883c50c Mon Sep 17 00:00:00 2001
From: zhaojinfeng <121016171@qq.com>
Date: Fri, 21 Jul 2023 16:49:21 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A4=B4=E5=83=8F=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/upload-avatar/index.vue | 34 ++++++++++++++++++++++++++------
 stories/UploadAvatar.stories.ts  |  9 +++++----
 types/components.d.ts            | 13 +++++++-----
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/packages/upload-avatar/index.vue b/packages/upload-avatar/index.vue
index 2cc5415..1ed3da4 100644
--- a/packages/upload-avatar/index.vue
+++ b/packages/upload-avatar/index.vue
@@ -14,7 +14,7 @@
       </div>
     </slot>
   </div>
-  <el-dialog v-model="showDialog" title="上传头像" width="800px" append-to-body @opened="modalOpened" @closed="closeDialog">
+  <el-dialog v-if="!disabled" v-model="showDialog" title="上传头像" width="800px" append-to-body @opened="modalOpened" @closed="closeDialog">
     <el-row>
       <el-col :xs="24" :md="12" :style="{ height: '350px' }">
         <VueCropper
@@ -71,7 +71,8 @@ import { Minus, Plus, RefreshLeft, RefreshRight, Upload } from '@element-plus/ic
 
 const props = withDefaults(defineProps<{
   accpet?: string
-  modelValue?: string
+  fileId?: number | string
+  fileUrl?: string
   /**
    * 图片大小（单位MB）
    *
@@ -82,23 +83,29 @@ const props = withDefaults(defineProps<{
   autoCropHeight?: number
   /** 默认生成截图框高度 */
   autoCropWidth?: number
+  /** 上传请求函数 */
   uploadFunction?: (formData: FormData) => Promise<FileVO>
+  /** 文件信息请求函数 */
+  fileFunction: (fileId?: number | string) => Promise<FileVO>
   disabled?: boolean
 }>(), {
   accpet: '.jpeg,.jpg,.png,.bmp',
+  fileId: '',
+  fileUrl: '',
   fileSize: 2,
   autoCropHeight: 200,
   autoCropWidth: 200,
-  uploadFunction: () => Promise.resolve({}),
 })
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', modelValue?: string): void
+  (event: 'update:fileUrl', fileId?: number): void
+  (event: 'update:filelId', modelValue?: string): void
   (event: 'onSuccess', file: FileVO): void
   (event: 'onError', error: Error): void
 }>()
 
-const avatarUrl = useVModel(props, 'modelValue', emit)
+let avatarUrl = $ref(props.fileUrl)
+const filelId = useVModel(props, 'fileId', emit)
 
 const imageStyle = computed(() => ({
   height: `${props.autoCropHeight}px`,
@@ -182,8 +189,14 @@ function selectImage() {
 }
 
 async function uploadImg(blob: Blob) {
+  if (!props.uploadFunction) {
+    ElMessage.error('请定义接口请求函数')
+    emit('onError', new Error('请定义接口请求函数'))
+    return
+  }
   if (blob.size > props.fileSize * 1024 * 1024) {
     ElMessage.error('您的图片经过剪裁依然很大，请重新选择图片')
+    emit('onError', new Error('您的图片经过剪裁依然很大，请重新选择图片'))
     return
   }
 
@@ -193,7 +206,8 @@ async function uploadImg(blob: Blob) {
 
   try {
     const res = await props.uploadFunction(formData)
-    avatarUrl.value = res.url
+    avatarUrl = res.url
+    filelId.value = res.id
     showDialog = false
     emit('onSuccess', res)
   }
@@ -212,6 +226,14 @@ function closeDialog() {
   reset()
   loading = false
 }
+
+watch(() => props.fileId, async () => {
+  if (!props.fileId || avatarUrl)
+    return
+
+  const res = await props.fileFunction(props.fileId)
+  avatarUrl = res.url
+})
 </script>
 
 <style>
diff --git a/stories/UploadAvatar.stories.ts b/stories/UploadAvatar.stories.ts
index f3ab0d3..1e6efde 100644
--- a/stories/UploadAvatar.stories.ts
+++ b/stories/UploadAvatar.stories.ts
@@ -2,7 +2,7 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-07-18 12:28:36
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-20 17:13:00
+ * @LastEditTime: 2023-07-21 16:34:51
  * @FilePath: \vue3\stories\UploadAvatar.stories.ts
  * @Description:
  *
@@ -16,7 +16,8 @@ const meta = {
   component: ThUploadAvatar,
   tags: ['autodocs'],
   args: {
-    modelValue: '',
+    fileId: '',
+    fileUrl: '',
     accpet: '.jpeg,.jpg,.png,.bmp',
     disabled: false,
     fileSize: 2,
@@ -43,7 +44,7 @@ export const Base: Story = {
 export const Preview: Story = {
   name: '启用disabled，当做预览组件',
   args: {
-    modelValue: avatar,
-    disabled: false,
+    fileUrl: avatar,
+    disabled: true,
   },
 }
diff --git a/types/components.d.ts b/types/components.d.ts
index 6c84b28..ebdcbc9 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -8,12 +8,12 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     DownloadLink: typeof import('./../packages/download-link/index.vue')['default']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElRow: typeof import('element-plus/es')['ElRow']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Header: typeof import('./../packages/header/index.vue')['default']
     PreviewOffice: typeof import('./../packages/preview-office/index.vue')['default']
     PreviewOfficeView: typeof import('./../packages/preview-office-view/index.vue')['default']
@@ -24,4 +24,7 @@ declare module 'vue' {
     UploadSingleFile: typeof import('./../packages/upload-single-file/index.vue')['default']
     UploadTable: typeof import('./../packages/upload-table/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }