@skyfox2000/webui 1.0.14 → 1.2.0

package/src/typings/form.d.ts

@@ -0,0 +1,172 @@
+import { AnyData, IUrlInfo } from '@skyfox2000/fapi';
+import { PageControl } from './page';
+import Validator, { RuleItem, ValidateError } from 'async-validator';
+import { Ref, DefineProps } from 'vue';
+import { GridControl } from './table';
+
+interface ValidateRuleItem extends RuleItem {
+   errors?: ValidateError[];
+}
+type ValidateRule =
+   | ValidateRuleItem
+   | (ValidateRuleItem[] & {
+        required?: boolean;
+        errors?: ValidateError[];
+     });
+
+/**
+ * 弹窗控制默认设置
+ */
+export interface EditorControlOption {
+   /**
+    * 主键名，默认为Id
+    */
+   primaryKey: string | 'Id' | 'id';
+   /**
+    * 保存后自动关闭窗口
+    */
+   autoClose: boolean;
+   /**
+    * 弹窗自动获取详情并赋值给formData
+    * - 默认 false，使用表格的数据
+    * - true 自动获取详情并赋值给formData
+    */
+   autoDetail: boolean;
+   /**
+    * 保存按钮是否可见
+    */
+   saveBtnVisible: boolean;
+   /**
+    * 另存为按钮是否可见
+    */
+   saveAsBtnVisible: boolean;
+}
+
+/**
+ * 页面表单数据交互标准定义
+ */
+export type EditorControl<T> = EditorControlOption & {
+   /**
+    * 表单名称
+    */
+   readonly name: string;
+   /**
+    * 表单是否可见
+    */
+   visible: Ref<boolean>;
+   /**
+    * 表单默认数据
+    */
+   default: Readonly<T>;
+   /**
+    * 所属页面控制器
+    */
+   page: PageControl<AnyData>;
+   /**
+    * 所属表格控制器
+    */
+   grid?: GridControl<AnyData>;
+   /**
+    * 表单保存前判断
+    * @param editorCtrl 表单配置数据
+    * @returns 是否保存
+    */
+   beforeSave?: () => boolean | undefined;
+   /**
+    * 表单保存后处理
+    * @param editorCtrl 表单配置数据
+    * @param pageCtrl 页面控制器
+    */
+   afterSave?: () => void | undefined;
+   /**
+    * 表单数据
+    * - Model对象
+    */
+   formData: Ref<T>;
+   /**
+    * 更新数据
+    * - 自定义对象
+    */
+   updateData: Ref<Record<string, any> | undefined>;
+   /**
+    * 表单验证条件
+    * - errors 验证失败信息数组
+    */
+   formRules: Ref<Record<string, ValidateRule> | undefined>;
+   /**
+    * 验证器
+    */
+   ruleValidator?: Validator;
+   /**
+    * 验证结果
+    */
+   ruleResults: Ref<Record<string, ValidateError[]> | undefined>;
+   /**
+    * 表单存储接口
+    *  - 优先使用
+    *  - 或使用PageData.urls.save
+    */
+   saveUrl?: IUrlInfo;
+   /**
+    * 获取详情接口
+    */
+   detailUrl?: IUrlInfo;
+   /**
+    * 表单是否正在执行存储
+    */
+   isFormSaving: Ref<boolean>;
+   /**
+    * 表单详情加载中
+    */
+   isFormLoading: Ref<boolean>;
+   /**
+    * 上级表单
+    */
+   parentEditor?: EditorControl<any>;
+};
+
+/**
+ * 输入项工厂结构
+ */
+export interface InputFactoryItems<T> {
+   /**
+    * 页面表单数据
+    */
+   editorCtrl: EditorControl<T> | undefined;
+   /**
+    * 表单项Label文字
+    */
+   labelText: Ref<string>;
+   /**
+    * 输入项错误列表
+    */
+   // ruleErrors: Ref<ValidateError[] | undefined>;
+   /**
+    * 输入项验证规则名
+    */
+   ruleKey: Ref<string>;
+   /**
+    * 输入项错误状态
+    */
+   errInfo?: Ref<{ msg: string; errClass: string }>;
+   /**
+    * 输入项属性
+    */
+   inputProps?: DefineProps;
+   /**
+    * 输入项reload事件处理
+    * @param event 事件名
+    * @param data 参数
+    * @returns
+    */
+   reloadHandler?: (event: string, data: Record<string, AnyData> | AnyData[]) => void;
+   /**
+    * 输入项事件
+    * @param evt 事件
+    * @param args 参数
+    * @returns
+    */
+   inputEmit?: (evt: any, ...args) => void;
+}
+
+export type { ValidateRule, ValidateRuleItem, ValidateError };

package/src/typings/menu.d.ts

@@ -0,0 +1,7 @@
+export interface BreadcrumbRoute {
+   index?: number;
+   path: string;
+   breadcrumbName: string;
+   icon?: string;
+   children?: Array<BreadcrumbRoute>;
+}

package/src/typings/option.d.ts

@@ -0,0 +1,177 @@
+import { AnyData, IUrlInfo, ReqParams } from '@skyfox2000/fapi';
+
+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[];
+}
+
+import type { PropType } from 'vue';
+
+/**
+ * 选项类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/src/typings/page.d.ts

@@ -0,0 +1,70 @@
+import { ReqParams } from '@skyfox2000/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/src/typings/table.d.ts

@@ -0,0 +1,182 @@
+import { Ref, ShallowRef } from 'vue';
+import { ButtonTools } from './tools';
+import { PageControl, PrimaryKey } from './page';
+import { EditorControl } from './form';
+import { AnyData, IUrlInfo, ReqParams, FindResult } from '@skyfox2000/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;
+};