自定义iframe页面对接说明

一、链接说明

1.1 应用场景

可将工单数据作为参数透传给iframe页面，支持iframe页面基于传递参数产生相应的交互。工单默认支持使用message事件传参，可通过配置决定是否开启url传参。

1.2 iframe链接说明

链接通用格式：
http://www.xxx.cn?查询参数key=查询参数value&timestamp=xxx&sign=xxx
链接说明：
1、url上的参数值均进行了urlEncode编码；
2、timestamp默认存在，事件通信时参数中的timestamp以url链接上的timestamp为准；
3、开启鉴权加密情况下，链接上才会携带 sign=xxx 参数，其中 xxx 是经过md5(token+timestamp) 加密后的值
4、如果未开启url传参，或者开启url传参，但是 查询参数value 均为空，则不会携带 查询参数key=查询参数value

1.3 注意事项

工单向iframe推送的参数不会进行格式校验，但是iframe向工单推送参数回填的时候，工单会校验回填参数值的格式（具体参考返回变量部分），如果回填值不符合工单表单的校验规则，则工单不会回填，并且还会将符合格式的表单值推送给iframe。

二、message事件传参

自定义iframe默认支持message事件传参，

• iframe页面初始化完毕，会主动给工单推送一个 CUSTOM_PAGE_READY_TO_GET_DATA 事件，请求接受参数，工单收到请求后，会将 工单数据通过事件 SEND_DATA_TO_CUSTOM_PAGE 推送给 iframe页面；
• 工单数据发生变更时，也会通过 SEND_DATA_TO_CUSTOM_PAGE 事件推送给iframe页面；
• iframe页面可通过 CUSTOM_PAGE_SET_FORM_VALUE 事件将参数推送给工单。

2.1 iframe向工单推送页面初始化完毕事件，准备接受来自工单的事件传参-----CUSTOM_PAGE_READY_TO_GET_DATA

// iframe 向工单推送事件
window.parent.postMessage({
  {
          event: 'CUSTOM_PAGE_READY_TO_GET_DATA',
          data: {
            source: 'CUSTOM_PAGE',
            eventName: 'CUSTOM_PAGE_READY_TO_GET_DATA',
            operateParams: {
              timestamp: url链接上的timestamp
            }
          }
        }
}, '*')

2.2 工单向 iframe 推送工单参数 ----SEND_DATA_TO_CUSTOM_PAGE

// 工单向iframe推送事件
iframe.contentWindow.postMessage(
    {
        event: 'SEND_DATA_TO_CUSTOM_PAGE',
        data: {
            source: 'TICKET',
            eventName: 'SEND_DATA_TO_CUSTOM_PAGE',
            operateParams: {
                initData: [
                     [配置的名称1]:值1，
                     [配置的名称2]:值2
                ],
                timestamp: url链接上的timestamp,
            },
        },
    },
    '*',
);
// iframe 通过 source  eventName  timestamp 判断获取来自工单推送的参数

2.3 iframe向工单推送参数---CUSTOM_PAGE_SET_FORM_VALUE

// iframe 向工单推送事件
window.parent.postMessage(
  {
    event: "CUSTOM_PAGE_SET_FORM_VALUE",
    data: {
      source: "CUSTOM_PAGE",
      eventName: "CUSTOM_PAGE_SET_FORM_VALUE",
      operateParams: {
        formValue:[
         [配置的名称1]:值1，
         [配置的名称2]:值2
       ],
        timestamp: this.timestamp,
      },
    },
  },
  "*"
);

返回参数为“null”时（即字符串形式的null），表示返回变量将表单对应值置空。

三、入参变量说明

四、返回变量说明

仅工单自定义表单字段支持回传，支持字段类型说明

单行文本：XXX
数值：/^-?\d+$/
电话： 5到11位电话号码  或者  (+区号)5到11位电话号码 // (多个情况下通过，进行拼接)
邮箱： xxx@xx.xx
多行文本：XXX
单选框： 单选内容
复选框： 广州市,超长,复选3,复选2
下拉列表：下拉内容
自定义级联：级联1,级联2
地区级联： 辽宁省,本溪市,明山区
日期：2014-09-12
日期时间：2014-09-12 12:12:12
时间：12:12:12
自增表格： {"head":[:"yuxr单行1","yuxr数值","yuxr电话"],"data":[{"yuxr单行1":"223","yuxr数值":345,"yuxr电话":"34535"}]}
外部扩展列表检索：nameXX_TinetTicket_值对应的id
外部扩展下拉列表：同步值的格式：name值XX_TinetTicket_值对应的id  同步范围的格式： [{"name":xxx, "id": xxx}, {"name": xxx,"id": xxx}]