chore: compose workflow microApp

src/components/Modeler/flowable-chart/index.vue

@@ -15,7 +15,9 @@ export default {
   name: 'FlowableChart',
   data () {
     return {
-      navigatedViewer: undefined
+      navigatedViewer: undefined,
+      // todo: 目前配合微应用乾坤使用兼容，重构vue3删除
+      createMessage: this.$useMessage.createMessage,
     }
   },
   mounted () {
@@ -81,7 +83,7 @@ export default {
       }).then(result => {
         this.navigatedViewer.importXML(result.xml)
       }).catch(() => {
-        this.$message.error('导入模型出错,请确认该模型符合Bpmn2.0规范')
+        this.createMessage.error('导入模型出错,请确认该模型符合Bpmn2.0规范')
       })
     }
   }

src/components/Modeler/flowable-designer/index.vue

@@ -56,7 +56,15 @@ export default {
       bpmnModeler: undefined,
       canRedo: false,
       canUndo: false,
-      defaultZoom: 1
+      defaultZoom: 1,
+      // todo: 目前配合微应用乾坤使用兼容，重构vue3删除
+      createMessage: this.$useMessage.createMessage,
+      notification: this.$useMessage.notification,
+      createConfirm: this.$useMessage.createConfirm,
+      createSuccessModal: this.$useMessage.createSuccessModal,
+      createErrorModal: this.$useMessage.createErrorModal,
+      createWarningModal: this.$useMessage.createWarningModal,
+      createInfoModal: this.$useMessage.createInfoModal
     }
   },
   mounted () {
@@ -106,7 +114,7 @@ export default {
     },
     /** 导入bpmnXml文件 */
     importDiagram (xml) {
-      this.bpmnModeler.importXML(xml).catch(() => this.$message.error('打开模型出错,请确认该模型符合Bpmn2.0规范'))
+      this.bpmnModeler.importXML(xml).catch(() => this.createMessage.error('打开模型出错,请确认该模型符合Bpmn2.0规范'))
     },
     /** 创建新的流程图 */
     restart () {
@@ -248,7 +256,7 @@ export default {
             value: bpmnElement.formReadOnly
           })
         }
