cl-upsert

新增、编辑组件，基于 cl-form，参数、方法皆可用

useUpsert

cl-upsert 标签绑定 ref 值后使用 useUpsert 加载组件

• const 定义必须与 ref 一致

const Upsert = useUpsert(Options);

Options

参数	说明	类型	可选值	默认值
items	表单项	array
props	表单配置
op	操作按钮配置	object
dialog	对话框配置	object
sync	是否同步打开	boolean	true / false	false
onOpen	打开时的钩子	function(isEdit, data)
onClose	关闭时的钩子	function(done)
onInfo	编辑获取详情时的钩子	function(data, { next, done, close })
onSubmit	表单提交时的钩子	function(isEdit, data, { next, done, close })

示例

基础用法

提示

编辑下，会根据行的 id 调用 service.info 的接口，获取完整的数据后，再赋予表单。

• 如果不希望调用接口，则直接在 onInfo 钩子下执行 done 返回传入的数据：

const Upsert = useUpsert({
	onInfo(data, { done }) {
		done(data);
	}
});

• 如果希望在编辑时，处理传入的参数或者处理请求后的数据，则配合使用 next 和 done：

const Upsert = useUpsert({
	async onInfo(data, { done, next }) {
		const newData = await next({
			...data,
			status: false
		});

		if (!newData.name) {
			newData.name = "未命名";
		}

		done(newData);
	}
});

• 如果希望在提交时，处理传入的参数，使用 on-submit 钩子函数：

const Upsert = useUpsert({
	async onSubmit(isEdit, data, { done, close, next }) {
		next({
			...data,
			status: false
		});

		// done 关闭加载状态
		// close 关闭弹窗
	}
});