扩展能力

以下为工作台、智慧审批提供的一些扩展能力

一、工作台

1.1 微应用里打开微应用(页签)

const key = Date.now().toString() // 标签唯一判断之一
window.parent.postMessage(
  {
    type: 'active',
    data: {
      id: key,
      code: key,
      name: '微应用页签名称',
      url: `/hello/`,
      inner: true, // 内部打开
      cache: true,
    },
  },
  '*'
)

1.2 从URL跳转工作台，并打开微应用(页签)

const service =
  process.env.NODE_ENV === 'development'
    ? process.env.SERVER_URL
    : location.origin
const workUrl = `${service}/workbench/`
const strObj = JSON.stringify({
  type: 'active',
  data: {
    name: '房源管理',
    url: `/park-space/area`,
    cache: true,
  },
})
const href = workUrl + `?postMessage=${encodeURIComponent(strObj)}`
location.href = href

1.3 微应用里切换全屏(当前页签)

window.parent.postMessage(
  {
    module: 'config',
    data: {
      key: 'fullscreen', // 切换全屏
    },
  },
  '*'
)

二、智慧审批

2.1. 自动返回业务

跳到流程时，URL传参autoBack，url，流程送办后，会自动返回业务

const url = encodeURIComponent(window.location.href)
window.location.href = `/approve/form?flowId=xxxx` + `&url=${url}&autoBack=true`

2.2. 控制流程按钮

可传一些参数，控制按钮是否禁用，如驳回，退回等

• 需在业务代码里，使用$emit

this.$emit('eventMessage', { key: 'RejectButton', value: false })

2.3. 业务内嵌[流程中心]

前提：业务自行使用弹窗类/页面，内嵌访问表单流程

使用要求

• 1.需要接收/发送 message 【否则空白，无法访问】
• 2.页面，嵌入iframe

例子：

2.3.1 接收/发送 message

*如果工程里【mutations】已有 HANDLE_MESSAGE，直接在后面添加。（否则需要写全局的监听【下面的补充例子】）

HANDLE_MESSAGE: (state, event) => {
  // 解析message接收到的数据
  const data = event.data

  if (data.module) {
    switch (data.type) {
      case 'getToken':
        // 获取token
        if (typeof window !== 'undefined') {
          ;[...window.document.querySelectorAll('iframe')].forEach((o) => {
            o.contentWindow.postMessage(
              {
                module: 'auth',
                type: 'getToken',
                // 根据实际，修改获取token的方法
                detail: mutations.GET_TOKEN(state),
              },
              '*'
            )
          })
        }
        break
      case 'getUserInfo':
        // 获取userInfo
        if (typeof window !== 'undefined') {
          ;[...window.document.querySelectorAll('iframe')].forEach((o) => {
            o.contentWindow.postMessage(
              {
                module: 'auth',
                type: 'getUserInfo',
                // 根据实际，修改获取userInfo的方法
                detail: state.user_info,
              },
              '*'
            )
          })
        }
        break
    }
  }
},

补充例子（全局方法）

window.addEventListener('message', this.message)

message(event) {
  const data = event.data
  ......
  // todo
  // 与上面3.1的一致
}


beforeDestroy() {
  window.removeEventListener('message', this.message)
},

例子截图（3.1）：

2.3.2 页面嵌入表单

<iframe :src="approveUrl" frameborder="0" style="height: calc(100vh - 180px); width: 100%;"></iframe>

const service =
  process.env.NODE_ENV === 'development'
    ? process.env.SERVER_URL
    : location.origin
const url = `${service}/approve/form`
const strQuery = '?id=xxxxxxxxxxxxxxxxxx'
this.approveUrl = url + strQuery

实现效果：