# Upsert 新增、编辑

CRUD 组件下的新增、编辑组件,基于 cl-form,cl-form 参数皆可用

# 参数

参数 说明 类型 可选值 默认值
v-model / value 绑定值 object
items 表单项 array
props 原 el-dialog 参数
sync 是否同步打开 boolean true / false false
op 操作按钮配置,传送门 object
dialog 对话框配置,传送门 object
on-open 打开时的钩子 function(data, { submit, done, close })
on-close 关闭时的钩子 function(done)
on-submit 表单提交时的钩子 function(isEdit, data, { next, done, close })
on-info 编辑获取详情时的钩子 function(data, { next, done, close })

# 事件

name 说明 回调参数
opened 新增时窗口打开触发,编辑时 info 接口请求后触发 false, data
closed 弹窗关闭时触发

# 方法

参照 cl-form 传送门

# Inject 注入

参数 说明
form 表单值,可用于在子组件直接给表单赋值

# 注意事项

提示

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

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

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

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

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