SmartBench/CMVR-IOT-UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhanghao 2026-02-04 15:07:04 +08:00
parent f45b741ff0
commit 12d6ba703e
2 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/is/func/FunctionTable/FunctionDialog.vue
View File

@ -62,9 +62,12 @@
</template> </template>
</el-dialog> </el-dialog>
<el-dialog :width="800" v-model="dialogVisible"> <ElImageViewer
<img width="770" :src="dialogImageUrl" alt="Preview Image" /> v-if="isViewerOpen"
</el-dialog> :url-list="[currentImage]"
@close="closeViewer"
append-to-body
/>
</template> </template>
<script setup> <script setup>
@ -72,7 +75,7 @@ import { ref, watch } from 'vue'
import { useDict } from '@/utils/dict' import { useDict } from '@/utils/dict'
import {getToken} from "@/utils/auth.js"; import {getToken} from "@/utils/auth.js";
import {supportType} from "@/enum/index.js"; import {supportType} from "@/enum/index.js";
import { ElMessage } from 'element-plus'; import { ElMessage, ElImageViewer } from 'element-plus';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -141,12 +144,16 @@ const uploadError = (e) => {
console.log("uploadError", e) console.log("uploadError", e)
} }
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handlePictureCardPreview = (uploadFile) => { const handlePictureCardPreview = (uploadFile) => {
dialogImageUrl.value = uploadFile.response.msg currentImage.value = uploadFile.response.msg;
dialogVisible.value = true isViewerOpen.value = true;
}
const isViewerOpen = ref(false);
const currentImage = ref('');
const closeViewer = () => {
isViewerOpen.value = false;
} }
watch(() => props.visible, (newVal) => { watch(() => props.visible, (newVal) => {

22
src/views/is/im/Table/Dialog.vue
View File

@ -61,13 +61,21 @@
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<!-- 手动控制的预览组件，append-to-body 使其挂载到 body 末尾 -->
<ElImageViewer
v-if="isViewerOpen"
:url-list="[currentImage]"
@close="closeViewer"
append-to-body
/>
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { useDict } from '@/utils/dict' import { useDict } from '@/utils/dict'
import FunctionSelection from './FunctionSelection.vue' import FunctionSelection from './FunctionSelection.vue'
import { ElMessage } from 'element-plus' import { ElMessage, ElImageViewer } from 'element-plus'
import { getToken } from "@/utils/auth.js"; import { getToken } from "@/utils/auth.js";
import { supportType } from "@/enum/index.js"; import { supportType } from "@/enum/index.js";
@ -129,12 +137,16 @@ const uploadError = (e) => {
console.log("uploadError", e) console.log("uploadError", e)
} }
const dialogImageUrl = ref('') const isViewerOpen = ref(false);
const dialogVisible = ref(false) const currentImage = ref('');
const handlePictureCardPreview = (uploadFile) => { const handlePictureCardPreview = (uploadFile) => {
dialogImageUrl.value = uploadFile.response.msg currentImage.value = uploadFile.response.msg;
dialogVisible.value = true isViewerOpen.value = true;
}
const closeViewer = () => {
isViewerOpen.value = false;
} }
const { ti_ui_config } = useDict("ti_ui_config"); const { ti_ui_config } = useDict("ti_ui_config");