ck-form

YfForm

表单基础插件

参数设计

可能存在的情况

所有组件使用组件库，插件内的组件需和页面组件同步

• 多个联动
• 表单项label对应多处，一处改变触发同步

参数	说明	类型	可选	默认值
columns	嵌套子项，单项控件配置	Array	[]	-
onChange	组件变化触发	fn	-	-
onValuesChange	数值改变时触发，同Form	fn	-	-
onSetting	单项设置触发,获取当前项	fn	-	-
onDrop	使用拖拽	fn	-	-
valueMap	自定义组件	Object	-	-
isEdit	是否使用编辑模式	Boolean	false/true	false
……	其余参数同Form参数	...	-	-

// 接收参数

// columns
{
	label: '名称',
	name: 'name',
    type: 'select',
    datetype: 'date', // 日期类型
    required: true, // 是否必填
    rules: '', // 自定义校验
    readonly: false, // 是否只读
    api: '',
    options: [
        {id: 1, label: '待提交', value: 0, readonly: false },
        {id: 2, label: '待审核', value: 1, readonly: true},
    ], // 枚举值
    hidden: false, // 是否隐藏
    valueEnum: {}, // 用于修改控件的基础配置
    render: '', // 自定义组件：value & onChange
    col: { xs: 24, sm: 12, xl: 8, xxl: 6 }, // 栅格设置
    seq: 1,
}

// valueMap用于自定义ReactNode
/*
 * 请注意遵循自定义组件规范，同Form.Item
 * 自定义的组件会插入Form.Item中
 * Form.Item会接收Value和OnChange
*/
valueMap: {
    diy: (column) => <Input placeholder="自定义render" />
}
{	
    ...,
    renderText: 'diy',
}

<ProForm columns={columns} onChange={handleChange} />

Columns

参数	说明	类型	可选	默认值
label	标签的文本	String/JSX	''	-
*name	字段名	String	''	-
type	控件类型，可通过valueMap拓展	String	input/select/date/number/checkbox/radio/	-
datetype	日期类型	String	date/range/
api	接口地址	String	-	-
options	枚举值	Array	[]	-
required	是否必填	Boolean	true/false	false
readonly	是否只读	Boolean	true/false	false
tooltip	提示内容	String	-	-
rules	校验内容	String	-	-
valueEnum	控件配置	Object	{}	-
hidden	是否隐藏	Boolean	true/false	false
col	栅格	Object	同栅格Col组件	{ xs: 24, sm: 12, xl: 8, xxl: 6 }
seq	排序	Number
render(暂无)	自定义	Jsx
renderText(暂无)	自定义组件名	String	''	-

表单组件

增删改

• 增删改
• 必填
• 只读
• 数据
• 宽度
• 排序
• 数据获取方式

下拉选择器

下拉选择组件下拉数据

• 接口数据获取
• 自定义数据
  • 键、值、是否禁选

复选框及其他

单选、复选、Other

• 自定义数据

ProForm使用流程

• 编辑表单独立设置，引入id查询