From 9f7d49d37a3de51ab85343b19d2d0aeeaebe3a50 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 16 Jan 2024 08:57:56 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=A4=B4=E5=83=8F=E4=B8=AD=E5=BC=B9=E6=A1=86?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E7=AB=8B=E5=88=BB=E9=94=80=E6=AF=81=E5=86=85?=
 =?UTF-8?q?=E9=83=A8`popover`=EF=BC=8C=E9=81=BF=E5=85=8D=E5=BB=B6=E8=BF=9F?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E5=BD=B1=E5=93=8D=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/upload.vue     | 14 +++++++++++++-
 src/views/system/user/utils/hook.tsx |  5 ++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/views/system/user/upload.vue b/src/views/system/user/upload.vue
index d2d80beb02..561013fc32 100644
--- a/src/views/system/user/upload.vue
+++ b/src/views/system/user/upload.vue
@@ -10,6 +10,7 @@ const props = defineProps({
 const emit = defineEmits(["cropper"]);
 
 const infos = ref();
+const popoverRef = ref();
 const refCropper = ref();
 const showPopover = ref(false);
 const cropperImg = ref<string>("");
@@ -19,11 +20,22 @@ function onCropper({ base64, blob, info }) {
   cropperImg.value = base64;
   emit("cropper", { base64, blob, info });
 }
+
+function hidePopover() {
+  popoverRef.value.hide();
+}
+
+defineExpose({ hidePopover });
 </script>
 
 <template>
   <div v-loading="!showPopover" element-loading-background="transparent">
-    <el-popover :visible="showPopover" placement="right" width="18vw">
+    <el-popover
+      ref="popoverRef"
+      :visible="showPopover"
+      placement="right"
+      width="18vw"
+    >
       <template #reference>
         <div class="w-[18vw]">
           <ReCropper
diff --git a/src/views/system/user/utils/hook.tsx b/src/views/system/user/utils/hook.tsx
index bde5d3598b..484d998d69 100644
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@@ -351,6 +351,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     });
   }
 
+  const cropRef = ref();
   /** 上传头像 */
   function handleUpload(row) {
     addDialog({
@@ -360,6 +361,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       closeOnClickModal: false,
       contentRenderer: () =>
         h(croppingUpload, {
+          ref: cropRef,
           imgSrc: row.avatar,
           onCropper: info => (avatarInfo.value = info)
         }),
@@ -368,7 +370,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
         // 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
         done(); // 关闭弹框
         onSearch(); // 刷新表格数据
-      }
+      },
+      closeCallBack: () => cropRef.value.hidePopover()
     });
   }