diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts index 3bad067cd..17222f2a0 100644 --- a/apps/web-naive/src/adapter/vxe-table.ts +++ b/apps/web-naive/src/adapter/vxe-table.ts @@ -3,9 +3,18 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; import { h } from 'vue'; import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table'; +import { + erpCountInputFormatter, + erpNumberFormatter, + fenToYuan, + formatPast2, +} from '@vben/utils'; -import { NButton, NImage } from 'naive-ui'; +import { NButton, NImage, NImageGroup, NSwitch, NTag } from 'naive-ui'; +import { $t } from '#/locales'; + +import DictTag from '../components/dict-tag/dict-tag.vue'; import { useVbenForm } from './form'; setupVbenVxeTable({ @@ -22,16 +31,32 @@ setupVbenVxeTable({ // 全局禁用vxe-table的表单配置,使用formOptions enabled: false, }, + toolbarConfig: { + import: false, // 是否导入 + export: false, // 是否导出 + refresh: true, // 是否刷新 + print: false, // 是否打印 + zoom: true, // 是否缩放 + custom: true, // 是否自定义配置 + }, + customConfig: { + mode: 'modal', + }, proxyConfig: { autoLoad: true, response: { - result: 'items', + result: 'list', total: 'total', - list: 'items', }, showActiveMsg: true, showResponseMsg: false, }, + pagerConfig: { + enabled: true, + }, + sortConfig: { + multiple: true, + }, round: true, showOverflow: true, size: 'small', @@ -46,6 +71,16 @@ setupVbenVxeTable({ }, }); + vxeUI.renderer.add('CellImages', { + renderTableDefault(_renderOpts, params) { + const { column, row } = params; + if (column && column.field && row[column.field]) { + return h(NImageGroup, { srcList: row[column.field] }); + } + return ''; + }, + }); + // 表格配置项可以用 cellRender: { name: 'CellLink' }, vxeUI.renderer.add('CellLink', { renderTableDefault(renderOpts) { @@ -58,8 +93,113 @@ setupVbenVxeTable({ }, }); + // 表格配置项可以用 cellRender: { name: 'CellTag' }, + vxeUI.renderer.add('CellTag', { + renderTableDefault(renderOpts, params) { + const { props } = renderOpts; + const { column, row } = params; + return h(NTag, { color: props?.color }, () => row[column.field]); + }, + }); + + vxeUI.renderer.add('CellTags', { + renderTableDefault(renderOpts, params) { + const { props } = renderOpts; + const { column, row } = params; + if (!row[column.field] || !Array.isArray(row[column.field])) { + return ''; + } + return h( + 'div', + { class: 'flex items-center justify-center' }, + { + default: () => + row[column.field].map((item: any) => + h(NTag, { color: props?.color }, { default: () => item }), + ), + }, + ); + }, + }); + + // 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} }, + vxeUI.renderer.add('CellDict', { + renderTableDefault(renderOpts, params) { + const { props } = renderOpts; + const { column, row } = params; + if (!props) { + return ''; + } + // 使用 DictTag 组件替代原来的实现 + return h(DictTag, { + type: props.type, + value: row[column.field]?.toString(), + }); + }, + }); + + // 表格配置项可以用 cellRender: { name: 'CellSwitch', props: { beforeChange: () => {} } }, + // add by 芋艿:from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L97-L123 + vxeUI.renderer.add('CellSwitch', { + renderTableDefault({ attrs, props }, { column, row }) { + const loadingKey = `__loading_${column.field}`; + const finallyProps = { + inlinePrompt: true, + activeText: $t('common.enabled'), + inactiveText: $t('common.disabled'), + activeValue: 1, + inactiveValue: 0, + ...props, + modelValue: row[column.field], + loading: row[loadingKey] ?? false, + 'onUpdate:modelValue': onChange, + }; + + async function onChange(newVal: any) { + row[loadingKey] = true; + try { + const result = await attrs?.beforeChange?.(newVal, row); + if (result !== false) { + row[column.field] = newVal; + } + } finally { + row[loadingKey] = false; + } + } + + return h(NSwitch, finallyProps); + }, + }); + // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化 // vxeUI.formats.add + vxeUI.formats.add('formatPast2', { + tableCellFormatMethod({ cellValue }) { + return formatPast2(cellValue); + }, + }); + + // add by 星语:数量格式化,保留 3 位 + vxeUI.formats.add('formatAmount3', { + tableCellFormatMethod({ cellValue }) { + if (cellValue === null || cellValue === undefined) { + return ''; + } + return erpCountInputFormatter(cellValue); + }, + }); + // add by 星语:数量格式化,保留 2 位 + vxeUI.formats.add('formatAmount2', { + tableCellFormatMethod({ cellValue }, digits = 2) { + return `${erpNumberFormatter(cellValue, digits)}`; + }, + }); + + vxeUI.formats.add('formatFenToYuanAmount', { + tableCellFormatMethod({ cellValue }, digits = 2) { + return `${erpNumberFormatter(fenToYuan(cellValue), digits)}`; + }, + }); }, useVbenForm, });