@ttkj/avue 2.10.11 → 2.10.12

package/types/form/column.d.ts

@@ -0,0 +1,300 @@
+import { PopoverPlacement } from 'element-ui/types/popover';
+import { AvueComponentSize, Obj, DicProps as BaseDicProps, DicHttpProps } from '../global';
+
+/** 表单项字典Props配置 */
+export interface DicProps extends BaseDicProps, DicHttpProps {}
+
+/** 组件类型： 布局(layout) 基础(basic) 表单组件(form) */
+export type ComponentType = 'layout' | 'basic' | 'form';
+
+/** 表单项数据模拟配置 */
+export type ColumnMock =
+  | ((form: Obj) => any)
+  | {
+      /** 随机生成一个常见的姓名。 */
+      type: 'name';
+      /** 是否英文名 */
+      en?: boolean;
+    }
+  | {
+      type: 'number';
+      /** 整数部分的最小值。默认值为 -9007199254740992。 */
+      min?: number;
+      /** 整数部分的最大值。默认值为 9007199254740992。 */
+      max?: number;
+      /** 小数部分位数的最小值。默认值为 0。不传返回整数值 */
+      precision?: number;
+    }
+  | {
+      /** 随机生成日期时间。文档：```https://github.com/nuysoft/Mock/wiki/Date``` */
+      type: 'datetime';
+      /** 指示生成的日期字符串的格式。默认值为 yyyy-MM-dd。当now为true时，概念有所不同，具体查看文档
+       */
+      format?: string;
+      /** 是否为当前时间 */
+      now?: boolean;
+    }
+  | {
+      /** 随机生成一段中文文本。 */
+      type: 'word';
+      /** 指示句子中单词的最小个数。默认值为 12。 */
+      min?: number;
+      /** 指示句子中单词的最大个数。默认值为 18。 */
+      max?: number;
+    }
+  | {
+      /** 随机生成网址 */
+      type: 'url';
+      /** 是否包含"http://"。默认值为 true */
+      header?: boolean;
+    }
+  | {
+      /** 随机生成一个（中国）县。返回省市区三级 */
+      type: 'county';
+    }
+  | {
+      /** 随机生成字典值 */
+      type: 'dic';
+    };
+
+/**
+ * 表单项事件参数，适用于click|blur|focus
+ */
+export interface FormColumnEventParams {
+  /** 表单项值 */
+  value: any;
+  /** 鼠标点击事件$event */
+  event: MouseEvent;
+  /** 表单项列配置 */
+  column: AvueFormColumn;
+  /** 表单项列配置索引 */
+  columnIndex: Record<string, AvueFormColumn>;
+  /** 表单值 */
+  row: Obj;
+  /** dic */
+  dic: Obj[];
+  /** 当表单项含dic时，根据选中值返回对应的dic项 */
+  item?: Obj;
+  /** 表单项值的label，含dic时，为dic的label，否则为value的字符串格式 */
+  label: string;
+  /** 所在行索引，只在明细组件中生效 */
+  index?: number;
+}
+
+/** 表单项基本配置属性 */
+export interface FormBaseColumn {
+  /** 列类型, 默认: 'input' */
+  type?: string;
+  /** 组件 */
+  component?: string;
+  /**
+   * 组件类型
+   * @description 自定义属性
+   * @since 2.9.12
+   */
+  componentType?: ComponentType;
+  /** 列字段(唯一不重复) */
+  prop?: string;
+  /** 深结构数据绑定取值 */
+  bind?: string;
+  /** 标题名称 */
+  label: string;
+  /** 标题名称宽度, 默认: 110 */
+  labelWidth?: number;
+  /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 labelWidth, 默认: 'right' */
+  labelPosition?: 'left' | 'right' | 'top';
+  /** 弹窗编辑文字提示 */
+  tip?: string;
+  /**
+   * 辅助文字提示展示方向
+   * @since 2.8.2
+   */
+  tipPlacement?: PopoverPlacement;
+  /** 标题文字提示 */
+  labelTip?: string;
+  /**
+   * 标题文字提示展示方向
+   * @since 2.8.2
+   */
+  labelTipPlacement?: PopoverPlacement;
+  /** placeholder */
+  placeholder?: string;
+  /** 只读, 默认: false */
+  readonly?: boolean;
+  /** 是否可以清空选项, 默认: false */
+  clearable?: boolean;
+  /** 禁止编辑, 默认: false */
+  disabled?: boolean;
+  /** 是否详情模式, 默认: false */
+  detail?: boolean;
+  /** 校验规则 */
+  rules?: Obj[];
+  /** 控件大小 */
+  size?: AvueComponentSize;
+  /** 是否可见, 默认: true */
+  display?: boolean;
+  /** 默认值 */
+  value?: any;
+  /**
+   * 字段位置排序
+   * @description 不同版本中排序规则并不相同：`2.7.9 - 2.8.26`中，order值越小位置越靠前，其余版本值越大位置越靠前。自用版本自 `2.9.12` 改为值越小位置越靠前
+   */
+  order?: number;
+  /** 数据类型转化时的分隔符，配合dataType使用, 默认: ', */
+  separator?: string;
+  /** 数据类型用于数组和字符串之间的转化 */
+  dataType?: 'string' | 'number' | 'array';
+  /**
+   * 自定义样式
+   * @since 2.7.1
+   */
+  className?: string;
+  /**
+   * 自定义属性
+   * @description 用于设定自定义组件的prop属性值
+   * @since 2.3.4
+   */
+  params?: {
+    /** 当组件不存在时，若配置了该属性，则会将其渲染成html元素 */
+    html?: string;
+    /** 其他自定义属性 */
+    [x: string]: any;
+  };
+  /**
+   * 组件隐藏是否提交数据
+   * @default default
+   * @description 流程相关配置。说明：组件隐藏是否提交数据。注意：若流程配置为不显示，则无法获取到组件数据
+   */
+  dataSubmit?: 'default' | 'always';
+  /** 级联的子节点prop */
+  cascader?: string[];
+  /** 级联的默认选项序号 */
+  cascaderIndex?: number;
+  /** 表单项数据模拟 */
+  mock?: ColumnMock;
+}
+
+/** 表单项列宽配置 */
+export interface FormColumnColOption {
+  /** 栅列, 默认: 12 */
+  span: number;
+  /**
+   * ≥768px 响应式栅格数或者栅格属性对象, 默认: 12
+   * @since 2.8.12
+   */
+  smSpan: ResponsiveColumn;
+  /**
+   * <768px 响应式栅格数或者栅格属性对象, 默认: 24
+   * @since 2.8.12
+   */
+  xsSpan: ResponsiveColumn;
+  /**
+   * 栅格左侧的间隔格数, 默认: 0
+   * @since 2.8.12
+   */
+  offset: number;
+  /** 表单项是否单独成行, 默认: false */
+  row: boolean;
+}
+
+/** 表单项字典配置 */
+export interface FormColumnDicOption {
+  /**
+   * 字典
+   *
+   * 默认为{label, value}，其中label为显示，value为取值。可通过props属性调整
+   */
+  dicData: Obj[];
+  /** 远程字典地址 */
+  dicUrl: string;
+  /** 字典请求方式，配合dicUrl使用 */
+  dicMethod: 'get' | 'GET' | 'post' | 'POST';
+  /** 字典请求参数，配合dicUrl使用 */
+  dicQuery: Obj;
+  /** 字典数据返回的执行函数，配合dicUrl使用 */
+  dicFormatter: (value: any) => Obj[];
+  /** 参数配置项 */
+  props: Partial<DicProps>;
+}
+
+/** 表单项通用事件 */
+export interface FormColumnEvent<T = Obj> {
+  /**
+   * 字段控制器, 不使用箭头函数
+   * @param value 表单项的值
+   * @param form 表单值
+   * @example https://avuejs.com/form/form-control.html
+   * @since 2.8.6
+   */
+  control: (value: any, form: T) => Record<string, Partial<AvueFormColumn>>;
+  /**
+   * 点击事件
+   * @since 2.9.6
+   */
+  click: (params: FormColumnEventParams) => void;
+  /**
+   * 值改变事件
+   * @since 2.9.6
+   */
+  change: (params: Omit<FormColumnEventParams, 'event'>) => void;
+  /**
+   * 聚焦事件
+   * @since 2.9.6
+   */
+  focus: (params: FormColumnEventParams) => void;
+  /**
+   * 失焦事件
+   * @since 2.9.6
+   */
+  blur: (params: FormColumnEventParams) => void;
+  /**
+   * 回车事件
+   */
+  enter: (params: Pick<FormColumnEventParams, 'value' | 'column'>) => void;
+  /**
+   * 事件源码
+   * @since 2.9.12(伪)
+   */
+  _event?: Partial<Record<'click' | 'change' | 'focus' | 'blur', string>>;
+  /** 事件 */
+  event: Partial<Omit<FormColumnEvent<T>, 'control' | 'event' | 'enter'>>;
+}
+
+/** 表单项通用参数 */
+export interface AvueFormBaseColumn<T>
+  extends FormBaseColumn,
+    Partial<FormColumnColOption>,
+    Partial<FormColumnDicOption>,
+    Partial<FormColumnEvent<T>> {
+  /** 底部操作栏栅列, 默认: 12 */
+  menuSpan?: number;
+  /**
+   * 表单自定义, 默认: false
+   * @deprecated 2.8.0
+   */
+  formslot?: boolean;
+  /**
+   * 表单标题自定义, 默认: false
+   * @deprecated 2.8.0
+   */
+  labelslot?: boolean;
+  /**
+   * 表单错误自定义, 默认: false
+   * @deprecated 2.8.0
+   */
+  errorslot?: boolean;
+  /**
+   * 组件下拉自定义, 默认: false
+   * @deprecated 2.8.0
+   */
+  typeslot?: boolean;
+}
+
+/**
+ * 表单项配置
+ * TODO 表单项个性化配置待完成
+ */
+export type AvueFormColumn<T = Obj> = AvueFormBaseColumn<T> & {
+  /** 其他配置 */
+  [x: string]: any;
+};

