瀏覽代碼

selectBox 持续更新

xiaoyang 5 年之前
父節點
當前提交
9993eb6be4
共有 3 個文件被更改,包括 7 次插入94 次删除
  1. 1 86
      README.md
  2. 6 6
      selectBox.plantuml
  3. 0 2
      src/components/selectBox/selectBox.vue

+ 1 - 86
README.md

@@ -1,87 +1,2 @@
-# 仿钉钉流程图
-#### 仿钉钉流程图 Api包括:一维数组传参,获取单节点数据,返回所有节点组成的一位数组 生成每个节点的父节点Id集合
-<p>
-   很多公司后台管理系统都需要画流程图,功能大同小异,所以,仿照钉钉管理系统 花了一个流程图
-   效果如下
-   <img src="./flow.png">
-</p>
-    以下为此插件 入口与出口的数据结构,暴露的事件以及公共类所在目录及修改方式 (小部分需要修改源代码,不难找,有问题可以call我)
+# SelectBox  选人组件
 
 
-#### 入口数据格式
-
-整个流程图分为四种节点 分别为 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/).

+ 6 - 6
selectBox.plantuml

@@ -52,10 +52,11 @@ namespace  selectBox #purple{
         -private init(entry)
         -private init(entry)
         + public Export:save()
         + public Export:save()
     }
     }
-    SelectBox --|> Export
+    SelectBox o-- Export
     SelectBox o-- leftSelect
     SelectBox o-- leftSelect
-    SelectBox--|> SelectBoxInsideFn.Init
+    SelectBox --|> SelectBoxInsideFn.Init
     SelectBox o-- rightSelect
     SelectBox o-- rightSelect
+    SelectBox o-- Entry
     class leftSelect <<选人组件左侧选人控件>>{
     class leftSelect <<选人组件左侧选人控件>>{
         + Object leftList
         + Object leftList
     }
     }
@@ -93,16 +94,15 @@ namespace  selectBox #purple{
 }
 }
 namespace SelectBoxInsideFn #yellow {
 namespace SelectBoxInsideFn #yellow {
     ' 右侧组件init方法
     ' 右侧组件init方法
-    interface Init extends InitleftData,InitData,initRightData {
+    interface Init extends InitData {
         - private InitData()
         - private InitData()
-        - private InitleftData()
     }
     }
+    note left : 初始化数据
     Init ...> selectBox.Entry
     Init ...> selectBox.Entry
-    interface InitData {
+    interface InitData extends InitleftData,InitrightData{
         - void initData()
         - void initData()
         - void disable()
         - void disable()
     }
     }
-    note top : 初始化数据
     interface InitleftData {
     interface InitleftData {
         - void disable()
         - void disable()
         - void JudgeStyle()
         - void JudgeStyle()

+ 0 - 2
src/components/selectBox/selectBox.vue

@@ -533,8 +533,6 @@ export default {
      * 左侧树状图选择
      * 左侧树状图选择
      */
      */
     handleSelectionChange(data, status) {
     handleSelectionChange(data, status) {
-      console.log("data", data);
-
       const checkedId = this.$refs.roleTree[this.index].getCheckedKeys();
       const checkedId = this.$refs.roleTree[this.index].getCheckedKeys();
       const allNode = [...this.allNode];
       const allNode = [...this.allNode];
       const checkedNode = allNode.filter(
       const checkedNode = allNode.filter(