| 1 |
- {"remainingRequest":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\boman-framwork\\ruoyi-ui\\src\\components\\FlowChartComponent\\index.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"E:\\boman-framwork\\ruoyi-ui\\src\\components\\FlowChartComponent\\index.vue","mtime":1620609644445},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5GbG93Q2hhcnRDb21wb25lbnR7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IDEwMCU7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIGRpc3BsYXk6IGZsZXg7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsNCg0KICAuYnVyZ2Vvbi1hbGVydHsNCiAgICBtYXJnaW4tYm90dG9tOiAwOw0KICB9DQoNCiAgLmNoYXJ0Q29udGVudHsNCiAgICBmbGV4OiAxOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogIH0NCg0KICAjcGFsZXR0ZURpdnsNCiAgICBwYWRkaW5nOiA1cHg7DQogICAgd2lkdGg6IDE2MHB4Ow0KICAgIGhlaWdodDogMTAwJTsNCiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQogICAgYm9yZGVyLXJpZ2h0OiAxcHggc29saWQgI2RjZGVlMjsNCiAgfQ0KDQoNCiAgY2FudmFzew0KICAgIG91dGxpbmU6IG5vbmU7DQogIH0NCg0KICAjZ29DaGFydCwjc2hvd0NoYXJ0ew0KICAgIGZsZXgtZ3JvdzogMTsNCiAgICBmbGV4OiAxOw0KICAgIC8vIGJvcmRlcjogc29saWQgMXB4IGJsYWNrDQogIH0NCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0gBA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/FlowChartComponent","sourcesContent":["<template>\r\n <div class=\"FlowChartComponent\">\r\n <!-- <Alert show-icon closable v-if=\"currentSteps === 1\">双击空白区域即可直接新增一个中间节点,双击节点可编辑</Alert> -->\r\n <div class=\"chartContent\">\r\n <div id=\"paletteDiv\"></div>\r\n <div id=\"goChart\" v-show=\"currentSteps === 1\">\r\n </div>\r\n <div id=\"showChart\" v-show=\"currentSteps === 2\">\r\n </div>\r\n </div>\r\n\r\n <!-- 全局侧滑模块 -->\r\n <Drawer\r\n v-model=\"drawerObject.show\"\r\n transfer\r\n :title=\"drawerObject.title\"\r\n :width=\"472\"\r\n :mask-closable=\"false\"\r\n :closable=\"false\"\r\n scrollable\r\n >\r\n <components\r\n v-if=\"drawerObject.show\"\r\n :configData=\"drawerObject.configData\"\r\n :data=\"drawerObject.configData\"\r\n :is=\"drawerObject.component\"\r\n :TABLE_ID=\"drawerObject.TABLE_ID\"\r\n :node=\"drawerObject.node\"\r\n :status=\"drawerObject.status\"\r\n :rejectedNodes=\"rejectedNodes\"\r\n :assignedNodes=\"assignedNodes\"\r\n :readOnly=\"readOnly\"\r\n :moduleType=\"data.moduleType\"\r\n @closeDrawer=\"closeDrawer\"\r\n >\r\n </components>\r\n </Drawer>\r\n </div>\r\n</template>\r\n<script>\r\nimport '@/utils/go'\r\nimport FlowDesinger from '@/utils/flow-desinger';\r\nimport startNodeInfo from '@/components/startNodeInfo'\r\nimport endNodeInfo from '@/components/endNodeInfo'\r\nimport linkInfo from '@/components/linkInfo'\r\nimport ProcessNodeConfig from '@/components/ProcessNodeConfig'\r\nimport DynamicProcessNodeConfig from '@/components/DynamicProcessNodeConfig'\r\nimport ServiceNodeConfig from '@/components/ServiceNodeConfig'\r\nimport FlowDisplay from '@/utils/flow-display';\r\nexport default {\r\n components:{\r\n startNodeInfo, endNodeInfo, linkInfo, ProcessNodeConfig, DynamicProcessNodeConfig, ServiceNodeConfig\r\n },\r\n props:{\r\n editable:{ //是否可编辑\r\n type:Boolean,\r\n default:true\r\n },\r\n fresh:{\r\n type:Boolean,\r\n default:false\r\n },\r\n currentSteps:{\r\n type:Number,\r\n default:null\r\n },\r\n noFreshFlag:{\r\n type:Boolean,\r\n default:false\r\n },\r\n readOnly:{\r\n type:Boolean,\r\n default:false\r\n },\r\n data:{\r\n type:Object,\r\n default () {\r\n return {\r\n }\r\n }\r\n }\r\n },\r\n data () {\r\n return {\r\n myDesigner:null, //画布实例\r\n drawerObject:{\r\n show:false\r\n },\r\n nodeMsg:{}, //存放节点数据\r\n pathMsg:{}, //存放路径数据\r\n rejectedNodes:[], //驳回节点\r\n assignedNodes: [], //指派节点\r\n }\r\n },\r\n activated () {\r\n if(!this.noFreshFlag){\r\n this.init()\r\n }\r\n },\r\n deactivated () { //keep-alive 组件停用时调用\r\n if(this.currentSteps === 1 && this.myDesigner){\r\n this.data.guiStyle = JSON.parse(this.myDesigner.getFlowData())\r\n }\r\n },\r\n methods:{\r\n init () {\r\n if(!Array.isArray(this.data.nodeMsg)){\r\n let nodeMsg = []\r\n Object.keys(this.data.nodeMsg).map(item => {\r\n nodeMsg.push(this.data.nodeMsg[item])\r\n return item\r\n })\r\n\r\n this.data.nodeMsg = nodeMsg\r\n\r\n let pathMsg = []\r\n Object.keys(this.data.pathMsg).map(item => {\r\n pathMsg.push(this.data.pathMsg[item])\r\n return item\r\n })\r\n this.data.pathMsg = pathMsg\r\n }\r\n\r\n this.dataProcessing()\r\n if(this.currentSteps === 1){\r\n // 流程图设计器\r\n if(!this.myDesigner){\r\n this.myDesigner= new FlowDesinger('goChart',{\r\n showEditNode:this.showEditNode, //节点双击编辑\r\n SelectionDeleted:this.SelectionDeleted, //删除事件\r\n LinkDrawn:this.LinkDrawn, //线的生成\r\n externalobjectsdropped:this.externalobjectsdropped, //节点生成\r\n LinkRelinked: this.LinkRelinked //连线修改\r\n });\r\n\r\n }\r\n\r\n this.initToolbar = this.myDesigner.initToolbar('paletteDiv',this.data.moduleType)\r\n this.myDesigner.displayFlow(JSON.parse(JSON.stringify(this.data.guiStyle)));// 在设计面板中显示流程图\r\n this.data.myDisplay = this.myDesigner.diagram\r\n }else{\r\n if(this.myDisplay){\r\n this.myDisplay.loadFlow(JSON.parse(JSON.stringify(this.data.guiStyle)))\r\n }else{\r\n this.myDisplay = new FlowDisplay('showChart',{\r\n showEditNode:this.showEditNode, //节点双击编辑\r\n });\r\n this.myDisplay.loadFlow(JSON.parse(JSON.stringify(this.data.guiStyle)))\r\n }\r\n\r\n // this.data.myDisplay = this.myDisplay.diagram\r\n\r\n }\r\n\r\n\r\n },\r\n compare (property) {\r\n return function(a,b) {\r\n var value1 = a[property];\r\n var value2 = b[property];\r\n return value1 - value2\r\n }\r\n },\r\n dataProcessing () { //处理后端返回节点数据和路径数据\r\n if(this.data.nodeMsg){\r\n\r\n this.data.nodeMsg.forEach(item => {\r\n this.nodeMsg[item.key] = item\r\n if(item.type === 2){ //结束节点对数据排序,区分执行程序还是抄送人\r\n this.nodeMsg[item.key].actionConfig.sort(this.compare('handleType'))\r\n }\r\n })\r\n this.data.nodeMsg = this.nodeMsg\r\n }\r\n\r\n if(this.data.pathMsg){\r\n this.data.pathMsg.forEach(item => {\r\n this.pathMsg[item.key] = item\r\n })\r\n this.data.pathMsg = this.pathMsg\r\n }\r\n\r\n this.data.removePath = []\r\n this.data.removeNode = []\r\n\r\n },\r\n showEditNode (node) { //双击编辑\r\n\r\n // node.findNodesOutOf()\r\n if(node.data.type === 1){\r\n let defaultObj = {\r\n conditionType: 0,\r\n ruleList: [],\r\n priority: null,\r\n defaultPriority: null,\r\n modifyId: null,\r\n id:null,\r\n triggerBt:[],\r\n visibleBt:[]\r\n }\r\n if(!node.data.id){\r\n this.nodeMsg[node.data.key] = Object.assign(defaultObj,this.nodeMsg[node.data.key])\r\n }\r\n\r\n this.drawerObject = {\r\n show: true,\r\n component: 'startNodeInfo',\r\n configData: this.nodeMsg[node.data.key],\r\n title:'开始节点配置'\r\n }\r\n }\r\n if(node.data.type === 2){\r\n let defaultObj = {\r\n id:null,\r\n manualConfig:null,\r\n actionConfig:[]\r\n }\r\n if(!node.data.id){\r\n this.nodeMsg[node.data.key] = Object.assign(defaultObj,this.nodeMsg[node.data.key])\r\n }\r\n this.drawerObject = {\r\n show: true,\r\n component: 'endNodeInfo',\r\n configData: this.nodeMsg[node.data.key],\r\n title:'结束节点配置'\r\n }\r\n }\r\n\r\n // 审批节点和操作节点用同一个配置界面，根据参数控制展示项\r\n if(node.data.category === \"Approval\" || node.data.category === \"Operation\"){\r\n this.rejectedNodes = []\r\n this.assignedNodes = []\r\n this.findNodesInto(node)\r\n this.findNodesOutOf(node)\r\n // 默认节点配置\r\n let defaultObj = {\r\n actServiceS:[],\r\n actionConfig:[],\r\n approvelList:[],\r\n backId:null,\r\n id:null,\r\n manualConfig:0,\r\n modifiableField:[],\r\n moduleId:null,\r\n name:'中间节点',\r\n nodeType:0,\r\n ruleList:[],\r\n inevitable: 1, //节点必经\r\n approveCondition: 0, //审批条件\r\n assignBack: 0, //驳回操作\r\n whetherBack: 0, //可为驳回节点\r\n nodeCancle: 0, //作废操作\r\n assignNext: 1, //指派流转节点\r\n assignNode: 1, //节点是否是必需指派\r\n assignApprover: 1, //是否动态指派操作人\r\n visibleBt:[], //可见按钮\r\n nodeBack: 0, //驳回按钮开关\r\n nodeAgree: 0, //同意按钮\r\n\r\n }\r\n\r\n if(this.data.moduleType === 0){\r\n defaultObj = {\r\n actServiceS:[],\r\n actionConfig:[],\r\n approvelList:[],\r\n backId:null,\r\n id:null,\r\n manualConfig:0,\r\n modifiableField:'',\r\n modifiableFieldName:'',\r\n moduleId:null,\r\n name:'审批节点',\r\n nodeType:0,\r\n ruleList:[]\r\n }\r\n }\r\n\r\n if(!node.data.id){\r\n this.nodeMsg[node.data.key] = Object.assign(defaultObj,this.nodeMsg[node.data.key])\r\n }\r\n this.drawerObject = {\r\n show: true,\r\n component: this.data.moduleType === 0?'ProcessNodeConfig':'DynamicProcessNodeConfig',\r\n configData: this.nodeMsg[node.data.key],\r\n node: node,\r\n title:node.data.category === \"Approval\"?'审批节点配置':'操作节点'\r\n }\r\n }\r\n\r\n // 服务节点\r\n if(node.data.category === 'Service'){\r\n let defaultObj = {\r\n id:null,\r\n actionConfig:[{\r\n \"id\":null,\t //新增不传，修改传\r\n \"handleValue\":null,\t //具体的关于请求状态，url之类的json\r\n \"handleType\":null,\t//51：rest服务实现，52：消息系统\r\n \"extraMsg\":null\t//相关参数\r\n }]\r\n }\r\n if(!node.data.id){\r\n this.nodeMsg[node.data.key] = Object.assign(defaultObj,this.nodeMsg[node.data.key])\r\n }\r\n this.drawerObject = {\r\n show: true,\r\n component: 'ServiceNodeConfig',\r\n configData: this.nodeMsg[node.data.key],\r\n title:'服务节点配置'\r\n }\r\n }\r\n\r\n if(node.data.from !== undefined){\r\n if(this.nodeMsg[node.data.from].category === 'Service' && this.data.moduleType === 1){\r\n return\r\n }\r\n // 默认连线配置\r\n let defaultObj = {\r\n endNode:null,\r\n moduleId:null,\r\n name:null,\r\n ruleList:[],\r\n sources:null,\r\n startNode:null,\r\n status:null\r\n }\r\n if(!node.data.moduleId){\r\n this.pathMsg[node.data.key] = Object.assign(defaultObj,this.pathMsg[node.data.key])\r\n }\r\n\r\n let tableConfig = [{\r\n ID: this.nodeMsg[node.data.from].nodeFormId,\r\n value: this.nodeMsg[node.data.from].nodeForm\r\n }]\r\n\r\n if(this.nodeMsg[node.data.from].category === 'Start'){\r\n tableConfig = [{\r\n ID: this.nodeMsg[node.data.from].businessType,\r\n value: this.nodeMsg[node.data.from].businessTypeName\r\n }]\r\n }\r\n\r\n this.drawerObject = {\r\n show: true,\r\n component: 'linkInfo',\r\n configData: this.pathMsg[node.data.key],\r\n TABLE_ID: this.data.moduleType === 1?tableConfig:this.data.businessType,\r\n title:'连接线配置'\r\n }\r\n }\r\n },\r\n findNodesInto (node) { //查找父节点\r\n let parents = node.findNodesInto()\r\n\r\n if(parents.count > 0){\r\n node.findNodesInto().map(item => {\r\n this.rejectedNodes.push({\r\n value:item.data.key,\r\n label:item.data.text\r\n })\r\n this.findNodesInto(item)\r\n })\r\n }else{\r\n return\r\n }\r\n },\r\n findNodesOutOf (node) { //查找子节点\r\n let childrens = node.findNodesOutOf()\r\n\r\n if(childrens.count > 0){\r\n node.findNodesOutOf().map(item => {\r\n if(item.data.key != -2){\r\n this.assignedNodes.push({\r\n value:item.data.key,\r\n label:item.data.text\r\n })\r\n this.findNodesOutOf(item)\r\n }\r\n\r\n })\r\n }else{\r\n return\r\n }\r\n },\r\n SelectionDeleted (node) { //删除节点或者线\r\n\r\n if(node.fromPort !== undefined){ //线的删除\r\n delete this.pathMsg[node.key]\r\n if(node.id){ //已保存的线\r\n this.data.removePath.push(node.id)\r\n }\r\n }else{ //节点删除\r\n delete this.nodeMsg[node.key]\r\n if(node.id){\r\n this.data.removeNode.push({\r\n id:node.id,\r\n type:node.type\r\n })\r\n }\r\n }\r\n },\r\n LinkDrawn (node) { //连线生成\r\n if(!this.judgeLoop()){\r\n this.$Modal.fcWarning({\r\n title:'警告',\r\n content:'流程图中存在回路，请重新设置!!',\r\n mask:true\r\n })\r\n\r\n this.data.guiStyle = JSON.parse(this.myDesigner.getFlowData())\r\n let linkDataArray = this.data.guiStyle.linkDataArray\r\n linkDataArray = linkDataArray.filter(item => {\r\n return item.key !== node.key\r\n })\r\n\r\n this.data.guiStyle.linkDataArray = linkDataArray\r\n this.init()\r\n // reject()\r\n return\r\n }else{\r\n this.pathMsg[node.key] = node\r\n this.pathMsg[node.key].ruleList = []\r\n }\r\n\r\n },\r\n LinkRelinked (node) { //连线修改\r\n this.pathMsg[node.key].from = node.from\r\n this.pathMsg[node.key].to = node.to\r\n this.pathMsg[node.key].fromPort = node.fromPort\r\n this.pathMsg[node.key].toPort = node.toPort\r\n },\r\n judgeLoop () { //判断是否存在闭环 true为没有闭环 false有闭环\r\n // 获取所有的节点\r\n let data = JSON.parse(this.myDesigner.getFlowData())\r\n const edges = data.linkDataArray?data.linkDataArray:JSON.parse(data).linkDataArray;\r\n const nodes = [];\r\n const list = {}; // 邻接表\r\n const queue = []; // 入度为0的节点集合\r\n const indegree = {};\r\n edges.forEach(e => {\r\n const { from, to } = e;\r\n if (!nodes.includes(from)) {\r\n nodes.push(from);\r\n }\r\n if (!nodes.includes(to)) {\r\n nodes.push(to);\r\n }\r\n addEdge(from, to);\r\n });\r\n const V = nodes.length;\r\n\r\n nodes.forEach(node => {\r\n if (!indegree[node]) indegree[node] = 0;\r\n if (!list[node]) list[node] = [];\r\n });\r\n\r\n function addEdge(source, target) {\r\n if (!list[source]) list[source] = [];\r\n if (!indegree[target]) indegree[target] = 0;\r\n list[source].push(target);\r\n indegree[target] += 1;\r\n }\r\n function sort() {\r\n Object.keys(indegree).forEach(id => {\r\n if (indegree[id] === 0) {\r\n queue.push(id);\r\n }\r\n });\r\n let count = 0;\r\n while (queue.length) {\r\n ++count;\r\n const currentNode = queue.pop();\r\n const nodeTargets = list[currentNode];\r\n for (let i = 0; i < nodeTargets.length; i++) {\r\n const target = nodeTargets[i];\r\n indegree[target] -= 1;\r\n if (indegree[target] === 0) {\r\n queue.push(target);\r\n }\r\n }\r\n }\r\n // false 没有输出全部顶点，有向图中有回路\r\n return !(count < V);\r\n }\r\n\r\n return sort();\r\n },\r\n externalobjectsdropped (node) { //节点生成\r\n\r\n if(node.category === 'Service' || node.category === 'Subprocesses'){\r\n this.nodeMsg[node.key] = node\r\n this.nodeMsg[node.key].name = node.text\r\n return\r\n }\r\n this.nodeMsg[node.key] = node\r\n this.nodeMsg[node.key].ruleList = []\r\n this.nodeMsg[node.key].actServiceS =[\r\n {\r\n status:1,\r\n handleValue:null,\r\n handleType:11\r\n },\r\n {\r\n status:1,\r\n handleValue:null,\r\n handleType:20\r\n }\r\n ]\r\n this.nodeMsg[node.key].actionConfig =[]\r\n this.nodeMsg[node.key].approvelList = []\r\n this.nodeMsg[node.key].approverStyle = 0\r\n this.nodeMsg[node.key].name = node.text\r\n },\r\n closeDrawer () { //关闭策划块\r\n this.drawerObject = {\r\n show: false\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n<style lang=\"scss\" >\r\n.FlowChartComponent{\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n position: relative;\r\n flex-direction: column;\r\n\r\n .burgeon-alert{\r\n margin-bottom: 0;\r\n }\r\n\r\n .chartContent{\r\n flex: 1;\r\n display: flex;\r\n }\r\n\r\n #paletteDiv{\r\n padding: 5px;\r\n width: 160px;\r\n height: 100%;\r\n display: inline-block;\r\n border-right: 1px solid #dcdee2;\r\n }\r\n\r\n\r\n canvas{\r\n outline: none;\r\n }\r\n\r\n #goChart,#showChart{\r\n flex-grow: 1;\r\n flex: 1;\r\n // border: solid 1px black\r\n }\r\n}\r\n</style>\r\n"]}]}
|