package/types/form/index.d.ts

@@ -0,0 +1,63 @@
+// 引入定义
+import { VNode } from 'vue';
+import { ElForm } from 'element-ui/types/form';
+import { AvueComponent } from '../global';
+import { FormOption } from './option';
+
+/** 表单Refs */
+export interface AvueFormRefs {
+  /** 表单组件 */
+  form: ElForm;
+  /** 表单项Ref(仅未slot插槽的表单项才有)，无实际使用意义 */
+  [x: string]: VNode[];
+}
+
+/** 表单组件 */
+export declare class AvueForm<T = Obj> extends AvueComponent {
+  // ========== 属性 ==========
+  /** 表单配置 */
+  readonly option: FormOption<T>;
+  /** 表单值 */
+  readonly value: Obj;
+  /** 表单dic数据 */
+  DIC: Record<string, Obj[]>;
+  // ========== 方法 ==========
+  /** 重新初始化（多数用于服务端加载或者更新网络字典） */
+  init(): void;
+  /**
+   * 获取prop的ref对象
+   * @param prop 表单项的 prop 属性
+   */
+  getPropRef(prop: keyof AvueFormRefs): ReturnType<AvueFormRefs>;
+  /**
+   * 移除表单项的校验结果。
+   * @param {string | string[]} [props] 传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+   */
+  clearValidate(props?: string | string[]): void;
+  /** 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。 */
+  validate(
+    callback: (
+      valid: boolean,
+      hide: () => void,
+      msg?: Record<
+        string,
+        {
+          /** 字段名(prop) */
+          field: string;
+          /** 错误内容 */
+          message: string;
+        }[]
+      >
+    ) => void
+  ): void;
+  /** 清空表单数据 */
+  resetForm(): void;
+  /** 提交表单数据 */
+  submit(): void;
+  /** 将表单置于提交状态 */
+  show(): void;
+  /** 将表单置于普通状态 */
+  hide(): void;
+  /** 组件Refs */
+  $refs: AvueFormRefs;
+}

