# 仿dingding流程图

**Repository Path**: star714/imitating-dingding-flow-chart

## Basic Information

- **Project Name**: 仿dingding流程图
- **Description**: 仿钉钉的自定义流程图
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 105
- **Created**: 2020-11-13
- **Last Updated**: 2023-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 仿钉钉流程图(开源不易求点star)
#### 仿钉钉流程图 Api包括：一维数组传参，获取单节点数据，返回所有节点组成的一位数组 生成每个节点的父节点Id集合
<p>
   很多公司后台管理系统都需要画流程图，功能大同小异，所以，仿照钉钉管理系统 花了一个流程图
   效果如下 
   <img src="./flow.png">
</p>
    以下为此插件 入口与出口的数据结构，暴露的事件以及公共类所在目录及修改方式 （小部分需要修改源代码，不难找，有问题可以call我）

#### 入口数据格式

整个流程图分为四种节点 分别为 root end row(占一整行) col(列元素)  
```javascript
    class rootNode{

    }
    class rowNode{  
        
    }
    class colNode{
        
    }
    class endNode{
        
    }
```
传参进来的数据格式  
``` javascript

// 生成流程图时会自动组装数据 除了造假数据之外可以不用关心
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

``` JavaScript
Array<node>
class node {

}
```
暴露的方法
``` javascript
getResData() //获取所有节点组成的一维数组
nodeChange(changeRes) // 当前节点发生变化时可手动去触发 //触发方式1.this.$refs.refsName.nodeChange(newNode) 2. 引入event-bus this.$emit('nodeChange',newNode)
```
暴露的事件
```javascript
@clickNode // 点击当前节点时触发 返回当前节点
```
基本所有的功能都能实现了，抽屉部分 每个公司里面的东西不一样，点击节点之后拿到数据自己去写吧。

// 到这儿 已经可以用了 更加详细的配置 之后再写

## 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://cli.vuejs.org/config/).