@skyfox2000/webui 1.0.14 → 1.2.1

package/lib/typings/option.d.ts

@@ -0,0 +1,175 @@
+import { AnyData, IUrlInfo, ReqParams } from '../../../502417_fapi';
+import { PropType } from 'vue';
+type RawValue = string | number;
+export type SelectValue = RawValue | RawValue[];
+/**
+ * 选项基础属性
+ */
+export interface OptionItemProps {
+   label: string;
+   title?: string;
+   value: string | number | undefined;
+   key?: string | number;
+   role?: string | string[];
+   permit?: string;
+   [key: string]: AnyData;
+}
+
+/**
+ * 选项类公共属性接口
+ */
+export interface OptionProps {
+   /**
+    * 自动接口加载数据
+    * - 默认为true
+    */
+   autoload?: boolean;
+   /**
+    * 是否显示全部选项
+    * - 默认为false
+    */
+   all?: boolean;
+   /**
+    * 选择项数据
+    */
+   data?: Record<string, any>[];
+   /**
+    * 字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   fieldMap?: Record<string, string>;
+   /**
+    * 接口定义
+    */
+   url?: IUrlInfo;
+   /**
+    * 接口自定义QOD参数
+    */
+   params?: ReqParams;
+   /**
+    * 表单数据
+    */
+   formData?: Record<string, any>;
+   /**
+    * 返回文字内容或文字内容数组
+    */
+   labels?: string | number | (string | number)[];
+   /**
+    * 输出字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   outFields?: Record<string, string>;
+   /**
+    * 通过消息重载数据，只允许改变查询条件
+    * - eventBus.on(组件限定前缀 +"."+ reloadEvent, { Q参数 } | 数据[])
+    * - 数据组仅用于联动显示
+    * - 其它情况使用Query参数
+    */
+   reloadEvent?: string;
+   /**
+    * 通过消息触发事件，只允许改变查询条件
+    * - eventBus.emit(changeEvent, { Q参数 } | 数据[])
+    * - 数据组仅用于联动显示
+    * - 其它情况使用Query参数
+    */
+   changeEvent?: string | string[];
+}
+
+/**
+ * 选项类props公共属性
+ */
+export const OptionCommProps = {
+   /**
+    * 自动接口加载数据
+    * - 默认为true
+    */
+   autoload: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true,
+   },
+   /**
+    * 是否显示全部选项
+    * - 默认为false
+    */
+   all: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: false,
+   },
+   /**
+    * 选择项数据
+    */
+   data: {
+      type: Array as PropType<Record<string, any>[]>,
+      required: false,
+   },
+   /**
+    * 字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   fieldMap: {
+      type: Object as PropType<Record<string, string>>,
+      required: false,
+   },
+   /**
+    * 接口定义
+    */
+   url: {
+      type: Object as PropType<IUrlInfo>,
+      required: false,
+   },
+   /**
+    * 接口自定义QOD参数
+    */
+   params: {
+      type: Object as PropType<ReqParams>,
+      required: false,
+   },
+   /**
+    * 返回文字内容或文字内容数组
+    */
+   labels: {
+      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
+      required: false,
+   },
+   /**
+    * 表单数据
+    */
+   formData: {
+      type: Object as PropType<Record<string, any>>,
+      required: false,
+   },
+   /**
+    * 输出字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   outFields: {
+      type: Object as PropType<Record<string, string>>,
+      required: false,
+   },
+   /**
+    * 通过消息重载数据，只允许改变查询条件
+    * - eventBus.on(组件限定前缀 +"."+ reloadEvent, { Q参数 } | 数据[])
+    * - 数据组仅用于联动显示
+    * - 其它情况使用Query参数
+    */
+   reloadEvent: {
+      type: String as PropType<string>,
+      required: false,
+   },
+   /**
+    * 通过消息触发事件，只允许改变查询条件
+    * - eventBus.emit(changeEvent, { Q参数 } | 数据[])
+    * - 数据组仅用于联动显示
+    * - 其它情况使用Query参数
+    */
+   changeEvent: {
+      type: [String, Array] as PropType<string | string[]>,
+      required: false,
+   },
+};

package/lib/typings/page.d.ts

