|
|
@@ -1,87 +1,69 @@
|
|
|
-# 仿钉钉流程图
|
|
|
-#### 仿钉钉流程图 Api包括：一维数组传参，获取单节点数据，返回所有节点组成的一位数组 生成每个节点的父节点Id集合
|
|
|
-<p>
|
|
|
- 很多公司后台管理系统都需要画流程图，功能大同小异，所以，仿照钉钉管理系统 花了一个流程图
|
|
|
- 效果如下
|
|
|
- <img src="./flow.png">
|
|
|
-</p>
|
|
|
- 以下为此插件 入口与出口的数据结构，暴露的事件以及公共类所在目录及修改方式 （小部分需要修改源代码，不难找，有问题可以call我）
|
|
|
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
|
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
|
+**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
|
|
|
|
|
|
-#### 入口数据格式
|
|
|
+- [仿钉钉自定义流程文档](#%E4%BB%BF%E9%92%89%E9%92%89%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B5%81%E7%A8%8B%E6%96%87%E6%A1%A3)
|
|
|
+ - [效果图](#%E6%95%88%E6%9E%9C%E5%9B%BE)
|
|
|
+ - [使用方法](#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)
|
|
|
+ - [Attributes](#attributes)
|
|
|
+ - [Events](#events)
|
|
|
+ - [方法](#%E6%96%B9%E6%B3%95)
|
|
|
+ - [TreeNode](#treenode)
|
|
|
|
|
|
-整个流程图分为四种节点 分别为 root end row(占一整行) col(列元素)
|
|
|
-```javascript
|
|
|
- class rootNode{
|
|
|
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
|
|
|
|
- }
|
|
|
- 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 // 点击当前节点时触发 返回当前节点
|
|
|
-```
|
|
|
-基本所有的功能都能实现了，抽屉部分 每个公司里面的东西不一样，点击节点之后拿到数据自己去写吧。
|
|
|
+# 仿钉钉自定义流程文档
|
|
|
|
|
|
-// 到这儿 已经可以用了 更加详细的配置 之后再写
|
|
|
+## 效果图
|
|
|
+<img src='flow.png'/>
|
|
|
|
|
|
-## Project setup
|
|
|
+## 使用方法
|
|
|
+在需要的地方引入，例如全局引入 (main.js)
|
|
|
+```javaScript
|
|
|
+import DrawFlow from "./components/DrawFlow";
|
|
|
+Vue.use(DrawFlow);
|
|
|
```
|
|
|
-yarn install
|
|
|
+然后就使用它
|
|
|
+```html
|
|
|
+ <FactoryDrawFlow
|
|
|
+ @clickNode="clickNode"
|
|
|
+ ref="flow"
|
|
|
+ :FlowConfig="FlowConfig"
|
|
|
+ ></FactoryDrawFlow>
|
|
|
```
|
|
|
+### Attributes
|
|
|
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
+|------------|--------|------------|--------|--------|
|
|
|
+| FlowConfig | 展示数据 | FlowConfig | -- | -- |
|
|
|
+### Events
|
|
|
|
|
|
-### Compiles and hot-reloads for development
|
|
|
-```
|
|
|
-yarn serve
|
|
|
-```
|
|
|
+| 事件名称 | 说明 | 回调参数
|
|
|
+|------|------|------|
|
|
|
+| clickNode | 点击流程节点时触发 | 返回当前节点数据（TreeNode）
|
|
|
|
|
|
-### Compiles and minifies for production
|
|
|
-```
|
|
|
-yarn build
|
|
|
-```
|
|
|
+### 方法
|
|
|
+
|
|
|
+| 方法名称 | 说明 | 回调参数
|
|
|
+|------|------|------|
|
|
|
+| getResData | 获取流程图数据 | 返回两个参数，依次为：所有流程节点的一维数组集合、用于渲染流程图而生成的树状结构
|
|
|
+| nodeChange | 在自己业务页面操作完，当前节点发生变化时，可手动去触发 | 支持传入当前改变的节点，数据结构参考下文TreeNode
|
|
|
+
|
|
|
+### TreeNode
|
|
|
+
|
|
|
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
+|----------|---------------------------------------------|-----------------|-------------------------|--------|
|
|
|
+| id | 定位节点的唯一标识 | string | -- | -- |
|
|
|
+| groupId | 流程图生成过程中生成的组id | string | -- | -- |
|
|
|
+| type | 节点类型 | string | '1','2','3','4','5','6' | -- |
|
|
|
+| title | 标题 | string | -- | -- |
|
|
|
+| groupPid | 流程图渲染过程中所应用数据 | string | -- | -- |
|
|
|
+| content | 节点显示内容 | string | -- | -- |
|
|
|
+| isRow | 是否为行元素 | boolean | -- | -- |
|
|
|
+| isRoot | 是否为根节点 | boolean | -- | -- |
|
|
|
+| data | 拓展属性，用以存储业务相关内容 | object | -- | {} |
|
|
|
+| pids | 流程图生成过程中生成属性，指明此节点父节点数组 | Array<'string'> | -- | -- |
|
|
|
|
|
|
-### Lints and fixes files
|
|
|
-```
|
|
|
-yarn lint
|
|
|
-```
|
|
|
|
|
|
-### Customize configuration
|
|
|
-See [Configuration Reference](https://cli.vuejs.org/config/).
|
xiaoyang