@skyfox2000/webui 1.0.13 → 1.2.0

package/src/utils/table.ts

@@ -0,0 +1,274 @@
+import { GridControl } from '@/typings/table.d';
+import { ExecuteOptions } from '@/typings/data.d';
+import { RowRecord } from '@/typings/tools.d';
+import { AnyData, AnyJsonData, ApiResponse, FindResult, IUrlInfo, ReqParams, ResStatus } from '@skyfox2000/fapi';
+import { doQuery, doSave, doDelete } from './data';
+import { setFormData } from './form';
+import { useUserInfo } from '@/stores/userInfo';
+import AppRouter from '@/router';
+import { combineParams } from '@skyfox2000/microbase';
+
+interface TableColumn {
+   role?: string;
+   permit?: string;
+   visible?: boolean | (() => boolean);
+   [key: string]: any;
+}
+
+/**
+ * 过滤表格列
+ * - 角色/权限控制的列，如无权限将不显示
+ * - 受function控制的列，如返回false将不显示
+ * @param columns 表格列
+ * @param toolCtl 是否工具栏控制
+ * @returns 过滤后的表格列
+ */
+export const filterColumns = (columns: TableColumn[], toolCtl?: boolean) => {
+   const userInfoStore = useUserInfo();
+
+   return columns.filter((column) => {
+      // 角色权限检查
+      if (column.role && !userInfoStore.hasRole(column.role)) {
+         return false;
+      }
+
+      // 操作权限检查
+      if (column.permit && !userInfoStore.hasPermit(AppRouter.currentRoute.value.path, column.permit)) {
+         return false;
+      }
+
+      if (!toolCtl) {
+         // 可见性检查
+         if (column.visible === false) {
+            return false;
+         }
+
+         if (typeof column.visible === 'function') {
+            return column.visible();
+         }
+      }
+
+      return true;
+   });
+};
+
+/**
+ * 比较表头
+ * - 对比新旧表头
+ * - 如果新表头中存在旧表头中没有的列，则将旧表头中对应的列删除
+ * - 如果新表头中存在旧表头中有的列，则将旧表头中对应的列更新
+ * - 如果新表头中不存在旧表头中的列，则将新表头中对应的列添加
+ * - 返回合并后的表头
+ */
+export const mergeColumns = (newColumns: TableColumn[], oldColumns?: TableColumn[]) => {
+   const mergeColumns = oldColumns?.filter((oldColumn) => {
+      const newColumn = newColumns.find(
+         (newColumn) =>
+            newColumn.dataIndex === oldColumn.dataIndex ||
+            newColumn.key === oldColumn.key ||
+            newColumn.title === oldColumn.title,
+      );
+      if (newColumn) {
+         return { ...oldColumn, ...newColumn };
+      }
+      return false;
+   });
+
+   return [...(mergeColumns || []), ...newColumns.filter((newColumn) => !mergeColumns?.includes(newColumn))];
+};
+
+/**
+ * 发起表格数据查询
+ * @param gridCtrl 表格控制对象
+ * @returns
+ */
+export const gridQueryList = <T>(gridCtrl: GridControl<T>): Promise<T[]> => {
+   gridCtrl.remotePage = false;
+   return gridQueryFind(gridCtrl).then((result) => {
+      return result.rows as T[];
+   });
+};
+
+/**
+ * 发起表格数据查询
+ * @param gridCtrl 表格控制对象
+ * @returns
+ */
+export const gridQueryFind = <T>(gridCtrl: GridControl<T>): Promise<FindResult> => {
+   // 设置查询参数
+   if (!gridCtrl.gridQuery) gridCtrl.gridQuery = {};
+   const urlKey = gridCtrl.remotePage ? 'find' : 'list';
+
+   return doQuery<FindResult>(gridCtrl, {
+      urlKey,
+      url: gridCtrl.gridUrl,
+      params: gridCtrl.gridQuery,
+      loadingState: gridCtrl.isGridLoading,
+      processParams: (params) => {
+         // 处理分页参数
+         if (gridCtrl.remotePage) {
+            params.Query!.$limit = [(gridCtrl.pageNo.value! - 1) * gridCtrl.pageSize.value!, gridCtrl.pageSize.value!];
+         }
+
+         const newParams = combineParams(gridCtrl.gridUrl?.params, params, gridCtrl.gridQuery);
+
+         return newParams;
+      },
+   }).then((result: ApiResponse<FindResult> | null) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         let findResult = result.data as FindResult;
+         if (findResult.rows) {
+            gridCtrl.tableData.value = findResult.rows as unknown as T[];
+            gridCtrl.total.value = findResult.total;
+         } else {
+            gridCtrl.tableData.value = result.data as unknown as T[];
+            gridCtrl.total.value = (result.data as unknown as T[]).length;
+            findResult = {
+               total: gridCtrl.total.value,
+               rows: result.data as unknown as Record<string, any>[],
+            };
+
+            if (gridCtrl.afterLoad) gridCtrl.afterLoad(findResult);
+         }
+         return findResult;
+      }
+
+      gridCtrl.tableData.value = [];
+      gridCtrl.total.value = 0;
+      return {
+         total: 0,
+         rows: [],
+      };
+   });
+};
+
+/**
+ * 表格数据行更新
+ * @param gridCtrl 表格控制对象
+ * @param record 表格行数据
+ * - 记录行主键pageGrid.primaryKey默认为Id
+ * - 仅更新record内的字段
+ * @returns
+ */
+export const gridRowUpdate = <T>(
+   gridCtrl: GridControl<T>,
+   record: Record<string, any>,
+   options: Partial<ExecuteOptions<T>> = {},
+): Promise<any | undefined> => {
+   return doSave<T>(gridCtrl, {
+      urlKey: 'update',
+      url: gridCtrl.updateUrl,
+      params: {
+         Query: { [gridCtrl.primaryKey]: record[gridCtrl.primaryKey] },
+         Data: record,
+      },
+      loadingState: gridCtrl.isGridSaving,
+      ...options,
+   }).then((result) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         setTimeout(() => {
+            gridCtrl.reload.value = true;
+            if (gridCtrl.afterUpdate) gridCtrl.afterUpdate(record as T);
+         }, 50);
+      }
+      return result;
+   });
+};
+
+/**
+ * 表格数据行状态更新
+ * @param gridCtrl 表格控制对象
+ * @param record 表格行数据
+ * - 记录行主键pageGrid.primaryKey默认为Id
+ * - 记录行状态pageGrid.statusKey默认为Enabled
+ * @returns
+ */
+export const gridStatusUpdate = <T>(
+   gridCtrl: GridControl<T>,
+   record: Record<string, any>,
+): Promise<any | undefined> => {
+   const rowStatus: Record<string, any> = {};
+   rowStatus[gridCtrl.primaryKey] = record[gridCtrl.primaryKey];
+   rowStatus[gridCtrl.statusKey] = record[gridCtrl.statusKey];
+   return gridRowUpdate(gridCtrl, rowStatus, {
+      loadingText: false,
+      hideErrorToast: true,
+   });
+};
+
+/**
+ * 获取数据记录详情
+ * @param pageCtrl 页面控制对象
+ * @param params 查询条件
+ * @param url 调用接口
+ * @returns
+ */
+export const getRecordDetail = async <T>(
+   gridCtrl: GridControl<T>,
+   params: ReqParams,
+   url?: IUrlInfo,
+): Promise<ApiResponse<AnyJsonData> | null> => {
+   const response = await doQuery<AnyJsonData>(gridCtrl, {
+      urlKey: 'detail',
+      url,
+      params: params,
+      loadingState: gridCtrl.isGridLoading,
+   });
+
+   return response;
+};
+
+/**
+ * 表格记录展开详情
+ * @param gridCtrl 表格控制对象
+ * @param record 表格行数据
+ * @returns
+ */
+export const onGridRowExpand = <T>(gridCtrl: GridControl<T>, record: T) => {
+   const recordData = record as Record<string, AnyData>;
+
+   return getRecordDetail(gridCtrl, { [gridCtrl.primaryKey]: recordData[gridCtrl.primaryKey] }).then((result) => {
+      if (result?.status === ResStatus.SUCCESS && result.data) {
+         gridCtrl.expandRows.value[recordData[gridCtrl.primaryKey]] = result;
+      }
+      return result;
+   });
+};
+
+/**
+ * 打开表单编辑表格记录
+ * @param gridCtrl 表格控制对象
+ * @param record 表格行数据
+ * @returns
+ */
+export const onGridRowEdit = <T>(gridCtrl: GridControl<T>, record: T) => {
+   let editorCtrl = gridCtrl.editor;
+   gridCtrl.rowData!.value = record;
+   if (editorCtrl) {
+      setFormData(editorCtrl, record);
+      editorCtrl.visible.value = true;
+   }
+};
+
+/**
+ * 删除表格记录
+ * @param gridCtrl 表格控制对象
+ * @param record 表格行数据
+ * @returns
+ */
+export const onGridRowDelete = <T>(gridCtrl: GridControl<T>, record: string[] | RowRecord | T) => {
+   return doDelete<T>(gridCtrl, record as any, {
+      url: gridCtrl.deleteUrl,
+      primaryKey: gridCtrl.primaryKey,
+   }).then((result) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         setTimeout(() => {
+            gridCtrl.reload.value = true;
+            if (gridCtrl.afterDelete && !Array.isArray(record)) {
+               gridCtrl.afterDelete(record as T);
+            }
+         }, 50);
+      }
+      return result;
+   });
+};

