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