{"version":3,"sources":["webpack:///./src/views/flow/components/model/FlowDiagram.vue?dd61","webpack:///./src/views/flow/components/model/FlowDiagram.vue","webpack:///src/views/flow/components/model/FlowDiagram.vue","webpack:///./src/views/flow/components/model/FlowDiagram.vue?faae","webpack:///./src/views/flow/components/model/FlowDiagram.vue?fa66"],"names":["render","_vm","this","_c","_self","attrs","model","value","modalVisible","callback","$$v","expression","staticStyle","domProps","_s","svg","staticRenderFns","name","data","marked","dispose","process","elements","processInstanceId","processDefinitionId","processDefinitionKey","style","blank","color","backgroundColor","history","active","watch","t_svg","console","_visual","$","ct","methods","defaultRender","fill","stroke","getProcessByProcessInstanceId","util","This","getProcessByProcessDefinitionKey","getProcessByProcessDefinitionId","getElements","component"],"mappings":"yIAAA,W,2CCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,QAAQ,CAACE,MAAM,CAAC,MAAQ,QAAQ,MAAQ,MAAM,aAAa,wBAAwB,cAAc,IAAIC,MAAM,CAACC,MAAON,EAAIO,aAAcC,SAAS,SAAUC,GAAMT,EAAIO,aAAaE,GAAKC,WAAW,iBAAiB,CAACR,EAAG,MAAM,CAACS,YAAY,CAAC,OAAS,OAAO,SAAW,OAAO,mBAAmB,YAAY,CAACT,EAAG,MAAM,CAACS,YAAY,CAAC,cAAc,QAAQC,SAAS,CAAC,UAAYZ,EAAIa,GAAGb,EAAIc,aAE1bC,EAAkB,G,6CCWP,GACfC,mBACAC,gBACA,OACAV,gBACAW,UACAC,WAEAC,aACAC,cAEAP,SACAQ,uBACAC,yBACAC,0BAEAC,OACAC,OACAC,cACAC,2BAEAC,SACAF,YACAC,2BAEAE,QACAH,gBACAC,8BAKAG,OACAjB,gBACA,2BAEA,cACA,IAEA,wBACA,mBACA,iBACA,mQACAkB,MAGA,aACA,mBAEA,qBACAC,wBAGAX,8BACA,WACA,eACA,uCAGAC,gCACA,WACA,sDAGAC,iCACA,UACA,yCAGAJ,oBACA,WACA,iBAGAC,qBACA,gBACA,sBAKA,IAHA,yBACA,oBAEA,oBACA,WACA,qCACA,yBACA,sBACA,iBACA,eACAa,uCACAA,+CACAC,uFACA,MACA,eACA,kBACA,QACA,WACAC,KAEAF,qCACAA,6CACAA,mCACAA,qCACA,MACA,mBACAA,qCACAA,kDACAC,uFACA,MACA,uBACA,sBACAD,wCACAA,mCACAA,qCACAC,uFACA,MACA,QACA,UAKAE,SAEAC,yBACAH,8EACAA,gFAEAA,0FACAA,4FACAA,0FACAA,6FAGA,IADA,iDACA,mBACA,wCACAA,uDAIAA,8BACAI,sCACAC,2CAGAC,yCACA,6CACA,WACAC,8GACAC,qBAGAC,4CACA,+CACA,WACAF,6HACAC,qBAGAE,2CACA,WACAH,iHACAC,qBAGAG,2BCjLkY,I,wBCQ9XC,EAAY,eACd,EACAhD,EACAgB,GACA,EACA,KACA,KACA,MAIa,aAAAgC,E","file":"js/chunk-60290574.96d4633b.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FlowDiagram.vue?vue&type=style&index=0&id=af32f3ba&prod&lang=less&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('Modal',{attrs:{\"title\":\"查看流程图\",\"width\":\"900\",\"class-name\":\"vertical-center-modal\",\"footer-hide\":\"\"},model:{value:(_vm.modalVisible),callback:function ($$v) {_vm.modalVisible=$$v},expression:\"modalVisible\"}},[_c('div',{staticStyle:{\"height\":\"60vh\",\"overflow\":\"auto\",\"background-color\":\"#f2f2f2\"}},[_c('div',{staticStyle:{\"padding-top\":\"40px\"},domProps:{\"innerHTML\":_vm._s(_vm.svg)}})])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <Modal\r\n            v-model=\"modalVisible\" title=\"查看流程图\" width=\"900\" class-name=\"vertical-center-modal\" footer-hide>\r\n        <div style=\"height: 60vh;overflow: auto;background-color: #f2f2f2\">\r\n            <div style=\"padding-top: 40px;\" v-html=\"svg\"></div>\r\n        </div>\r\n\r\n    </Modal>\r\n</template>\r\n\r\n<script>\r\nimport $ from 'biyi-hx-activiti/src/views/flow/lib/bpmn/jquery.min'\r\nimport util from '@/libs/util.js'\r\nexport default {\r\n  name: 'FlowDiagram',\r\n  data () {\r\n    return {\r\n      modalVisible: false,\r\n      marked: false,\r\n      dispose: false,\r\n\r\n      process: null,\r\n      elements: null,\r\n\r\n      svg: null,\r\n      processInstanceId: null,\r\n      processDefinitionId: null,\r\n      processDefinitionKey: null,\r\n\r\n      style: {\r\n        blank: {\r\n          color: 'white',\r\n          backgroundColor: '#9e9e9e'\r\n        },\r\n        history: {\r\n          color: 'red',\r\n          backgroundColor: '#FAFAFA'\r\n        },\r\n        active: {\r\n          color: '#5DEA5D',\r\n          backgroundColor: '#FAFAFA'\r\n        }\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    svg: function (value) {\r\n      if (!this.marked || value === null) return\r\n\r\n      if (!this.dispose) {\r\n        let t_svg = value\r\n        // 处理svg\r\n        let idx = value.indexOf('<defs>') + 6\r\n        let s1 = value.substring(0, idx)\r\n        let s2 = value.substring(idx)\r\n        let marked = '<marker id=\"marked\" viewBox=\"0 0 20 20\" refX=\"11\" refY=\"10\" markerWidth=\"10\" markerHeight=\"10\" orient=\"auto\"><path d=\"M 1 5 L 11 10 L 1 15 Z\" style=\"fill: red; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; stroke: red;\"/></marker>'\r\n        t_svg = s1 + marked + s2\r\n\r\n        // 获取marked元素\r\n        if (this.marked) {\r\n          this.getElements()\r\n        }\r\n        this.defaultRender()\r\n        console.log(this.svg)\r\n      }\r\n    },\r\n    processInstanceId: function (value) {\r\n      if (value !== null) {\r\n        this.marked = true\r\n        this.getProcessByProcessInstanceId()\r\n      }\r\n    },\r\n    processDefinitionId: function (value) {\r\n      if (value !== null) {\r\n        this.process = this.getProcessByProcessDefinitionId()\r\n      }\r\n    },\r\n    processDefinitionKey: function (value) {\r\n      if (value !== null) {\r\n        this.getProcessByProcessDefinitionKey()\r\n      }\r\n    },\r\n    process: function (value) {\r\n      if (value !== null) {\r\n        this.svg = value.svg\r\n      }\r\n    },\r\n    elements: function (elements) {\r\n      if (!this.marked) return\r\n      if (elements == null || elements.length === 0) return\r\n\r\n      let history = this.style.history\r\n      let active = this.style.active\r\n\r\n      for (let i = 0; i < elements.length; i++) {\r\n        let ele = elements[i]\r\n        let _ele = $('[data-element-id=' + ele.key + ']')\r\n        let _visual = _ele.find('g.djs-visual')\r\n        switch (ele.elementType) {\r\n          case 'StartEvent':\r\n          case 'EndEvent':\r\n            _visual.find('circle').css('stroke', history.color)\r\n            _visual.find('circle').css('fill', history.backgroundColor)\r\n            $('[data-element-id=' + ele.key + '_label]').find('g.djs-visual text').css('fill', history.color)\r\n            break\r\n          case 'UserTask':\r\n          case 'ServiceTask':\r\n            let ct = history\r\n            if (ele.active) {\r\n              ct = active\r\n            }\r\n            _visual.find('rect').css('stroke', ct.color)\r\n            _visual.find('rect').css('fill', ct.backgroundColor)\r\n            _visual.find('text').css('fill', ct.color)\r\n            _visual.find('path').css('stroke', ct.color)\r\n            break\r\n          case 'SequenceFlow':\r\n            _visual.find('path').css('stroke', history.color)\r\n            _visual.find('path').css('marker-end', 'url(\"#marked\")')\r\n            $('[data-element-id=' + ele.key + '_label]').find('g.djs-visual text').css('fill', history.color)\r\n            break\r\n          case 'ExclusiveGateway':\r\n          case 'ParallelGateway':\r\n            _visual.find('polygon').css('stroke', history.color)\r\n            _visual.find('path').css('fill', history.color)\r\n            _visual.find('path').css('stroke', history.color)\r\n            $('[data-element-id=' + ele.key + '_label]').find('g.djs-visual text').css('fill', history.color)\r\n            break\r\n          default:\r\n            break\r\n        }\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n\r\n    defaultRender () {\r\n      $('[data-element-id] g.djs-visual rect').css('fill', this.style.blank.color)\r\n      $('[data-element-id] g.djs-visual circle').css('fill', this.style.blank.color)\r\n\r\n      $('[data-element-id] g.djs-visual rect').css('stroke', this.style.blank.backgroundColor)\r\n      $('[data-element-id] g.djs-visual circle').css('stroke', this.style.blank.backgroundColor)\r\n      $('[data-element-id] g.djs-visual path').css('stroke', this.style.blank.backgroundColor)\r\n      $('[data-element-id] g.djs-visual polygon').css('stroke', this.style.blank.backgroundColor)\r\n\r\n      let paths = $('[data-element-id] g.djs-visual path')\r\n      for (let i = 0; i < paths.length; i++) {\r\n        if ($(paths[i]).siblings('polygon').length > 0) {\r\n          $(paths[i]).css('fill', this.style.blank.backgroundColor)\r\n        }\r\n      }\r\n\r\n      $('marker:gt(0) path').css({\r\n        fill: this.style.blank.backgroundColor,\r\n        stroke: this.style.blank.backgroundColor\r\n      })\r\n    },\r\n    getProcessByProcessInstanceId: function () {\r\n      if (this.processInstanceId === null) return null\r\n      let This = this\r\n      util.http.get('/api/activiti/query/getByProcessInstanceId/' + this.processInstanceId).then(response => {\r\n        This.process = response.data\r\n      })\r\n    },\r\n    getProcessByProcessDefinitionKey: function () {\r\n      if (this.processDefinitionKey == null) return null\r\n      let This = this\r\n      util.http.get('/api/activiti/bpmn/getMaxVersionByProcessDefinitionKey/' + this.processDefinitionKey).then(response => {\r\n        This.process = response.data\r\n      })\r\n    },\r\n    getProcessByProcessDefinitionId: function () {\r\n      let This = this\r\n      util.http.get('/api/activiti/bpmn/getByProcessDefinitionId/' + this.processDefinitionId).then(response => {\r\n        This.process = response.data\r\n      })\r\n    },\r\n    getElements: function () {\r\n      let _this = this\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"less\">\r\n    .vertical-center-modal {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        .ivu-modal {\r\n            top: 0;\r\n        }\r\n    }\r\n</style>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FlowDiagram.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FlowDiagram.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FlowDiagram.vue?vue&type=template&id=af32f3ba&\"\nimport script from \"./FlowDiagram.vue?vue&type=script&lang=js&\"\nexport * from \"./FlowDiagram.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FlowDiagram.vue?vue&type=style&index=0&id=af32f3ba&prod&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}