Co Extension

Appearance

返回顶部
本页内容

CoRenderCtor

init

将渲染器挂载至页面。

  • 类型

    ts
    interface CoRenderCtor {
  init(root: HTMLElement): this
}

    interface CoRenderCtor {
  init(root: HTMLElement): this
}

  • 示例

    ts
    // 创建 CoRender 实例
const render = new CoRenderCtor()

// 将 render 挂载在 id 为 `root` 的元素上
render.init(document.querySelector('#root'))

    // 创建 CoRender 实例
const render = new CoRenderCtor()

// 将 render 挂载在 id 为 `root` 的元素上
render.init(document.querySelector('#root'))

setForm

表单挂载 init 成功后，通过 setForm 打开表单。

  • 类型

    ts
    interface CoRenderCtor {
  setForm: (options: OptionProps) => this
}

type OptionProps = (
  | {
      name: string
    }
  | {
      code: number
    }
) & {
  /**
   * 表单所在业务编号
   */
  busi: number
  /**
   * 表单名称 （可用 code 替代）
   */
  name?: string
  /**
   * 表单编号 （可用 name 替代）
   */
  code?: number | string
  /**
   * 用于填充到表单控件上的数据
   */
  parm?: { [key: string]: unknown } | string
  /**
   * 状态参数，用于控制权限
   */
  stat?: string
  /**
   * 表单主键参数
   */
  pkey?: string
  /**
   * 默认值主键参数
   */
  dkey?: string
  /**
   * 表单大小
   */
  size?: string
}

    interface CoRenderCtor {
  setForm: (options: OptionProps) => this
}

type OptionProps = (
  | {
      name: string
    }
  | {
      code: number
    }
) & {
  /**
   * 表单所在业务编号
   */
  busi: number
  /**
   * 表单名称 （可用 code 替代）
   */
  name?: string
  /**
   * 表单编号 （可用 name 替代）
   */
  code?: number | string
  /**
   * 用于填充到表单控件上的数据
   */
  parm?: { [key: string]: unknown } | string
  /**
   * 状态参数，用于控制权限
   */
  stat?: string
  /**
   * 表单主键参数
   */
  pkey?: string
  /**
   * 默认值主键参数
   */
  dkey?: string
  /**
   * 表单大小
   */
  size?: string
}

  • 详细信息

    各参数中，busi 为必须，name 及 code 二选一传入即可。

    stat 为各项组合拼接而成的字符串，具体格式为：

    [BUSI].[ROLE].[USER].[STAT].[TACH].[FLOW].[FORM].[PREV]

    它们代表了

    1. BUSI 业务编号
    2. ROLE 角色编号
    3. USER 用户编号
    4. STAT 业务状态（与流程状态编号不同）
    5. TACH 环节编号
    6. FLOW 流程编号
    7. FORM 表单编号（当前所在表单）
    8. PREV 父表单编号（由哪一个表单打开）

    如果你需要控制流程中表单权限，你应该拿到当前流程状态并根据上述格式进行拼接。

    例：我们先通过 getOption 或其他方式获取到流程状态 0.1043.1.1025.3.110004，之后你需要在该流程 110004 的表单 11001 中打开表单 21001，那么你需要拼接成新的状态：0.1043.1.1025.3.110004.21001.11001

示例

ts
// render 内部除了获取值方法外，其余方法均会返回当前实例，支持链式调用
new CoRenderCtor().init(document.querySelector('#root')).setForm({
  name: '收件箱',
  busi: 0,
  stat: '0.1043.1.1025.3.110004.11001.21001',
})

// render 内部除了获取值方法外，其余方法均会返回当前实例，支持链式调用
new CoRenderCtor().init(document.querySelector('#root')).setForm({
  name: '收件箱',
  busi: 0,
  stat: '0.1043.1.1025.3.110004.11001.21001',
})

setDisabled

表单挂载 init 成功后，通过 setDisabled 来设置表单可用性。

  • 类型

    ts
    interface CoRenderCtor {
  setDisabled: (disabled: boolean) => this
}

    interface CoRenderCtor {
  setDisabled: (disabled: boolean) => this
}

  • 示例

    ts
    new CoRenderCtor().init(document.querySelector('#root')).setDisabled(true)

    new CoRenderCtor().init(document.querySelector('#root')).setDisabled(true)

    可用时点

    setDisabled 只可适用于 render.init 生命周期后，否则设置可能不生效。

