UNPKG

krco

Version:

基于arco-design-vue的配置化表格表单组件

239 lines (238 loc) 6.59 kB
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 {};