Vue 仿釘釘流程圖（流程節點繪制 vue+Ant Design of Vue）
仿釘釘流程圖 Api包括：一維陣列傳參，獲取單節點資料，回傳所有節點組成的一位陣列 生成每個節點的父節點Id集合
很多公司后臺管理系統都需要畫流程圖，功能大同小異，所以，仿照釘釘管理系統 花了一個流程圖 效果如下 
入口資料格式
整個流程圖分為四種節點 分別為 root end row(占一整行) col(列元素)
class rootNode{
}
class rowNode{
}
class colNode{
}
class endNode{
}
傳參進來的資料格式
// 生成流程圖時會自動組裝資料 除了造假資料之外可以不用關心
Array<node>
class Node {
id // 如果是開始節點請寫死 "root" 節點id
groupId // 組ID
type // 1|2|3|4|5|6 開始，抄送 條件 審批 結束 流轉至 配置性檔案
title // "標題",
groupPid //如果col元素 會以他們的groupId虛擬一個包裹層，包裹層的groupId 是所包裹的所有col元素的groupPid
content // "顯示內容",
isRow // 是否為行元素
isRoot // 是否是根節點
data // {}
pids //非必填 無需關心（因專案需求需要向后端決議上一關聯節點需要） 目前只有在觸發 subData()時生成
}
暴露出去的資料格式 Array
Array<node>
class node {
}
暴露的方法
getResData() //獲取所有節點組成的一維陣列
nodeChange(changeRes) // 當前節點發生變化時可手動去觸發 //觸發方式1.this.$refs.refsName.nodeChange(newNode) 2. 引入event-bus this.$emit('nodeChange',newNode)
暴露的事件
@clickNode // 點擊當前節點時觸發 回傳當前節點
基本所有的功能都能實作了，抽屜部分 每個公司里面的東西不一樣，點擊節點之后拿到資料自己去寫吧，
// 到這兒 已經可以用了 更加詳細的配置 之后再寫
git 地址 ：https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/
開源不易 求star
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
Lints and fixes files
yarn lint
Customize configuration
See Configuration Reference.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/141982.html
標籤：其他