openForm

表单挂载 init 成功后, 通过 openForm 来打开相应表单窗口。

  • 类型

    ts
    interface CoRenderCtor {
  openForm: (option: FormOption) => this
}

type FormOption = {
  code: number
  size: string
  dkey: string
  pkey: string
  parm: string
  name: string
  busi: number
}

    interface CoRenderCtor {
  openForm: (option: FormOption) => this
}

type FormOption = {
  code: number
  size: string
  dkey: string
  pkey: string
  parm: string
  name: string
  busi: number
}

  • 详细信息

    需要参数与 表单参数 相同，用于获取窗口内部表单。

    size 为窗口大小， 800,600 代表窗口初始窗口为 宽 800px, 高 600px, 如果 size 属性缺失，平台将赋予表单窗口默认宽高。

  • 示例

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

render.openForm({
  name: '收件箱',
  busi: 0,
  size: '800,600',
})

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

render.openForm({
  name: '收件箱',
  busi: 0,
  size: '800,600',
})

onFormClosed

注册表单窗口的关闭回调事件。

  • 类型

    ts
    interface CoRenderCtor {
  /**
   * @param callback 注册回调，并在执行时传入当前表单实例
   */
  onFormClosed: (callback: (render: CoRender) => void) => this
}

    interface CoRenderCtor {
  /**
   * @param callback 注册回调，并在执行时传入当前表单实例
   */
  onFormClosed: (callback: (render: CoRender) => void) => this
}

  • 示例

    ts
    CoRenderCtor.onFormClosed((render) => {
  // run your callback code
})

    CoRenderCtor.onFormClosed((render) => {
  // run your callback code
})

openFlow

表单挂载init成功后, 通过 openFlow 来打开相应流程窗口, 用于发起流程或打开已发起流程。

  • 类型

    ts
    interface CoRenderCtor {
  openFlow: (option: FlowOption) => Promise<boolean>
}

type FlowOption = {
  inst: string // 流程实例编号
  task?: string // 任务编号 默认为 0
  flow: string // 流程编号
}

    interface CoRenderCtor {
  openFlow: (option: FlowOption) => Promise<boolean>
}

type FlowOption = {
  inst: string // 流程实例编号
  task?: string // 任务编号 默认为 0
  flow: string // 流程编号
}

  • 详细信息

    我们注意到 openFlow 最终返回一个包裹在 Promise 的布尔值，它代表了启动的流程最终发送与否，如果打开的流程最终被发送、退回等那么接收到的返回值则为 true，其他情况则为 false。

    ts
    // 定义变量接收返回值
const result = await render.openFlow({
  /* 参数 */
})

if (result) {
  // 该件已被成功发送，通常执行从列表中移除的操作
} else {
  // 未被发送...
}

    // 定义变量接收返回值
const result = await render.openFlow({
  /* 参数 */
})

if (result) {
  // 该件已被成功发送，通常执行从列表中移除的操作
} else {
  // 未被发送...
}

  • 示例

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

render.openFlow({
  inst: '2020113010',
  task: '1',
  flow: '20010',
})

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

render.openFlow({
  inst: '2020113010',
  task: '1',
  flow: '20010',
})

viewFlow

打开只能浏览而不能操作的流程 (readonly-flow)。

  • 类型

    ts
    interface CoRenderCtor {
  viewFlow: (option: FlowOption) => void
}

type FlowOption = {
  inst: string // 流程实例编号
  task?: string // 任务编号 默认为 0
  flow: string // 流程编号
}

    interface CoRenderCtor {
  viewFlow: (option: FlowOption) => void
}

type FlowOption = {
  inst: string // 流程实例编号
  task?: string // 任务编号 默认为 0
  flow: string // 流程编号
}

  • 示例

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

// 参数与打开流程 openFlow 一致
render.viewFlow({
  form: '',
  inst: 'XZGL202107060002', // 流程实例编号
  task: '0', // 任务编号，默认传 '0'
  flow: '',
})

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

// 参数与打开流程 openFlow 一致
render.viewFlow({
  form: '',
  inst: 'XZGL202107060002', // 流程实例编号
  task: '0', // 任务编号，默认传 '0'
  flow: '',
})

onFlowClosed