@@ -0,0 +1,69 @@
+import { ReqParams } from '../../../502417_fapi';
+import { EditorControl } from './form';
+import { ApiUrls } from './urls';
+import { GridControl } from './table';
+import { TreeControl } from './tree';
+/**
+ * 主键类型
+ */
+export type PrimaryKey = number | string;
+
+/**
+ * 页面数据传递键名
+ */
+export enum ProviderKeys {
+   'PageControl' = 'Page.PageControl',
+   'EditorControl' = 'Page.EditorControl',
+   'GridControl' = 'Page.GridControl',
+   'LabelText' = 'FormItem.LabelText',
+   'RuleKey' = 'FormItem.RuleKey',
+   'ErrInfo' = 'FormItem.ErrInfo',
+}
+/**
+ * 页面控制默认设置
+ */
+export interface PageControlOption {
+   /**
+    * 主键名，默认为Id
+    */
+   primaryKey: string | 'Id' | 'id';
+   /**
+    * 记录行状态，默认为Enabled
+    */
+   statusKey: string | 'Enabled' | 'enabled';
+}
+
+/**
+ * 页面数据交互标准定义
+ */
+export type PageControl<T> = ApiUrls &
+   PageControlOption & {
+      /**
+       * 控制编辑表单显示
+       */
+      editor?: EditorControl<T>;
+      /**
+       * 控制左侧树数据
+       */
+      tree?: TreeControl;
+      /**
+       * 控制表格数据
+       */
+      grid?: GridControl<T>;
+      /**
+       * 当前页面默认条件
+       */
+      searchQuery?: ReqParams;
+      /**
+       * 其它弹窗配置
+       */
+      subEditor?: {
+         [key: string]: EditorControl<any>;
+      };
+      /**
+       * 其它表格配置
+       */
+      subGrid?: {
+         [key: string]: GridControl<any>;
+      };
+   };

package/lib/typings/table.d.ts

