diff --git a/web/src/views/valuation/audit/components/AuditDetail.vue b/web/src/views/valuation/audit/components/AuditDetail.vue index 0407c54..cefbecd 100644 --- a/web/src/views/valuation/audit/components/AuditDetail.vue +++ b/web/src/views/valuation/audit/components/AuditDetail.vue @@ -9,6 +9,7 @@ import { NImage, NImageGroup, NDataTable, + NPopover, } from 'naive-ui' import { marked } from 'marked' @@ -199,7 +200,7 @@ const detailSections = computed(() => { title: field.label, key: field.label, width: 200, - ellipsis: field.type === 'list' ? false : { + ellipsis: ['list', 'images'].includes(field.type) ? false : { tooltip: { style: { maxWidth: '600px', maxHeight: '400px', overflow: 'auto' } }, @@ -217,7 +218,7 @@ const detailSections = computed(() => { return '-' } else if (fieldData.type === 'images') { if (fieldData.value && fieldData.value.length) { - return h(NImageGroup, {}, () => + const createImages = () => h(NImageGroup, {}, () => fieldData.value.map(img => h(NImage, { src: img, @@ -228,6 +229,16 @@ const detailSections = computed(() => { }) ) ) + + return h(NPopover, { + trigger: 'hover', + displayDirective: 'show', + keepAliveOnHover: true, + style: { maxWidth: '600px', maxHeight: '400px', overflow: 'auto' } + }, { + trigger: () => h('div', { style: 'display: flex; overflow: hidden;' }, createImages()), + default: () => createImages() + }) } return '-' } else {