diff --git a/flowable-engine-java/src/main/resources/application-pro.yml b/flowable-engine-java/src/main/resources/application-pro.yml index 5a4db35..a4aea36 100644 --- a/flowable-engine-java/src/main/resources/application-pro.yml +++ b/flowable-engine-java/src/main/resources/application-pro.yml @@ -3,6 +3,6 @@ server: spring: datasource: #数据源相关配置 - url: jdbc:mysql://localhost:3306/resume?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true - username: resume - password: cKWpc2BhYhrGEwMT \ No newline at end of file + url: jdbc:mysql://192.168.101.100:3306/flowable_web?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true + username: root + password: password \ No newline at end of file diff --git a/flowable-engine-web/src/store/index.js b/flowable-engine-web/src/store/index.js index ffc4808..271f7c5 100644 --- a/flowable-engine-web/src/store/index.js +++ b/flowable-engine-web/src/store/index.js @@ -7,6 +7,7 @@ Vue.use(Vuex) export default new Vuex.Store({ state: { nodeMap: new Map(), + parentMap: new Map(), isEdit: null, selectedNode: {}, selectFormItem: null, diff --git a/flowable-engine-web/src/views/admin/FormProcessDesign.vue b/flowable-engine-web/src/views/admin/FormProcessDesign.vue index d5113cf..5b00935 100644 --- a/flowable-engine-web/src/views/admin/FormProcessDesign.vue +++ b/flowable-engine-web/src/views/admin/FormProcessDesign.vue @@ -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: '发布', diff --git a/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue b/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue index 4ee840c..b2bdba4 100644 --- a/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue +++ b/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue @@ -20,92 +20,124 @@ export default { valid: true } }, - computed:{ - nodeMap(){ + computed: { + nodeMap() { return this.$store.state.nodeMap; }, - dom(){ + parentIdMap() { + return this.$store.state.parentMap; + }, + dom() { return this.$store.state.design.process; } }, 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:'流程结束'}}) + 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) + return h('div', {class: {'_root': true}, ref: '_root'}, processTrees) }, methods: { // 获取demo的树形结构 - getDomTree(h, node) { - this.toMapping(node); - if (this.isPrimaryNode(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)){ + 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.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) //遍历子分支尾部分支 index++; - return h('div', {'class':{'branch-node-item': true}}, childDoms); + return h('div', {'class': {'branch-node-item': true}}, childDoms); }) //插入添加分支/条件的按钮 - branchItems.unshift(h('div',{'class':{'add-branch-btn': true}}, [ + branchItems.unshift(h('div', {'class': {'add-branch-btn': true}}, [ h('el-button', { - 'class':{'add-branch-btn-el': true}, + 'class': {'add-branch-btn-el': true}, props: {size: 'small', round: true}, - on:{click: () => this.addBranchNode(node)}, - domProps: {innerHTML: `添加${this.isConditionNode(node)?'条件':'分支'}`}, + on: {click: () => this.addBranchNode(node)}, + domProps: {innerHTML: `添加${this.isConditionNode(node) ? '条件' : '分支'}`}, }, []) ])); - let bchDom = [h('div', {'class':{'branch-node': true}}, branchItems)] + 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)){ + } 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 { + return [h('div', {'class': {'empty-node': true}}, childDoms)]; + } else { //遍历到了末端，无子节点 return []; } }, //解码渲染的时候插入dom到同级 - decodeAppendDom(h, node, dom, props = {}){ + decodeAppendDom(h, node, dom, props = {}) { props.config = node dom.unshift(h(node.type.toLowerCase(), { props: props, ref: node.id, key: node.id, //定义事件，插入节点，删除节点，选中节点，复制/移动 - on:{ + on: { insertNode: type => this.insertNode(type, node), delNode: () => this.delNode(node), selected: () => this.selectNode(node), - copy:() => this.copyBranch(node), + copy: () => this.copyBranch(node), leftMove: () => this.branchMove(node, -1), rightMove: () => this.branchMove(node, 1) } }, [])) }, + toMapping(node) { + node.forEach(node => { + this.nodeMap.set(node.id, node) + this.parentIdMap.set(node.parentId, node) + }) + }, //id映射到map，用来向上遍历 - toMapping(node){ - if (node && node.id){ + toMappingOld(node) { + if (node && node.id) { //console.log("node=> " + node.id + " name:" + node.name + " type:" + node.type) let newNode = { ...node @@ -113,33 +145,32 @@ export default { newNode.children = [] this.nodeMap.set(newNode.id, newNode) } - console.log(this.nodeMap) }, - insertCoverLine(h, index, doms, branchs){ - if (index === 0){ + 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){ + doms.unshift(h('div', {'class': {'line-top-left': true}}, [])) + doms.unshift(h('div', {'class': {'line-bot-left': true}}, [])) + } else if (index === branchs.length - 1) { //最右侧分支 - doms.unshift(h('div', {'class':{'line-top-right': true}}, [])) - doms.unshift(h('div', {'class':{'line-bot-right': true}}, [])) + doms.unshift(h('div', {'class': {'line-top-right': true}}, [])) + doms.unshift(h('div', {'class': {'line-bot-right': true}}, [])) } }, - copyBranch(node){ + copyBranch(node) { let parentNode = this.nodeMap.get(node.parentId) let branchNode = this.$deepCopy(node) branchNode.name = branchNode.name + '-copy' this.forEachNode(parentNode, branchNode, (parent, node) => { let id = this.getRandomId() - console.log(node, '新id =>'+ id, '老nodeId:' + node.id ) + console.log(node, '新id =>' + id, '老nodeId:' + node.id) node.id = id node.parentId = parent.id }) parentNode.branchs.splice(parentNode.branchs.indexOf(node), 0, branchNode) this.$forceUpdate() }, - branchMove(node, offset){ + branchMove(node, offset) { let parentNode = this.nodeMap.get(node.parentId) let index = parentNode.branchs.indexOf(node) let branch = parentNode.branchs[index + offset] @@ -148,89 +179,123 @@ export default { this.$forceUpdate() }, //判断是否为主要业务节点 - isPrimaryNode(node){ + isPrimaryNode(node) { return node && (node.type === 'ROOT' || node.type === 'APPROVAL' - || node.type === 'CC' || node.type === 'DELAY' + || node.type === 'CC' || node.type === 'DELAY' || node.type === 'TRIGGER'); }, - isBranchNode(node){ + isBranchNode(node) { return node && (node.type === 'CONDITIONS' || node.type === 'CONCURRENTS'); }, - isEmptyNode(node){ + isEmptyNode(node) { return node && (node.type === 'EMPTY') }, //是分支节点 - isConditionNode(node){ + isConditionNode(node) { return node.type === 'CONDITIONS'; }, //是分支节点 - isBranchSubNode(node){ + isBranchSubNode(node) { return node && (node.type === 'CONDITION' || node.type === 'CONCURRENT'); }, - isConcurrentNode(node){ + isConcurrentNode(node) { return node.type === 'CONCURRENTS' }, - getRandomId(){ - return `node_${new Date().getTime().toString().substring(5)}${Math.round(Math.random()*9000+1000)}` + getRandomId() { + return `node_${new Date().getTime().toString().substring(5)}${Math.round(Math.random() * 9000 + 1000)}` }, //选中一个节点 - selectNode(node){ + selectNode(node) { 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){ + 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; + switch (type) { + 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})){ - if (afterNode && afterNode.id){ + 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){ + } else { + if (afterNode && afterNode.id) { afterNode.parentId = parentNode.children.id } this.$set(parentNode.children, 'children', afterNode) } this.$forceUpdate() }, - insertApprovalNode(parentNode){ - this.$set(parentNode.children, "name", "审批人") - this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.APPROVAL_PROPS)) + insertApprovalNode(parentNode) { + 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){ + insertCcNode(parentNode) { this.$set(parentNode.children, "name", "抄送人") this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.CC_PROPS)) }, - insertDelayNode(parentNode){ + insertDelayNode(parentNode) { this.$set(parentNode.children, "name", "延时处理") this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.DELAY_PROPS)) }, - insertTriggerNode(parentNode){ + insertTriggerNode(parentNode) { this.$set(parentNode.children, "name", "触发器") this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.TRIGGER_PROPS)) }, - insertConditionsNode(parentNode){ + insertConditionsNode(parentNode) { this.$set(parentNode.children, "name", "条件分支") this.$set(parentNode.children, 'children', { id: this.getRandomId(), @@ -244,20 +309,20 @@ export default { type: "CONDITION", props: this.$deepCopy(DefaultProps.CONDITION_PROPS), name: "条件1", - children:{} - },{ + children: {} + }, { id: this.getRandomId(), parentId: parentNode.children.id, type: "CONDITION", props: this.$deepCopy(DefaultProps.CONDITION_PROPS), name: "条件2", - children:{} + children: {} } ]) }, - insertConcurrentsNode(parentNode){ + insertConcurrentsNode(parentNode) { this.$set(parentNode.children, "name", "并行分支") - this.$set(parentNode.children, 'children',{ + this.$set(parentNode.children, 'children', { id: this.getRandomId(), parentId: parentNode.children.id, type: "EMPTY" @@ -269,53 +334,53 @@ export default { parentId: parentNode.children.id, type: "CONCURRENT", props: {}, - children:{} - },{ + children: {} + }, { id: this.getRandomId(), name: "分支2", parentId: parentNode.children.id, type: "CONCURRENT", props: {}, - children:{} + children: {} } ]) }, - getBranchEndNode(conditionNode){ - if (!conditionNode.children || !conditionNode.children.id){ + getBranchEndNode(conditionNode) { + if (!conditionNode.children || !conditionNode.children.id) { return conditionNode; } return this.getBranchEndNode(conditionNode.children); }, - addBranchNode(node){ - if (node.branchs.length < 8){ + addBranchNode(node) { + if (node.branchs.length < 8) { node.branchs.push({ id: this.getRandomId(), parentId: node.id, - name: (this.isConditionNode(node) ? '条件':'分支') + (node.branchs.length + 1), - props: this.isConditionNode(node) ? this.$deepCopy(DefaultProps.CONDITION_PROPS):{}, - type: this.isConditionNode(node) ? "CONDITION":"CONCURRENT", - children:{} + name: (this.isConditionNode(node) ? '条件' : '分支') + (node.branchs.length + 1), + props: this.isConditionNode(node) ? this.$deepCopy(DefaultProps.CONDITION_PROPS) : {}, + type: this.isConditionNode(node) ? "CONDITION" : "CONCURRENT", + children: {} }) - }else { + } else { this.$message.warning("最多只能添加 8 项😥") } }, //删除当前节点 - delNode(node){ + delNode(node) { console.log("删除节点", node) //获取该节点的父节点 let parentNode = this.nodeMap.get(node.parentId) - if (parentNode){ + if (parentNode) { //判断该节点的父节点是不是分支节点 - if (this.isBranchNode(parentNode)){ + if (this.isBranchNode(parentNode)) { //移除该分支 parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1) //处理只剩1个分支的情况 - if (parentNode.branchs.length < 2){ + if (parentNode.branchs.length < 2) { //获取条件组的父节点 let ppNode = this.nodeMap.get(parentNode.parentId) //判断唯一分支是否存在业务节点 - if (parentNode.branchs[0].children && parentNode.branchs[0].children.id){ + if (parentNode.branchs[0].children && parentNode.branchs[0].children.id) { //将剩下的唯一分支头部合并到主干 ppNode.children = parentNode.branchs[0].children ppNode.children.parentId = ppNode.id @@ -323,18 +388,18 @@ export default { let endNode = this.getBranchEndNode(parentNode.branchs[0]) //后续节点进行拼接, 这里要取EMPTY后的节点 endNode.children = parentNode.children.children - if (endNode.children && endNode.children.id){ + if (endNode.children && endNode.children.id) { endNode.children.parentId = endNode.id } - }else { + } else { //直接合并分支后面的节点，这里要取EMPTY后的节点 ppNode.children = parentNode.children.children - if (ppNode.children && ppNode.children.id){ + if (ppNode.children && ppNode.children.id) { ppNode.children.parentId = ppNode.id } } } - }else { + } else { //不是的话就直接删除 if (node.children && node.children.id) { node.children.parentId = parentNode.id @@ -342,45 +407,45 @@ export default { parentNode.children = node.children } this.$forceUpdate() - }else { + } else { this.$message.warning("出现错误，找不到上级节点😥") } }, - validateProcess(){ + validateProcess() { this.valid = true let err = [] this.validate(err, this.dom) return err }, - validateNode(err, node){ - if (this.$refs[node.id].validate){ + validateNode(err, node) { + if (this.$refs[node.id].validate) { this.valid = this.$refs[node.id].validate(err) } }, //更新指定节点的dom - nodeDomUpdate(node){ + nodeDomUpdate(node) { this.$refs[node.id].$forceUpdate() }, //给定一个起始节点，遍历内部所有节点 - forEachNode(parent, node, callback){ - if (this.isBranchNode(node)){ + forEachNode(parent, node, callback) { + if (this.isBranchNode(node)) { callback(parent, node) this.forEachNode(node, node.children, callback) node.branchs.map(branchNode => { callback(node, branchNode) this.forEachNode(branchNode, branchNode.children, callback) }) - }else if (this.isPrimaryNode(node) || this.isEmptyNode(node) || this.isBranchSubNode(node)){ + } else if (this.isPrimaryNode(node) || this.isEmptyNode(node) || this.isBranchSubNode(node)) { callback(parent, node) this.forEachNode(node, node.children, callback) } }, //校验所有节点设置 - validate(err, node){ - if (this.isPrimaryNode(node)){ + validate(err, node) { + if (this.isPrimaryNode(node)) { this.validateNode(err, node) this.validate(err, node.children) - }else if (this.isBranchNode(node)){ + } else if (this.isBranchNode(node)) { //校验每个分支 node.branchs.map(branchNode => { //校验条件节点 @@ -389,23 +454,21 @@ export default { this.validate(err, branchNode.children) }) this.validate(err, node.children) - }else if (this.isEmptyNode(node)){ + } else if (this.isEmptyNode(node)) { this.validate(err, node.children) } - } }, - watch:{ - - } + watch: {} }