variety-form v3.0.0
export enum SearchType { input = 'input', // 输入框 combinationInput = 'combinationInput', // 带前缀的输入框 select = 'select', // 选择框 searchSelect = 'searchSelect', // 可实时搜索的选择框 combinationSelect = 'combinationSelect', // 带前缀的选择框 date = 'date', // 日期选择框 combinationDate = 'combinationDate', // 带前缀的日期选择框 emptyBlock = 'emptyBlock', // 没有内容。占位符 customContent = 'customContent', // 自定义内容 }
export interface option {
label: string; // 展示时的值
value: string | number; // option的value
labelInValue?: boolean; // 为TRUE时option的value为${opt.value}$$${opt.label}
}
export interface getOptionAttrProps { getOptionAPI: () => any; // 获取option的API方法 label: string; // 作为查询项时，所取得值 value: string; // 展示时的取值 params?: any; // API需要的额外参数 method?: string; // api是get还是post。决定params放置位置 selfKeyName?: string; // 如果type为searchSelect,此项是：该SearchItem的输入值，作为getOptionAPI中的搜索项时 的key fetchData?: boolean; // 为false表示select聚焦时需要调用接口拿数据。默认为false。为true表示已经调用过接口,不再重复调用 onSelectFocus: (param) => any; // 搜索项类型为select时,没有options，select聚焦时函数
}
export interface SearchItem { type: string; // 搜索项类型：input, select, date， name?: string; // 搜索项的标识。需保持唯一 placeholder?: string; // placeholder defaultValue?: string | number; // 默认值 options?: option[]; // 如果type为select，此项是其选项 // dataSource?: option[]; // 如果type为searchSelect，此项是其选项 getOptionAttr?: getOptionAttrProps; // 如果type为'select'，此项是获取option的配置信息 label?: string; // FormItem显示的title。label设为' '时会占位，设为''不占位。 asterisk?: boolean; // 是否显示红色星号 required?: boolean; // 是否必填 requiredMessage?: string; // 必填提示信息 eventKey?: string; // 当搜索项有触发事件click, select等时，添加此属性，可在事件处理函数中快速确定该搜索项 prefixText?: string; // type为combinationInput或combinationDate时前缀文案 prefixLength?: number; // type为combinationInput或combinationDate时前缀文案所占宽度。默认46px wholeLine?: boolean; // 是否单独占据整行宽度。设为true后面要跟{columnLength-1}个{type: emptyBlock, noWidth: true}的元素 noWidth?: boolean; // 该元素存在，但不占据任何宽度。一般是emptyBlock类型的元素 noBottomGap?: boolean; // 该元素margin-bottom为0
}
export interface SearchFormProps extends React.HTMLAttributes { dataSource?: any[]; searchItems?: SearchItem[]; // 所有的搜索项集合 columnLength?: number; // 每行有多少搜索项 columnGap?: number; // 搜索项之间的间距 lineGap?: number; // 每行之间的间距 leftButtonText?: string; // 左边按钮文案 rightButtonText?: string; // 右边按钮文案 bottomLeftButton?: boolean; // 两个按钮位于另起一行最左边 rightSubmitButton?: boolean; // 右边的按钮是否是Form.Submit类型。默认是Form.Reset类型 handleLeftClick?: (values, type) => any; // 点击查询时的回调,左边按钮 handleRightClick?: (values) => any; // 点击重置时的回调,右边按钮 onSelectOptionChange?: (values) => any; // SearchItems变更时 onFormValueChange?: (values, current) => any; // 表单值变更时 onSearchItemsClick?: (values) => any; // 自定义内容区域有点击事件时 }