krco
Version:
基于arco-design-vue的配置化表格表单组件
239 lines (238 loc) • 6.59 kB
TypeScript
export declare enum ColumnType {
Input = "input",
InputNumber = "input-number",
Textarea = "textarea",
Select = "select",
Radio = "radio",
Checkbox = "checkbox",
Switch = "switch",
TimePicker = "time-picker",
DatePicker = "date-picker",
DateTimePicker = "date-time-picker",
Rate = "rate",
Slider = "slider",
ColorPicker = "color-picker",
Upload = "upload",
TreeSelect = "tree-select",
Cascader = "cascader"
}
export declare const VALIDATE_STATUSES: readonly ["success", "warning", "error", "validating"];
export declare type ValidateStatus = typeof VALIDATE_STATUSES[number];
export interface FieldData {
value?: any;
status?: ValidateStatus;
message?: string;
}
export interface ValidatedError {
label: string;
field: string;
value: any;
type: string;
isRequiredError: boolean;
message: string;
}
export interface FormItemEventHandler {
onChange?: (ev?: any) => void;
onInput?: (ev?: any) => void;
onFocus?: (ev?: any) => void;
onBlur?: (ev?: any) => void;
}
/**校验规则 */
export interface FieldRule<FieldValue = any> {
type?: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'email' | 'url' | 'ip';
required?: boolean;
message?: string;
length?: number;
maxLength?: number;
minLength?: number;
match?: RegExp;
uppercase?: boolean;
lowercase?: boolean;
min?: number;
max?: number;
equal?: number;
positive?: boolean;
negative?: boolean;
true?: boolean;
false?: boolean;
includes?: any[];
deepEqual?: any;
empty?: boolean;
hasKeys?: string[];
validator?: (value: FieldValue | undefined, callback: (error?: string) => void) => void;
}
interface PageOption {
/** 是否是简单模式 */
simple?: boolean;
/** 是否是简单模式 */
showPageSize?: boolean;
/** 是否是简单模式 */
showJumper?: boolean;
/** 分页配置 */
pageSizeOptions?: Array<number>;
}
export interface Option {
/** 标题 */
label?: string;
groupContainerStyle?: object;
/** 表单分组时候的关键字 用于插槽 field-GroudHeader */
field?: string;
display?: boolean;
/** 操作栏是否显示 */
menu?: Boolean;
/**操作栏宽度 */
menuWidth?: number;
/** 菜单按钮位置 */
menuAlign?: "left" | "center" | "right";
/** 值 */
placeholder?: string;
/** 操作-按钮是否显示 */
menuBtn?: Boolean;
/** 操作-提交按钮是否显示 */
submitBtn?: Boolean;
/** 提交按钮名称 */
submitBtnText?: string;
/** 操作-重置按钮是否显示 */
resetBtn?: Boolean;
/** 重置按钮名称 */
resetBtnText?: string;
/** 详情模式 */
detail?: Boolean;
/** 分割大小 */
cols?: number;
/** 行高 */
colGap?: number;
/** 列高 */
rowGap?: number;
/** 分割大小 */
span?: number;
/** 表单的布局方式,包括水平、垂直、多列 排列方向:horizontal/vertical/inline */
layout?: 'horizontal' | 'vertical' | 'inline';
/** 是否禁用 */
disabled?: boolean;
/** 验证失败后滚动到第一个错误字段 */
scrollToFirstError?: boolean;
/** 间距 */
gutter?: number;
/** 大小 'mini' | 'small' | 'medium' | 'large' */
size?: "mini" | "small" | "medium" | "large";
/** 布局水平对齐方式 (justify-content) */
justify?: 'start' | 'center' | 'end' | 'space-around' | 'space-between';
/** 是否支持换行 */
wrap?: boolean;
/** 对齐方式 ( align-items ) 'start' | 'center' | 'end' | 'stretch'| 'left' */
align?: any;
/**标签的对齐方向 'left' | 'right' */
labelAlign?: "left" | "right";
/** 菜单栏栅格大小 */
menuSpan?: number;
/**是否为搜索表单,Table搜索属性 */
search?: boolean;
/**是否显示工具栏,Table搜索属性 */
tool?: boolean;
/**是否显示分页,Table搜索属性 */
page?: boolean | PageOption;
/** 搜索栏默认栅格大小 */
searchSpan?: number;
/** 菜单栏目栅格大小 */
searchMenuSpan?: number;
searchMenuAlign?: "left" | "center" | "right";
/** 是否自动宽度 */
autoLabelWidth?: boolean;
columns: Array<Column>;
groups?: Array<Option>;
/** 表格距离底部的距离 */
calcHeight?: number;
/** 表格头部工具栏 */
headerTool?: boolean;
[key: string]: any;
}
export interface Column {
/** 标题 */
label: string;
/** 字段 */
field: string;
/** 类型 */
type?: ColumnType | string;
/** 占位符 大小 */
span?: number;
/** 字典,推荐dicData */
options?: any;
value?: any;
/** 是否禁用 */
disabled?: boolean;
/** 是否隐藏 */
display?: boolean;
/** 帮助信息 */
help?: string;
/** 帮助图标显示信息 */
helpIcon?: string;
/** 帮助图标显示文本信息 */
helpIconText?: string;
/**表格上 帮助图标显示文本信息 */
helpIconTableText?: string;
/** 是否显示清理 */
allowClear?: boolean;
/** 是否 填写 */
required?: boolean;
/** 下侧提示信息 */
extra?: string;
/** 深度绑定 */
bind?: string;
/** 左侧的间隔格数 */
offset?: number;
/** 排序 */
order?: number;
/** 字典数据 */
dicData?: Array<any>;
/**显示更多文字 */
showWordLimit?: string;
/** 多选 */
multiple?: boolean;
/** 是否固定 */
fixed?: 'left' | 'right';
/** 校验规则数据 */
rules?: Array<FieldRule>;
onChange?: (ev?: any) => void;
onBlur?: (ev?: any) => void;
onFocus?: (ev?: any) => void;
onInput?: (ev?: any) => void;
dataIndex?: string;
title?: string;
slotName?: string;
/**是否选中 */
checked?: boolean;
/**宽度 */
width?: number;
/** 最小宽度:默认80 */
minWidth?: number;
searchSpan?: number;
/** 是否为搜索选项 */
search?: boolean;
/** 排序规则 */
sortable?: any;
/** 筛选规则 */
filterable?: any;
ellipsis?: boolean;
/** 自定义渲染 */
render?: Function;
/** 表格对其方式 */
align?: string;
component?: any;
/** 是否隐藏 */
hide?: boolean;
/**
* 隐藏label标签
*/
hideLabel?: boolean;
/**
* 隐藏星号
*/
hideAsterisk?: boolean;
/**
* 隐藏星号
*/
tooltip?: string;
[key: string]: any;
}
export {};