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

init

This commit is contained in:
Binlin B Wang 2022-08-14 17:09:03 +08:00
parent 1431a586ab
commit 454224f069
4 changed files with 234 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,6 @@ server:
spring:
datasource: #数据源相关配置
url: jdbc:mysql://localhost:3306/resume?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true
username: resume
password: cKWpc2BhYhrGEwMT
url: jdbc:mysql://192.168.101.100:3306/flowable_web?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true
username: root
password: password

1
flowable-engine-web/src/store/index.js
View File

@ -7,6 +7,7 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
nodeMap: new Map(),
parentMap: new Map(),
isEdit: null,
selectedNode: {},
selectFormItem: null,

26
flowable-engine-web/src/views/admin/FormProcessDesign.vue
View File

@ -48,7 +48,9 @@ export default {
isNew: true,
validStep: 0,
timer: null,
activeSelect: 'baseSetting',
//todo 修改进入的位置
// activeSelect: 'baseSetting',
activeSelect: 'processDesign',
validVisible: false,
validResult: {},
validOptions: [
@ -58,6 +60,7 @@ export default {
{title: '扩展设置', description: '', icon: '', status: ''}
],
validComponents: ['baseSetting', 'formSetting', 'processDesign', 'proSetting'],
array:[],
}
},
computed: {
@ -202,11 +205,31 @@ export default {
},
doAfter() {
if (this.validResult.success) {
// let process = this.setup.process
// console.log(process)
// this.tarry(process)
//
//
// console.log(this.array)
// this.setup.process = this.array
this.doPublish()
} else {
this.activeSelect = this.validComponents[this.validStep]
this.validVisible = false
}
},
tarry(node){
if (node&&node.id){
let newNode = {...node}
newNode.children=null
this.array.push(newNode)
this.tarry(node.children)
}
},
stopTimer() {
if (this.timer) {
@ -219,6 +242,7 @@ export default {
publishProcess() {
this.validateDesign()
},
// todo 提交数据
doPublish() {
this.$confirm('如果您只想预览请选择预览，确认发布后流程立即生效，是否继续?', '提示', {
confirmButtonText: '发布',

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

@ -24,6 +24,9 @@ export default {
nodeMap() {
return this.$store.state.nodeMap;
},
parentIdMap() {
return this.$store.state.parentMap;
},
dom() {
return this.$store.state.design.process;
}
@ -31,7 +34,12 @@ export default {
render(h, ctx) {
console.log("渲染流程树")
this.nodeMap.clear()
let processTrees = this.getDomTree(h, this.dom)
this.toMapping(this.dom)
console.log(this.nodeMap, this.parentIdMap)
// let processTrees = this.getDomTreeOld(h, this.dom)
let processTrees = this.getDomTree(h, "admin")
//插入末端节点
processTrees.push(h('div', {style: {'text-align': 'center'}}, [
h('div', {class: {'process-end': true}, domProps: {innerHTML: '流程结束'}})
@ -41,11 +49,29 @@ export default {
},
methods: {
// 获取demo的树形结构
getDomTree(h, node) {
this.toMapping(node);
getDomTree(h, id) {
let nodeList = this.getNodeByParentId(id)
if (nodeList.length===0){
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)];
},
getDomTreeOld(h, node) {
this.toMappingOld(node);
if (this.isPrimaryNode(node)) {
//普通业务节点
let childDoms = this.getDomTree(h, node.children)
let childDoms = this.getDomTreeOld(h, node.children)
this.decodeAppendDom(h, node, childDoms)
return [h('div', {'class': {'primary-node': true}}, childDoms)];
} else if (this.isBranchNode(node)) {
@ -53,8 +79,8 @@ export default {
//遍历分支节点，包含并行及条件节点
let branchItems = node.branchs.map(branchNode => {
//处理每个分支内子节点
this.toMapping(branchNode);
let childDoms = this.getDomTree(h, branchNode.children)
this.toMappingOld(branchNode);
let childDoms = this.getDomTreeOld(h, branchNode.children)
this.decodeAppendDom(h, branchNode, childDoms, {level: index + 1, size: node.branchs.length})
//插入4条横线，遮挡掉条件节点左右半边线条
this.insertCoverLine(h, index, childDoms, node.branchs)
@ -73,11 +99,11 @@ export default {
]));
let bchDom = [h('div', {'class': {'branch-node': true}}, branchItems)]
//继续遍历分支后的节点
let afterChildDoms = this.getDomTree(h, node.children)
let afterChildDoms = this.getDomTreeOld(h, node.children)
return [h('div', {}, [bchDom, afterChildDoms])]
} else if (this.isEmptyNode(node)) {
//空节点，存在于分支尾部
let childDoms = this.getDomTree(h, node.children)
let childDoms = this.getDomTreeOld(h, node.children)
this.decodeAppendDom(h, node, childDoms)
return [h('div', {'class': {'empty-node': true}}, childDoms)];
} else {
@ -103,8 +129,14 @@ export default {
}
}, []))
},
//id映射到map，用来向上遍历
toMapping(node) {
node.forEach(node => {
this.nodeMap.set(node.id, node)
this.parentIdMap.set(node.parentId, node)
})
},
//id映射到map，用来向上遍历
toMappingOld(node) {
if (node && node.id) {
//console.log("node=> " + node.id + " name:" + node.name + " type:" + node.type)
let newNode = {
@ -113,7 +145,6 @@ export default {
newNode.children = []
this.nodeMap.set(newNode.id, newNode)
}
console.log(this.nodeMap)
},
insertCoverLine(h, index, doms, branchs) {
if (index === 0) {
@ -179,26 +210,52 @@ 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)
//插入新节点
parentNode.children = {
let children = {
id: this.getRandomId(),
parentId: parentNode.id,
props: {},
// props: {},
type: type,
}
switch (type) {
case 'APPROVAL': this.insertApprovalNode(parentNode, afterNode); break;
case 'CC': this.insertCcNode(parentNode); break;
case 'DELAY': this.insertDelayNode(parentNode); break;
case 'TRIGGER': this.insertTriggerNode(parentNode); break;
case 'CONDITIONS': this.insertConditionsNode(parentNode); break;
case 'CONCURRENTS': this.insertConcurrentsNode(parentNode); break;
default: break;
case 'APPROVAL':
this.insertApprovalNode(children, afterNode);
break;
case 'CC':
this.insertCcNode(parentNode);
break;
case 'DELAY':
this.insertDelayNode(parentNode);
break;
case 'TRIGGER':
this.insertTriggerNode(parentNode);
break;
case 'CONDITIONS':
this.insertConditionsNode(parentNode);
break;
case 'CONCURRENTS':
this.insertConcurrentsNode(parentNode);
break;
default:
break;
}
//拼接后续节点
if (this.isBranchNode({type: type})) {
@ -215,8 +272,16 @@ export default {
this.$forceUpdate()
},
insertApprovalNode(parentNode) {
this.$set(parentNode.children, "name", "审批人")
this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.APPROVAL_PROPS))
console.log(parentNode)
let node = {
...parentNode,
name: "审批人",
props: this.$deepCopy(DefaultProps.APPROVAL_PROPS)
}
this.dom.push(node)
// this.$set(parentNode.children, "name", "审批人")
// this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.APPROVAL_PROPS))
},
insertCcNode(parentNode) {
this.$set(parentNode.children, "name", "抄送人")
@ -392,12 +457,9 @@ export default {
} else if (this.isEmptyNode(node)) {
this.validate(err, node.children)
}
}
},
watch:{
}
watch: {}
}
</script>
@ -405,6 +467,7 @@ export default {
._root {
margin: 0 auto;
}
.process-end {
width: 60px;
margin: 0 auto;
@ -416,17 +479,20 @@ export default {
background-color: #f2f2f2;
box-shadow: 0 0 10px 0 #bcbcbc;
}
.primary-node {
display: flex;
align-items: center;
flex-direction: column;
}
.branch-node {
display: flex;
justify-content: center;
/*border-top: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;*/
}
.branch-node-item {
position: relative;
display: flex;
@ -435,6 +501,7 @@ export default {
align-items: center;
border-top: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
&:before {
content: "";
position: absolute;
@ -445,32 +512,39 @@ export default {
height: 100%;
background-color: #CACACA;
}
.line-top-left, .line-top-right, .line-bot-left, .line-bot-right {
position: absolute;
width: 50%;
height: 4px;
background-color: #f5f6f6;
}
.line-top-left {
top: -2px;
left: -1px;
}
.line-top-right {
top: -2px;
right: -1px;
}
.line-bot-left {
bottom: -2px;
left: -1px;
}
.line-bot-right {
bottom: -2px;
right: -1px;
}
}
.add-branch-btn {
position: absolute;
width: 80px;
.add-branch-btn-el {
z-index: 999;
position: absolute;