-        if (conditionType != undefined) {
+        if (conditionType !== undefined) {
           options.activityExtensionProperty.push({
             key: 'conditionType',
             processDefId: options.process.id,
@@ -259,11 +267,11 @@ export default {
         // ---------------扩展活动属性数据存储----------------
         const values = lodash.get(extensionElements, 'values', [])
         // ------------------用户分配人---------------------
-        const assignee = values.filter(element => element.$type == 'flowable:Assignee')
+        const assignee = values.filter(element => element.$type === 'flowable:Assignee')
         // ------------------常用按钮-----------------------
-        const button = values.filter(element => element.$type == 'flowable:Button')
+        const button = values.filter(element => element.$type === 'flowable:Button')
         // ------------------流转条件-----------------------
-        const condition = values.filter(element => element.$type == 'flowable:Condition')
+        const condition = values.filter(element => element.$type === 'flowable:Condition')
         if ((assignee.length + button.length + condition.length) > 0) {
           options.activityExtensionData.push({
             activityDefId: bpmnElement.id,
@@ -277,19 +285,19 @@ export default {
         const formKey = lodash.get(bpmnElement, 'formKey')
         switch (bpmnType) {
           case 'bpmn:StartEvent':
-            if (validateNull(formKey) && bpmnElementParent.$type != 'bpmn:SubProcess') {
-              options.validateErrorData.push(`<p>节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。</p>`)
+            if (validateNull(formKey) && bpmnElementParent.$type !== 'bpmn:SubProcess') {
+              options.validateErrorData.push(<p>节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。</p>)
             }
             break
           case 'bpmn:UserTask':
             if (!assignee.length) {
-              options.validateErrorData.push(`<p>节点【${bpmnElement.name || bpmnElement.id}】没有指定办理人。</p>`)
+              options.validateErrorData.push(<p>节点【${bpmnElement.name || bpmnElement.id}】没有指定办理人。</p>)
             }
             if (!button.length) {
-              options.validateErrorData.push(`<p>节点【${bpmnElement.name || bpmnElement.id}】没有配置按钮。</p>`)
+              options.validateErrorData.push(<p>节点【${bpmnElement.name || bpmnElement.id}】没有配置按钮。</p>)
             }
             if (validateNull(formKey)) {
-              options.validateErrorData.push(`<p>节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。</p>`)
+              options.validateErrorData.push(<p>节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。</p>)
             }
             break
         }
@@ -319,7 +327,7 @@ export default {
             return reject('检测到主体画布流程名称为空,请检查,这个为必填项!')
           }
           // 检测协助池中的一些非空校验
-          const collaboration = rootElements.find(item => item.$type == 'bpmn:Collaboration')
+          const collaboration = rootElements.find(item => item.$type === 'bpmn:Collaboration')
           if (collaboration) {
             const participants = lodash.get(collaboration, 'participants', [])
             for (let i = 0; i < participants.length; ++i) {
@@ -327,12 +335,12 @@ export default {
               const process = lodash.get(participant, 'processRef', {})
               // 检测池中的泳道不能为空
               const lanes = lodash.get(process, 'laneSets[0].lanes', [])
-              if (lanes.length == 0) {
+              if (lanes.length === 0) {
                 return reject(`池子【${participant.name || participant.id}】没有配置泳道,请检测!`)
               }
               // 检测池中的bpmn元素不能为空
               const flowElements = lodash.get(process, 'flowElements', [])
-              if (flowElements.length == 0) {
+              if (flowElements.length === 0) {
                 return reject(`池子【${participant.name || participant.id}】没有配置bpmn元素,请设计bpmn流程!`)
               }
             }
@@ -340,7 +348,7 @@ export default {
           } else {
             const process = lodash.get(rootElements, '[0]', {})
             const flowElements = lodash.get(process, 'flowElements', [])
-            if (flowElements.length == 0) {
+            if (flowElements.length === 0) {
               return reject(`流程【${process.name || process.id}】没有配置bpmn元素,请设计bpmn流程!`)
             }
           }
@@ -351,7 +359,7 @@ export default {
       }).then(({ rootElements, canvasProcess }) => {
         // todo:第二层处理流程模型新增
         const processRelationIds = []
-        const collaboration = rootElements.find(item => item.$type == 'bpmn:Collaboration')
+        const collaboration = rootElements.find(item => item.$type === 'bpmn:Collaboration')
         if (collaboration) {
           const participants = lodash.get(collaboration, 'participants', [])
           for (let i = 0; i < participants.length; ++i) {
@@ -364,7 +372,7 @@ export default {
           processRelationIds.push(String(process.id).replaceAll(',', ''))
         }
         return new Promise((resolve, reject) => {
-          if (this.modelData.id == undefined) {
+          if (this.modelData.id === undefined) {
             addModel({
               key: processRelationIds.join(),
               name: canvasProcess.name,
@@ -403,7 +411,7 @@ export default {
           const activityExtensionData = []
           let validateErrorData = []
           // 查找并存储扩展属性跟扩展数据,方便后台拿取做对应功能需求
-          const collaboration = rootElements.find(item => item.$type == 'bpmn:Collaboration')
+          const collaboration = rootElements.find(item => item.$type === 'bpmn:Collaboration')
           // 处理协助池
           if (collaboration) {
             const participants = lodash.get(collaboration, 'participants', [])
@@ -420,8 +428,7 @@ export default {
                 validateErrorData: tempValidateErrorData
               })
               if (tempValidateErrorData.length > 0) {
-                validateErrorData = validateErrorData.concat(
-                  [`<p>池子【${participant.name || participant.id}】:</p>`], tempValidateErrorData)
+                validateErrorData.push((<p>池子【${participant.name || participant.id}】:</p>), tempValidateErrorData)
               }
             }
           // 处理正常单流程
@@ -438,7 +445,7 @@ export default {
             })
             if (tempValidateErrorData.length > 0) {
               validateErrorData = validateErrorData.concat(
-                [`<p>流程【${process.name || process.id}】:</p>`], tempValidateErrorData)
+                [<p>流程【${process.name || process.id}】:</p>], tempValidateErrorData)
             }
           }
           chain.push(validateErrorData)
@@ -450,17 +457,15 @@ export default {
           return Promise.reject('保存流程模型失败!')
         })
       }).then(results => {
-        results[0].length && this.$notify({
-          title: '提示',
-          message: results[0].join(''),
-          type: 'warning',
-          dangerouslyUseHTMLString: true
+        results[0].length && this.notification['warning']({
+          message: '提示',
+          description: results[0]
         })
-        this.$message.success(results[1].data || '保存流程模型成功!')
+        this.createMessage.success(results[1].data || '保存流程模型成功!')
         this.$emit('refresh')
         this.loading = false
       }).catch(err => {
-        this.$message.error(err)
+        this.createMessage.error(err)
         this.loading = false
       })
     }

src/components/Modeler/flowable-preview/index.vue

@@ -15,7 +15,9 @@ export default {
   name: 'FlowablePreview',
   data () {
     return {
-      viewer: undefined
+      viewer: undefined,
+      // todo: 目前配合微应用乾坤使用兼容，重构vue3删除
+      createMessage: this.$useMessage.createMessage,
     }
   },
   mounted () {
@@ -78,7 +80,7 @@ export default {
       }).then(result => {
         this.viewer.importXML(result.xml)
       }).catch(() => {
-        this.$message.error('导入模型出错,请确认该模型符合Bpmn2.0规范')
+        this.createMessage.error('导入模型出错,请确认该模型符合Bpmn2.0规范')
       })
     }
   }

src/components/Panel/Popups/ButtonAddTemplate/index.vue

@@ -3,7 +3,6 @@
     <el-dialog ref="buttonAddTemplateDialog"
                v-bind="$attrs"
                top="3vh"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"

src/components/Panel/Popups/ButtonListTemplate/index.vue

@@ -3,7 +3,6 @@
     <el-dialog ref="buttonListTemplateDialog"
                v-bind="$attrs"
                top="3vh"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"

src/components/Panel/Popups/FormSelectTemplate/index.vue

@@ -4,7 +4,6 @@
                v-bind="$attrs"
                top="22vh"
                width="calc(100vh - 150px)"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"
@@ -45,7 +44,9 @@ export default {
   },
   data () {
     return {
-      formKey: this.value
+      formKey: this.value,
+      // todo: 目前配合微应用乾坤使用兼容，重构vue3删除
+      createMessage: this.$useMessage.createMessage,
     }
   },
   watch: {
@@ -71,7 +72,7 @@ export default {
     },
     save () {
       const form = lodash.find(this.options, item => this.getFormDefinitionJson(item).id === this.formKey)
-      if (lodash.isEmpty(form)) this.$message.error('检查当前未选择数据,请选择')
+      if (lodash.isEmpty(form)) this.createMessage.error('检查当前未选择数据,请选择')
       else {
         this.$emit('save', form)
         this.closeWindow()

src/components/Panel/Popups/ListenerAddTemplate/index.vue

@@ -4,7 +4,6 @@
                v-bind="$attrs"
                top="16vh"
                width="calc(100vh - 80px)"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"

src/components/Panel/Popups/ListenerListTemplate/index.vue

@@ -4,7 +4,6 @@
                v-bind="$attrs"
                top="3vh"
                width="calc(100vh + 200px)"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"

src/components/Panel/Popups/ProcessExpressionSelectTemplate/index.vue

@@ -3,7 +3,6 @@
     <el-dialog ref="processExpressionSelectDialog"
                v-bind="$attrs"
                top="3vh"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"
@@ -71,7 +70,9 @@ export default {
       expressionList: [],
       queryParams: {},
       total: 0,
-      currentRow: {}
+      currentRow: {},
+      // todo: 目前配合微应用乾坤使用兼容，重构vue3删除
+      createMessage: this.$useMessage.createMessage,
     }
   },
   methods: {
@@ -107,7 +108,7 @@ export default {
     },
     /** 处理保存动作 */
     save () {
-      if (lodash.isEmpty(this.currentRow)) this.$message.error('检查当前未选择数据,请选择一行')
+      if (lodash.isEmpty(this.currentRow)) this.createMessage.error('检查当前未选择数据,请选择一行')
       else {
         this.$emit('save', lodash.get(this.currentRow, 'expression', ''))
         this.closeWindow()

src/components/Panel/Popups/RoleSelectTemplate/index.vue

@@ -4,7 +4,6 @@
                v-bind="$attrs"
                top="3vh"
                width="calc(100vh + 20px)"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"

src/components/Panel/Popups/StaffAssignmentsTemplate/index.vue

@@ -3,7 +3,6 @@
     <el-dialog ref="staffAssignmentsTemplateDialog"
                v-bind="$attrs"
                width="calc(100vh + 300px)"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                top="3vh"

src/components/Panel/Popups/UserSelectTemplate/index.vue

@@ -4,7 +4,6 @@
                v-bind="$attrs"
                top="3vh"
                width="calc(100vh + 300px)"
-               :append-to-body="true"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                v-on="$listeners"

src/components/TreeSelect/index.vue

@@ -119,7 +119,9 @@ export default {
       // 树形List集合数据
       treeList: [],
       // 树形列表数据
-      valueData: this.data
+      valueData: this.data,
+      // todo: 目前配合微应用乾坤使用兼容，重构vue3删除
+      createMessage: this.$useMessage.createMessage,
     }
   },
   computed: {
@@ -255,11 +257,11 @@ export default {
         return
       }
       if (node['disabled']) {
-        this.$message.warning('节点（' + node[this.config.label] + '）被禁止选择，请重新选择。')
+        this.createMessage.warning('节点（' + node[this.config.label] + '）被禁止选择，请重新选择。')
         return
       }
       if (this.isOnlySelectLeaf && node[this.config.children].length > 0) {
-        this.$message.warning('不能选择根节点（' + node[this.config.label] + '）请重新选择。')
+        this.createMessage.warning('不能选择根节点（' + node[this.config.label] + '）请重新选择。')
         return
       }
       this.valueTitle = node[this.config.label]

src/main.js

@@ -19,11 +19,10 @@ function render(props = {}) {
   }).$mount(container ? container.querySelector('#app') : '#app')
 }
 
-// fixme: 开发阶段使用,生产环境可以注释掉
-if (!window.__POWERED_BY_QIANKUN__) {
-  window.$glob.ticket = '5607c923-5cfe-4950-b375-b72a28a1d5b8'
+// fixme: 开发阶段使用,生产环境可以注释掉(目前已经完全适配微应用,必须在微应用环境下运行)
+/*if (!window.__POWERED_BY_QIANKUN__) {
   bootstrap().then(() => render())
-}
+}*/
 
 export async function bootstrap() {
   setupStore(Vue)
@@ -36,6 +35,7 @@ export async function mount(props) {
   Vue.prototype.$qiankunProps = props
   Vue.prototype.$setGlobalState = setGlState(props)
   Vue.prototype.$useMessage = microData.useMessage
+  window.$glob.ticket = microData.token
   render(props)
   const microAppStore = useMicroAppStoreWithOut()
   microAppStore.setMainData(microData)

src/utils/request.js

@@ -1,9 +1,9 @@
 import axios from 'axios'
 import qs from 'qs'
 import { checkUrl } from './index'
-
-// todo: 开发测试下使用
-import {  Message } from 'element-ui'
+import { useMicroAppStoreWithOut } from '@/store/modules/microApp'
+const microAppStore = useMicroAppStoreWithOut()
+const createMessage = microAppStore.getMainData.$useMessage?.createMessage
 window.$glob = {
   url: process.env.VUE_APP_BASE_API,
   ticket: '',
@@ -47,10 +47,7 @@ axios.interceptors.request.use(config => {
 axios.interceptors.response.use(config => {
   const message = config.data.msg
   if (config.data?.code !== 200) {
-    Message({
-      message: message,
-      type: 'error'
-    })
+    createMessage.error(message)
     return Promise.reject(new Error(message))
   }
   return config.data
@@ -65,10 +62,7 @@ axios.interceptors.response.use(config => {
   else if (msg.includes("Request failed with status code")) {
     msg = "系统接口" + msg.substr(msg.length - 3) + "异常";
   }
-  Message({
-    message: msg,
-    type: 'error'
-  })
+  createMessage.error(msg)
   return Promise.reject(new Error(error))
 })
 

src/views/Chart.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="app">
+    <flowable-chart :options="chat" style="height:100vh"/>
+  </div>
+</template>
+
+<script>
+import request from '@utils/request'
+export default {
+  name: 'MicroChart',
+  data () {
+    return {
+      chat: {}
+    }
+  },
+  mounted () {
+    this.test()
+  },
+  methods: {
+    test () {
+      /*request({
+        url: '/workflow_proxy/workflow/process/getFlowChart/Process_FtFEFSfa:4:7832a2d9-7313-11ec-8a3b-00ff08753f51',
+        method: 'get'
+      }).then(({ data }) => {
+        this.chat = { bpmnXml: data }
+      })*/
+    }
+  }
+}
+</script>

src/views/Design.vue

@@ -1,31 +1,29 @@
 <template>
-  <div id="app">
-    <flowable-designer style="height:100vh"/>
-    <!--<flowable-chart :options="chat" style="height:100vh"/>-->
-    <!--<flowable-preview :options="chat" style="height:100vh"/>-->
-  </div>
+  <flowable-designer ref="flowableDesigner"
+                     style="height:100vh"
+                     @refresh="handleSubmit"
+  />
 </template>
 
 <script>
-import request from '@utils/request'
+import { WORKFLOW_DESIGN_APP_PROPS_KEY } from '@/constants'
+import { merge } from "lodash-es";
 export default {
-  name: 'App',
+  name: 'MicroDesign',
+  props: { [WORKFLOW_DESIGN_APP_PROPS_KEY]: {} },
   data () {
     return {
-      chat: {}
+      innerProps: this[WORKFLOW_DESIGN_APP_PROPS_KEY]
     }
   },
-  mounted () {
-    this.test()
-  },
   methods: {
-    test () {
-      request({
-        url: '/workflow/process/getFlowChart/Process_FtFEFSfa:4:7832a2d9-7313-11ec-8a3b-00ff08753f51',
-        method: 'get'
-      }).then(({ data }) => {
-        this.chat = { bpmnXml: data }
-      })
+    handleSubmit() {
+      if (typeof this.innerProps.workflowSubmitSuccess === 'function') {
+        return this.innerProps.workflowSubmitSuccess()
+      }
+    },
+    setProps(props) {
+      merge(this.innerProps ,props)
     }
   }
 }

src/views/Preview.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="app">
+    <flowable-preview :options="chat" style="height:100vh"/>
+  </div>
+</template>
+
+<script>
+import request from '@utils/request'
+export default {
+  name: 'MicroPreview',
+  data () {
+    return {
+      chat: {}
+    }
+  },
+  mounted () {
+    this.test()
+  },
+  methods: {
+    test () {
+      /*request({
+        url: '/workflow_proxy/workflow/process/getFlowChart/Process_FtFEFSfa:4:7832a2d9-7313-11ec-8a3b-00ff08753f51',
+        method: 'get'
+      }).then(({ data }) => {
+        this.chat = { bpmnXml: data }
+      })*/
+    }
+  }
+}
+</script>