CoRender

render.setCtrlValue

控件赋值。

类型

interface CoRender {
  /**
   * @param ref   控件名称
   * @param value 要设置的控件值
   */
  setCtrlValue: <T>(ref: string, value: T) => T
}

interface CoRender {
  /**
   * @param ref   控件名称
   * @param value 要设置的控件值
   */
  setCtrlValue: <T>(ref: string, value: T) => T
}

示例:

// 对控件赋值错误类型内容可能会引发程序异常

render.setCtrlVal('静态文本框', '赋值内容') // 赋值字符串类型
render.setCtrlVal('列表', [{ name: 'anmi', friends: 0 }]) // 赋值数组类型

// 对控件赋值错误类型内容可能会引发程序异常

render.setCtrlVal('静态文本框', '赋值内容') // 赋值字符串类型
render.setCtrlVal('列表', [{ name: 'anmi', friends: 0 }]) // 赋值数组类型

render.getCtrlValue

控件取值。

类型

interface CoRender {
  /**
   * @param ref 控件名称
   */
  getCtrlValue: <T>(ref: string) => T
}

interface CoRender {
  /**
   * @param ref 控件名称
   */
  getCtrlValue: <T>(ref: string) => T
}

示例

// 取值并声明控件值类型
const inputValue = render.getCtrlValue<string>('input-ref')

// 或者使用 deepClone
const tableValue = JSON.parse(JSON.stringfy(render.getCtrlVal('table-ref')))
// 此时，修改不会影响表单值
tableValue[0]?.name = inputValue

// 取值并声明控件值类型
const inputValue = render.getCtrlValue<string>('input-ref')

// 或者使用 deepClone
const tableValue = JSON.parse(JSON.stringfy(render.getCtrlVal('table-ref')))
// 此时，修改不会影响表单值
tableValue[0]?.name = inputValue

注意

由于在js中，对象（object）为地址引用，直接修改返回值可能会改变表单状态。如需要修改数据但又不影响表单控件，请对返回值进行深拷贝后再进行操作。

render.getCtrlAuth

控件取权限。

类型

interface CoRender {
  /**
   * @param ref 控件名称
   */
  getCtrlAuth: (ref: string) => { disabled: boolean; display: boolean }
}

interface CoRender {
  /**
   * @param ref 控件名称
   */
  getCtrlAuth: (ref: string) => { disabled: boolean; display: boolean }
}

示例

const inputAuth = render.getCtrlAuth('input-ref')

const inputAuth = render.getCtrlAuth('input-ref')

render.getOption

获取表单实例配置。

类型

interface CoRender {
  getOption: () => Options
}

type Options = {
  inst: string // 主键实例值，根据 `MkCtlName` 获取
  task: number // 任务编号
  flow: string // 流程编号
  stat: string // 状态码
  tach: string // 环节
  form: string // 表单编号
  userId: string // 用户编号
}

interface CoRender {
  getOption: () => Options
}

type Options = {
  inst: string // 主键实例值，根据 `MkCtlName` 获取
  task: number // 任务编号
  flow: string // 流程编号
  stat: string // 状态码
  tach: string // 环节
  form: string // 表单编号
  userId: string // 用户编号
}

示例

const option = render.getOption()

const option = render.getOption()

render.refresh

刷新表单实例，并重新初始化数据。

类型

interface CoRender {
  refresh: () => void
}

interface CoRender {
  refresh: () => void
}

示例
ts
```
render.refresh()
```
```
render.refresh()
```
刷新重置
请不要在 refresh 操作之后立即尝试操作表单，这通常是不可靠的。

render.createError

创建平台内部的错误对象，通常用于停止事件执行，并且弹出相应提示。

类型

interface CoRender {
  createError: (options: ErrorOptions) => void
}

type ErrorOptions = {
  type: 'warning' | 'error' | 'log' | 'info' // 错误类型
  title?: string // 错误标题 默认为 `提示`
  message?: string // 错误提示信息（显示在弹框）`type` 不为 `log` 或 `info` 时必须
  log: string // 错误打印信息（显示在控制台）
}

interface CoRender {
  createError: (options: ErrorOptions) => void
}

type ErrorOptions = {
  type: 'warning' | 'error' | 'log' | 'info' // 错误类型
  title?: string // 错误标题 默认为 `提示`
  message?: string // 错误提示信息（显示在弹框）`type` 不为 `log` 或 `info` 时必须
  log: string // 错误打印信息（显示在控制台）
}

