{"remainingRequest":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\boman-framwork\\ruoyi-ui\\src\\components\\FlowChartShow\\index.vue?vue&type=style&index=0&id=3878c0b0&lang=scss&scoped=true&","dependencies":[{"path":"E:\\boman-framwork\\ruoyi-ui\\src\\components\\FlowChartShow\\index.vue","mtime":1619607677258},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5GbG93Q2hhcnRTaG93ew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiA1NjhweDsNCiAgcGFkZGluZzogMTZweDsNCiAgYm94LXNpemluZzogYm9yZGVyLWJveDsNCiAgZGlzcGxheTogZmxleDsNCiAgZmxleC1kaXJlY3Rpb246IHJvdzsNCg0KICAudGl0bGV7DQogICAgICBoZWlnaHQ6IDIwcHg7DQogICAgICBtYXJnaW4tYm90dG9tOiAxNnB4Ow0KICAgICAgZGlzcGxheTogZmxleDsNCiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQoNCiAgICAgID5zcGFuew0KICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQogICAgICAgIHdpZHRoOjRweDsNCiAgICAgICAgaGVpZ2h0OjIwcHg7DQogICAgICAgIGJhY2tncm91bmQ6cmdiYSgyMTYsMjE2LDIxNiwxKTsNCiAgICAgICAgbWFyZ2luLXJpZ2h0OiA5cHg7DQogICAgICB9DQoNCiAgICAgID5wew0KICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQogICAgICAgIGZvbnQtc2l6ZToxNHB4Ow0KICAgICAgICBmb250LXdlaWdodDo1MDA7DQogICAgICAgIGNvbG9yOnJnYmEoMCwwLDAsMSk7DQogICAgICAgIGxpbmUtaGVpZ2h0OjIwcHg7DQoNCiAgICAgICAgPnNwYW4uc3RhdHVzew0KICAgICAgICAgIGNvbG9yOiAjMDlBMTU1Ow0KICAgICAgICB9DQogICAgICB9DQogICAgfQ0KDQogIC5mbG93RGlzcGxheXsNCiAgICBmbGV4OiAxOw0KICAgIG1hcmdpbi1yaWdodDogMzJweDsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQoNCiAgICAjbXlGbG93RGVzaWduZXJEaXZ7DQogICAgICBmbGV4OiAxOw0KICAgIH0NCiAgfQ0KDQogIC5hcHByb3ZhbEhpc3Rvcnl7DQogICAgZmxleDogMTsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQogICAgb3ZlcmZsb3c6IGhpZGRlbjsNCg0KDQogICAgLmFwcHJvdmFsew0KICAgICAgZmxleDogMTsNCiAgICAgIG92ZXJmbG93OiBhdXRvOw0KICAgICAgcGFkZGluZy10b3A6IDJweDsNCiAgICB9DQoNCiAgICAuYXBwcm92YWxJdGVtew0KICAgICAgcGFkZGluZzogMTBweCA4cHggOXB4IDE5cHg7DQogICAgICBiYWNrZ3JvdW5kOnJnYmEoMjQ5LDI0OSwyNDksMSk7DQoNCiAgICAgIC5hcHByb3ZhbEl0ZW1UaXRsZXsNCiAgICAgICAgZGlzcGxheTogZmxleDsNCiAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOw0KICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgICAgICBtYXJnaW4tYm90dG9tOiA5cHg7DQoNCiAgICAgICAgPnA6bGFzdC1jaGlsZHsNCiAgICAgICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQoNCiAgICAgICAgICA+aXsNCiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAxM3B4Ow0KICAgICAgICAgICAgY3Vyc29yOiBwb2ludGVyOw0KICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgICAgfQ0KDQogICAgICAubGlua3NFcnJvcnsNCiAgICAgICAgcHsNCiAgICAgICAgICBtYXJnaW4tYm90dG9tOiAxMHB4Ow0KDQogICAgICAgICAgPnNwYW57DQogICAgICAgICAgICBtYXJnaW4tbGVmdDogOHB4Ow0KICAgICAgICAgIH0NCg0KDQogICAgICAgICAgJjpudGgtbGFzdC1jaGlsZCgyKXsNCiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgICAgICAgIH0NCg0KICAgICAgICAgIC5jaGVja1NlbGVjdHsNCiAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsNCiAgICAgICAgICAgIGZsZXg6IDE7DQoNCiAgICAgICAgICAgIC5idXJnZW9uLXNlbGVjdC1zZWxlY3Rpb257DQogICAgICAgICAgICAgIGJvcmRlci1jb2xvcjogI2RjZGVlMjsNCiAgICAgICAgICAgICAgYm94LXNoYWRvdzogbm9uZTsNCiAgICAgICAgICAgIH0NCg0KICAgICAgICAgICAgJjpmaXJzdC1jaGlsZHsNCiAgICAgICAgICAgICAgd2lkdGg6IDYwcHg7DQogICAgICAgICAgICAgIGZsZXg6IG5vbmU7DQogICAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiA4cHg7DQogICAgICAgICAgICAgIC5idXJnZW9uLXNlbGVjdC1zZWxlY3Rpb257DQogICAgICAgICAgICAgICAgYmFja2dyb3VuZDogI0Y5RjlGOTsNCiAgICAgICAgICAgICAgICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogMDsNCiAgICAgICAgICAgICAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogMDsNCiAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICAmOmxhc3QtY2hpbGR7DQogICAgICAgICAgICAgIC5idXJnZW9uLXNlbGVjdC1zZWxlY3Rpb257DQogICAgICAgICAgICAgICAgYm9yZGVyLWxlZnQ6IG5vbmU7DQogICAgICAgICAgICAgICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogMDsNCiAgICAgICAgICAgICAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwOw0KICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgICAgfQ0KICAgICAgICB9DQogICAgICB9DQogICAgfQ0KDQogICAgLmJ1cmdlb24tdGltZWxpbmUtaXRlbXsNCiAgICAgICAgICBpew0KICAgICAgICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgICAgIH0NCg0KICAgICAgICAgIGkuc3VjY2Vzc3sNCiAgICAgICAgICAgIGNvbG9yOiAjMDlBMTU1DQogICAgICAgICAgfQ0KDQogICAgICAgICAgaS5iYWNrew0KICAgICAgICAgICAgY29sb3I6ICNFRDQwMTQNCiAgICAgICAgICB9DQoNCiAgICAgICAgICBpLmFwcHJvdmFsew0KICAgICAgICAgICAgY29sb3I6ICNDOEM4QzgNCiAgICAgICAgICB9DQogICAgICAgIH0NCiAgfQ0KfQ0KDQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8TA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/FlowChartShow","sourcesContent":["<template>\r\n  <div class=\"FlowChartShow\">\r\n    <div class=\"flowDisplay\">\r\n      <div class=\"title\">\r\n        <span></span>\r\n        <p>\r\n          流程进度 - <span class=\"status\" :style=\"processStyle\">{{processStatusName}}</span>\r\n        </p>\r\n      </div>\r\n      <div id=\"myFlowDesignerDiv\" ></div>\r\n    </div>\r\n    <div class=\"approvalHistory\">\r\n      <div class=\"title\">\r\n        <span></span>\r\n        <p>\r\n          审批历史\r\n        </p>\r\n      </div>\r\n      <div class=\"approval\">\r\n        <Timeline>\r\n            <TimelineItem color=\"green\" v-for=\"(item,index) in approvalHistory\" :key=\"index\">\r\n                <Icon type=\"iconbj_round\" slot=\"dot\" class=\"approval\" v-if=\"item.status === 2\"></Icon>\r\n                <Icon type=\"iconbj_round\" slot=\"dot\" class=\"success\" v-if=\"item.status === 0\"></Icon>\r\n                <Icon type=\"iconbj_round\" slot=\"dot\" class=\"back\" v-if=\"[1,-1,-3,5,33].indexOf(item.status) >= 0\"></Icon>\r\n                <div class=\"approvalItem\" v-if=\"item.nodeType !== 1 && item.nodeType !== 2 && item.status !== -3\">\r\n                  <div class=\"approvalItemTitle\">\r\n                    <p v-if=\"item.status === 2\">待 {{item.nodeName}} 审核</p>\r\n                    <p v-if=\"item.status === 0\">\r\n                      {{item.nodeName}} <span style=\"color:#09A155\">{{item.statusName}}</span>\r\n                    </p>\r\n                    <p v-if=\"item.status === 1\">\r\n                      {{item.nodeName}} <span style=\"color:#ED4014\">驳回</span>至 {{item.backNodeName}}\r\n                    </p>\r\n\r\n                    <p v-if=\"item.status === -1\">\r\n                      {{item.nodeName}} 关闭\r\n                    </p>\r\n\r\n                    <p v-if=\"item.status === -3\">\r\n                      {{item.nodeName}} 已撤销\r\n                    </p>\r\n                    <p v-if=\"Number(item.status) === 5\" style=\"color:#ED4014\">\r\n                      条件不符\r\n                    </p>\r\n                    <p v-if=\"Number(item.status) === 33\" style=\"color:#ED4014\">\r\n                      {{item.nodeName}}审核 节点报错\r\n                    </p>\r\n                    <p>\r\n                      <span v-if=\"item.status === 2\">已等待{{item.elapsedTime}}</span>\r\n                      <span v-if=\"item.status !== 2\">耗时{{item.elapsedTime}}</span>\r\n                      <i class=\"iconfont iconios-arrow-up\" v-if=\"item.flag\" @click=\"folding(item)\"></i>\r\n                      <i class=\"iconfont iconios-arrow-down\" v-if=\"!item.flag\" @click=\"folding(item)\"></i>\r\n                    </p>\r\n                  </div>\r\n                  <div class=\"approvalItemContent\" v-show=\"item.flag\" >\r\n                    <Table border :columns=\"columns\" :data=\"item.approvalLists\"  v-if=\"item.nodeType !== undefined\"></Table>\r\n                    <!-- 连线报错 -->\r\n                    <div v-if=\"Number(item.status) === 5\" class=\"linksError\">\r\n                      <p>流程报错:<span>{{item.errorType}}</span></p>\r\n                      <p>错误简述:<span>{{item.errorMsg}}</span></p>\r\n                      <p>人工干预:<span>{{item.actType}}至{{item.manualNode}}审核</span></p>\r\n                    </div>\r\n                    <!-- 节点报错 -->\r\n                    <div v-if=\"Number(item.status) ===33\" class=\"linksError\">\r\n                      <p>流程报错:<span>{{item.errorType}}</span></p>\r\n                      <p>错误简述:<span>{{item.errorMsg}}</span></p>\r\n                      <p>人工干预:<span>更改节点审批人为 {{item.approvalName}}</span></p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"approvalItem\" v-if=\"item.nodeType === 1\">\r\n                  开始进入审批\r\n                </div>\r\n\r\n                <div class=\"approvalItem\" v-if=\"item.nodeType === 2\">\r\n                  审批结束\r\n                </div>\r\n\r\n                <div class=\"approvalItem\" v-if=\"item.status === -3\">\r\n                  发起人{{item.initiatorName}}已撤销流程\r\n                </div>\r\n            </TimelineItem>\r\n        </Timeline>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</template>\r\n<script>\r\nimport '../../utils/go'\r\nimport FlowDisplay from '../../utils/flow-display';\r\nimport {\r\n     addGenflowshow\r\n    } from \"@/api/activiti/definition\";\r\nexport default {\r\n  name:'FlowChartShow',\r\n  props:{\r\n    instanceId:{\r\n      type:[Number,String]\r\n    }\r\n  },\r\n  data(){\r\n    return {\r\n      data:{},\r\n      myDiagram:{},\r\n      myDisplay:{},\r\n      flowTableShow:false,\r\n      approvalHistory:[\r\n        // {\r\n        //   flag:true,  //控制审批详情展示\r\n        //   status:3,  //状态\r\n        //   statusName:'同意',  //状态中文名\r\n        //   elapsedTime: '23h34m',  //消耗时间\r\n        //   nodeName:'总经理',  //审批人\r\n        //   backNodeName:'开始节点', //驳回节点名称\r\n        //   approvalLists:[\r\n        //     {\r\n        //       approvalName:'张敏',\r\n        //       approvalOperation:'同意',\r\n        //       approvalStatus:0,  //审批人操作状态：0同意；1驳回\r\n        //       approvalOpinions: '可以,没问题'\r\n        //     },\r\n        //     {\r\n        //       approvalName:'张敏',\r\n        //       approvalOperation:'待审批',\r\n        //       approvalStatus:3,  //审批人操作状态：0同意；1驳回\r\n        //       approvalOpinions: '可以,没问题'\r\n        //     }\r\n        //   ]\r\n        // }\r\n      ],\r\n      columns:[\r\n        {\r\n            title: '审批人',\r\n            key: 'approvalName',\r\n            render:(h,params) => {\r\n              return h('p',{\r\n                style:{\r\n                  'display':'flex',\r\n                  'align-items':'center'\r\n                }\r\n              },[\r\n                h('i',{\r\n                  class:`iconfont ${params.row.approverType === 2?'iconios-people':'iconios-person'}`,\r\n                  style:{\r\n                    'margin-right':'5px'\r\n                  }\r\n                },null),\r\n                h('span',{\r\n\r\n                },params.row.approvalName),\r\n              ])\r\n            }\r\n        },\r\n        {\r\n            title: '审批操作',\r\n            key: 'approvalOperation',\r\n            render:(h,params) => {\r\n              // 同意\r\n              if(params.row.approvalStatus === 0){\r\n                return h('span',{\r\n                  style:{\r\n                    color:'#09A155'\r\n                  }\r\n                },params.row.approvalOperation)\r\n              }\r\n              // 驳回\r\n              if(params.row.approvalStatus === 1){\r\n                return h('span',{\r\n                  style:{\r\n                    color:'#ED4014'\r\n                  }\r\n                },params.row.approvalOperation)\r\n              }\r\n\r\n              // 关闭\r\n\r\n              if(params.row.approvalStatus === -1 || params.row.approvalStatus === -3){\r\n                return h('span',{\r\n                  style:{\r\n                    color:'#ED4014'\r\n                  }\r\n                },params.row.approvalOperation)\r\n              }\r\n\r\n              // 待审批\r\n              if(params.row.approvalStatus === 2){\r\n                return h('span',{\r\n\r\n                },params.row.approvalOperation)\r\n              }\r\n\r\n\r\n\r\n            }\r\n        },\r\n        {\r\n            title: '审批意见',\r\n            key: 'approvalOpinions'\r\n        }\r\n      ],\r\n      processStatus:null,  //流程状态\r\n      processStatusName:'',  //流程状态中文\r\n      processStyle:{},  //流程进度样式\r\n      showNodes:'', //所以经过的节点\r\n    }\r\n  },\r\n  mounted () {\r\n    this.$nextTick(() => {\r\n      this.getChartInfo()\r\n    })\r\n  },\r\n  methods:{\r\n    // 获取流程图信息\r\n    getChartInfo () {\r\n      let id = this.instanceId?this.instanceId:this.$route.query.instanceId\r\n      addGenflowshow()\r\n        .then(res => {\r\n          if(res.data.resultCode === 0){\r\n            let guiStyle = res.data.data.guiStyle?JSON.parse(res.data.data.guiStyle):{}\r\n            let approvalHistory = res.data.data.guiValue?res.data.data.guiValue:[]\r\n            this.myDiagram = Object.assign(this.myDiagram,guiStyle)\r\n            this.approvalHistory = approvalHistory\r\n            if(res.data.data.showNodes.indexOf(res.data.data.currentNode) >= 0){\r\n              res.data.data.showNodes.splice(res.data.data.showNodes.findIndex(item => item === res.data.data.currentNode), 1)\r\n            }\r\n            res.data.data.showNodes.push(res.data.data.currentNode)\r\n            this.showNodes = res.data.data.showNodes\r\n            this.processStatus = res.data.data.processStatus\r\n            switch(res.data.data.processStatus){\r\n              case 0:\r\n                this.processStyle = {\r\n                  color:'#C8C8C8'\r\n                };\r\n                break;\r\n              case 1:\r\n                this.processStyle = {\r\n                  color:'#FFA51F'\r\n                };\r\n                break;\r\n              case 2:\r\n                this.processStyle = {\r\n                  color:'#ED4014'\r\n                };\r\n                break;\r\n              case 3:\r\n              case 4:\r\n                this.processStyle = {\r\n                  color:'#09A155'\r\n                };\r\n                break;\r\n              case -1:\r\n              case -3:\r\n                this.processStyle = {\r\n                  color:'#ED4014'\r\n                };\r\n                break;\r\n            }\r\n            this.processStatusName = res.data.data.processStatusName\r\n            this.myDisplay = new FlowDisplay('myFlowDesignerDiv');\r\n            this.showFlowPath(this.myDisplay,res.data.data.currentNode)\r\n          }\r\n        });\r\n\r\n    },\r\n    showFlowPath (myDisplay,currentNodeId) {\r\n        var flowPath = this.getFinishedNodes(currentNodeId);\r\n        myDisplay.loadFlow(this.myDiagram);\r\n        // this.getErrorLinks(currentNodeId)\r\n        // myDisplay.loadFlow(this.myDiagram);\r\n        let isEnd = false\r\n\r\n        if(this.processStatus === -1 || this.processStatus === -3){\r\n          isEnd = true\r\n        }\r\n        myDisplay.animateFlowPath(flowPath,[], false, isEnd);\r\n    },\r\n    getFinishedNodes (currentNodeId) {\r\n      let nodeArr = this.getNode()\r\n\r\n      return nodeArr\r\n    },\r\n    getNode () {  //获取通过的节点key\r\n        // currentNode\r\n        let currentNodeKeys = []\r\n        this.showNodes.map(item => {\r\n          this.myDiagram.nodeDataArray.every(temp => {\r\n            if(temp.id === item){\r\n              currentNodeKeys.push(temp.key)\r\n              return false\r\n            }\r\n            return true\r\n          })\r\n        })\r\n\r\n        return currentNodeKeys.join(',')\r\n    },\r\n    getErrorLinks (currentNodeId) {\r\n      let currentNodeKey = null\r\n      this.myDiagram.nodeDataArray.every(temp => {\r\n        if(temp.id === currentNodeId){\r\n          currentNodeKey = temp.key\r\n          return false\r\n        }\r\n        return true\r\n      })\r\n      this.myDisplay.diagram.findNodeForKey(String(currentNodeKey)).findLinksOutOf().each(item => {\r\n        console.log(item)\r\n      })\r\n    },\r\n    folding (item) { //控制历史折叠\r\n      item.flag = !item.flag\r\n    }\r\n  }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.FlowChartShow{\r\n  width: 100%;\r\n  height: 568px;\r\n  padding: 16px;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  .title{\r\n      height: 20px;\r\n      margin-bottom: 16px;\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      >span{\r\n        display: inline-block;\r\n        width:4px;\r\n        height:20px;\r\n        background:rgba(216,216,216,1);\r\n        margin-right: 9px;\r\n      }\r\n\r\n      >p{\r\n        display: inline-block;\r\n        font-size:14px;\r\n        font-weight:500;\r\n        color:rgba(0,0,0,1);\r\n        line-height:20px;\r\n\r\n        >span.status{\r\n          color: #09A155;\r\n        }\r\n      }\r\n    }\r\n\r\n  .flowDisplay{\r\n    flex: 1;\r\n    margin-right: 32px;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    #myFlowDesignerDiv{\r\n      flex: 1;\r\n    }\r\n  }\r\n\r\n  .approvalHistory{\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n\r\n\r\n    .approval{\r\n      flex: 1;\r\n      overflow: auto;\r\n      padding-top: 2px;\r\n    }\r\n\r\n    .approvalItem{\r\n      padding: 10px 8px 9px 19px;\r\n      background:rgba(249,249,249,1);\r\n\r\n      .approvalItemTitle{\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 9px;\r\n\r\n        >p:last-child{\r\n          display: flex;\r\n          align-items: center;\r\n\r\n          >i{\r\n            margin-left: 13px;\r\n            cursor: pointer;\r\n          }\r\n        }\r\n      }\r\n\r\n      .linksError{\r\n        p{\r\n          margin-bottom: 10px;\r\n\r\n          >span{\r\n            margin-left: 8px;\r\n          }\r\n\r\n\r\n          &:nth-last-child(2){\r\n            display: flex;\r\n            align-items: center;\r\n          }\r\n\r\n          .checkSelect{\r\n            display: inline-block;\r\n            flex: 1;\r\n\r\n            .burgeon-select-selection{\r\n              border-color: #dcdee2;\r\n              box-shadow: none;\r\n            }\r\n\r\n            &:first-child{\r\n              width: 60px;\r\n              flex: none;\r\n              margin-left: 8px;\r\n              .burgeon-select-selection{\r\n                background: #F9F9F9;\r\n                border-top-right-radius: 0;\r\n                border-bottom-right-radius: 0;\r\n              }\r\n            }\r\n\r\n            &:last-child{\r\n              .burgeon-select-selection{\r\n                border-left: none;\r\n                border-top-left-radius: 0;\r\n                border-bottom-left-radius: 0;\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .burgeon-timeline-item{\r\n          i{\r\n            font-size: 12px;\r\n          }\r\n\r\n          i.success{\r\n            color: #09A155\r\n          }\r\n\r\n          i.back{\r\n            color: #ED4014\r\n          }\r\n\r\n          i.approval{\r\n            color: #C8C8C8\r\n          }\r\n        }\r\n  }\r\n}\r\n\r\n</style>\r\n"]}]}