自定义组件

主题样式

为了保持用户自定义组件的主题和平台主题一致，需使用css var来设置颜色

使用var(--k6-primary-color)

<style lang="scss">
.demo-form-input {
  padding: 10px;
  border: 1px solid var(--k6-primary-color); // 使用主题色示例
  input {
    color: var(--k6-primary-color); // 使用主题色示例
  }
}
</style>

在开发过程中中可以通过点击右上角的头像，切换主题进行调试

表单组件API

需实现双向数据绑定，即v-model 使用inject, 注入formRender, 拿到渲染器组件实例，使用formRender.formContext拿到表单数据的上下文进行数据操作

Props

见K6CorePC getPluginPropTypes

表单按钮API

Props

developProvide props

developProvide.props.formData // 表单数据

developProvide emits

• submit(): 触发表单提交，会进表单校验
• print(): 触发表单打印，弹出打印窗口
• delete(): 触发表单删除，会有二次确认
• edit(): 触发表单再次编辑，当前是详情状态可用
• cancel(): 触发表单取消动作

// 关闭弹框
developProvide.emits.cancel()

developProvide methods

• serializeFormJson(skip): 序列化表单数据，skip=true跳过表单验证

serializeFormJson().then(data => {
  // TODO:
})

列表按钮API

Props

developProvide props

export const KEY_FLOW_TYPE = {
  CREATE: -1,   // 创建流程 => 前端自己定义的状态
  TODO: 3,      // 待办
  INITIATOR: 4, // 申请
  DONE: 5,      // 已办
  DRAFT: 6,     // 草稿
  DELEGATE: 7,  // 委托代理
  MONITOR: 8,   // 流程监控
  DESTROY: 9,    // 流程删除
  SEARCH: 10,   // 流程查询
  NOTIFY: 11    // 知会
}

developProvide.props.formId // 当前表单id

developProvide emits

• refresh(): 刷新列表
• create(): 普通表单为新增表单，流程表单为发起流程
• delete(): 普通表单为删除表单，流程表单为删除草稿

developProvide.emits.refresh() // 刷新数据

developProvide on

• checkedChange(checkedRows): 监听选择行数据

developProvide.on.checkedChange = function (checkedRows) {
  // 监听选择数据事件
}

列表按钮调试示例

列表项API

Props

developProvide 参数同列表按钮developProvide

列表项调试示例

自定义页面API

Props

自定义页面调试示例