package/src/utils/tools.ts

@@ -0,0 +1,362 @@
+import { useSettingInfo } from '@/index';
+import { GridControl } from '@/typings/table.d';
+import { PageControl } from '@/typings/page.d';
+import { RowRecord, ButtonTool, IconTool } from '@/typings/tools';
+
+import message from 'vue-m-message';
+import { AnyData } from '@skyfox2000/fapi';
+
+/**
+ * 查找工具项
+ * @param defaultTools 默认工具栏
+ * @param key 关键字
+ * @returns
+ */
+export const getToolByKey = (
+   defaultTools: (IconTool | ButtonTool)[],
+   key: string,
+): ButtonTool | IconTool | undefined => {
+   // 首先在顶层查找
+   const foundInTopLevel = defaultTools.find((tool) => tool.key === key);
+
+   // 如果在顶层找到了，直接返回
+   if (foundInTopLevel) {
+      return foundInTopLevel;
+   }
+
+   // 如果没有找到，递归地在每个工具项的 children 中查找
+   for (const tool of defaultTools) {
+      if (tool.children) {
+         const foundInChildren = getToolByKey(tool.children, key);
+         if (foundInChildren) {
+            return foundInChildren; // 如果在子级找到了，返回找到的工具项
+         }
+      }
+   }
+
+   // 如果整个树都查找完毕，没有找到，返回 undefined
+   return undefined;
+};
+
+/**
+ * 将按钮数组处理返回按钮组和菜单组
+ * @param defaultTools 默认按钮
+ * @param autoFlat 平铺数量，超出折叠成菜单，0不折叠
+ * @param tools 需要返回的工具栏
+ * @returns 按钮组，菜单组
+ */
+export const getToolGroup = (
+   defaultTools: (IconTool | ButtonTool)[],
+   autoFlat: number,
+   tools?: (IconTool | ButtonTool | string)[],
+) => {
+   const buttons: (IconTool | ButtonTool)[] = [];
+   const menus: (IconTool | ButtonTool)[] = [];
+   if (!tools) tools = [...defaultTools];
+   if (tools.length) {
+      tools.forEach((toolItem, index) => {
+         let button: IconTool | ButtonTool;
+
+         if (typeof toolItem === 'string') {
+            const matchedButton = getToolByKey(defaultTools, toolItem);
+            button = matchedButton ? { ...matchedButton } : { key: toolItem, label: toolItem };
+         } else {
+            const matchedButton = getToolByKey(defaultTools, toolItem.key);
+            button = matchedButton ? { ...matchedButton, ...toolItem } : { ...toolItem };
+         }
+         if (!button.click) {
+            button.click = (_: PageControl<AnyData>, grid?: GridControl<AnyData>, record?: AnyData) => {
+               if (grid) grid.rowData.value = record;
+               if (button.formVisible) {
+                  button.formVisible.value = false;
+                  setTimeout(() => {
+                     button.formVisible!.value = true;
+                  }, 1);
+               } else {
+                  message.warning('未配置点击处理事件！');
+               }
+            };
+         }
+
+         if (autoFlat === 0 || index < autoFlat) {
+            buttons.push(button);
+         } else {
+            menus.push(button);
+         }
+      });
+   }
+
+   return { buttons, menus };
+};
+
+/**
+ * 判断工具项是否禁用
+ * @param item 工具项
+ * @param record 相关数据
+ * @returns 禁用状态
+ */
+export const getToolStatus = (item: IconTool | ButtonTool, record?: Record<string, any>) => {
+   if (item.disabled && typeof item.disabled == 'function') {
+      return item.disabled(record);
+   }
+   return item.disabled;
+};
+
+/**
+ * 判断工具项是否可见
+ * @param item 工具项
+ * @param record 相关数据
+ * @returns 可见状态
+ */
+export const getToolVisible = (item: IconTool | ButtonTool, record?: Record<string, any>) => {
+   if (item.visible && typeof item.visible == 'function') {
+      return item.visible(record);
+   }
+   return item.visible ?? true;
+};
+
+/**
+ * 重新加载表格
+ * @param gridCtrl 表格控制对象
+ */
+export const onReloadClick = <T>(_: PageControl<T>, gridCtrl?: GridControl<T>) => {
+   gridCtrl!.reload.value = true;
+};
+
+/**
+ * 搜索框显示
+ * @param gridCtrl 表格控制对象
+ */
+const onSearchClick = <T>(_: PageControl<T>, gridCtrl?: GridControl<T>) => {
+   gridCtrl!.searchBar.value = !gridCtrl!.searchBar.value;
+};
+
+/**
+ * 行高控制显示
+ * @param gridCtrl 表格控制对象
+ */
+const onRowHeightClick = <T>(_: PageControl<T>, gridCtrl?: GridControl<T>) => {
+   switch (gridCtrl!.tableSize.value) {
+      case 'large':
+         gridCtrl!.tableSize.value = 'middle';
+         break;
+      case 'middle':
+         gridCtrl!.tableSize.value = 'small';
+         break;
+      case 'small':
+         gridCtrl!.tableSize.value = 'large';
+         break;
+   }
+};
+
+/**
+ * 表格多选框显示
+ * @param gridCtrl 表格控制对象
+ */
+const onCheckboxClick = <T>(_: PageControl<T>, gridCtrl?: GridControl<T>) => {
+   gridCtrl!.selectable.value = !gridCtrl!.selectable.value;
+   if (!gridCtrl!.selectable.value) {
+      gridCtrl!.selectKeys.value = [];
+      gridCtrl!.selectRows.value = [];
+   }
+};
+
+/**
+ * 全部记录行展开/合并控制
+ * @param pageCtrl 页面数据控制
+ */
+const onAllRowExpandClick = <T>(_: PageControl<T>, gridCtrl?: GridControl<T>) => {
+   gridCtrl!.rowExpand.value = !gridCtrl!.rowExpand.value;
+};
+
+/**
+ * TODO: 表格导出Excel
+ * @param pageCtrl 页面数据控制
+ */
+const onExportExcelClick = <T>(_: PageControl<T>, gridCtrl?: GridControl<T>) => {
+   gridCtrl!.selectable.value = !gridCtrl!.selectable.value;
+};
+
+/**
+ * 统一按钮操作
+ * @param item 按钮
+ * @param pageCtrl 页面控制对象
+ * @param record 数据表行记录
+ * @param confirm 确认执行
+ */
+export const onToolClicked = <T>(
+   item: IconTool | ButtonTool,
+   pageCtrl?: PageControl<T>,
+   gridCtrl?: GridControl<T>,
+   record?: T | RowRecord | string[],
+   confirm?: true,
+) => {
+   /**
+    * 是否启用确认弹窗，或者已确认执行
+    */
+   if (!item.confirm || confirm) {
+      // 不使用弹窗或者已确认执行
+      if (item.click) {
+         if (pageCtrl) item.click(pageCtrl, gridCtrl, record);
+         else item.click(null as unknown as PageControl<T>, gridCtrl, record);
+      }
+   }
+   toolStatusUpdate(item);
+};
+/**
+ * TODO: 表格导出PDF
+ * @param pageCtrl 页面数据控制
+ */
+const onExportPDFClick = <T>(_: PageControl<T>, gridCtrl?: GridControl<T>) => {
+   gridCtrl!.selectable.value = !gridCtrl!.selectable.value;
+};
+
+/**
+ * 全屏或退出全屏显示
+ */
+export const onFullscreenClick = () => {
+   const settingInfoStore = useSettingInfo();
+   settingInfoStore.setFullscreen(!settingInfoStore.fullscreen);
+};
+
+/**
+ * 工具栏状态更新
+ * - 提示文字修改
+ * - 图标位修改
+ * - 根据外部状态更新特定图标状态
+ */
+const toolStatusUpdate = (tool: IconTool | ButtonTool, iconStatus?: number) => {
+   if (tool.icons || tool.labels) {
+      if (iconStatus !== undefined) {
+         tool.iconStatus = iconStatus;
+      } else {
+         tool.iconStatus = tool.iconStatus || 0;
+         tool.iconStatus += 1;
+      }
+      if (tool.labels && tool.labels.length) tool.label = tool.labels[tool.iconStatus % tool.labels.length];
+      if (tool.icons && tool.icons.length) tool.icon = tool.icons[tool.iconStatus % tool.icons.length];
+   }
+};
+
+/**
+ * 控制表格字段是否显示
+ * @param column 表格字段
+ * @param checked 是否选中
+ */
+export const onColumnVisibleChanged = (column: any, checked: boolean) => {
+   if (checked) {
+      delete column.visible;
+   } else {
+      column.visible = false;
+   }
+};
+
+/**
+ * 表格常用工具栏工具列表
+ * @param key参数规范
+ * - key 参数配置成tool.xxx.xxx
+ * - TODO: 支持用户权限控制判断
+ * @param click参数规范
+ * - <T>(pageCtrl: PageData<T>) => void
+ */
+export const defaultTools: IconTool[] = [
+   {
+      key: 'Reload',
+      label: '刷新表格',
+      icon: 'icon-reload',
+      click: onReloadClick,
+   },
+   {
+      key: 'Query',
+      label: '展开搜索栏',
+      labels: ['展开搜索栏', '折叠搜索栏'],
+      icon: 'icon-search',
+      iconStatus: 0,
+      click: onSearchClick,
+   },
+   {
+      key: 'RowHeight',
+      label: '行高调整',
+      icon: 'icon-row-height',
+      click: onRowHeightClick,
+   },
+   {
+      key: 'tool.multiple.checkbox',
+      label: '显示多选框',
+      labels: ['显示多选框', '隐藏多选框'],
+      icon: 'icon-checkbox',
+      click: onCheckboxClick,
+   },
+   {
+      key: 'tool.expand.rows',
+      label: '展开记录行',
+      labels: ['展开记录行', '折叠记录行'],
+      icon: 'icon-row-collapse',
+      iconStatus: 0,
+      icons: ['icon-row-collapse', 'icon-row-expand'],
+      click: onAllRowExpandClick,
+   },
+   {
+      key: 'tool.export.excel',
+      label: '导出Excel',
+      icon: 'icon-export-excel',
+      children: [
+         {
+            key: 'tool.export.excel.all',
+            label: '全部记录',
+            click: onExportExcelClick,
+         },
+         {
+            key: 'tool.export.excel.selected',
+            label: '选中的记录',
+            click: onExportExcelClick,
+         },
+      ],
+   },
+   {
+      key: 'tool.export.pdf',
+      label: '导出PDF',
+      icon: 'icon-export-pdf',
+      children: [
+         {
+            key: 'tool.export.pdf.selected',
+            label: '选中的记录',
+            click: onExportPDFClick,
+         },
+      ],
+   },
+   {
+      key: 'TableHeadset',
+      label: '表头设置',
+      icon: 'icon-headset',
+      dropdown: 'headset',
+      click: () => {}, // 不设置点击事件
+   },
+   {
+      key: 'Fullscreen',
+      label: '设置全屏',
+      labels: ['设置全屏', '取消全屏'],
+      icon: 'icon-fullscreen',
+      iconStatus: 0,
+      icons: ['icon-fullscreen', 'icon-exitscreen'],
+      click: onFullscreenClick,
+   },
+];
+
+/**
+ * 工具栏工厂
+ */
+export const useToolFactory = <T>(gridCtrl: GridControl<T>) => {
+   if (!gridCtrl.tools || gridCtrl.tools.length > 0) {
+      const icons = [];
+      if (!gridCtrl.tools) icons.push(...defaultTools);
+      else {
+         icons.push(...gridCtrl.tools);
+      }
+      return { tools: getToolGroup(defaultTools as ButtonTool[], 0, icons).buttons as IconTool[] };
+   }
+
+   return {
+      tools: [],
+   };
+};

