Skip to content

cl-upsert

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

useUpsert

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

  • const 定义必须与 ref 一致
js
const Upsert = useUpsert(Options);

Options

参数说明类型可选值默认值
items表单项array
props表单配置object
op操作按钮配置object
dialog对话框配置object
plugins插件Plugins[]
sync是否同步打开booleantrue / falsefalse
onOpen打开时的钩子function(data)
onOpened打开后的钩子function(data)
onClose关闭时的钩子function(action: 'close' | 'submit', done)
onInfo编辑获取详情时的钩子function(data, { next, done, close })
onSubmit表单提交时的钩子function(data, { next, done, close })

Ref

参数说明类型返回值
mode打开方式string'add' | 'info' | 'update'
submit表单提交function(data)void
close表单关闭function()void
add新增方式打开function()void
append追加方式打开function(data)void
edit编辑方式打开function(data)void
info详情方式打开function(data)void

示例

基础用法

子组件使用

子组件使用时不需要传入 items 参数,主要作为监听表单事件和获取组件实例

js
const Upsert = useUpsert({
  onOpen(data) {
    // 打开时
  },

  onOpened(data) {
    // 打开后
  },
});

// Upsert.value.form 表单值

onInfo

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

  • 如果不希望调用接口,则直接在 onInfo 钩子下执行 done 返回传入的数据:
js
const Upsert = useUpsert({
  onInfo(data, { done }) {
    done(data);
  },
});
  • 如果希望在编辑时,处理传入的参数或者处理请求后的数据,则配合使用 nextdone
js
const Upsert = useUpsert({
  async onInfo(data, { done, next }) {
    const newData = await next({
      ...data,
      status: false,
    });

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

    done(newData);
  },
});

onSubmit

  • 如果希望在提交时,处理传入的参数,使用 on-submit 钩子函数:
js
const Upsert = useUpsert({
  async onSubmit(data, { done, close, next }) {
    next({
      ...data,
      status: false,
    });

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