ini

README.md

@@ -1,3 +1,107 @@
+<!-- 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)*
+
+- [前端复杂组件库](#%E5%89%8D%E7%AB%AF%E5%A4%8D%E6%9D%82%E7%BB%84%E4%BB%B6%E5%BA%93)
+    - [开发背景](#%E5%BC%80%E5%8F%91%E8%83%8C%E6%99%AF)
+  - [目前包括](#%E7%9B%AE%E5%89%8D%E5%8C%85%E6%8B%AC)
+    - [仿钉钉自定义流程图（完成）；dingding分支](#%E4%BB%BF%E9%92%89%E9%92%89%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B5%81%E7%A8%8B%E5%9B%BE%E5%AE%8C%E6%88%90dingding%E5%88%86%E6%94%AF)
+    - [echarts 地图添加点击事件显示状图（完成）； echarts分支](#echarts-%E5%9C%B0%E5%9B%BE%E6%B7%BB%E5%8A%A0%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%E6%98%BE%E7%A4%BA%E7%8A%B6%E5%9B%BE%E5%AE%8C%E6%88%90-echarts%E5%88%86%E6%94%AF)
+    - [SelectBox穿梭框选人组件（完成）selectBox分支](#selectbox%E7%A9%BF%E6%A2%AD%E6%A1%86%E9%80%89%E4%BA%BA%E7%BB%84%E4%BB%B6%E5%AE%8C%E6%88%90selectbox%E5%88%86%E6%94%AF)
+- [仿钉钉自定义流程文档](#%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)
+- [SelectBox  树状选择组件](#selectbox--%E6%A0%91%E7%8A%B6%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6)
+  - [废话不多说 先贴图](#%E5%BA%9F%E8%AF%9D%E4%B8%8D%E5%A4%9A%E8%AF%B4-%E5%85%88%E8%B4%B4%E5%9B%BE)
+    - [树状选择效果图](#%E6%A0%91%E7%8A%B6%E9%80%89%E6%8B%A9%E6%95%88%E6%9E%9C%E5%9B%BE)
+    - [列表多选效果图](#%E5%88%97%E8%A1%A8%E5%A4%9A%E9%80%89%E6%95%88%E6%9E%9C%E5%9B%BE)
+  - [开始废话](#%E5%BC%80%E5%A7%8B%E5%BA%9F%E8%AF%9D)
+    - [开发背景](#%E5%BC%80%E5%8F%91%E8%83%8C%E6%99%AF-1)
+  - [接下来是组件的使用文档](#%E6%8E%A5%E4%B8%8B%E6%9D%A5%E6%98%AF%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3)
+- [selectBox](#selectbox)
+    - [使用方法](#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-1)
+    - [Attributes](#attributes-1)
+    - [Events](#events-1)
+    - [props](#props)
+    - [TreeNode](#treenode-1)
+    - [iconConfig](#iconconfig)
+    - [searchConfig](#searchconfig)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+
+
+
+# 前端复杂组件库
+### 开发背景
+ 
+  随着前端技术的不断发展，不仅技术栈越来越稳定，各大知名UI库也被广泛应用，其中Element-ui Iview Ant-design 被各大公司在后台管理项目开发中广泛应用。
+  为了保持组件的原子性，基本所有大型UI库都把各个组件分离开来。 然而 在后台管理系统的开发过程中，有很多功能的完成，需要基于多种组件。 故而，在这里把自己遇到的，开发的，通用的复杂的功能能，总结起来并与业务解耦，开源出一份开箱即用的 前端复杂功能组件库
+##  目前包括 
+
+### 仿钉钉自定义流程图（完成）；dingding分支
+### echarts 地图添加点击事件显示状图（完成）； echarts分支
+
+###  SelectBox穿梭框选人组件（完成）selectBox分支
+
+需要的同学可以按需拉取
+
+
+# 仿钉钉自定义流程文档
+
+## 效果图
+<img src='flow.png'/>
+
+## 使用方法
+在需要的地方引入，例如全局引入 (main.js)
+```javaScript
+import DrawFlow from "./components/DrawFlow";
+Vue.use(DrawFlow);
+```
+然后就使用它
+```html
+ <FactoryDrawFlow
+      @clickNode="clickNode"
+      ref="flow"
+      :FlowConfig="FlowConfig"
+    ></FactoryDrawFlow>
+```
+### 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'> | --                      | --     |
+
 # SelectBox  树状选择组件
 ## 废话不多说 先贴图
 [这里是git地址 ](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/selectBoxCom/)
@@ -10,8 +114,8 @@
 
 ## 开始废话
 ### 开发背景 
-####  众所周知，大部分企业的管理后台的开发离不开权限管理，一般来说，我们会分析各种权限把他们量化为资源，然后分配到各个角色/部门中，然后再给用户赋予各种角色或者挂载到各个部门。 如果权限设计的足够复杂，第三方UI常用的穿梭框等组件就不能完美的满足我们的需求，进而需要开发人员去根据需求，寻找多个组件组合使用。 但是，里面的业务逻辑万变不离其宗。 接下来 介绍一下笔者写的这款树状选择组件。 
-#### 简单来说组件分为左右两个模块 左侧为选择树（例如 部门-角色树  用户-权限树）或者多选列表。 右侧为已选数据。 点击保存 会返回三个数据，依次为 本次修改新增的数组ID 本次修改删除的数组ID 以及 所选择的所有数据ID集合
+  众所周知，大部分企业的管理后台的开发离不开权限管理，一般来说，我们会分析各种权限把他们量化为资源，然后分配到各个角色/部门中，然后再给用户赋予各种角色或者挂载到各个部门。 如果权限设计的足够复杂，第三方UI常用的穿梭框等组件就不能完美的满足我们的需求，进而需要开发人员去根据需求，寻找多个组件组合使用。 但是，里面的业务逻辑万变不离其宗。 接下来 介绍一下笔者写的这款树状选择组件。 
+  简单来说组件分为左右两个模块 左侧为选择树（例如 部门-角色树  用户-权限树）或者多选列表。 右侧为已选数据。 点击保存 会返回三个数据，依次为 本次修改新增的数组ID 本次修改删除的数组ID 以及 所选择的所有数据ID集合
 
 最后给我的老东家打个广告，金现代企业股份有限公司做的项目真的不错，在里面带的一年里，成长很多。在此感恩
 ## 接下来是组件的使用文档
@@ -25,7 +129,6 @@
     import selectBox from "@/components/selectBox";
     Vue.use(selectBox);
 ```
-```html
 ```html
     <select-box
       ref="selectBox"
@@ -41,12 +144,11 @@
       @save="addAndRemovePermPtag"
     />
 ```
-```
 ### Attributes 
 | 参数             | 说明                                                                                    | 类型            | 是否必填 | 可选值        | 默认值       |
 |------------------|---------------------------------------------------------------------------------------|-----------------|----------|---------------|--------------|
 | allNode          | 所有的节点数据                                                                          | Array[TreeNode] | true     | --            | []           |
-| checkedNode      | 已选择的节点Id集合                                                                      | Array[String]   | true     | --            | []           |
+| checkedNode      | 已选择的节点Id集   合                                                                      | Array[String]   | true     | --            | []           |
 | defaultProps     | 配置选项，具体看下表                                                                     | Object          | false    | --            | --           |
 | listStyle        | 右侧展示方式类型                                                                        | String          | false    | 'tree'/'list' | 'tree'       |
 | boxDialogVisible | 是否展示弹出框                                                                          | Boolean         | true     | true/false    | false        |
@@ -82,9 +184,10 @@
 |--------------|----------------------------|--------|----------|--------|---------------------------------------------|
 | parentType   | 左侧为树状图时父节点图标配置 | Object | true     | --     | {key:'pre',icon:'el-icon-tree-rGroup'}      |
 | childrenType | 左侧为树状图时子节点图标配置 | Object | true     | --     | {key:'permission',icon:'el-icon-tree-role'} |
-<h4> 在这里解释一下，组件里会根据父节点配置的key的值，与节点数据里面的type做对比，从而过滤掉选中的父节点。<h4/>
-<h4> 因为很多业务场景下，右侧的列表只希望展示选中的子节点，<h4/>
-<h4> 如果需要展示选中的父级节点，可以把parentType里面的key设置为空<h4/>
+
+ 在这里解释一下，组件里会根据父节点配置的key的值，与节点数据里面的type做对比，从而过滤掉选中的父节点。
+因为很多业务场景下，右侧的列表只希望展示选中的子节点，
+ 如果需要展示选中的父级节点，可以把parentType里面的key设置为空
 
 ### searchConfig
 | 参数  | 说明                                                  | 类型    | 是否必填 | 可选值     | 默认值   |