From 1e1bfb44fb8801d779b7974fdf2bb0e171c650c4 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Tue, 26 Sep 2023 15:47:18 +0800
Subject: [PATCH] chore: compose workflow microApp
---
.../Modeler/flowable-chart/index.vue | 6 +-
.../Modeler/flowable-designer/index.vue | 61 ++++++++++---------
.../Modeler/flowable-preview/index.vue | 6 +-
.../Panel/Popups/ButtonAddTemplate/index.vue | 1 -
.../Panel/Popups/ButtonListTemplate/index.vue | 1 -
.../Panel/Popups/FormSelectTemplate/index.vue | 7 ++-
.../Popups/ListenerAddTemplate/index.vue | 1 -
.../Popups/ListenerListTemplate/index.vue | 1 -
.../ProcessExpressionSelectTemplate/index.vue | 7 ++-
.../Panel/Popups/RoleSelectTemplate/index.vue | 1 -
.../Popups/StaffAssignmentsTemplate/index.vue | 1 -
.../Panel/Popups/UserSelectTemplate/index.vue | 1 -
src/components/TreeSelect/index.vue | 8 ++-
src/main.js | 8 +--
src/utils/request.js | 16 ++---
src/views/Chart.vue | 30 +++++++++
src/views/Design.vue | 34 +++++------
src/views/Preview.vue | 30 +++++++++
18 files changed, 139 insertions(+), 81 deletions(-)
create mode 100644 src/views/Chart.vue
create mode 100644 src/views/Preview.vue
diff --git a/src/components/Modeler/flowable-chart/index.vue b/src/components/Modeler/flowable-chart/index.vue
index 9498609..56ab7e9 100644
--- a/src/components/Modeler/flowable-chart/index.vue
+++ b/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规范')
})
}
}
diff --git a/src/components/Modeler/flowable-designer/index.vue b/src/components/Modeler/flowable-designer/index.vue
index 89f26cf..acdbe39 100644
--- a/src/components/Modeler/flowable-designer/index.vue
+++ b/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(`节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。
`)
+ if (validateNull(formKey) && bpmnElementParent.$type !== 'bpmn:SubProcess') {
+ options.validateErrorData.push(节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。
)
}
break
case 'bpmn:UserTask':
if (!assignee.length) {
- options.validateErrorData.push(`节点【${bpmnElement.name || bpmnElement.id}】没有指定办理人。
`)
+ options.validateErrorData.push(节点【${bpmnElement.name || bpmnElement.id}】没有指定办理人。
)
}
if (!button.length) {
- options.validateErrorData.push(`节点【${bpmnElement.name || bpmnElement.id}】没有配置按钮。
`)
+ options.validateErrorData.push(节点【${bpmnElement.name || bpmnElement.id}】没有配置按钮。
)
}
if (validateNull(formKey)) {
- options.validateErrorData.push(`节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。
`)
+ options.validateErrorData.push(节点【${bpmnElement.name || bpmnElement.id}】没有配置表单。
)
}
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(
- [`池子【${participant.name || participant.id}】:
`], tempValidateErrorData)
+ validateErrorData.push((池子【${participant.name || participant.id}】:
), tempValidateErrorData)
}
}
// 处理正常单流程
@@ -438,7 +445,7 @@ export default {
})
if (tempValidateErrorData.length > 0) {
validateErrorData = validateErrorData.concat(
- [`流程【${process.name || process.id}】:
`], tempValidateErrorData)
+ [流程【${process.name || process.id}】:
], 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
})
}
diff --git a/src/components/Modeler/flowable-preview/index.vue b/src/components/Modeler/flowable-preview/index.vue
index f2a97e0..93ae168 100644
--- a/src/components/Modeler/flowable-preview/index.vue
+++ b/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规范')
})
}
}
diff --git a/src/components/Panel/Popups/ButtonAddTemplate/index.vue b/src/components/Panel/Popups/ButtonAddTemplate/index.vue
index f429300..67c4433 100644
--- a/src/components/Panel/Popups/ButtonAddTemplate/index.vue
+++ b/src/components/Panel/Popups/ButtonAddTemplate/index.vue
@@ -3,7 +3,6 @@
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()
diff --git a/src/components/Panel/Popups/ListenerAddTemplate/index.vue b/src/components/Panel/Popups/ListenerAddTemplate/index.vue
index 1db1740..ea39733 100644
--- a/src/components/Panel/Popups/ListenerAddTemplate/index.vue
+++ b/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"
diff --git a/src/components/Panel/Popups/ListenerListTemplate/index.vue b/src/components/Panel/Popups/ListenerListTemplate/index.vue
index 84bec04..b624d49 100644
--- a/src/components/Panel/Popups/ListenerListTemplate/index.vue
+++ b/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"
diff --git a/src/components/Panel/Popups/ProcessExpressionSelectTemplate/index.vue b/src/components/Panel/Popups/ProcessExpressionSelectTemplate/index.vue
index b4d9af3..3d3724e 100644
--- a/src/components/Panel/Popups/ProcessExpressionSelectTemplate/index.vue
+++ b/src/components/Panel/Popups/ProcessExpressionSelectTemplate/index.vue
@@ -3,7 +3,6 @@
0) {
- this.$message.warning('不能选择根节点（' + node[this.config.label] + '）请重新选择。')
+ this.createMessage.warning('不能选择根节点（' + node[this.config.label] + '）请重新选择。')
return
}
this.valueTitle = node[this.config.label]
diff --git a/src/main.js b/src/main.js
index 92c425f..ef280f5 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/utils/request.js b/src/utils/request.js
index e88d049..e532ed5 100644
--- a/src/utils/request.js
+++ b/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))
})
diff --git a/src/views/Chart.vue b/src/views/Chart.vue
new file mode 100644
index 0000000..029c22d
--- /dev/null
+++ b/src/views/Chart.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
diff --git a/src/views/Design.vue b/src/views/Design.vue
index 4781e2e..75f37e0 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -1,31 +1,29 @@
-
-
-
-
-
+