package/src/utils/tree.ts

@@ -0,0 +1,28 @@
+import { TreeControl, TreeNode } from '@/typings/tree.d';
+import { ApiResponse, ReqParams, ResStatus } from '@skyfox2000/fapi';
+import { doQuery } from './data';
+import { combineParams } from '@skyfox2000/microbase';
+
+/**
+ * 树加载数据
+ * @param treeCtrl 树控制对象
+ * @returns Promise<TreeNode[] | undefined>
+ */
+export const queryTree = (treeCtrl: TreeControl, params?: ReqParams): Promise<TreeNode[]> => {
+   // 设置树查询选项
+   return doQuery<TreeNode>(treeCtrl, {
+      urlKey: 'tree',
+      params: {},
+      loadingState: treeCtrl.isTreeLoading,
+      loadingText: false,
+      processParams: () => {
+         return combineParams(treeCtrl.treeQuery, params);
+      },
+   }).then((result: ApiResponse<TreeNode> | null) => {
+      if (result?.status === ResStatus.SUCCESS) {
+         treeCtrl.data.value = result.data as unknown as TreeNode[];
+         return treeCtrl.data.value as unknown as TreeNode[];
+      }
+      return [];
+   });
+};

package/tsconfig.json

@@ -41,13 +41,6 @@
       "sourceMap": true,
       "verbatimModuleSyntax": false
    },
