111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
import { h } from 'vue';
|
||
|
||
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
|
||
import { useDictStore } from '@vben/stores';
|
||
|
||
import { Button, Image, Tag } from 'ant-design-vue';
|
||
|
||
import { useVbenForm } from './form';
|
||
|
||
setupVbenVxeTable({
|
||
configVxeTable: (vxeUI) => {
|
||
vxeUI.setConfig({
|
||
grid: {
|
||
align: 'center',
|
||
border: false,
|
||
columnConfig: {
|
||
resizable: true,
|
||
},
|
||
minHeight: 180,
|
||
formConfig: {
|
||
// 全局禁用vxe-table的表单配置，使用formOptions
|
||
enabled: false,
|
||
},
|
||
toolbarConfig: {
|
||
import: true,
|
||
export: true,
|
||
refresh: true,
|
||
print: true,
|
||
zoom: true,
|
||
custom: true,
|
||
},
|
||
customConfig: {
|
||
mode: 'modal',
|
||
},
|
||
proxyConfig: {
|
||
autoLoad: true,
|
||
response: {
|
||
result: 'list',
|
||
total: 'total',
|
||
},
|
||
showActiveMsg: true,
|
||
showResponseMsg: false,
|
||
},
|
||
pagerConfig: {
|
||
enabled: true,
|
||
},
|
||
sortConfig: {
|
||
multiple: true,
|
||
},
|
||
round: true,
|
||
showOverflow: true,
|
||
size: 'small',
|
||
},
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellImage' },
|
||
vxeUI.renderer.add('CellImage', {
|
||
renderTableDefault(_renderOpts, params) {
|
||
const { column, row } = params;
|
||
return h(Image, { src: row[column.field] });
|
||
},
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellLink' },
|
||
vxeUI.renderer.add('CellLink', {
|
||
renderTableDefault(renderOpts) {
|
||
const { props } = renderOpts;
|
||
return h(
|
||
Button,
|
||
{ size: 'small', type: 'link' },
|
||
{ default: () => props?.text },
|
||
);
|
||
},
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellDict',props:{dictType: ''} },
|
||
vxeUI.renderer.add('CellDict', {
|
||
renderTableDefault(renderOpts, params) {
|
||
const dictStore = useDictStore();
|
||
const { props } = renderOpts;
|
||
const { column, row } = params;
|
||
if (!props) {
|
||
return '';
|
||
}
|
||
const dict = dictStore.getDictData(props.type, row[column.field]);
|
||
// 转义
|
||
if (dict) {
|
||
if (`${dict.colorType}` === 'primary') dict.colorType = 'processing';
|
||
else if (`${dict.colorType}` === 'danger') dict.colorType = 'error';
|
||
else if (`${dict.colorType}` === 'info') dict.colorType = 'default';
|
||
else if (!dict.colorType) dict.colorType = 'default';
|
||
return h(
|
||
Tag,
|
||
{ color: dict.colorType },
|
||
{ default: () => dict.label },
|
||
);
|
||
}
|
||
return '';
|
||
},
|
||
});
|
||
|
||
// 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
|
||
// vxeUI.formats.add
|
||
},
|
||
useVbenForm,
|
||
});
|
||
|
||
export { useVbenVxeGrid };
|
||
|
||
export type * from '@vben/plugins/vxe-table';
|