Ver código fonte

feat(vxe-table): 集成表格插件并优化初始化配置

- 添加了完整的 vxe-table 插件功能实现
- 实现了插件上下文选项注入机制
- 重构了 useTableForm 工厂函数的初始化逻辑
- 支持通过参数或上下文注入 useVbenForm 函数
- 优化了组件导入和类型定义
- 添加了插件使用文档说明
- 移除了未使用的组件注释代码
- 统一了字符串引号格式为双引号
Jin Mao 2 meses atrás
pai
commit
e555f71bf8

+ 43 - 0
packages/effects/plugins/src/vxe-table/README.md

@@ -0,0 +1,43 @@
+# VXE Table Plugin
+
+基于 vxe-table 和 vxe-pc-ui 的表格组件插件。
+
+## 导出
+
+| 导出 | 类型 | 说明 |
+|------|------|------|
+| `setupVbenVxeTable` | 函数 | 初始化配置函数 |
+| `useVbenVxeGrid` | 函数 | 表格组合式函数 |
+| `VbenVxeGrid` | 组件 | 表格组件 |
+| `VxeTableGridColumns` | 类型 | 表格列类型 |
+| `VxeTableGridOptions` | 类型 | 表格配置类型 |
+| `VxeGridProps` | 类型 | 表格 Props |
+| `VxeGridListeners` | 类型 | 表格事件类型 |
+
+## 使用
+
+```ts
+import { setupVbenVxeTable, useVbenVxeGrid, VbenVxeGrid } from '@vben/plugins/vxe-table';
+```
+
+## 初始化
+
+在应用入口处调用:
+
+```ts
+import { setupVbenVxeTable } from '@vben/plugins/vxe-table';
+import { useVbenForm } from '@vben-core/form-ui';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    // 配置 VXE Table
+  },
+  useVbenForm,
+});
+```
+
+## 类型
+
+```ts
+import type { VxeTableGridOptions, VxeGridProps } from '@vben/plugins/vxe-table';
+```

+ 27 - 35
packages/effects/plugins/src/vxe-table/init.ts

@@ -1,56 +1,37 @@
-import type { SetupVxeTable } from './types';
+import type { SetupVxeTable } from "./types";
 
-import { defineComponent, watch } from 'vue';
+import { defineComponent, watch } from "vue";
 
-import { usePreferences } from '@vben/preferences';
+import { usePreferences } from "@vben/preferences";
 
-import { useVbenForm } from '@vben-core/form-ui';
+import { injectPluginsOptions } from "../plugins-context";
 
 import {
   VxeButton,
   VxeCheckbox,
-
-  // VxeFormGather,
-  // VxeForm,
-  // VxeFormItem,
   VxeIcon,
   VxeInput,
   VxeLoading,
   VxeModal,
   VxeNumberInput,
   VxePager,
-  // VxeList,
-  // VxeModal,
-  // VxeOptgroup,
-  // VxeOption,
-  // VxePulldown,
-  // VxeRadio,
-  // VxeRadioButton,
   VxeRadioGroup,
   VxeSelect,
   VxeTooltip,
   VxeUI,
-  VxeUpload,
-  // VxeSwitch,
-  // VxeTextarea,
-} from 'vxe-pc-ui';
-import enUS from 'vxe-pc-ui/lib/language/en-US';
+  VxeUpload
+} from "vxe-pc-ui";
+import enUS from "vxe-pc-ui/lib/language/en-US";
 // 导入默认的语言
-import zhCN from 'vxe-pc-ui/lib/language/zh-CN';
-import {
-  VxeColgroup,
-  VxeColumn,
-  VxeGrid,
-  VxeTable,
-  VxeToolbar,
-} from 'vxe-table';
+import zhCN from "vxe-pc-ui/lib/language/zh-CN";
+import { VxeColgroup, VxeColumn, VxeGrid, VxeTable, VxeToolbar } from "vxe-table";
 
-import { extendsDefaultFormatter } from './extends';
+import { extendsDefaultFormatter } from "./extends";
 
 // 是否加载过
 let isInit = false;
 
-let tableFormFactory: typeof useVbenForm | undefined;
+let tableFormFactory: ((...args: any[]) => any) | undefined;
 
 function normalizeVxeLocale<T extends Record<string, any>>(localeModule: T) {
   return (
@@ -62,13 +43,19 @@ function normalizeVxeLocale<T extends Record<string, any>>(localeModule: T) {
   ) as T;
 }
 
-export const useTableForm: typeof useVbenForm = ((...args) => {
+export const useTableForm = ((...args: any[]) => {
+  const pluginsOptions = injectPluginsOptions();
+
   if (!tableFormFactory) {
-    throw new Error('useTableForm is not initialized');
+    if (pluginsOptions?.form?.useVbenForm) {
+      tableFormFactory = pluginsOptions.form.useVbenForm;
+    } else {
+      throw new Error('useTableForm is not initialized');
+    }
   }
 
   return tableFormFactory(...args);
-}) as typeof useVbenForm;
+});
 
 // 部分组件,如果没注册,vxe-table 会报错,这里实际没用组件,只是为了不报错,同时可以减少打包体积
 const createVirtualComponent = (name = '') => {
@@ -118,10 +105,15 @@ export function initVxeTable() {
 }
 
 export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
-  const { configVxeTable, useVbenForm } = setupOptions;
+  const { configVxeTable, useVbenForm: useVbenFormFromParam } = setupOptions;
 
   initVxeTable();
-  tableFormFactory = useVbenForm;
+
+  const pluginsOptions = injectPluginsOptions();
+  const useVbenFormFromContext = pluginsOptions?.form?.useVbenForm;
+
+  // 优先级:参数传入 > context 注入
+  tableFormFactory = useVbenFormFromParam || useVbenFormFromContext;
 
   const { isDark, locale } = usePreferences();