-   "include": [
-      "src/**/**.ts",
-      "src/**/**.d.ts",
-      "src/**/**.vue",
-      "types/**/*.d.ts",
-      "vite.config.ts",
-      "plugins/**/*.ts"
-   ],
+   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "env.d.ts", "vite.config.ts"],
    "exclude": ["node_modules", "lib", "dist"]
 }

package/vite.config.ts

@@ -22,10 +22,10 @@ export default defineConfig(({ mode }: ConfigEnv) => {
          dts({
             outDir: 'lib',
             entryRoot: 'src',
-            // 确保Vue文件也能生成类型
-            include: ['src/components/**/*.ts', 'src/components/**/*.vue'],
+            // 确保所有文件都能生成类型
+            include: ['src/**/*.ts', 'src/**/*.vue', 'src/**/*.d.ts'],
             // 排除不需要的文件
-            exclude: ['node_modules/**', 'src/components/**/*.test.ts'],
+            exclude: ['node_modules/**', 'src/**/*.test.ts'],
             // 不使用API Extractor来生成类型
             rollupTypes: false,
             // 启用静态导入，避免某些Vue模块解析问题
@@ -47,7 +47,7 @@ export default defineConfig(({ mode }: ConfigEnv) => {
             '@': path.resolve('./src'),
             '@skyfox2000/fapi': path.resolve('../502417_fapi'),
             '@skyfox2000/microbase': path.resolve('../502424_MicroBase'),
-            '@skyfox2000/webabase': path.resolve('../502428_WebBase'),
+            '@skyfox2000/webbase': path.resolve('../502428_WebBase'),
          },
          extensions: ['.js', '.ts', '.vue', 'json'],
       },
@@ -85,6 +85,9 @@ export default defineConfig(({ mode }: ConfigEnv) => {
                '@skyfox2000/microbase',
 
                '@vue-office/excel',
+               '@json2csv/plainjs',
+               'async-validator',
+               'exceljs',
                // 添加ace相关的依赖为external
                'ace-builds',
                'vue3-ace-editor',