CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2020-11-17 0b6110a8fc92a11df6501346e093246a5abe2b0e
提交 | 用户 | age
2407b3 1 import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
2f6253 2 import type { VNode } from 'vue';
陈 3 import type { BasicButtonProps } from '/@/components/Button/types';
4 import type { FormItem } from './formItem';
5 import type { ColEx, ComponentType } from './index';
5832ee 6 import { TableActionType } from '../../../Table/src/types/table';
2f6253 7
陈 8 export type FieldMapToTime = [string, [string, string], string?][];
9
1d4561 10 export type Rule = RuleObject & {
V 11   trigger?: 'blur' | 'change' | ['change', 'blur'];
12 };
13
2f6253 14 export interface RenderCallbackParams {
陈 15   schema: FormSchema;
16   values: any;
17   model: any;
18   field: string;
19 }
a0c319 20
V 21 export interface ButtonProps extends BasicButtonProps {
22   text?: string;
23 }
24
2407b3 25 export interface FormActionType {
a0c319 26   submit: () => Promise<void>;
V 27   setFieldsValue: <T>(values: T) => void;
28   resetFields: () => Promise<any>;
2f6253 29   getFieldsValue: () => any;
陈 30   clearValidate: (name?: string | string[]) => void;
a0c319 31   updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void;
V 32   setProps: (formProps: Partial<FormProps>) => void;
33   removeSchemaByFiled: (field: string | string[]) => void;
34   appendSchemaByField: (schema: FormSchema, prefixField?: string) => void;
35   validateFields: (nameList?: NamePath[]) => Promise<any>;
36   validate: (nameList?: NamePath[]) => Promise<any>;
2407b3 37   scrollToField: (name: NamePath, options?: ScrollOptions) => void;
2f6253 38 }
陈 39 export type RegisterFn = (formInstance: FormActionType) => void;
40
41 export type UseFormReturnType = [RegisterFn, FormActionType];
42
43 export interface FormProps {
0b6110 44   // layout?: 'vertical' | 'inline' | 'horizontal';
84c9d7 45   // 表单值
V 46   model?: any;
2f6253 47   // 整个表单所有项宽度
陈 48   labelWidth?: number | string;
d09406 49   // 重置时提交
V 50   submitOnReset?: boolean;
2f6253 51   // 整个表单通用Col配置
陈 52   labelCol?: Partial<ColEx>;
53   // 整个表单通用Col配置
54   wrapperCol?: Partial<ColEx>;
55
56   // 通用col配置
a0c319 57   baseColProps?: Partial<ColEx>;
2f6253 58
陈 59   // 表单配置规则
60   schemas?: FormSchema[];
61   // 用于合并到动态控制表单项的 函数values
62   mergeDynamicData?: any;
63   // 紧凑模式,用于搜索表单
64   compact?: boolean;
65   // 空白行span
66   emptySpan?: number | Partial<ColEx>;
67   // 表单内部组件大小
5a6db8 68   size?: 'default' | 'small' | 'large';
2f6253 69   // 是否禁用
陈 70   disabled?: boolean;
71   // 时间区间字段映射成多个
72   fieldMapToTime?: FieldMapToTime;
73   // 自动设置placeholder
a0c319 74   autoSetPlaceHolder?: boolean;
2f6253 75   // 校验信息是否加入label
陈 76   rulesMessageJoinLabel?: boolean;
77   // 是否显示收起展开按钮
78   showAdvancedButton?: boolean;
79   // 超过指定行数自动收起
80   autoAdvancedLine?: number;
81   // 是否显示操作按钮
5a6db8 82   showActionButtonGroup?: boolean;
2f6253 83
陈 84   // 重置按钮配置
a0c319 85   resetButtonOptions?: Partial<ButtonProps>;
2f6253 86
陈 87   // 确认按钮配置
a0c319 88   submitButtonOptions?: Partial<ButtonProps>;
2f6253 89
陈 90   // 操作列配置
5a6db8 91   actionColOptions?: Partial<ColEx>;
2f6253 92
陈 93   // 显示重置按钮
5a6db8 94   showResetButton?: boolean;
2f6253 95   // 显示确认按钮
5a6db8 96   showSubmitButton?: boolean;
2f6253 97
5a6db8 98   resetFunc?: () => Promise<void>;
V 99   submitFunc?: () => Promise<void>;
100   transformDateFunc?: (date: any) => string;
2f6253 101   colon?: boolean;
陈 102 }
103 export interface FormSchema {
104   // 字段名
105   field: string;
1d4561 106   // 内部值更改触发的事件名，默认 change
2f6253 107   changeEvent?: string;
1d4561 108   // v-model绑定的变量名 默认 value
V 109   valueField?: string;
2f6253 110   // 标签名
陈 111   label: string;
0b6110 112   // 辅助文本
V 113   subLabel?: string;
2f6253 114   // 文本右侧帮助文本
陈 115   helpMessage?: string | string[];
116   // BaseHelp组件props
117   helpComponentProps?: Partial<HelpComponentProps>;
118   // label宽度,有传的话 itemProps配置的 labelCol 和WrapperCol会失效
119   labelWidth?: string | number;
120   // 禁用调有formModel全局设置的labelWidth,自己手动设置 labelCol和wrapperCol
121   disabledLabelWidth?: boolean;
122   // 组件
123   component: ComponentType;
124   // 组件参数
5832ee 125   componentProps?:
1d4561 126     | ((opt: {
V 127         schema: FormSchema;
128         tableAction: TableActionType;
129         formActionType: FormActionType;
130         formModel: any;
131       }) => any)
5832ee 132     | object;
285906 133   // 必填
V 134   required?: boolean;
2f6253 135
陈 136   // 校验规则
1d4561 137   rules?: Rule[];
2f6253 138   // 校验信息是否加入label
陈 139   rulesMessageJoinLabel?: boolean;
140
141   // 参考formModelItem
142   itemProps?: Partial<FormItem>;
143
144   // formModelItem外层的col配置
145   colProps?: Partial<ColEx>;
146
147   // 默认值
148   defaultValue?: any;
149   isAdvanced?: boolean;
150
151   // 配合详情组件
152   span?: number;
153
154   ifShow?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
155
156   show?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
157
158   // 渲染form-item标签内的内容
159   render?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
160
161   // 渲染 col内容,需要外层包裹 form-item
a0c319 162   renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
2f6253 163
1d4561 164   renderComponentContent?:
V 165     | ((renderCallbackParams: RenderCallbackParams) => any)
166     | VNode
167     | VNode[]
168     | string;
2f6253 169
陈 170   // 自定义slot, 在 from-item内
171   slot?: string;
172
173   // 自定义slot,类似renderColContent
174   colSlot?: string;
175
176   dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
177
1d4561 178   dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
2f6253 179 }
陈 180 export interface HelpComponentProps {
181   maxWidth: string;
182   // 是否显示序号
183   showIndex: boolean;
184   // 文本列表
185   text: any;
186   // 颜色
187   color: string;
188   // 字体大小
189   fontSize: string;
190   icon: string;
191   absolute: boolean;
192   // 定位
193   position: any;
194 }