重构选人组件 uml初步建模

selectBox.plantuml

@@ -0,0 +1,128 @@
+@startuml
+title selectBoxCom
+'skinparam packageStyle rect/' 加入这行代码，样式纯矩形'/
+skinparam backgroundColor #EEEBDC
+skinparam roundcorner 20
+skinparam sequenceArrowThickness 2
+'skinparam handwritten true
+namespace  selectBox #purple{
+    ' 这里是公共类
+    class TreeNode <<节点属性>>{
+        +public id
+        +public pid
+        +public ...defaultProps
+    }
+    TreeNode --> DefaultProps
+
+    interface DefaultProps <<树组件属性配置>>{
+        +public label  <指定节点标签为节点对象的某个属性值>
+        +public children <指定子树为节点对象的某个属性值>
+        +public disabled <指定节点选择框是否禁用为节点对象的某个属性值>
+        +public isLeaf <指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效>
+    }
+
+    class ListConfig <<左侧数据配置>>{
+        + public items
+        + public default
+    }
+    ListConfig --|> Items
+    ListConfig --|> Default
+    class Items <<左侧多选所有数据>>{
+        +Object[] TreeNode
+    }
+    Items "1" -- "n..*" TreeNode
+
+    class Default <<左侧多选默认选中数据>>{
+        +Object[] TreeNode
+    }
+    Default "1" -- "n..*" TreeNode
+    class AllNode <<所有节点>>{
+        +Object[] TreeNode
+    }
+    AllNode "1" -- "n..*" TreeNode
+    class CheckedNode <<被选中节点>>{
+        + Object[] TreeNode
+    }
+    CheckedNode "1" -- "n..*" TreeNode
+    ' 整个组件暴露的方法
+    class SelectBox <<entry,export>>{
+        +public export
+        -private leftSelect
+        +public rightSelect
+        -private init(entry)
+        + public Export:save()
+    }
+    SelectBox --|> Export
+    SelectBox o-- leftSelect
+    SelectBox--|> SelectBoxInsideFn.Init
+    SelectBox o-- rightSelect
+    class leftSelect <<选人组件左侧选人控件>>{
+        + Object leftList
+    }
+    leftSelect --|> ListConfig
+    class rightSelect <<选人组件右侧选人控件>>{
+        + Object rightList
+    }
+    rightSelect --|> ListConfig
+    class Style <<选人组件自定义样式>>{
+        + public listStyle String:'tree|list'
+        + public inDep Boolean
+    }
+    ' 入参
+    class Entry <<组件入参>>{
+        ' 所有节点（一维数组）
+        +public allNode Array<TreeNode>
+        ' 被选中的节点
+        +public checkedNode Array<TreeNode>
+        ' 默认节点配置
+        +public defaultProps
+        ' 样式配置
+        +public style
+    }
+    note left of Entry : 这是一个入参
+    Entry o--  DefaultProps
+    Entry o-- AllNode
+    Entry o-- CheckedNode
+    Entry o-- Style
+    ' 出参
+    interface Export <<组件出参>>{
+        {abstract} addList&deleteList methods()
+        {static} rightList callback()
+    }
+    note top of Export: 这是一个组件出参
+}
+namespace SelectBoxInsideFn #yellow {
+    ' 右侧组件init方法
+    interface Init extends InitleftData,InitData,initRightData {
+        - private InitData()
+        - private InitleftData()
+    }
+    Init ...> selectBox.Entry
+    interface InitData {
+        - void initData()
+        - void disable()
+    }
+    note top : 初始化数据
+    interface InitleftData {
+        - void disable()
+        - void JudgeStyle()
+    }
+    InitleftData --|> JudgeStyle
+    interface JudgeStyle extends InitTree,initList {
+        - String<'tree'|'list'>  judgeStyle
+    }
+    note left of JudgeStyle: 判断左侧选择框样式
+    interface InitTree{
+        - InitTree()
+    }
+    note right : 如果是树运行initTree
+    interface initList{
+        - initList()
+
+    }
+    note left : 如果是列运行initList
+
+}
+
+
+@enduml

src/components/selectBox/selectBox.vue

@@ -383,6 +383,12 @@ export default {
       初始化结构
     */
     init() {
+      this.initData();
+      console.log(this.insideAllNode, this.insideChecked, "this.insideAllNode");
+      this.initLeftDate();
+    },
+    // 初始化数据
+    initData() {
       if (this.$refs.roleTree && this.$refs.roleTree[0]) {
         this.$refs.roleTree[0].setCheckedKeys([]);
       }
@@ -392,20 +398,25 @@ export default {
       this.insideAllNode = [...this.allNode];
       this.insideChecked = [...this.checkedNode];
       this.leftList.default = this.insideChecked.map(i => i.id);
-      console.log(this.insideAllNode, this.insideChecked, "this.insideAllNode");
+    },
+    // 初始化左侧选人组件
+    initLeftDate() {
+      this.disable(this.insideAllNode, this.insideChecked);
+      this.listStyle = this.judgeStyle();
       if (this.listStyle === "tree") {
         this.initTree(this.insideAllNode, this.insideChecked);
       } else {
         this.initList(this.insideAllNode, this.insideChecked);
       }
     },
-    initTree(all, checked) {
-      this.disable(all, checked);
+    judgeStyle() {
+      this.listStyle = this.leftSelect.style;
+    },
+    initTree(all) {
       this.getInsideTreeData(all);
     },
-    initList(all, checked) {
+    initList(all) {
       this.leftList.items = all;
-      this.disable(all, checked);
       this.showList = true;
     },
     /**