示例

// warning 警告
throw render.createError({
  type: 'warning',
  message: '填写内容格式错误',
  log: '[extend warn]：Content format is incorrect.',
})

// error 错误
throw render.createError({
  type: 'error',
  title: '提示', // 自定义 title 内容
  message: '程序执行异常，请重试',
  log: '[extend error]：Unexpected error happened.',
})

// log 错误，该类型错误仅会在控制台提示，不会弹出错误提示框，会通过 console.error 输出
throw render.createError({
  type: 'log',
  log: '[extend error]：Unexpected error happened.',
})

// info 错误, 该类型错误仅会在控制台提示，不会弹出错误提示框，会通过 console.info 输出
throw render.createError({
  type: 'info',
  log: '[extend info]：Program is busy now.',
})

// warning 警告
throw render.createError({
  type: 'warning',
  message: '填写内容格式错误',
  log: '[extend warn]：Content format is incorrect.',
})

// error 错误
throw render.createError({
  type: 'error',
  title: '提示', // 自定义 title 内容
  message: '程序执行异常，请重试',
  log: '[extend error]：Unexpected error happened.',
})

// log 错误，该类型错误仅会在控制台提示，不会弹出错误提示框，会通过 console.error 输出
throw render.createError({
  type: 'log',
  log: '[extend error]：Unexpected error happened.',
})

// info 错误, 该类型错误仅会在控制台提示，不会弹出错误提示框，会通过 console.info 输出
throw render.createError({
  type: 'info',
  log: '[extend info]：Program is busy now.',
})

render.scrollTo

表单内容滚动到指定的坐标（垂直方向）。

类型

interface CoRender {
  /**
   * @param top 距离顶部的滚动距离
   */
  scrollTo: (top: number) => void
}

interface CoRender {
  /**
   * @param top 距离顶部的滚动距离
   */
  scrollTo: (top: number) => void
}

示例:

// 表单滚动到纵轴坐标为 100px 位置
render.scrollTo(100)

// 表单滚动到纵轴坐标为 100px 位置
render.scrollTo(100)

render.closeForm

关闭当前打开的表单窗口。

类型

interface CoRender {
  closeForm: () => void
}

interface CoRender {
  closeForm: () => void
}

示例
ts
```
render.closeForm()
```
```
render.closeForm()
```

render.closeFlow

关闭当前打开的流程窗口。

类型

interface CoRender {
  closeFlow: () => void
}

interface CoRender {
  closeFlow: () => void
}

示例
ts
```
render.closeFlow()
```
```
render.closeFlow()
```

render.openFlowDiagram

打开流程图。

类型

interface CoRender {
  openFlowDiagram: (options: DiagramOptions) => void
}

type DiagramOptions = {
  inst: string // 流程实例编号
  task?: number // 任务编号 默认为 0
  closable?: boolean // 是否显示关闭按钮 默认为 true
  fullscreen?: boolean // 是否全屏 默认为 false
  showDiagramRecords?: boolean // 是否显示流程日志 默认为 true
}

interface CoRender {
  openFlowDiagram: (options: DiagramOptions) => void
}

type DiagramOptions = {
  inst: string // 流程实例编号
  task?: number // 任务编号 默认为 0
  closable?: boolean // 是否显示关闭按钮 默认为 true
  fullscreen?: boolean // 是否全屏 默认为 false
  showDiagramRecords?: boolean // 是否显示流程日志 默认为 true
}

示例

render.openFlowDiagram({
  inst: 'XZGL202107060002',
  task: 0,
  closable: false,
  fullscreen: true,
  showDiagramRecords: false,
})

render.openFlowDiagram({
  inst: 'XZGL202107060002',
  task: 0,
  closable: false,
  fullscreen: true,
  showDiagramRecords: false,
})

render.setDiagram

在指定 DOM 位置直接渲染流程图。

参数	描述	是否必须
inst	流程实例编号	是
task	任务编号	否默认为 0
showDiagramRecords	是否显示流程日志	否默认为 true

类型

interface CoRender {
  setDiagram: (options: SetDiagramOptions) => void
}

type DiagramOptions = {
  inst: string // 流程实例编号
  task?: number // 任务编号 默认为 0
  showDiagramRecords?: boolean // 是否显示流程日志 默认为 true
}

