import { h } from 'vue'; import { Tag, Avatar, Image } from 'ant-design-vue'; /** * 表格列配置 * 定义表格显示的列 */ export const columns = [ {% for field in list_fields %} { title: '{{ field.label }}', dataIndex: '{{ field.camel_name }}', width: {% if field.type == 'CharField' %}150{% elif field.type == 'IntegerField' %}100{% elif field.type == 'DateTimeField' %}180{% else %}120{% endif %}, {% if field.is_image %} // 图片渲染 customRender({ record }) { return record.{{ field.camel_name }} ? h(Image, { src: record.{{ field.camel_name }}, width: 48, height: 48, fit: 'cover', preview: true, }) : h('span', '-'); }, {% elif field.choices %} // 选项标签渲染 customRender({ record }) { const statusMap = { {% for choice in field.choices %} {{ choice.value }}: { text: '{{ choice.label }}', color: {% if choice.value == 1 %}'success'{% elif choice.value == 2 %}'error'{% elif choice.value == 3 %}'warning'{% else %}'default'{% endif %} }, {% endfor %} }; const status = statusMap[record.{{ field.camel_name }}]; return h( Tag, { color: status?.color || 'default', }, { default: () => status?.text || record.{{ field.camel_name }}, }, ); }, {% elif field.camel_name == 'status' %} // 状态标签渲染 customRender({ record }) { return h( Tag, { color: record.status == 1 ? 'success' : 'error', }, { default: () => (record.status == 1 ? '正常' : '停用'), }, ); }, {% elif field.type == 'CharField' and field.camel_name|lower in ['website', 'site', 'url', 'link'] %} // 链接渲染 customRender({ record }) { const url = record.{{ field.camel_name }}; return h( 'a', { href: url, target: '_blank', rel: 'noopener noreferrer', }, { default: () => url || '点击查看', }, ); }, {% else %} // 普通文本渲染 {% endif %} }, {% endfor %} { title: '创建人', dataIndex: 'createUser', width: 100, }, { title: '创建时间', dataIndex: 'createTime', width: 180, }, { title: '操作', fixed: 'right', dataIndex: 'action', key: 'action', width: 200, }, ];