@@ -0,0 +1,181 @@
+import { Ref, ShallowRef } from 'vue';
+import { ButtonTools } from './tools';
+import { PageControl, PrimaryKey } from './page';
+import { EditorControl } from './form';
+import { AnyData, IUrlInfo, ReqParams, FindResult } from '../../../502417_fapi';
+/**
+ * 表格控制默认设置
+ */
+export interface GridControlOption {
+   /**
+    * 自动加载表格，默认true
+    */
+   autoload: boolean;
+   /**
+    * 主键名，默认为Id
+    */
+   primaryKey: string | 'Id' | 'id';
+   /**
+    * 记录行状态，默认为Enabled
+    */
+   statusKey: string | 'Enabled' | 'enabled';
+   /**
+    * 是否支持多行选择
+    */
+   selectable: Ref<boolean>;
+   /**
+    * 搜索栏是否可见
+    */
+   searchBar: Ref<boolean>;
+   /**
+    * 分页数量，默认10
+    */
+   pageSize: Ref<number>;
+   /**
+    * 主操作按钮列表
+    * - 空[]则不显示
+    * - 外部控制可用状态
+    * - 默认：New
+    * - 可用：
+    *   - New 新增
+    *   - 下载表格
+    */
+   buttons: Ref<ButtonTools>;
+   /**
+    * 平铺数量，超过N个的按钮，会折叠成下拉菜单
+    * 默认值：3
+    */
+   flat?: number;
+   /**
+    * 常用操作图标，默认显示，空[]则不显示
+    *
+    * tool开头的可通过后端权限控制
+    * - 默认：Reload/RowHeight/TableHeadset/Fullscreen
+    * - 可用
+    *   - Reload: 刷新表格
+    *   - Query: 展开搜索栏
+    *   - RowHeight: 行高调整
+    *   - tool.multiple.checkbox: 显示多选框
+    *   - tool.expand.rows: 展开记录行
+    *   - tool.export.excel: 导出Excel
+    *   - tool.export.excel.all: 全部记录
+    *   - tool.export.pdf: 导出PDF
+    *   - TableHeadset: 表头设置
+    *   - Fullscreen: 设置全屏
+    */
+   tools: string[];
+   /**
+    * 远程分页，标准接口需改为find
+    * 非标准接口需要返回data.total字段
+    */
+   remotePage: boolean;
+   /**
+    * 是否全部行展开
+    */
+   rowExpand: Ref<boolean>;
+   /**
+    * 默认行高
+    * - 大 / 中 / 小
+    */
+   tableSize: Ref<'large' | 'middle' | 'small'>;
+   /**
+    * 表格行操作
+    * - 默认：Edit/Delete
+    * - 可用：
+    *   - Edit 编辑
+    *   - Delete 删除
+    */
+   operates: ButtonTools;
+}
+/**
+ * 页面表格数据交互标准定义
+ */
+export type GridControl<T> = GridControlOption & {
+   /**
+    * 重新加载表格数据
+    */
+   reload: Ref<boolean>;
+   /**
+    * 所属页面控制器
+    */
+   page: PageControl<AnyData>;
+   /**
+    * 编辑表单控制器
+    */
+   editor?: EditorControl<T>;
+   /**
+    * 当前表格点击的数据行
+    */
+   rowData: Ref<T | undefined>;
+   /**
+    * 选择的数据行
+    */
+   selectRows: Ref<T[]>;
+   /**
+    * 选择的数据行主键
+    */
+   selectKeys: Ref<PrimaryKey[]>;
+   /**
+    * 当前页码
+    */
+   pageNo: Ref<number>;
+   /**
+    * 总数量
+    */
+   total: Ref<number>;
+   /**
+    * 表格列
+    */
+   columns: Ref<Record<string, any>[]>;
+   /**
+    * 当前表格查询条件
+    */
+   gridQuery?: ReqParams;
+   /**
+    * 当前表格全部数据
+    */
+   tableData: ShallowRef<T[] | undefined>;
+   /**
+    * 数据行展开数据，主键为行主键
+    * - 通过gridData.expandRows[record.Id]获取数据
+    */
+   expandRows: Ref<Record<string, AnyData>>;
+   /**
+    * 表格查询接口
+    *  - 优先使用
+    *  - 或使用PageData.urls.list
+    */
+   gridUrl?: IUrlInfo;
+   /**
+    * 表格更新接口
+    *  - 优先使用
+    *  - 或使用PageData.urls.update
+    */
+   updateUrl?: IUrlInfo;
+   /**
+    * 表格删除接口
+    *  - 优先使用
+    *  - 或使用PageData.urls.delete
+    */
+   deleteUrl?: IUrlInfo;
+   /**
+    * 表格是否正在加载中
+    */
+   isGridLoading: Ref<boolean>;
+   /**
+    * 表格是否正在存储中
+    */
+   isGridSaving: Ref<boolean>;
+   /**
+    * 表格数据加载后回调
+    */
+   afterLoad?: (result: FindResult | T[] | null) => void;
+   /**
+    * 表格数据更新后回调
+    */
+   afterUpdate?: (record: T) => void;
+   /**
+    * 表格数据删除后回调
+    */
+   afterDelete?: (record: T) => void;
+};

package/lib/typings/tools.d.ts

