From 12d6ba703e92d5f555a23293f6b18dc999b2933e Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Wed, 4 Feb 2026 15:07:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=94=B9=E4=BA=A4=E6=8E=A7?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../is/func/FunctionTable/FunctionDialog.vue  | 25 ++++++++++++-------
 src/views/is/im/Table/Dialog.vue              | 22 ++++++++++++----
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/views/is/func/FunctionTable/FunctionDialog.vue b/src/views/is/func/FunctionTable/FunctionDialog.vue
index e3efac2..b074601 100644
--- a/src/views/is/func/FunctionTable/FunctionDialog.vue
+++ b/src/views/is/func/FunctionTable/FunctionDialog.vue
@@ -62,9 +62,12 @@
     </template>
   </el-dialog>
 
-  <el-dialog :width="800" v-model="dialogVisible">
-    <img width="770" :src="dialogImageUrl" alt="Preview Image" />
-  </el-dialog>
+  <ElImageViewer
+    v-if="isViewerOpen"
+    :url-list="[currentImage]"
+    @close="closeViewer"
+    append-to-body
+  />
 </template>
 
 <script setup>
@@ -72,7 +75,7 @@ import { ref, watch } from 'vue'
 import { useDict } from '@/utils/dict'
 import {getToken} from "@/utils/auth.js";
 import {supportType} from "@/enum/index.js";
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElImageViewer } from 'element-plus';
 
 const props = defineProps({
   visible: {
@@ -141,12 +144,16 @@ const uploadError = (e) => {
   console.log("uploadError", e)
 }
 
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
-
 const handlePictureCardPreview = (uploadFile) => {
-  dialogImageUrl.value = uploadFile.response.msg
-  dialogVisible.value = true
+  currentImage.value = uploadFile.response.msg;
+  isViewerOpen.value = true;
+}
+
+const isViewerOpen = ref(false);
+const currentImage = ref('');
+
+const closeViewer = () => {
+  isViewerOpen.value = false;
 }
 
 watch(() => props.visible, (newVal) => {
diff --git a/src/views/is/im/Table/Dialog.vue b/src/views/is/im/Table/Dialog.vue
index 129f9c9..ae9c52b 100644
--- a/src/views/is/im/Table/Dialog.vue
+++ b/src/views/is/im/Table/Dialog.vue
@@ -61,13 +61,21 @@
       </span>
     </template>
   </el-dialog>
+
+  <!-- 手动控制的预览组件，append-to-body 使其挂载到 body 末尾 -->
+    <ElImageViewer
+      v-if="isViewerOpen"
+      :url-list="[currentImage]"
+      @close="closeViewer"
+      append-to-body
+    />
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import { useDict } from '@/utils/dict'
 import FunctionSelection from './FunctionSelection.vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElImageViewer } from 'element-plus'
 import { getToken } from "@/utils/auth.js";
 import { supportType } from "@/enum/index.js";
 
@@ -129,12 +137,16 @@ const uploadError = (e) => {
   console.log("uploadError", e)
 }
 
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
+const isViewerOpen = ref(false);
+const currentImage = ref('');
 
 const handlePictureCardPreview = (uploadFile) => {
-  dialogImageUrl.value = uploadFile.response.msg
-  dialogVisible.value = true
+  currentImage.value = uploadFile.response.msg;
+  isViewerOpen.value = true;
+}
+
+const closeViewer = () => {
+  isViewerOpen.value = false;
 }
 
 const { ti_ui_config } = useDict("ti_ui_config");