clay
/
workflow-engine-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

数据重构

This commit is contained in:
Binlin B Wang 2022-08-14 23:00:22 +08:00
parent 454224f069
commit 4f48696005
5 changed files with 318 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
flowable-engine-java/src/main/resources/application-pro.yml
View File

@ -1,8 +1,25 @@
server:
port: 8088
port: 8080
spring:
datasource: #数据源相关配置
type: com.zaxxer.hikari.HikariDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
hikari:
connection-timeout: 30000
minimum-idle: 5
maximum-pool-size: 20
auto-commit: true
idle-timeout: 600000
pool-name: DateSourceHikariCp
max-lifetime: 1800000
connection-test-query: SELECT 1
datasource:
url: jdbc:mysql://192.168.101.100:3306/flowable_web?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true
username: root
password: password
logging:
config: classpath:logback-dev.xml
level:
root: info

1
flowable-engine-web/src/views/admin/LayoutHeader.vue
View File

@ -52,7 +52,6 @@ export default {
this.check()
},
mounted() {
console.log(document.body.offsetWidth)
if (document.body.offsetWidth <= 970) {
this.$msgbox.alert("本设计器未适配中小屏幕，建议您在PC电脑端浏览器进行操作")
}

1
flowable-engine-web/src/views/admin/layout/ProcessDesign.vue
View File

@ -30,6 +30,7 @@
<script>
import ProcessTree from './process/ProcessTree.vue'
// import ProcessTree from './process/ProcessTreeBack.vue'
import NodeConfig from '../../common/process/config/NodeConfig'
//流程设计器
export default {

451
flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue
View File

@ -24,7 +24,7 @@ export default {
nodeMap() {
return this.$store.state.nodeMap;
},
parentIdMap() {
parentMap() {
return this.$store.state.parentMap;
},
dom() {
@ -34,41 +34,73 @@ export default {
render(h, ctx) {
console.log("渲染流程树")
this.nodeMap.clear()
this.toMapping(this.dom)
console.log(this.nodeMap, this.parentIdMap)
// let processTrees = this.getDomTreeOld(h, this.dom)
this.parentMap.clear()
this.initMapping(this.dom)
console.log(this.dom)
console.log(this.nodeMap, this.parentMap)
let processTrees = this.getDomTree(h, "admin")
//插入末端节点
processTrees.push(h('div', {style: {'text-align': 'center'}}, [
h('div', {class: {'process-end': true}, domProps: {innerHTML: '流程结束'}})
]))
console.log(processTrees)
return h('div', {class: {'_root': true}, ref: '_root'}, processTrees)
},
methods: {
// 获取demo的树形结构
getDomTree(h, id) {
let nodeList = this.getNodeByParentId(id)
if (nodeList.length===0){
let node = this.parentMap.get(id)
if (!(node && node.id)) {
return []
}
let doms = nodeList.map(node =>{
console.log(node, "node")
//普通业务节点
let childDoms = this.getDomTree(h, node.id)
console.log(childDoms,"前")
this.decodeAppendDom(h, node, childDoms)
console.log(childDoms,"后")
return [h('div', {'class': {'primary-node': true}}, childDoms)];
})
return [h('div', {'class': {'primary-node': true}}, doms)];
console.log(node.name, "node.name", node.id, "node.id")
if (this.isPrimaryNode(node)) {
//普通业务节点
console.log("node name", node.name, "id", node.id, "parentId", node.parentId)
let childDoms = this.getDomTree(h, node.id)
this.decodeAppendDom(h, node, childDoms)
return [h('div', {'class': {'primary-node': true}}, childDoms)];
} else if (this.isBranchNode(node)) {
let index = 0;
//遍历分支节点，包含并行及条件节点
let branchItems = node.branchs.map(branchNode => {
//处理每个分支内子节点
this.toMapping(branchNode)
let childDoms = this.getDomTree(h, branchNode.id)
this.decodeAppendDom(h, branchNode, childDoms, {level: index + 1, size: node.branchs.length})
//插入4条横线，遮挡掉条件节点左右半边线条
this.insertCoverLine(h, index, childDoms, node.branchs)
//遍历子分支尾部分支
index++;
return h('div', {'class': {'branch-node-item': true}}, childDoms);
})
//插入添加分支/条件的按钮
branchItems.unshift(h('div', {'class': {'add-branch-btn': true}}, [
h('el-button', {
'class': {'add-branch-btn-el': true},
props: {size: 'small', round: true},
on: {click: () => this.addBranchNode(node)},
domProps: {innerHTML: `添加${this.isConditionNode(node) ? '条件' : '分支'}`},
}, [])
]));
let bchDom = [h('div', {'class': {'branch-node': true}}, branchItems)]
//继续遍历分支后的节点
let afterChildDoms = this.getDomTree(h, node.id)
return [h('div', {}, [bchDom, afterChildDoms])]
} else if (this.isEmptyNode(node)) {
//空节点，存在于分支尾部
let childDoms = this.getDomTree(h, node.id)
this.decodeAppendDom(h, node, childDoms)
return [h('div', {'class': {'empty-node': true}}, childDoms)];
}
return []
},
getDomTreeOld(h, node) {
this.toMappingOld(node);
this.toMapping(node);
if (this.isPrimaryNode(node)) {
//普通业务节点
let childDoms = this.getDomTreeOld(h, node.children)
@ -79,7 +111,7 @@ export default {
//遍历分支节点，包含并行及条件节点
let branchItems = node.branchs.map(branchNode => {
//处理每个分支内子节点
this.toMappingOld(branchNode);
this.toMapping(branchNode);
let childDoms = this.getDomTreeOld(h, branchNode.children)
this.decodeAppendDom(h, branchNode, childDoms, {level: index + 1, size: node.branchs.length})
//插入4条横线，遮挡掉条件节点左右半边线条
@ -129,14 +161,15 @@ export default {
}
}, []))
},
toMapping(node) {
// 初始化map集合,以便数据整理
initMapping(node) {
node.forEach(node => {
this.nodeMap.set(node.id, node)
this.parentIdMap.set(node.parentId, node)
this.parentMap.set(node.parentId, node)
})
},
//id映射到map，用来向上遍历
toMappingOld(node) {
toMapping(node) {
if (node && node.id) {
//console.log("node=> " + node.id + " name:" + node.name + " type:" + node.type)
let newNode = {
@ -146,12 +179,14 @@ export default {
this.nodeMap.set(newNode.id, newNode)
}
},
// 新增线条
insertCoverLine(h, index, doms, branchs) {
if (index === 0) {
//最左侧分支
doms.unshift(h('div', {'class': {'line-top-left': true}}, []))
doms.unshift(h('div', {'class': {'line-bot-left': true}}, []))
} else if (index === branchs.length - 1) {
}
if (index === branchs.length - 1) {
//最右侧分支
doms.unshift(h('div', {'class': {'line-top-right': true}}, []))
doms.unshift(h('div', {'class': {'line-bot-right': true}}, []))
@ -170,6 +205,7 @@ export default {
parentNode.branchs.splice(parentNode.branchs.indexOf(node), 0, branchNode)
this.$forceUpdate()
},
//移动节点
branchMove(node, offset) {
let parentNode = this.nodeMap.get(node.parentId)
let index = parentNode.branchs.indexOf(node)
@ -210,141 +246,177 @@ export default {
this.$store.commit('selectedNode', node)
this.$emit('selectedNode', node)
},
getNodeByParentId(id) {
let nodeList = []
this.dom.forEach(node => {
if (node.parentId === id)
nodeList.push(node)
})
return nodeList;
},
//处理节点插入逻辑
insertNode(type, parentNode) {
console.log(parentNode, "111");
this.$refs['_root'].click()
//缓存一下后面的节点
let afterNode = parentNode.children
console.log(afterNode)
console.log(parentNode)
//插入新节点
let id = this.getRandomId();
this.updateParentId(id, parentNode.id)
let children = {
id: this.getRandomId(),
id: id,
parentId: parentNode.id,
// props: {},
type: type,
}
switch (type) {
case 'APPROVAL':
this.insertApprovalNode(children, afterNode);
this.insertApprovalNode(children);
break;
case 'CC':
this.insertCcNode(parentNode);
this.insertCcNode(children);
break;
case 'DELAY':
this.insertDelayNode(parentNode);
this.insertDelayNode(children);
break;
case 'TRIGGER':
this.insertTriggerNode(parentNode);
this.insertTriggerNode(children);
break;
case 'CONDITIONS':
this.insertConditionsNode(parentNode);
this.insertConditionsNode(children);
break;
case 'CONCURRENTS':
this.insertConcurrentsNode(parentNode);
this.insertConcurrentsNode(children);
break;
default:
break;
}
//拼接后续节点
if (this.isBranchNode({type: type})) {
if (afterNode && afterNode.id) {
afterNode.parentId = parentNode.children.children.id
}
this.$set(parentNode.children.children, 'children', afterNode)
} else {
if (afterNode && afterNode.id) {
afterNode.parentId = parentNode.children.id
}
this.$set(parentNode.children, 'children', afterNode)
}
this.$forceUpdate()
},
/**
* 更新父id
* @param newId
* @param oldId
*/
updateParentId(newId, oldId) {
this.dom.map(node => {
if (node.parentId === oldId) {
node.parentId = newId
}
})
},
/**
* 审批人
* @param parentNode
*/
insertApprovalNode(parentNode) {
console.log(parentNode)
let node = {
...parentNode,
name: "审批人",
props: this.$deepCopy(DefaultProps.APPROVAL_PROPS)
}
this.dom.push(node)
},
/**
* 抄送人
* @param node
*/
insertCcNode(node) {
let newNode = {
...node,
name: "抄送人",
props: this.$deepCopy(DefaultProps.CC_PROPS)
}
this.dom.push(newNode)
},
/**
* 延时处理
* @param node
*/
insertDelayNode(node) {
let newNode = {
...node,
name: "延时处理",
props: this.$deepCopy(DefaultProps.DELAY_PROPS)
}
this.dom.push(newNode)
},
/**
* 触发器
* @param node
*/
insertTriggerNode(node) {
let newNode = {
...node,
name: "触发器",
props: this.$deepCopy(DefaultProps.TRIGGER_PROPS)
}
this.dom.push(newNode)
},
/**
* 新增条件分支
* @param node
*/
insertConditionsNode(node) {
let newNode = {
...node,
name: "条件分支",
branchs: [
{
id: this.getRandomId(),
parentId: node.id,
type: "CONDITION",
props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
name: "条件1",
children: {}
}, {
id: this.getRandomId(),
parentId: node.id,
type: "CONDITION",
props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
name: "条件2",
children: {}
}
]
}
this.dom.push(newNode)
let emptyNode = {
id: this.getRandomId(),
parentId: node.id,
type: "EMPTY"
}
this.updateParentId(emptyNode.id, newNode.id)
this.dom.push(emptyNode)
},
/**
* 新增同步运行节点
* @param node
*/
insertConcurrentsNode(node) {
let newNode = {
...node,
name: "并行分支",
branchs: [
{
id: this.getRandomId(),
parentId: node.id,
type: "CONDITION",
props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
name: "条件1",
children: {}
}, {
id: this.getRandomId(),
parentId: node.id,
type: "CONDITION",
props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
name: "条件2",
children: {}
}
]
}
// this.$set(parentNode.children, "name", "审批人")
// this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.APPROVAL_PROPS))
},
insertCcNode(parentNode) {
this.$set(parentNode.children, "name", "抄送人")
this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.CC_PROPS))
},
insertDelayNode(parentNode) {
this.$set(parentNode.children, "name", "延时处理")
this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.DELAY_PROPS))
},
insertTriggerNode(parentNode) {
this.$set(parentNode.children, "name", "触发器")
this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.TRIGGER_PROPS))
},
insertConditionsNode(parentNode) {
this.$set(parentNode.children, "name", "条件分支")
this.$set(parentNode.children, 'children', {
this.dom.push(newNode)
let emptyNode = {
id: this.getRandomId(),
parentId: parentNode.children.id,
parentId: node.id,
type: "EMPTY"
})
this.$set(parentNode.children, "branchs", [
{
id: this.getRandomId(),
parentId: parentNode.children.id,
type: "CONDITION",
props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
name: "条件1",
children: {}
}, {
id: this.getRandomId(),
parentId: parentNode.children.id,
type: "CONDITION",
props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
name: "条件2",
children: {}
}
])
},
insertConcurrentsNode(parentNode) {
this.$set(parentNode.children, "name", "并行分支")
this.$set(parentNode.children, 'children', {
id: this.getRandomId(),
parentId: parentNode.children.id,
type: "EMPTY"
})
this.$set(parentNode.children, "branchs", [
{
id: this.getRandomId(),
name: "分支1",
parentId: parentNode.children.id,
type: "CONCURRENT",
props: {},
children: {}
}, {
id: this.getRandomId(),
name: "分支2",
parentId: parentNode.children.id,
type: "CONCURRENT",
props: {},
children: {}
}
])
}
this.updateParentId(emptyNode.id, newNode.id)
this.dom.push(emptyNode)
},
getBranchEndNode(conditionNode) {
if (!conditionNode.children || !conditionNode.children.id) {
return conditionNode;
@ -365,52 +437,108 @@ export default {
this.$message.warning("最多只能添加 8 项😥")
}
},
//删除当前节点
delNode(node) {
console.log("删除节点", node)
//获取该节点的父节点
let parentNode = this.nodeMap.get(node.parentId)
if (parentNode) {
//判断该节点的父节点是不是分支节点
if (this.isBranchNode(parentNode)) {
//移除该分支
parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1)
//处理只剩1个分支的情况
if (parentNode.branchs.length < 2) {
//获取条件组的父节点
let ppNode = this.nodeMap.get(parentNode.parentId)
//判断唯一分支是否存在业务节点
if (parentNode.branchs[0].children && parentNode.branchs[0].children.id) {
//将剩下的唯一分支头部合并到主干
ppNode.children = parentNode.branchs[0].children
ppNode.children.parentId = ppNode.id
//搜索唯一分支末端最后一个节点
let endNode = this.getBranchEndNode(parentNode.branchs[0])
//后续节点进行拼接, 这里要取EMPTY后的节点
endNode.children = parentNode.children.children
if (endNode.children && endNode.children.id) {
endNode.children.parentId = endNode.id
}
} else {
//直接合并分支后面的节点，这里要取EMPTY后的节点
ppNode.children = parentNode.children.children
if (ppNode.children && ppNode.children.id) {
ppNode.children.parentId = ppNode.id
}
}
}
this.delBranchNode(parentNode, node)
} else {
//不是的话就直接删除
if (node.children && node.children.id) {
node.children.parentId = parentNode.id
}
parentNode.children = node.children
this.delNodeInDomChange(node.id, parentNode.id)
}
this.$forceUpdate()
} else {
this.$message.warning("出现错误，找不到上级节点😥")
}
},
//删除分支
delBranchNode(parentNode, node) {
let sunNode = this.parentMap.get(node.id)
//判断当前节点下有没有字节点,有则需要提示
if (sunNode) {
this.$confirm('当前分支下有子节点，是否继续?', '提示', {
confirmButtonText: '确 定',
cancelButtonText: '取 消',
type: 'warning'
}).then(() => {
//确认后进行子节点的操作
this.delBranchSunNode(sunNode.id)
this.doDelBranchNode(parentNode, node)
})
return
}else {
// 没有直接开始删除
this.doDelBranchNode(parentNode, node)
}
},
//删除分支的子节点
delBranchSunNode(id) {
let node = this.parentMap.get(id)
this.delNodeInDomChange(id)
if (node) {
this.delBranchSunNode(node.id)
}
},
//删除分支节点
doDelBranchNode(parentNode, node){
//判断当前分时是否为2
if (parentNode.branchs.length === 2){
let nodeList = [...parentNode.branchs]
nodeList.splice(nodeList.indexOf(node), 1)
//查看另外一个分支上是否有节点
let sunNode = this.parentMap.get(nodeList[0].id)
//有则需要放到主分支上
if (sunNode){
//更改分支上第一个节点的父id
this.updateParentId(parentNode.parentId,sunNode.parentId)
//找到最后一个节点
let lastNode = this.getLastNode(sunNode.id)
let emptyNode = this.parentMap.get(parentNode.id)
//更新空节点下的第一个节点的id为当前分支最后一个节点
this.updateParentId(lastNode.id,emptyNode.id)
//删除分支的主节点
this.delNodeInDom(parentNode)
//删除分支的空节点
this.delNodeInDom(emptyNode)
}else {
//没有则直接删除
this.delEntireBranch(parentNode)
}
}else {
parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1)
}
},
//获取最后一个节点
getLastNode(id){
let node = this.parentMap.get(id)
if (node){
return this.getLastNode(node.id)
}else {
return this.nodeMap.get(id)
}
},
delEntireBranch(node){
//删除分支节点和空节点
let emptyNode = this.parentMap.get(node.id)
this.delNodeInDomChange(node.id,node.parentId)
this.delNodeInDomChange(emptyNode.id,emptyNode.parentId)
},
/**
* 从dom中删除
* @param delId
* @param parentId
*/
delNodeInDomChange(delId, parentId) {
this.updateParentId(parentId, delId)
let delNode = this.nodeMap.get(delId)
this.dom.splice(this.dom.indexOf(delNode),1)
},
delNodeInDom(delNode){
this.dom.splice(this.dom.indexOf(delNode),1)
},
validateProcess() {
this.valid = true
let err = []
@ -441,7 +569,20 @@ export default {
}
},
//校验所有节点设置
validate(err, node) {
validate(err, nodeList) {
nodeList.map(node=>{
if (this.isPrimaryNode(node)){
//校验条件节点
this.validateNode(err, node)
}else if (this.isBranchNode(node)){
node.branchs.map(branchNode => {
//校验条件节点
this.validateNode(err, branchNode)
})
}
})
},
validateOld(err, node) {
if (this.isPrimaryNode(node)) {
this.validateNode(err, node)
this.validate(err, node.children)

1
flowable-engine-web/src/views/admin/layout/process/ProcessTreeBack.vue
View File

@ -392,7 +392,6 @@ export default {
}else if (this.isEmptyNode(node)){
this.validate(err, node.children)
}
}
},
watch:{