From f3e89c0c553cf48ed59cf91b9425efbc97ad652b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 3 Dec 2023 00:14:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=20UploadImg=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=A2=84=E8=A7=88=E5=9B=BE=E7=89=87=E7=9A=84=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=BA=20createImageViewer=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E5=95=86=E5=9F=8E=E5=88=97=E8=A1=A8=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=B1=82=E7=BA=A7=E5=87=BA=E7=8E=B0=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UploadFile/src/UploadImg.vue | 37 +++++++++++----------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue
index 996fe40b..101801e6 100644
--- a/src/components/UploadFile/src/UploadImg.vue
+++ b/src/components/UploadFile/src/UploadImg.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="upload-box">
     <el-upload
-      :action="updateUrl"
       :id="uuid"
-      :class="['upload', drag ? 'no-border' : '']"
-      :multiple="false"
-      :show-file-list="false"
-      :headers="uploadHeaders"
-      :before-upload="beforeUpload"
-      :on-success="uploadSuccess"
-      :on-error="uploadError"
-      :drag="drag"
       :accept="fileType.join(',')"
+      :action="updateUrl"
+      :before-upload="beforeUpload"
+      :class="['upload', drag ? 'no-border' : '']"
+      :drag="drag"
+      :headers="uploadHeaders"
+      :multiple="false"
+      :on-error="uploadError"
+      :on-success="uploadSuccess"
+      :show-file-list="false"
     >
       <template v-if="modelValue">
         <img :src="modelValue" class="upload-image" />
@@ -20,11 +20,11 @@
             <Icon icon="ep:edit" />
             <span v-if="showBtnText">{{ t('action.edit') }}</span>
           </div>
-          <div class="handle-icon" @click="imgViewVisible = true">
+          <div class="handle-icon" @click="imagePreview(modelValue)">
             <Icon icon="ep:zoom-in" />
             <span v-if="showBtnText">{{ t('action.detail') }}</span>
           </div>
-          <div class="handle-icon" @click="deleteImg" v-if="showDelete">
+          <div v-if="showDelete" class="handle-icon" @click="deleteImg">
             <Icon icon="ep:delete" />
             <span v-if="showBtnText">{{ t('action.del') }}</span>
           </div>
@@ -42,11 +42,6 @@
     <div class="el-upload__tip">
       <slot name="tip"></slot>
     </div>
-    <el-image-viewer
-      v-if="imgViewVisible"
-      @close="imgViewVisible = false"
-      :url-list="[modelValue]"
-    />
   </div>
 </template>
 
@@ -56,6 +51,7 @@ import type { UploadProps } from 'element-plus'
 import { generateUUID } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
 import { getAccessToken, getTenantId } from '@/utils/auth'
+import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'UploadImg' })
 
@@ -92,7 +88,12 @@ const message = useMessage() // 消息弹窗
 // 生成组件唯一id
 const uuid = ref('id-' + generateUUID())
 // 查看图片
-const imgViewVisible = ref(false)
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [imgUrl]
+  })
+}
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -130,7 +131,7 @@ const uploadError = () => {
   message.notifyError('图片上传失败，请您重新上传！')
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .is-error {
   .upload {
     :deep(.el-upload),