@@ -0,0 +1,130 @@
+import { GridControl } from './table.d';
+import { EditorControl } from './form.d';
+import { PageControl } from './page.d';
+import { AnyData } from '../../../502417_fapi';
+import { VNode, Ref, ShallowRef } from 'vue';
+export type ButtonType = 'link' | 'default' | 'primary' | 'ghost' | 'dashed' | 'text';
+export type RowRecord = Record<string, any> | RowRecord[];
+/**
+ * 工具/操作按钮定义
+ */
+export interface ButtonTool {
+   /**
+    * 按钮关键字，与权限控制相关
+    * 功能码，必须唯一
+    * 字符串配置时，使用默认设置
+    */
+   key: string;
+   /**
+    * 文字
+    */
+   label?: string;
+   /**
+    * 状态文字，与状态图标对应
+    * 可切换
+    */
+   labels?: string[];
+   /**
+    * 图标
+    */
+   icon?: string;
+   /**
+    * 状态图标
+    */
+   icons?: string[];
+   /**
+    * 图标状态位
+    * - 当前文字
+    * - 当前图标
+    */
+   iconStatus?: number;
+   /**
+    * 下拉操作
+    */
+   children?: (IconTool | ButtonTool)[];
+   /**
+    * 控制表单控制自动弹窗
+    * - 配置表单控制器visible
+    * - 配置后，可不配置click事件(click自动执行)
+    */
+   formVisible?: Ref;
+   /**
+    * /// 主工具栏批量操作
+    * @param pageCtrl 页面控制对象
+    * @param gridCtrl 表格控制对象
+    * @param record 数据表行记录
+    * - 配置formVibible后，可自动执行click事件
+    * - 实现 grid.rowData.value = record
+    * - 实现 formVisible.value = true
+    * - 未配置formVisible时，会提示未配置点击处理事件
+    * 操作
+    * @example
+      click: <T>(_: PageControl<T>, _: GridControl<T>, row: T) => {
+         const rowData = row as OrderEntity;
+      },
+    * @returns
+    */
+   click?: <T>(pageCtrl: PageControl<T>, gridCtrl?: GridControl<T>, record?: T | RowRecord | string[]) => void;
+   /**
+    * 按钮主样式
+    */
+   type?: ButtonType;
+   /**
+    * 是否禁用
+    * @example
+      visible: (row: OrderEntity) => { }
+    */
+   disabled?: boolean | ((record) => boolean); /// 表格操作
+   /**
+    * 是否可见
+    * @example
+      visible: (row: OrderEntity) => { }
+    */
+   visible?: boolean | ((record) => boolean); /// 表格操作
+   /**
+    * 是否弹出确认框，确认操作由确认方法执行
+    */
+   confirm?: boolean;
+   /**
+    * 确认框提示文字
+    */
+   confirmText?: string;
+   /**
+    * 警告色
+    */
+   danger?: boolean;
+   /**
+    * 自定义样式
+    */
+   class?: string;
+   /**
+    * 图标属性
+    */
+   iconProps?: Record<string, any>;
+   /**
+    * 下拉组件
+    */
+   dropdown?: string;
+   /**
+    * 下拉容器样式
+    */
+   dropdownClass?: string;
+   /**
+    * 角色权限控制
+    */
+   role?: string | string[];
+   /**
+    * 权限控制
+    */
+   permit?: string;
+}
+
+export type IconTool = Omit<ButtonTool, 'disabled' | 'children'> & {
+   disabled?: boolean;
+   children?: (IconTool | ButtonTool)[];
+};
+
+/**
+ * 工具/操作按钮定义组
+ */
+export type ButtonTools = (IconTool | ButtonTool | string)[];

package/lib/typings/tree.d.ts

@@ -0,0 +1,72 @@
+import { Ref, ShallowRef } from 'vue';
+import { AnyData, IUrlInfo, ReqParams } from '../../../502417_fapi';
+import { PageControl } from './page';
+export interface TreeNode {
+   /**
+    * 节点名称
+    */
+   title: string;
+   /**
+    * 节点ID
+    */
+   key: string;
+   /**
+    * 节点子节点
+    */
+   children?: TreeNode[];
+   /**
+    * 节点数据
+    */
+   [key: string]: AnyData;
+}
+/**
+ * 树控制默认设置
+ */
+export interface TreeControlOption {
+   /**
+    * 自动加载树，默认true
+    */
+   autoload: boolean;
+}
+
+/**
+ * 页面左侧树数据交互标准定义
+ */
+export type TreeControl = TreeControlOption & {
+   /**
+    * 重新加载树数据
+    */
+   reload: Ref<boolean>;
+   /**
+    * 所属页面控制器
+    */
+   page: PageControl<AnyData>;
+   /**
+    * 当前选择节点
+    */
+   node: Ref<TreeNode | undefined>;
+   /**
+    * 当前表格查询条件
+    */
+   treeQuery?: ReqParams;
+   /**
+    * 当前树数据
+    */
+   data: ShallowRef<TreeNode[] | undefined>;
+   /**
+    * 字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   fieldMap?: Record<string, string>;
+   /**
+    * 树查询接口
+    *  - 优先使用
+    *  - 或使用PageData.urls.tree
+    */
+   url?: IUrlInfo;
+   /**
+    * 是否正在加载中
+    */
+   isTreeLoading: Ref<boolean>;
+};