|
@@ -1,87 +1,12 @@
|
|
|
-# 仿钉钉流程图(开源不易求点star)
|
|
|
|
|
-#### 仿钉钉流程图 Api包括:一维数组传参,获取单节点数据,返回所有节点组成的一位数组 生成每个节点的父节点Id集合
|
|
|
|
|
-<p>
|
|
|
|
|
- 很多公司后台管理系统都需要画流程图,功能大同小异,所以,仿照钉钉管理系统 花了一个流程图
|
|
|
|
|
- 效果如下
|
|
|
|
|
- <img src="./flow.png">
|
|
|
|
|
-</p>
|
|
|
|
|
- 以下为此插件 入口与出口的数据结构,暴露的事件以及公共类所在目录及修改方式 (小部分需要修改源代码,不难找,有问题可以call我)
|
|
|
|
|
|
|
+# 前段复杂组件库
|
|
|
|
|
|
|
|
-#### 入口数据格式
|
|
|
|
|
|
|
+## 目前包括
|
|
|
|
|
|
|
|
-整个流程图分为四种节点 分别为 root end row(占一整行) col(列元素)
|
|
|
|
|
-```javascript
|
|
|
|
|
- class rootNode{
|
|
|
|
|
|
|
+### 仿钉钉自定义流程图(完成);dingding分支
|
|
|
|
|
+### echarts 地图添加点击事件显示状图(完成); echarts分支
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
- class rowNode{
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- class colNode{
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- class endNode{
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-```
|
|
|
|
|
-传参进来的数据格式
|
|
|
|
|
-``` javascript
|
|
|
|
|
|
|
+### SelectBox穿梭框选人组件(正在重构中。。。)
|
|
|
|
|
|
|
|
-// 生成流程图时会自动组装数据 除了造假数据之外可以不用关心
|
|
|
|
|
-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/).
|
|
|