98dea92225
* feat(@vben-core/form-ui): add typed form value codecs * test(@vben-core/form-ui): cover codec value boundaries * refactor(project): propagate form codec generics * feat(@vben/plugins): propagate form codecs through vxe grids * refactor(@vben/playground): migrate form codec examples * refactor(@vben/playground): migrate query forms to codecs * docs(@vben/docs): document form value codecs
94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import type { FormValues } from '@vben/common-ui';
|
||
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
|
||
|
||
import type { ComponentPropsMap, ComponentType } from './component';
|
||
|
||
import { h } from 'vue';
|
||
|
||
import {
|
||
setupVbenVxeTable,
|
||
useVbenVxeGrid as useGrid,
|
||
} from '@vben/plugins/vxe-table';
|
||
|
||
import { Button, Image } from 'tdesign-vue-next';
|
||
|
||
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,
|
||
},
|
||
proxyConfig: {
|
||
autoLoad: true,
|
||
response: {
|
||
result: 'items',
|
||
total: 'total',
|
||
list: 'items',
|
||
},
|
||
showActiveMsg: true,
|
||
showResponseMsg: false,
|
||
},
|
||
round: true,
|
||
showOverflow: true,
|
||
size: 'small',
|
||
} as VxeTableGridOptions,
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellImage' },
|
||
vxeUI.renderer.add('CellImage', {
|
||
renderTableDefault(renderOpts, params) {
|
||
const { props } = renderOpts;
|
||
const { column, row } = params;
|
||
return h(Image, { src: row[column.field], ...props });
|
||
},
|
||
});
|
||
|
||
// 表格配置项可以用 cellRender: { name: 'CellLink' },
|
||
vxeUI.renderer.add('CellLink', {
|
||
renderTableDefault(renderOpts) {
|
||
const { props } = renderOpts;
|
||
return h(
|
||
Button,
|
||
{ size: 'small', theme: 'primary', variant: 'text' },
|
||
{ default: () => props?.text },
|
||
);
|
||
},
|
||
});
|
||
|
||
// 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
|
||
// vxeUI.formats.add
|
||
},
|
||
useVbenForm,
|
||
});
|
||
|
||
export const useVbenVxeGrid = <
|
||
T extends Record<string, any>,
|
||
TFormValues extends FormValues = FormValues,
|
||
TSubmitValues extends FormValues = TFormValues,
|
||
>(
|
||
...rest: Parameters<
|
||
typeof useGrid<
|
||
T,
|
||
ComponentType,
|
||
ComponentPropsMap,
|
||
TFormValues,
|
||
TSubmitValues
|
||
>
|
||
>
|
||
) =>
|
||
useGrid<T, ComponentType, ComponentPropsMap, TFormValues, TSubmitValues>(
|
||
...rest,
|
||
);
|
||
|
||
export type * from '@vben/plugins/vxe-table';
|