fix: 更改交控交互图片预览方式

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) => {

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");