CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2023-04-05 8e5a6b7ce547ba8edb1d767bb4d820f3b66ff95a
提交 | 用户 | age
c5b39f 1 import { IAnyObject } from './base-type';
W 2 // import { ComponentOptions } from 'vue/types/options';
3 import { ComponentOptions } from 'vue';
4 import { IVFormMethods } from '../hooks/useVFormMethods';
5 import { ColEx } from '/@/components/Form/src/types';
6
7 import { SelectValue } from 'ant-design-vue/lib/select';
8 import { validateOptions } from 'ant-design-vue/lib/form/useForm';
9 import { RuleError } from 'ant-design-vue/lib/form/interface';
10 import { FormItem } from '/@/components/Form';
8e5a6b 11
c5b39f 12 type LayoutType = 'horizontal' | 'vertical' | 'inline';
W 13 type labelLayout = 'flex' | 'Grid';
14 export type PropsTabKey = 1 | 2 | 3;
15 type ColSpanType = number | string;
16
17 declare type Value = [number, number] | number;
18 /**
19  * 组件属性
20  */
21 export interface IVFormComponent {
22   // extends Omit<FormSchema, 'component' | 'label' | 'field' | 'rules'> {
23   // 对应的字段
24   field?: string;
25   // 组件类型
26   component: string;
27   // 组件label
28   label?: string;
29   // 自定义组件控件实例
30   componentInstance?: ComponentOptions<any>;
31   // 组件icon
32   icon?: string;
33   // 组件校验规则
34   rules?: Partial<IValidationRule>[];
35   // 是否隐藏
36   hidden?: boolean;
37   // 隐藏label
38   hiddenLabel?: boolean;
39   // 组件宽度
40   width?: string;
41   // 是否必选
42   required?: boolean;
43   // 必选提示
44   message?: string;
45   // 提示信息
46   helpMessage?: string;
47   // 传给给组件的属性，默认会吧所有的props都传递给控件
48   componentProps?: IAnyObject;
49   // 监听组件事件对象，以v-on方式传递给控件
50   on?: IAnyObject<(...any: []) => void>;
51   // 组件选项
52   options?: IAnyObject;
53   // 唯一标识
54   key?: string;
55   // Reference formModelItem
56   itemProps?: Partial<FormItem>;
57
58   colProps?: Partial<ColEx>;
59   // 联动字段
60   link?: string[];
61   // 联动属性变化的回调
62   update?: (value: any, formItem: IVFormComponent, fApi: IVFormMethods) => void;
63   // 控件栅格数
64   // span?: number;
65   // 标签布局
66   labelCol?: IAnyObject;
67   // 组件布局
68   wrapperCol?: IAnyObject;
69   // 子控件
70   columns?: Array<{ span: number; children: any[] }>;
71 }
72
73 declare type namesType = string | string[];
74
75 /**
76  * 表单配置
77  */
78 export interface IFormConfig {
79   // 表单项配置列表
80   // schemas: IVFormComponent[];
81   // 表单配置
82   // config: {
83   layout?: LayoutType;
84   labelLayout?: labelLayout;
85   labelWidth?: number;
86   labelCol?: Partial<IACol>;
87   wrapperCol?: Partial<IACol>;
88   hideRequiredMark?: boolean;
89   // Whether to disable
90   schemas: IVFormComponent[];
91   disabled?: boolean;
92   labelAlign?: 'left' | 'right';
93   // Internal component size of the form
94   size?: 'default' | 'small' | 'large';
95   // };
96   // 当前选中项
97   currentItem?: IVFormComponent;
98   activeKey?: PropsTabKey;
99   colon?: boolean;
100 }
101
102 export interface AForm {
103   /**
104    * Hide required mark of all form items
105    * @default false
106    * @type boolean
107    */
108   hideRequiredMark: boolean;
109
110   /**
111    * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>
112    * @type IACol
113    */
114   labelCol: IACol;
115
116   /**
117    * Define form layout
118    * @default 'horizontal'
119    * @type string
120    */
121   layout: 'horizontal' | 'inline' | 'vertical';
122
123   /**
124    * The layout for input controls, same as labelCol
125    * @type IACol
126    */
127   wrapperCol: IACol;
128
129   /**
130    * change default props colon value of Form.Item (only effective when prop layout is horizontal)
131    * @type boolean
132    * @default true
133    */
134   colon: boolean;
135
136   /**
137    * text align of label of all items
138    * @type 'left' | 'right'
139    * @default 'left'
140    */
141   labelAlign: 'left' | 'right';
142
143   /**
144    * data of form component
145    * @type object
146    */
147   model: IAnyObject;
148
149   /**
150    * validation rules of form
151    * @type object
152    */
153   rules: IAnyObject;
154
155   /**
156    * Default validate message. And its format is similar with newMessages's returned value
157    * @type any
158    */
159   validateMessages?: any;
160
161   /**
162    * whether to trigger validation when the rules prop is changed
163    * @type Boolean
164    * @default true
165    */
166   validateOnRuleChange: boolean;
167
168   /**
169    * validate the whole form. Takes a callback as a param. After validation,
170    * the callback will be executed with two params: a boolean indicating if the validation has passed,
171    * and an object containing all fields that fail the validation. Returns a promise if callback is omitted
172    * @type Function
173    */
174   validate: <T = any>(names?: namesType, option?: validateOptions) => Promise<T>;
175
176   /**
177    * validate one or several form items
178    * @type Function
179    */
180   validateField: (
181     name: string,
182     value: any,
183     rules: Record<string, unknown>[],
184     option?: validateOptions,
185   ) => Promise<RuleError[]>;
186   /**
187    * reset all the fields and remove validation result
188    */
189   resetFields: () => void;
190
191   /**
192    * clear validation message for certain fields.
193    * The parameter is prop name or an array of prop names of the form items whose validation messages will be removed.
194    * When omitted, all fields' validation messages will be cleared
195    * @type string[] | string
196    */
197   clearValidate: (props: string[] | string) => void;
198 }
199
200 interface IACol {
201   /**
202    * raster number of cells to occupy, 0 corresponds to display: none
203    * @default none (0)
204    * @type ColSpanType
205    */
206   span: Value;
207
208   /**
209    * raster order, used in flex layout mode
210    * @default 0
211    * @type ColSpanType
212    */
213   order: ColSpanType;
214
215   /**
216    * the layout fill of flex
217    * @default none
218    * @type ColSpanType
219    */
220   flex: ColSpanType;
221
222   /**
223    * the number of cells to offset Col from the left
224    * @default 0
225    * @type ColSpanType
226    */
227   offset: ColSpanType;
228
229   /**
230    * the number of cells that raster is moved to the right
231    * @default 0
232    * @type ColSpanType
233    */
234   push: ColSpanType;
235
236   /**
237    * the number of cells that raster is moved to the left
238    * @default 0
239    * @type ColSpanType
240    */
241   pull: ColSpanType;
242
243   /**
244    * <576px and also default setting, could be a span value or an object containing above props
245    * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
246    */
247   xs: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
248
249   /**
250    * ≥576px, could be a span value or an object containing above props
251    * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
252    */
253   sm: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
254
255   /**
256    * ≥768px, could be a span value or an object containing above props
257    * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
258    */
259   md: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
260
261   /**
262    * ≥992px, could be a span value or an object containing above props
263    * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
264    */
265   lg: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
266
267   /**
268    * ≥1200px, could be a span value or an object containing above props
269    * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
270    */
271   xl: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
272
273   /**
274    * ≥1600px, could be a span value or an object containing above props
275    * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
276    */
277   xxl: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
278 }
279
280 export interface IValidationRule {
281   trigger?: 'change' | 'blur' | ['change', 'blur'];
282   /**
283    * validation error message
284    * @type string | Function
285    */
286   message?: string | number;
287
288   /**
289    * built-in validation type, available options: https://github.com/yiminghe/async-validator#type
290    * @default 'string'
291    * @type string
292    */
293   type?: string;
294
295   /**
296    * indicates whether field is required
297    * @default false
298    * @type boolean
299    */
300   required?: boolean;
301
302   /**
303    * treat required fields that only contain whitespace as errors
304    * @default false
305    * @type boolean
306    */
307   whitespace?: boolean;
308
309   /**
310    * validate the exact length of a field
311    * @type number
312    */
313   len?: number;
314
315   /**
316    * validate the min length of a field
317    * @type number
318    */
319   min?: number;
320
321   /**
322    * validate the max length of a field
323    * @type number
324    */
325   max?: number;
326
327   /**
328    * validate the value from a list of possible values
329    * @type string | string[]
330    */
331   enum?: string | string[];
332
333   /**
334    * validate from a regular expression
335    * @type boolean
336    */
337   pattern?: SelectValue;
338
339   /**
340    * transform a value before validation
341    * @type Function
342    */
343   transform?: (value: any) => any;
344
345   /**
346    * custom validate function (Note: callback must be called)
347    * @type Function
348    */
349   validator?: (rule: any, value: any, callback: () => void) => any;
350 }