@ttkj/avue 2.11.1 → 2.11.3

package/types/form/column.d.ts

@@ -1,5 +1,7 @@
+import { ResponsiveColumn } from 'element-ui/types/col';
 import { PopoverPlacement } from 'element-ui/types/popover';
-import { AvueComponentSize, Obj, DicProps as BaseDicProps, DicHttpProps } from '../global';
+import { AvueComponentSize, Obj } from '../global';
+import { DicProps as BaseDicProps, DicHttpProps } from '../variable';
 import { DynamicFormColumn } from './components/dynamic';
 
 /** 表单项字典Props配置 */
@@ -64,18 +66,14 @@ export type ColumnMock =
       type: 'dic';
     };
 
-/**
- * 表单项事件参数，适用于click|blur|focus
- */
-export interface FormColumnEventParams<T = Obj, U = Obj> {
+/** 表单事件通用参数 */
+export interface FormColumnEventBaseParams<T = Obj, U = Obj> {
   /** 表单项值 */
   value: any;
-  /** 鼠标点击事件$event */
-  event: MouseEvent;
   /** 表单项列配置 */
-  column: AvueFormColumn;
+  column: AvueFormColumn<T>;
   /** 表单项列配置索引 */
-  columnIndex: Record<string, AvueFormColumn>;
+  columnIndex: Record<string, AvueFormColumn<T>>;
   /** 表单值 */
   row: T;
   /** dic */
@@ -90,12 +88,75 @@ export interface FormColumnEventParams<T = Obj, U = Obj> {
   index?: number;
 }
 
+/**
+ * 表单项事件参数，适用于click|blur|focus
+ */
+export interface FormColumnEventParams<T = Obj, U = Obj> extends FormColumnEventBaseParams<T, U>  {
+  /** 鼠标点击事件$event */
+  event: MouseEvent;
+}
+
+/** 表单项校验规则 */
+export interface ColumnRule {
+  /** 值的类型 */
+  type?: string;
+  /** 是否必填 */
+  required?: boolean;
+  /** 错误文字说明 */
+  message?: string;
+  /** 正则校验规则 */
+  pattern?: string | RegExp;
+  /** 长度校验 */
+  len?: number;
+  /** 最小值 */
+  min?: number;
+  /** 最大值 */
+  max?: number;
+  /** 自定义校验 */
+  validator?: (rule: ColumnRule, value: any, callback: (error?: unknown) => void, tableData: FormColumnEventBaseParams) => void;
+  /**
+   * 触发规则
+   * @description blur: 失焦时触发，change: 值改变时触发
+   */
+  trigger?: 'blur' | 'change';
+}
+
 /** 表单项基本配置属性 */
 export interface FormBaseColumn {
   /** 列类型, 默认: 'input' */
   type?: string;
+  /**
+   * 新增时列类型, 默认: 'input'
+   * @since 2.11.3
+   */
+  addType?: string;
+  /**
+   * 编辑时列类型, 默认: 'input'
+   * @since 2.11.3
+   */
+  editType?: string;
+  /**
+   * 详情时列类型, 默认: 'input'
+   * @since 2.11.3
+   */
+  viewType?: string;
   /** 组件 */
   component?: string;
+  /**
+   * 新增时组件
+   * @since 2.11.3
+   */
+  addComponent?: string;
+  /**
+   * 编辑时组件
+   * @since 2.11.3
+   */
+  editComponent?: string;
+  /**
+   * 详情时组件
+   * @since 2.11.3
+   */
+  viewComponent?: string;
   /**
    * 组件类型
    * @description 自定义属性
@@ -137,7 +198,7 @@ export interface FormBaseColumn {
   /** 是否详情模式, 默认: false */
   detail?: boolean;
   /** 校验规则 */
-  rules?: Obj[];
+  rules?: ColumnRule[];
   /** 控件大小 */
   size?: AvueComponentSize;
   /** 是否可见, 默认: true */
@@ -187,22 +248,125 @@ export interface FormBaseColumn {
 export interface FormColumnColOption {
   /** 栅列, 默认: 12 */
   span: number;
+  /**
+   * 新增时栅列, 默认: 同span
+   * @since 2.11.3
+   */
+  addSpan?: string;
+  /**
+   * 编辑时栅列, 默认: 同span
+   * @since 2.11.3
+   */
+  editSpan?: string;
+  /**
+   * 详情时栅列, 默认: 同span
+   * @since 2.11.3
+   */
+  viewSpan?: string;
   /**
    * ≥768px 响应式栅格数或者栅格属性对象, 默认: 12
    * @since 2.8.12
    */
   smSpan: ResponsiveColumn;
+  /**
+   * 新增时响应式栅格数或者栅格属性对象, 默认: 同span
+   * @since 2.11.3
+   */
+  addSmSpan?: string;
+  /**
+   * 编辑时响应式栅格数或者栅格属性对象, 默认: 同smSpan
+   * @since 2.11.3
+   */
+  editSmSpan?: string;
+  /**
+   * 详情时响应式栅格数或者栅格属性对象, 默认: 同smSpan
+   * @since 2.11.3
+   */
+  viewSmSpan?: string;
   /**
    * <768px 响应式栅格数或者栅格属性对象, 默认: 24
    * @since 2.8.12
    */
   xsSpan: ResponsiveColumn;
+  /**
+   * 新增时响应式栅格数或者栅格属性对象, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  addXsSpan?: string;
+  /**
+   * 编辑时响应式栅格数或者栅格属性对象, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  editXsSpan?: string;
+  /**
+   * 详情时响应式栅格数或者栅格属性对象, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  viewXsSpan?: string;
   /**
    * 栅格左侧的间隔格数, 默认: 0
    * @since 2.8.12
    */
   offset: number;
-  /** 表单项是否单独成行, 默认: false */
+  /**
+   * 新增时栅格左侧的间隔格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  addOffset?: string;
+  /**
+   * 编辑时栅格左侧的间隔格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  editOffset?: string;
+  /**
+   * 详情时栅格左侧的间隔格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  viewOffset?: string;
+  /**
+   * 栅格向右移动格数, 默认: 0
+   * @since 2.8.12
+   */
+  push: number;
+  /**
+   * 新增时栅格向右移动格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  addPush?: string;
+  /**
+   * 编辑时栅格向右移动格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  editPush?: string;
+  /**
+   * 详情时栅格向右移动格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  viewPush?: string;
+  /**
+   * 栅格向左移动格数, 默认: 0
+   * @since 2.8.12
+   */
+  pull: number;
+  /**
+   * 新增时栅格向左移动格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  addPull?: string;
+  /**
+   * 编辑时栅格向左移动格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  editPull?: string;
+  /**
+   * 详情时栅格向左移动格数, 默认: 同xsSpan
+   * @since 2.11.3
+   */
+  viewPull?: string;
+  /**
+   * 表单项是否单独成行, 默认: false
+   * @description 暂未实现
+   */
   row: boolean;
 }
 
@@ -220,6 +384,8 @@ export interface FormColumnDicOption {
   dicMethod: 'get' | 'GET' | 'post' | 'POST';
   /** 字典请求参数，配合dicUrl使用 */
   dicQuery: Obj;
+  /** 远程字典其他配置 */
+  dicOptions: Obj,
   /** 字典数据返回的执行函数，配合dicUrl使用 */
   dicFormatter: (value: any) => Obj[];
   /** 参数配置项 */
@@ -235,7 +401,7 @@ export interface FormColumnEvent<T = Obj> {
    * @example https://avuejs.com/form/form-control.html
    * @since 2.8.6
    */
-  control: (value: any, form: T, tableData: Omit<FormColumnEventParams<T>, 'event'>) => Record<string, Partial<AvueFormColumn>>;
+  control: (value: any, form: T, tableData: FormColumnEventBaseParams<T>) => Record<string, Partial<AvueFormColumn<T>>>;
   /**
    * 点击事件
    * @since 2.9.6
@@ -245,7 +411,7 @@ export interface FormColumnEvent<T = Obj> {
    * 值改变事件
    * @since 2.9.6
    */
-  change: (params: Omit<FormColumnEventParams<T>, 'event'>) => void;
+  change: (params: FormColumnEventBaseParams<T>) => void;
   /**
    * 聚焦事件
    * @since 2.9.6
@@ -259,14 +425,14 @@ export interface FormColumnEvent<T = Obj> {
   /**
    * 回车事件
    */
-  enter: (params: Pick<FormColumnEventParams<T>, 'value' | 'column'>) => void;
+  enter: (params: FormColumnEventBaseParams<T>) => void;
   /**
    * 事件源码
    * @since 2.9.12(伪)
    */
   _event?: Record<string, string>;
   /** 事件 */
-  event: Partial<Omit<FormColumnEvent<T>, 'control' | 'event' | 'enter'>>;
+  event: Partial<Pick<FormColumnEvent<T>, 'click' | 'change' | 'focus' | 'blur' | 'enter'>>;
 }
 
 /** 表单项通用参数 */

package/types/form/index.d.ts

@@ -1,7 +1,8 @@
 // 引入定义
 import { VNode } from 'vue';
 import { ElForm } from 'element-ui/types/form';
-import { AvueComponent, DicHttpProps, Obj } from '../global';
+import { AvueComponent, Obj } from '../global';
+import { DicHttpProps } from '../variable';
 import { FormOption } from './option';
 import { DicProps } from './column';
 

package/types/form/option.d.ts

@@ -1,5 +1,6 @@
 import { ResponsiveColumn } from 'element-ui/types/col';
-import { AvueAlignment, AvueComponentSize, DicHttpProps, Obj } from '../global';
+import { AvueAlignment, AvueComponentSize, Obj } from '../global';
+import { DicHttpProps } from '../variable';
 import { AvueFormColumn } from './column';
 
 /** 表单组件基本配置属性 */
@@ -164,4 +165,4 @@ export interface FormEvents {
 }
 
 /** 表单组件配置属性 */
-export type FormOption<T = Obj> = Partial<FormBaseOption> & Partial<FormMenuOption> & FormColumnOption<T> & FormEvents;
+export type FormOption<T = Obj> = Partial<FormBaseOption> & Partial<FormMenuOption> & FormColumnOption<T> & FormEvents & Obj;

package/types/global.d.ts

@@ -32,50 +32,6 @@ export declare type Obj<T = any> = Record<string, T> & Object;
 /** log日志类型 */
 type LogType = 'primary' | 'success' | 'warning' | 'danger' | 'text';
 
-/** 字典Props配置 */
-export interface DicProps {
-  /** 行主键, 默认: 'id' */
-  rowKey: string;
-  /** 行上级主键, 默认: 'parentId' */
-  rowParentKey: string;
-  /** 节点主键, 默认: 'id' */
-  nodeKey: string;
-  /** 名称属性值, 默认: 'label' */
-  label: string;
-  /** 值属性值, 默认: 'value' */
-  value: string;
-  /** 降序, 默认: 'desc' */
-  desc: string;
-  /** 分组, 默认: 'groups' */
-  groups: string;
-  /** 标题, 默认: 'title' */
-  title: string;
-  /** 是否为叶子节点, 默认: 'leaf' */
-  leaf: string;
-  /** 子属性值, 默认: 'children' */
-  children: string;
-  /** 是否有子节点, 默认: 'hasChildren' */
-  hasChildren: string;
-  /** label文字, 默认: '名称' */
-  labelText: string;
-  /** 禁用, 默认: 'disabled' */
-  disabled: string;
-}
-
-/** 接口请求Props配置 */
-export interface DicHttpProps {
-  /** 文件名Key, 默认: 'name' */
-  name: string;
-  /** 文件路径Key, 默认: 'url' */
-  url: string;
-  /** 文件上传时的文件字段名Key, 默认: 'file' */
-  fileName: string;
-  /** 返回的数据格式, 默认: '' */
-  res: string;
-  /** 文件路径前缀, 默认: '' */
-  home: string;
-}
-
 // window属性扩展
 declare global {
   interface Window {

package/types/variable.d.ts

@@ -0,0 +1,78 @@
+/** 字典Props配置 */
+export interface DicProps {
+  /** 行主键, 默认: 'id' */
+  rowKey: string;
+  /** 行上级主键, 默认: 'parentId' */
+  rowParentKey: string;
+  /** 节点主键, 默认: 'id' */
+  nodeKey: string;
+  /** 名称属性值, 默认: 'label' */
+  label: string;
+  /** 值属性值, 默认: 'value' */
+  value: string;
+  /** , 默认: 'type' */
+  type: string;
+  /** 降序, 默认: 'desc' */
+  desc: string;
+  /** 分组, 默认: 'groups' */
+  groups: string;
+  /** 标题, 默认: 'title' */
+  title: string;
+  /** 是否为叶子节点, 默认: 'leaf' */
+  leaf: string;
+  /** 子属性值, 默认: 'children' */
+  children: string;
+  /** 是否有子节点, 默认: 'hasChildren' */
+  hasChildren: string;
+  /** label文字, 默认: '名称' */
+  labelText: string;
+  /** 禁用, 默认: 'disabled' */
+  disabled: string;
+}
+/** 接口请求Props配置 */
+export interface DicHttpProps {
+  /** 文件名Key, 默认: 'name' */
+  name: string;
+  /** 文件路径Key, 默认: 'url' */
+  url: string;
+  /** 文件类型, 默认: 'type' */
+  fileType: string;
+  /** 文件上传时的文件字段名Key, 默认: 'file' */
+  fileName: string;
+  /** 返回的数据格式, 默认: '' */
+  res: string;
+  /** 文件路径前缀, 默认: '' */
+  home: string;
+}
+export namespace Variable {
+  /** 字典Props配置 */
+  export const DIC_PROPS: DicProps;
+  /** 接口请求Props配置 */
+  export const DIC_HTTP_PROPS: Omit<DicHttpProps, 'home'>;
+  /** 时间单选类组件类型 */
+  export const SINGLE_DATE_LIST: string;
+  /** 时间区间类组件类型 */
+  export const DATE_ARRAY_LIST = string;
+  /** 时间类组件类型 */
+  export const DATE_LIST: string;
+  /** 含子组件的带值组件类型 */
+  export const CHILDREN_LIST: string;
+  /** input-开头的组件类型 */
+  export const INPUT_LIST: string;
+  /** 纯数组的组件类型 */
+  export const ARRAY_LIST: string;
+  /** 可单选/多选的组件类型 */
+  export const MULTIPLE_LIST: string;
+  /** 范围组件类型 */
+  export const RANGE_LIST: string;
+  /** 值为数组的组件类型 */
+  export const ARRAY_VALUE_LIST: string;
+  /** 选择类的组件类型 */
+  export const SELECT_LIST: string;
+  /** 数组转展示的分隔字符 */
+  export const DIC_SHOW_SPLIT: string;
+  /** 数组转字符串的分隔字符 */
+  export const DIC_SPLIT: string;
+  /** 媒体类型正则索引 */
+  export const typeList: Record<string, RegExp>;
+}