feat: vxe config

apps/web-tdesign/src/adapter/vxe-table.ts

@@ -2,9 +2,24 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
 
 import { h } from 'vue';
 
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import {
+  AsyncVxeColumn,
+  AsyncVxeTable,
+  createRequiredValidation,
+  setupVbenVxeTable,
+  useVbenVxeGrid,
+} from '@vben/plugins/vxe-table';
+import {
+  erpCountInputFormatter,
+  erpNumberFormatter,
+  fenToYuan,
+  formatPast2,
+} from '@vben/utils';
 
-import { Button, Image } from 'tdesign-vue-next';
+import { Button, Image, ImageViewer, Switch, Tag } from 'tdesign-vue-next';
+
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
@@ -22,16 +37,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,24 +77,156 @@ setupVbenVxeTable({
       },
     });
 
+    vxeUI.renderer.add('CellImages', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        if (column && column.field && row[column.field]) {
+          return h(ImageViewer, {}, () => {
+            return row[column.field].map((item: any) =>
+              h(Image, { src: item }),
+            );
+          });
+        }
+        return '';
+      },
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellLink' },
     vxeUI.renderer.add('CellLink', {
       renderTableDefault(renderOpts) {
         const { props } = renderOpts;
         return h(
           Button,
-          { size: 'small', theme: 'primary', variant: 'text' },
+          { size: 'small', variant: 'text' },
           { default: () => props?.text },
         );
       },
     });
 
+    // 表格配置项可以用 cellRender: { name: 'CellTag' },
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        return h(Tag, { color: props?.color }, () => row[column.field]);
+      },
+    });
+
+    vxeUI.renderer.add('CellTags', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        if (!row[column.field] || row[column.field].length === 0) {
+          return '';
+        }
+        return h(
+          'div',
+          { class: 'flex items-center justify-center' },
+          {
+            default: () =>
+              row[column.field].map((item: any) =>
+                h(Tag, { 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 = {
+          checkedChildren: $t('common.enabled'),
+          checkedValue: 1,
+          unCheckedChildren: $t('common.disabled'),
+          unCheckedValue: 0,
+          ...props,
+          checked: row[column.field],
+          loading: row[loadingKey] ?? false,
+          'onUpdate:checked': 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(Switch, finallyProps);
+      },
+    });
+
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
+
+    vxeUI.formats.add('formatPast2', {
+      tableCellFormatMethod({ cellValue }) {
+        return formatPast2(cellValue);
+      },
+    });
+
+    // add by 星语：数量格式化，保留 3 位
+    vxeUI.formats.add('formatAmount3', {
+      tableCellFormatMethod({ cellValue }) {
+        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)}`;
+      },
+    });
+
+    // add by 星语：文件大小格式化
+    vxeUI.formats.add('formatFileSize', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        if (!cellValue) return '0 B';
+        const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        const index = Math.floor(Math.log(cellValue) / Math.log(1024));
+        const size = cellValue / 1024 ** index;
+        const formattedSize = size.toFixed(digits);
+        return `${formattedSize} ${unitArr[index]}`;
+      },
+    });
   },
   useVbenForm,
 });
 
-export { useVbenVxeGrid };
+export { createRequiredValidation, useVbenVxeGrid };
+
+export const [VxeTable, VxeColumn] = [AsyncVxeTable, AsyncVxeColumn];
+
+export * from '#/components/table-action';
 
 export type * from '@vben/plugins/vxe-table';