注册流程窗口的关闭回调事件（同时适用于只读与可操作流程）。

  • 类型

    ts
    interface CoRenderCtor {
  onFlowClosed: (callback: (render: CoRender) => void) => void
}

    interface CoRenderCtor {
  onFlowClosed: (callback: (render: CoRender) => void) => void
}

  • 示例

    ts
    CoRenderCtor.onFlowClosed((render) => {
  // run your callback code
})

    CoRenderCtor.onFlowClosed((render) => {
  // run your callback code
})

addTab

新增标签页并打开。

  • 类型

    ts
    interface CoRender {
  addTab: (options: TabOptions) => void
}

type TabOptions = {
  id: number // 标签编号
  text: string // 标签名称
  icon?: string // 标签图标
  form: string // 表单名
}

    interface CoRender {
  addTab: (options: TabOptions) => void
}

type TabOptions = {
  id: number // 标签编号
  text: string // 标签名称
  icon?: string // 标签图标
  form: string // 表单名
}

  • 详细信息

    若已打开标签页中已存在该 id，当前操作将不会执行，因为该标签已被打开。

    标签 id 最优应与导航栏内 id 一致，平台会将菜单中 id 与选中标签 id 一致的导航高亮。

  • 示例

    ts
    render.addTab({
  id: 10010,
  text: '新增标签页',
  icon: '/images/tab.png',
  form: '收件箱',
})

    render.addTab({
  id: 10010,
  text: '新增标签页',
  icon: '/images/tab.png',
  form: '收件箱',
})

openLayout

在组件内手动切换 平台布局。

  • 类型

    ts
    interface CoRenderCtor {
  /**
   * @param name   布局名
   * @param module 模块名
   * @param nav    导航名
   */
  openLayout: (name: string, module?: string, nav?: string) => Promise<void>
}

    interface CoRenderCtor {
  /**
   * @param name   布局名
   * @param module 模块名
   * @param nav    导航名
   */
  openLayout: (name: string, module?: string, nav?: string) => Promise<void>
}

  • 示例

    ts
    // 切换到名为 layoutA 的布局，并且菜单加载全部导航。
CoRenderCtor.openLayout('layoutA')

    // 切换到名为 layoutA 的布局，并且菜单加载全部导航。
CoRenderCtor.openLayout('layoutA')

    如果需要在切换到指定布局后，同时加载某模块（非全部导航），则需要配置 module 参数 。

    ts
    // 切换到名为 layoutB 的布局，并且菜单加载业务办理模块。
CoRenderCtor.openLayout('layoutB', '业务办理')

    // 切换到名为 layoutB 的布局，并且菜单加载业务办理模块。
CoRenderCtor.openLayout('layoutB', '业务办理')

    平台会在加载全部或指定模块时默认打开首个能打开的导航当作默认导航，如果需要指定默认导航则配置 nav 参数。

    ts
    // 切换到名为 layoutC 的布局，并且菜单加载业务办理模块的同时打开收件箱导航。
CoRenderCtor.openLayout('layoutC', '业务办理', '收件箱')

    // 切换到名为 layoutC 的布局，并且菜单加载业务办理模块的同时打开收件箱导航。
CoRenderCtor.openLayout('layoutC', '业务办理', '收件箱')

    导航重名

    因为平台允许导航名称重复，在使用 nav 时若目标存在重名则将打开排序靠前的导航。

openCommonWord

打开/关闭常用词窗口。

  • 类型

    ts
    interface CoRenderCtor {
  openCommonWord: (options: CommonWordOptions) => void
}

type CommonWordOptions = {
  x: number // 水平坐标
  y: number // 垂直坐标
  showCommonWord: boolean // 打开/关闭常用词列表
  callback: (word: string) => void // 选中回调, word 为当前选中常用词
}

    interface CoRenderCtor {
  openCommonWord: (options: CommonWordOptions) => void
}

type CommonWordOptions = {
  x: number // 水平坐标
  y: number // 垂直坐标
  showCommonWord: boolean // 打开/关闭常用词列表
  callback: (word: string) => void // 选中回调, word 为当前选中常用词
}

  • 示例

    ts
    render.openCommonWord({
  x: event.clientX,
  y: event.clientY,
  showCommonWord: true,
  callback: (word) => {
    console.log(`选择了常用词 ${word}.`)
  },
})

    render.openCommonWord({
  x: event.clientX,
  y: event.clientY,
  showCommonWord: true,
  callback: (word) => {
    console.log(`选择了常用词 ${word}.`)
  },
})

参考： CoRenderCtor 指南

Powerd by Vitepress.

Copyright © 2023-present KQCO.