interface CoRender {
  setDiagram: (options: SetDiagramOptions) => void
}

type DiagramOptions = {
  inst: string // 流程实例编号
  task?: number // 任务编号 默认为 0
  showDiagramRecords?: boolean // 是否显示流程日志 默认为 true
}

示例

const render = new CoRenderCtor().init(document.querySelector('#root'))

render.setDiagram({
  inst: 'XZGL202107060002',
  task: 0,
  showDiagramRecords: false,
})

const render = new CoRenderCtor().init(document.querySelector('#root'))

render.setDiagram({
  inst: 'XZGL202107060002',
  task: 0,
  showDiagramRecords: false,
})

render.openCommonWord

与 CoRenderCtor.openCommonWord 相同。

render.getComponent

获取表单子组件。

类型

interface CoRender {
  /**
   * @param name 扩展插件名称
   */
  getComponent: (name: string) => Component
}

interface CoRender {
  /**
   * @param name 扩展插件名称
   */
  getComponent: (name: string) => Component
}

详细信息
获取当前表单实例中对应扩展插件实例（只在扩展插件中生效）。
为防止组件结构未来变动可能引发的异常，请使用平台 api 来获取扩展插件，否则若结构变动，原有代码可能将无法正常执行。
插件 api
扩展插件对外暴露 api 方法（二种取其一）：
1. 由 options 写法置于 options.expose 内
2. 写于 setup 中，并且由 ctx.expose 暴露

示例:

const extendComponent = render.getComponent('收发文')

// 调用组件暴露的函数
extendComponent.init()

const extendComponent = render.getComponent('收发文')

// 调用组件暴露的函数
extendComponent.init()

render.addTab

与 CoRenderCtor.addTab 相同。

render.setUnread

设置表单导航上未读信息的数量。

类型

interface CoRender {
  /**
   * @param options 未读信息数量的键值对，key值为表单编号，value值为未读数量
   */
  setUnread: (options: Record<string, number>) => void
}

interface CoRender {
  /**
   * @param options 未读信息数量的键值对，key值为表单编号，value值为未读数量
   */
  setUnread: (options: Record<string, number>) => void
}

示例

// 将表单编号13971设置为20条未读信息。
render.setUnread({ 13971: 20 })

// 将表单编号13971设置为20条未读信息。
render.setUnread({ 13971: 20 })

订阅表单生命周期。

类型

interface CoRender {
  /**
   * @param observe 订阅的生命周期
   * @param callback 回调函数
   */
  subscribe: (
    observe: 'onmount' | 'onload' | 'onBeforeUnmount' | 'onUnmounted',
    callback: () => void
  ) => symbol
}

interface CoRender {
  /**
   * @param observe 订阅的生命周期
   * @param callback 回调函数
   */
  subscribe: (
    observe: 'onmount' | 'onload' | 'onBeforeUnmount' | 'onUnmounted',
    callback: () => void
  ) => symbol
}

详细信息

订阅表单生命周期回调，同时返回订阅号 Symbol。

observe	描述
onmount	表单渲染时 (在 vue mounted 时触发)
onload	表单打开事件完成时 (在表单打开事件执行结束时触发)
onBeforeUnmount	表单卸载前 (在 vue onBeforeUnmount 时触发)
onUnmounted	表单卸载完成时 (在 vue onUnmounted 时触发)

示例

// component A
render.subscribe('onload', () => console.log('组件A，表单初始化完成'))

// component B 支持多次订阅
render.subscribe('onload', () => console.log('组件B，表单初始化完成'))

// component A
render.subscribe('onload', () => console.log('组件A，表单初始化完成'))

// component B 支持多次订阅
render.subscribe('onload', () => console.log('组件B，表单初始化完成'))

render.unsubscribe

取消订阅表单生命周期（使用订阅返回的订阅号）。

类型

interface CoRender {
  /**
   * @param observe 订阅的生命周期
   * @param id 订阅 symbol
   */
  unsubscribe: (
    observe: 'onmount' | 'onload' | 'onBeforeUnmount' | 'onUnmounted',
    id: symbol
  ) => void
}

interface CoRender {
  /**
   * @param observe 订阅的生命周期
   * @param id 订阅 symbol
   */
  unsubscribe: (
    observe: 'onmount' | 'onload' | 'onBeforeUnmount' | 'onUnmounted',
    id: symbol
  ) => void
}