package/types/form/option.d.ts

@@ -0,0 +1,167 @@
+import { ResponsiveColumn } from 'element-ui/types/col';
+import { AvueAlignment, AvueComponentSize, DicHttpProps } from '../global';
+import { AvueFormColumn } from './column';
+
+/** 表单组件基本配置属性 */
+export interface FormBaseOption {
+  /** 视图类型 */
+  boxType: 'add' | 'edit' | 'view';
+  /** 是否详情模式, 默认: false */
+  detail: boolean;
+  /** 是否禁用模式, 默认: false */
+  disabled: boolean;
+  /** 是否只读模式, 默认: false */
+  readonly: boolean;
+  /** 表单宽度 */
+  formWidth: number | string;
+  /** 是否在输入框中显示校验结果反馈图标, 默认: false */
+  statusIcon: boolean;
+  /** 是否卡片效果, 默认: false */
+  card: boolean;
+  /**
+   * 重置时不清空的字段, 默认: []
+   * @since 2.7.7
+   */
+  clearExclude: string[];
+  /** 是否回车提交表单, 默认: false */
+  enter: boolean;
+  /** 项之间的间间距, 默认: 10 */
+  gutter: number;
+  /** 表单的label宽度, 默认: 80 */
+  labelWidth: string | number;
+  /** 表单的label位置, 默认: 'left' */
+  labelPosition: 'left' | 'top' | 'right';
+  /** 标题的后缀, 默认: ':' */
+  labelSuffix: string;
+  /** 表单全局控件的大小, 默认: 'medium' */
+  size: AvueComponentSize;
+  /** 是否以tab形式展示group, 默认: false */
+  tabs: boolean;
+  /** 栅列, 默认: 12 */
+  span: number;
+  /** 输入时是否触发表单的校验,仅对input类型表单项生效, 默认: false */
+  validateEvent: boolean;
+  /** 默认的接口请求配置 */
+  propsHttp: DicHttpProps;
+}
+
+/** 表单组件菜单栏配置属性 */
+export interface FormMenuOption {
+  /** 是否显示按钮栏, 默认: true */
+  menuBtn: boolean;
+  /** 按钮栏的span, 可选值为1-24, 默认: 24 */
+  menuSpan: number;
+  /** 按钮的位置, 默认: 'center' */
+  menuPosition: AvueAlignment;
+  /** 是否显示提交按钮, 默认: true */
+  submitBtn: boolean;
+  /** 提交按钮的大小, 默认: 'medium' */
+  submitSize: AvueComponentSize;
+  /** 提交按钮的文字, 默认: '提交' */
+  submitText: string;
+  /**
+   * 提交按钮图标 , 默认: 'el-icon-check'
+   * @since v2.5.1
+   */
+  submitIcon: string;
+  /** 是否显示清空按钮, 默认: true */
+  emptyBtn?: boolean;
+  /** 清空按钮的大小, 默认: 'medium' */
+  emptySize: AvueAlignment;
+  /** 清空按钮的文字, 默认: '清空' */
+  emptyText: string;
+  /** 清空按钮图标, 默认: 'el-icon-delete' */
+  emptyIcon: string;
+  /** 是否显示表单打印按钮, 默认: false */
+  printBtn: boolean;
+  /**
+   * 是否显示模拟数据按钮, 默认: false
+   * @description 需要导入额外的包（一定要放到index.html中的head标签里）
+   * ```
+   * <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
+   * ```
+   */
+  mockBtn: boolean;
+}
+
+/** 表单分组配置 */
+export interface FormGroupOption<T = Obj> {
+  /** 分组名称 */
+  label: string;
+  /** 分组名称宽度, 默认: 90 */
+  labelWidth?: number;
+  /** 分组字段 */
+  prop?: string;
+  /** 分组图标 */
+  icon?: string;
+  /** 是否分组折叠, 默认: true */
+  arrow?: boolean;
+  /** 分组默认叠起, 默认: false */
+  collapse?: boolean;
+  /**
+   * ≥768px 响应式栅格数或者栅格属性对象, 默认: 12
+   * @since 2.8.12
+   */
+  smSpan?: ResponsiveColumn;
+  /**
+   * <768px 响应式栅格数或者栅格属性对象, 默认: 24
+   * @since 2.9.12
+   */
+  xsSpan?: ResponsiveColumn;
+  /**
+   * <768px 响应式栅格数或者栅格属性对象, 默认: 24
+   * @since 2.8.12
+   * @deprecated 2.9.12
+   */
+  xmSpan?: ResponsiveColumn;
+  /**
+   * 栅格左侧的间隔格数, 默认: 0
+   * @since 2.8.12
+   */
+  offset?: number;
+  /** 是否显示分组, 默认: true */
+  display?: boolean;
+  /** 分组下的字段配置 */
+  column: AvueFormColumn<T>[];
+}
+
+/**
+ * 表单项配置
+ * @description 表单的渲染顺序从上到下为column -> group -> footer
+ */
+export interface FormColumnOption<T = Obj> {
+  /** 分组配置 */
+  group?: FormGroupOption<T>[];
+  /** 字段配置 */
+  column?: AvueFormColumn<T>[];
+  /**
+   * 底部字段配置
+   * @description 该字段等同于在group最后push一个无label分组在tabs模式下效果更糟，因此内部改版中删除该字段
+   * @since 2.9.9
+   * @deprecated 2.9.12(改)
+   */
+  footer?: AvueFormColumn<T>[];
+}
+
+/** 表单全局事件 */
+export interface FormEvents {
+  /**
+   * 表单全局事件源码
+   * @since 2.9.12(伪)
+   */
+  _events?: {
+    /** 表单加载完成后执行事件字符串源码 */
+    didMount?: string;
+  };
+  /**
+   * 表单全局事件
+   * @since 2.9.12(伪)
+   */
+  events?: {
+    /** 表单加载完成后执行事件 */
+    didMount?: () => void;
+  };
+}
+
+/** 表单组件配置属性 */
+export type FormOption<T = Obj> = Partial<FormBaseOption> & Partial<FormMenuOption> & FormColumnOption<T> & FormEvents;

