Advanced Designer

Appearance

扩展上下文 ​

基于前面的介绍，您已经知道表单设计器本质上是基于高级表单组件实现的。高级表单组件提供了 excontext 属性，用于作为扩展上下文参数，使表单组件能够基于任意外部数据进行联动或调用。在 excontext 中可以放入任意自定义函数，这些函数在组件属性配置为“方法函数”时，可作为参数被调用。

设计上下文结构 ​

通常我们会将全局的用户信息 / 项目信息 / 办件信息等传入 excontext，以便在组件设计和表单预览时进行联动。这些数据应来源于您业务系统的实际能力，通过传入 excontext 给设计器，可以在设计阶段模拟真实运行时的上下文结构，方便开发与调试。

在设计器中，上下文以纯 JSON 形式展示，支持在线编辑 JSON 以随时测试；而在业务侧渲染时，您可以传入对象、方法函数等更丰富的结构，高级表单组件本身对 excontext 属性没有严格的类型限制。

json
{
    baseInfo: {
      itemId: '',
      itemName: '事项名称',
      itemCode: '事项编码',
      regionCode: '所属区划',
      orgCode: '部门区划',
      caseId: '办件ID',
    },
    userInfo: {
      userType: '用户类型',
      userName: '张三',
      userCardNo: '420520198807011201',
      userPhone: '13312341234',
      userEmail: '123456@qq.com',
      userGender: '男',
      userCardType: '10',
      userAddress: '湖北省宜昌市伍家岗区xxx街道',
      companyName: '湖北某某有限公司',
      companyCode: '91430111AA12341234',
      deputyName: '张三',
      deputyCardNo: '420520198807011201',
      companyAddress: '湖北省宜昌市伍家岗区xxx街道',
      companyPhone: '0717-123456',
      companyEmail: '123456@qq.com',
      postCode: '430000'
    }
}

如果您使用以上结构作为设计器中的模拟上下文，请确保业务侧渲染端也向 AeForm 组件传入相同或兼容结构的 excontext，否则可能导致运行时取值或函数调用出错。

通过消息传递给设计器 ​

在将设计器通过 iframe 嵌入业务系统时，可以通过消息机制把扩展上下文传入设计器。

  1. 在 init 消息中，通过 excontext 字段传入 JSON 序列化后的模拟上下文，用于在设计器中联动组件：
js
// 发送 init 事件
iframeRef.value?.contentWindow.postMessage(
  { type: 'init', data: docJson, excontext: JSON.stringify(excontext) },
  '*'
)
  1. 在设计过程中，如需动态更新模拟上下文，可以发送 setExcontext 消息，传入任意结构的对象，对当前上下文进行设置或覆盖：
js
// 发送 setExcontext 事件
iframeRef.value?.contentWindow.postMessage(
  { type: 'setExcontext', data: excontext },
  '*'
)