{"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"]}]}