完善readme

README.md

@@ -5,8 +5,46 @@
 ### 仿钉钉自定义流程图（完成）；dingding分支
 ### echarts 地图添加点击事件显示状图（完成）； echarts分支
 
-### SelectBox穿梭框选人组件（正在重构中。。。）
+###  SelectBox穿梭框选人组件（正在重构中。。。）
 
 需要的同学可以按需拉去
 
 
+# 仿钉钉自定义流程文档
+
+## 效果图
+<img src='flow.png'/>
+
+### Attributes 
+| 参数       | 说明     | 类型       | 可选值 | 默认值 |
+|------------|--------|------------|--------|--------|
+| FlowConfig | 展示数据 | FlowConfig | --     | --     |
+### Events
+
+| 事件名称   | 说明   | 回调参数  
+|------|------|------|
+| clickNode | 点击流程节点时触发 | 返回当前节点数据（TreeNode）
+
+### 事件
+
+| 事件名称   | 说明   | 回调参数  
+|------|------|------|
+| 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'> | --                      | --     |
+
+

src/components/DrawFlow/src/DrawFlow.vue

@@ -46,6 +46,7 @@ export default {
       },
       isColList: ["3", "5"],
       selfConfig: null,
+      selfTreeData: [],
       currentNode: null
     };
   },
@@ -77,7 +78,7 @@ export default {
     getResData() {
       let list = JSON.parse(JSON.stringify(this.selfConfig));
       getPidArr(list);
-      return list;
+      return { list, treeData: this.selfTreeData };
     },
     /**
      * 初始化 数据私有化
@@ -263,6 +264,7 @@ export default {
     // this.init();
     let FlowConfig = this.selfConfig;
     FlowConfig = this.transformTree(FlowConfig);
+    this.selfTreeData = FlowConfig;
     const root = JSON.parse(JSON.stringify(this.selfConfig[0]));
     return (
       <div class="design-engine">

src/components/DrawFlow/src/components/NodeConfigFactory/NodeFactory.js

@@ -9,25 +9,25 @@ export class Node {
   nodeId;
   type;
   childNode;
-  title = "title";
+  title = "标题";
   content = "content";
   conditionNodes;
   constructor({ id, type, isRow }) {
     this.groupId = id;
     this.id = HashCode();
     this.type = type;
-    this.content += this.id;
+    this.content = "请选择";
     this.isRow = isRow;
   }
 }
 export class ConditionNode {
-  title = "title";
+  title = "标题";
   data = {};
   constructor({ groupId, type, id, isRow }) {
     this.id = HashCode();
     this.groupId = groupId;
     this.type = type;
-    this.content += this.id;
+    this.content = "请选择";
     this.groupPid = id;
     this.isRow = isRow;
   }

src/main.js

@@ -2,12 +2,15 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import elementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
 import ant from "ant-design-vue";
 import DrawFlow from "./components/DrawFlow";
 import EchartsDemo from "./components/echarts";
 import "ant-design-vue/dist/antd.less";
 Vue.config.productionTip = false;
 Vue.use(ant);
+Vue.use(elementUI);
 Vue.use(EchartsDemo);
 Vue.use(DrawFlow);
 new Vue({

src/views/Home.vue

@@ -1,6 +1,17 @@
 <template>
   <div id="drawProcessDesign">
     <a-button @click="getData">提交</a-button>
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
+      <div>这是一维数组{{ list }}</div>
+      <div class="treeData" style="color:bule">这是树形结构{{ treeData }}</div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
     <FactoryDrawFlow
       @clickNode="clickNode"
       ref="flow"
@@ -12,6 +23,9 @@
 #drawProcessDesign {
   background: #f0f2f5;
 }
+.treeData {
+  color: blue;
+}
 </style>
 
 <script>
@@ -21,6 +35,9 @@ export default {
   components: {},
   data() {
     return {
+      dialogVisible: false,
+      list: "",
+      treeData: "",
       FlowConfig: [
         {
           id: "root",
@@ -40,9 +57,11 @@ export default {
   },
   methods: {
     getData() {
-      console.log(this.$refs.flow);
-      let res = this.$refs.flow.getResData();
-      console.log("这是返回的一维数组", res);
+      let { list: res, treeData } = this.$refs.flow.getResData();
+      this.list = JSON.stringify(res);
+      this.treeData = JSON.stringify(treeData);
+      console.log("这是返回的一维数组", treeData);
+      this.dialogVisible = true;
     },
     /**
      * 1、创建一个row length 1