diff --git a/templates/vue/index.vue.j2 b/templates/vue/index.vue.j2 index bc55b2a..af5f625 100644 --- a/templates/vue/index.vue.j2 +++ b/templates/vue/index.vue.j2 @@ -2,7 +2,7 @@ /** * {{entity}}管理页面 */ -import {ref, reactive, onMounted, watch} from 'vue'; +import {ref, reactive, onMounted, watch, h} from 'vue'; import {useVbenVxeGrid} from '#/adapter/vxe-table'; import {useVbenModal} from '@vben/common-ui'; import {useVbenForm} from '#/adapter/form'; @@ -10,6 +10,8 @@ import dayjs from 'dayjs'; import {columns} from './data'; import {formSchema} from './form'; import { {{entity}}Api } from '#/api/{{entity}}'; +import { Image } from 'ant-design-vue'; + // ========== 状态变量 ========== const currentRow = ref(null); @@ -122,7 +124,89 @@ watch( // ========== 表格配置 ========== const gridOptions = { columns: [ - ...columns, + ...columns.map(col => { + //带img,face,picture 关键词的字段,使用图片渲染 + if (col.field.toLowerCase()?.indexOf("img")>-1 + || col.field.toLowerCase()?.indexOf("face")>-1 + || col.field.toLowerCase()?.indexOf("picture")>-1 ) { + return { + ...col, + width: 96, + align: 'center', + slots: { + default: ({ row }: any) => { + const imgUrl = row[col.field]; + // 如果没有图片,显示提示文字 + if (!imgUrl) { + return h('div', { + style: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '50px', + color: '#999', + fontSize: '12px' + } + }, '无图片'); + } + // 判断是否是完整的 URL + let fullUrl = imgUrl; + if (!imgUrl.startsWith('http://') && !imgUrl.startsWith('https://')) { + // 如果不是完整 URL,拼接基础 API 地址 + const apiURL = import.meta.env.VITE_GLOB_API_URL || ''; + fullUrl = `${apiURL}${imgUrl}`; + } + console.log('🖼️ 图片 URL:', fullUrl); + // 返回 Image 组件的 VNode + try { + return h(Image, { + src: fullUrl, + height: 60, + width: 80, + preview: true, + style: { + borderRadius: '4px', + objectFit: 'cover', + cursor: 'pointer', + boxShadow: '0 2px 4px rgba(0,0,0,0.1)', + }, + onError: () => { + console.error('❌ 图片加载失败:', fullUrl); + return h('div', { + style: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '50px', + backgroundColor: '#f5f5f5', + borderRadius: '4px', + color: '#999', + fontSize: '12px' + } + }, '加载失败'); + } + }); + } catch (error) { + console.error('❌ 图片渲染错误:', error); + return h('div', { + style: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '50px', + backgroundColor: '#fffbe6', + borderRadius: '4px', + color: '#faad14', + fontSize: '12px' + } + }, '渲染失败'); + } + } + } + }; + } + return col; + }), { field: 'action', title: '操作',