package/types/global-component/dialog-form.d.ts

@@ -0,0 +1,57 @@
+import { ElDialog } from 'element-ui/types/dialog';
+import { FormOption } from '../form/option';
+
+export declare class DialogForm<T = Obj> {
+  /** 表单弹窗配置项 */
+  private opt: DialogFormOption;
+  /** 是否显示弹窗 */
+  private visible: boolean;
+  /** 弹窗配置 */
+  private dialog: Partial<ElDialog>;
+  /** 表单配置 */
+  private option: FormOption;
+  /** 表单值 */
+  data: T;
+  /** 表单提交事件 */
+  submit: () => void;
+  /**
+   * 表单重置事件
+   * @description 此处重置完后调用close关闭了弹窗
+   */
+  reset: () => void;
+  /**
+   * 显示弹窗
+   */
+  show: (option: DialogFormOption<T>) => void;
+  /** 表单关闭事件 */
+  close: () => void;
+}
+
+/** 表单弹窗 */
+export declare class DialogFormPlugin {
+  /** 组件VM */
+  $root: DialogForm<T>;
+  /** 构建弹窗 */
+  initMounted: () => void;
+  /**
+   * 显示弹窗
+   */
+  show: <T = Obj>(option: DialogFormOption<T>) => void;
+}
+
+/** 表单弹窗配置项 */
+export interface DialogFormOption<T = Obj> extends Partial<ElDialog> {
+  /** 表单配置 */
+  option: FormOption;
+  /** 表单值 */
+  data: T;
+  /** 表单提交后的回调 */
+  callback?: (params: {
+    /** 表单值 */
+    data: T;
+    /** 关闭弹窗 */
+    close: () => void;
+    /** 将表单置于普通状态 */
+    done: () => void;
+  }) => void;
+}

package/types/global-component/export.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 导出相关
+ * @description 需要引入以下包（一定要放到index.html中的head标签里）
+ * \<script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"><\/script>
+ * \<script src="https://cdn.staticfile.org/xlsx/0.18.2/xlsx.full.min.js"><\/script>
+ */
+
+export interface Export {
+  /** 导出excel */
+  excel: (options: {
+    /** excel标题 */
+    title: string;
+    /** 数据列配置 */
+    columns: {
+      /** 列名称 */
+      label: string;
+      /** 列ID */
+      prop: string;
+    }[];
+    /** 数据 */
+    data: Obj[];
+  }) => void;
+}