示例

const id = render.subscribe('onload', callback)
const id2 = render.subscribe('onload', callback2)

render.unsubscribe('onload', id)
// onload 时，callback 将不会触发，但 callback2 依旧会被触发

const id = render.subscribe('onload', callback)
const id2 = render.subscribe('onload', callback2)

render.unsubscribe('onload', id)
// onload 时，callback 将不会触发，但 callback2 依旧会被触发

render.addPage

添加历史记录。

实验性功能

addPage 不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

类型

interface CoRender {
  addPage: <T>(cb: () => T) => () => void
}

interface CoRender {
  addPage: <T>(cb: () => T) => () => void
}

详细信息
添加历史记录 history，并在浏览器页面回退 go back 时执行回调函数。
注册函数将返回一个取消回调函数，用于取消订阅的同时回退历史记录。

示例

// 添加历史记录，并绑定历史回退时触发的回调函数
const removePage = addPage(() => {
  console.log('页面返回了')
})
// 取消绑定的回调函数，并将添加的历史回退
removePage()

// 添加历史记录，并绑定历史回退时触发的回调函数
const removePage = addPage(() => {
  console.log('页面返回了')
})
// 取消绑定的回调函数，并将添加的历史回退
removePage()

remove 回调函数常用于手动关闭流程同时取消绑定回调，防止函数重复执行，例如：

this.render.openFlow(/*  */)

// 启动流程后添加历史记录并绑定流程关闭事件
const removePage = addPage(() => this.render.closeFlow())
// 订阅流程关闭时事件，手动回退历史记录并取消回调事件绑定
this.render.onFlowClosed(() => removePage())

this.render.openFlow(/*  */)

// 启动流程后添加历史记录并绑定流程关闭事件
const removePage = addPage(() => this.render.closeFlow())
// 订阅流程关闭时事件，手动回退历史记录并取消回调事件绑定
this.render.onFlowClosed(() => removePage())

这样，打开流程后，程序会自动添加一项历史记录，并为该记录绑定注册的回调事件，并在浏览器回退时执行，这段代码实现了：

浏览器历史回退时，自动关闭已启动的流程
用户主动关闭流程时，自动回退添加的历史记录，并解绑注册的回调事件

render.usePage

增加并订阅路由回退。

实验性功能

usePage 不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

类型

interface CoRender {
  usePage: <T>(cb: () => void) => () => void
}

interface CoRender {
  usePage: <T>(cb: () => void) => () => void
}

详细信息:
平台应用中，在打开弹框或新表单后，部分用户可能习惯利用历史回退（pc），物理返回键（app）的方式来返回到上一个界面或者关闭打开的弹框。但由于平台本身是 SPA 应用，且表单基本是在同一个路由下切换，并不会产生历史路由。
为了适配这种需求我们提供副作用函数帮助增加一条新的历史记录，并在历史回退或 app 返回时执行回调的方法。

示例:

const visible = ref(false)
const usePageCb = ref<() => void>() // 取消订阅函数

const openDialog = () => {
  visible.value = true
  usePageCb.value = render.usePage(closeDialog)
  // 存储返回函数，用于手动取消订阅
  // 回退时将自动执行执行 closeDialog
}

const closeDialog = () => {
  visible.value = false
  usePageCb.value() // 关闭时主动取消订阅
  usePageCb.value = undefined // 取消引用
}

const visible = ref(false)
const usePageCb = ref<() => void>() // 取消订阅函数

const openDialog = () => {
  visible.value = true
  usePageCb.value = render.usePage(closeDialog)
  // 存储返回函数，用于手动取消订阅
  // 回退时将自动执行执行 closeDialog
}

const closeDialog = () => {
  visible.value = false
  usePageCb.value() // 关闭时主动取消订阅
  usePageCb.value = undefined // 取消引用
}

参考： CoRenderIns 指南

CoRender #

render.setCtrlValue #

render.getCtrlValue #

render.getCtrlAuth #

render.getOption #

render.refresh #

render.createError #

render.scrollTo #

render.closeForm #

render.closeFlow #

render.openFlowDiagram #

render.setDiagram #

render.openCommonWord #

render.getComponent #

render.addTab #

render.setUnread #

render.subscribe #

render.unsubscribe #

render.addPage #

render.usePage #