hyb-naive
Version:
对naive-ui组件进行二次封装，主要包含Form表单组件，进行JSON化化配置处理，快速实现表单的录入和页面筛选器功能
206 lines (205 loc) • 5.12 kB
TypeScript
import { ExtractPublicPropTypes } from 'vue';
import { FormItemRuleValidator as FormRuleValidator } from 'naive-ui/lib/form/src/interface';
import { datePickerProps } from 'naive-ui';
/**
* 表单校验类型
*/
export type HValidateType = 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email' | 'pattern' | 'any';
/**
* 表单组件类型
*/
export type HFormCompType = 'Input' | 'InputNumber' | 'Select' | 'TreeSelect' | 'RadioButtonGroup' | 'RadioGroup' | 'Radio' | 'Checkbox' | 'CheckboxGroup' | 'AutoComplete' | 'Cascader' | 'DatePicker' | 'Switch' | 'Upload' | 'Slider' | 'Rate' | 'Tree' | 'Transfer' | 'Slot' | 'TimePicker';
export interface HFormRule {
/**
* 表单字段名
*/
field: string;
/**
* 标签名称
*/
label?: string;
/**
* 标签对齐方式
*/
labelAlign?: 'left' | 'center' | 'right';
/**
* 是否必填项
*/
required?: boolean | ((fApi: HFormApi) => boolean);
/**
* 组件类型
*/
compType: HFormCompType | ((fApi: HFormApi) => HFormCompType);
/**
* 校验事件
*/
trigger?: string | string[];
/**
* 验证错误提示消息
*/
message?: string;
/**
* 24栅格暂用的空间大小
*/
span?: number | (() => number);
/**
* 默认值
*/
defaultValue?: any;
/**
* 标签的宽度
*/
labelWidth?: number | string;
/**
* 数据类型校验
*/
validateType?: HValidateType;
/**
* 表单校验
*/
validator?: FormRuleValidator;
/**
* 是否填充整个宽度
*/
fullWidth?: boolean;
/**
* 忽略表单提交
*/
ignoreCommit?: boolean;
/**
* 是否重置数据
*/
restValue?: boolean;
/**
* 是否显示
*/
show?: boolean | ((fApi: HFormApi) => boolean);
/**
* 组件参数
*/
props?: object | ((fApi: HFormApi) => object);
/**
* 当组件类型为：RadioGroup RadioButtonGroup ,Select的选项内容
*/
options?: Array<{
label?: string;
value?: any;
[key: string]: any;
}> | ((fApi: HFormApi) => Array<{
label?: string;
value?: any;
[key: string]: any;
}>);
/**
* 组件加载钩子函数
* @param params 表单相关操作参数
* @returns
*/
onLoad?: (fApi: HFormApi) => any;
/**
* 是否禁用
*/
disabled?: boolean | ((fApi: HFormApi) => boolean);
/**
* 组件模式，edit编辑模式，text：文本模式
*/
mode?: 'edit' | 'text';
}
export interface HFormApi {
/**
* 表单数据
*/
formData: Record<string, any>;
/**
* 设置表单数据
* @param formData
* @returns
*/
setFormData: (formData: Record<string, any>) => void;
/**
* 设置表单数据
* @param field
* @param value
* @returns
*/
setValue: (field: string, value: any) => Promise<any>;
/**
* 设置表单数据
* @param values
* @returns
*/
setValues: (values: Record<string, any>) => Promise<any>;
/**
* 设置表单规则
* @param field
* @param rule
* @returns
*/
setRule: (field: string, rule: HFormRule) => HFormRule;
/**
* 获取表单规则
*
* @param field
* @returns
*/
getRule: (field: string) => HFormRule | undefined;
/**
* 合并表单规则
* @param field
* @param rule
* @returns
*/
mergeRule: (field: string, rule: HFormRule) => HFormRule;
/**
* 设置表单数据选择项
* @param field
* @param options
* @returns
*/
setOptions: (field: string, options: Array<{
label?: string;
value?: any;
[key: string]: any;
}>) => Promise<any>;
/**
* 校验表单
* @returns
*/
validate: () => Promise<Record<string, any>>;
/**
* 触发搜索
* @param formData
* @returns
*/
search: (formData?: Record<string, any>) => void;
/**
* 重置表单
* @returns
*/
reset: () => void;
/**
* 表单规则
*/
rules: HFormRule[];
/**
* 表单数据
*/
value?: any;
/**
* 表单规则
*/
rule?: HFormRule;
}
/**
* 日期选择器组件参数
*/
export type HDatePickerFormProps = ExtractPublicPropTypes<typeof datePickerProps> & {
rangeMappingToFields?: [string, string];
valDateFormat?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD' | 'HH:mm:ss';
/**
* 处理日期区间选择，结束时间时间戳，由于组件的bug导致，结束的时间戳是当天的开始时间，导致筛选数据异常
* eg: 组件原始数据：[2024-01-01,2024-01-01]对应时间戳为 [1672531200000,1672531200000]
* 处理后为 [2024-01-01,2024-01-02]应该为2024-01-01 00:00:00 到 2024-01-02 23:59:59 时间戳为 [1672531200000,1672535999999]
*/
rangeEndTimeStamp?: boolean;
};