适用VUE框架的流程图展示

A flowchart component from Vue

1.安装依赖 / install dependencies

npm install vue-flowplan --save

2.使用方法 / Usage

模拟数据 / Graph Data

nodeList = [
          {
            'id': 2895,
            'code': 'station_openclose',
            'nameX': '开始',
            'proTrans': [{
              'id': null,
              'nameX': '',
              'instanceId': null,
              'fromNode': 'station_openclose',
              'toNode': 'station_openclose_begin',
              'finishSeq': null,
              'status': null,
              'extInfo': null,
              'isBack': false
            }]
          },
          {
            'id': 2896,
            'code': 'station_openclose_begin',
            'nameX': '站点停开机申请',
            'proTrans': [{
              'id': null,
              'nameX': '',
              'instanceId': null,
              'fromNode': 'station_openclose_begin',
              'toNode': 'di_shi_shen_he',
              'finishSeq': null,
              'status': null,
              'extInfo': null,
              'isBack': false
            }]
          },
          {
            'id': 2897,
            'code': 'di_shi_shen_he',
            'nameX': '市级审核',
            'proTrans': [
              {
                'id': null,
                'nameX': '',
                'instanceId': null,
                'fromNode': 'di_shi_shen_he',
                'toNode': 'du_dao_yuan_shen_pi',
                'finishSeq': null,
                'status': null,
                'extInfo': null,
                'isBack': false
              },
              {
                'id': null,
                'nameX': '不同意',
                'instanceId': null,
                'fromNode': 'di_shi_shen_he',
                'toNode': 'station_openclose_begin',
                'finishSeq': null,
                'status': null,
                'extInfo': null,
                'isBack': true
              }
            ]
          },
          {
            'id': 2898,
            'code': 'du_dao_yuan_shen_pi',
            'nameX': '省中心电脑部预审',
            'proTrans': [{
              'id': null,
              'nameX': '',
              'instanceId': null,
              'fromNode': 'du_dao_yuan_shen_pi',
              'toNode': 'dian_nao_piao_bu_shen_he',
              'finishSeq': null,
              'status': null,
              'extInfo': null,
              'isBack': false
            }, {
              'id': null,
              'nameX': '不同意',
              'instanceId': null,
              'fromNode': 'du_dao_yuan_shen_pi',
              'toNode': 'station_openclose_begin',
              'finishSeq': null,
              'status': null,
              'extInfo': null,
              'isBack': true
            }]
          },
          {
            'id': 2899,
            'code': 'dian_nao_piao_bu_shen_he',
            'nameX': '电脑票部审核',
            'proTrans': [{
              'id': null,
              'nameX': '',
              'instanceId': null,
              'fromNode': 'dian_nao_piao_bu_shen_he',
              'toNode': 'station_openclose_end',
              'finishSeq': null,
              'status': null,
              'extInfo': null,
              'isBack': false
            }]
          },
          {
            'id': 2900,
            'code': 'station_openclose_end',
            'nameX': '结束',
            'proTrans': []
          }
        ]

html便签内容 / html tag

<flowchart :nodeList='nodeList' :currentNodeCode="'du_dao_yuan_shen_pi'"  @itemClick='itemClick'></flowchart>

currentNodeCode 为当前节点名字

itemClick 为点击事件