任意层级的流程图展示js插件

仁泉之子

已于 2022-01-19 19:51:54 修改

阅读量3.6k

点赞数 2

分类专栏： web前端文章标签： html javascript vue.js es6

于 2020-05-14 17:19:46 首次发布

本文链接：https://blog.csdn.net/cxgasd/article/details/106124174

版权

web前端专栏收录该内容

15 篇文章 3 订阅

订阅专栏

最近展示审批流需要展示并行审批的功能, 于是开发了一个可以展示任意层级的流程图。

后台是activity开发的。

需要提供如下的数据结构：

{
  //最顶层必须是一个串行任务
  "taskType": 0, //0是 串行任务 2是并行任务
  "subTasks": [{
    "taskType": 0,
    "subTasks": null, //任务子级
    "state": 10, //"10": "已执行","20": "当前执行","30": "未执行"
    "taskName": "串行任务11",
    "assignees": [{
      "nickname": "执行人11"
    }],
  }, {
    "taskType": 2,
    "subTasks": [{
        "taskType": 0,
        "subTasks": [{
          "taskType": 0,
          "subTasks": null,
          "state": 10,
          "taskName": "串并行任务211",
          "assignees": [{
            "nickname": "执行人211"
          }],
        }, {
          "taskType": 2,
          "subTasks": [{
            "taskType": 0,
            "taskName": "串并行任务2121",
            "subTasks": null,
            "state": 10,
            "assignees": [{
              "nickname": "执行人2121"
            }],
          }, {
            "taskType": 0,
            "taskName": "串并行任务2122",
            "subTasks": null,
            "state": 20,
            "assignees": [{
              "nickname": "执行人2122"
            }],
          }],
        }, {
          "taskType": 0,
          "taskName": "串并行任务213",
          "subTasks": null,
          "state": 30,
          "assignees": [{
            "nickname": "执行人213"
          }],
        }],
      },
      {
        "taskType": 0,
        "subTasks": [{
          "taskType": 0,
          "taskName": "并行任务221",
          "subTasks": null,
          "state": 10,
          "assignees": [{
            "nickname": "执行人221"
          }],
        }, {
          "taskType": 0,
          "taskName": "并行任务222",
          "subTasks": null,
          "state": 20,
          "assignees": [{
            "nickname": "执行人222"
          }],
        }],
      },
      {
        "taskType": 0,
        "taskName": "并行任务23",
        "subTasks": null,
        "state": 10,
        "assignees": [{
          "nickname": "执行人23"
        }],
      }
    ],
  }, {
    "taskType": 0,
    "subTasks": null,
    "state": 30,
    "taskName": "串行任务13",
    "assignees": [{
      "username": "123456",
      "nickname": "执行人13"
    }],
  }],
}