持续更新中

selectBox.plantuml

@@ -94,21 +94,30 @@ namespace  selectBox #purple{
 }
 namespace SelectBoxInsideFn #yellow {
     ' 右侧组件init方法
-    interface Init extends InitData {
+    interface Init extends InitData,InitleftData,InitrightData,disable {
         - private InitData()
+        - void disable()
+        - void initLeftData()
+        - void InitrightData()
     }
-    note left : 初始化数据
+    note top of InitData : 初始化数据
     Init ...> selectBox.Entry
-    interface InitData extends InitleftData,InitrightData{
+    interface InitData{
         - void initData()
-        - void disable()
     }
-    interface InitleftData {
-        - void disable()
+    interface InitleftData extends InitTree,initList {
         - void JudgeStyle()
+        - void InitTree()
+        - void initList()
+    }
+     interface InitrightData {
+        - void JudgeStyle()
+    }
+    interface disable {
+        + void disable()
     }
     InitleftData --|> JudgeStyle
-    interface JudgeStyle extends InitTree,initList {
+    interface JudgeStyle {
         - String<'tree'|'list'>  judgeStyle
     }
     note left of JudgeStyle: 判断左侧选择框样式

src/components/selectBox/selectBox.vue

@@ -40,13 +40,13 @@
                   class="tree-dialog scrollbar"
                   style="width: 600px; background: white"
                 >
-                  <!-- <el-tree
+                  <el-tree
                     :data="treeConfig.insideTreeData"
                     :default-expanded-keys="treeConfig.expandedKeys"
                     :empty-text="treeConfig.treeEmptyText"
                     :expand-on-click-node="true"
                     :key="treeKey"
-                    :props="item.defaultProps"
+                    :props="treeConfig.defaultProps"
                     :ref="'roleTree'"
                     :render-content="renderContent"
                     @check-change="treeConfig.handleSelectionChange"
@@ -64,7 +64,7 @@
                     :empty-text="treeConfig.treeEmptyText"
                     :expand-on-click-node="true"
                     :key="treeKey"
-                    :props="item.defaultProps"
+                    :props="treeConfig.defaultProps"
                     :ref="'roleTree'"
                     :render-content="renderContent"
                     @check-change="treeConfig.handleSelectionChange"
@@ -74,7 +74,7 @@
                     render-after-expand
                     show-checkbox
                     v-if="!showList && listStyle === 'tree' && !indep"
-                  ></el-tree> -->
+                  ></el-tree>
                   <el-checkbox-group
                     class="checkbox"
                     v-if="showList && leftList.items.length !== 0"
@@ -187,7 +187,7 @@ export default {
     rightKey: {
       type: String,
       default() {
-        return "text";
+        return "name";
       }
     },
     rightKeyQ: {
@@ -225,7 +225,7 @@ export default {
       default() {
         return {
           id: "id",
-          label: "text",
+          label: "name",
           children: "children",
           isLeaf: "isLeaf"
         };
@@ -332,7 +332,7 @@ export default {
       if (this.listStyle === "tree" && value.length === 0) {
         this.showList = false;
         this.$nextTick(() => {
-          this.$refs.roleTree[this.index].setCheckedKeys(this.leftList.default);
+          this.$refs.roleTree.setCheckedKeys(this.leftList.default);
         });
       }
     },
@@ -385,12 +385,14 @@ export default {
     init() {
       this.initData();
       console.log(this.insideAllNode, this.insideChecked, "this.insideAllNode");
-      this.initLeftDate();
+      this.disable(this.insideAllNode, this.insideChecked);
+      this.initLeftData();
+      this.initRightData();
     },
     // 初始化数据
     initData() {
       if (this.$refs.roleTree && this.$refs.roleTree[0]) {
-        this.$refs.roleTree[0].setCheckedKeys([]);
+        this.$refs.roleTree.setCheckedKeys([]);
       }
       this.rightList.items = [];
       this.insideChecked = [];
@@ -400,8 +402,7 @@ export default {
       this.leftList.default = this.insideChecked.map(i => i.id);
     },
     // 初始化左侧选人组件
-    initLeftDate() {
-      this.disable(this.insideAllNode, this.insideChecked);
+    initLeftData() {
       this.insideListStyle = this.judgeStyle();
       if (this.insideListStyle === "tree") {
         this.initTree(this.insideAllNode, this.insideChecked);
@@ -422,15 +423,23 @@ export default {
     /**
      * 节点禁用  取交集
      */
+
     disable(all, checked) {
       all.forEach(x => {
-        if (checked.some(y => y.id === x.id)) {
+        if (checked.some(y => y === x.id)) {
           // x.disabled = true
           x.old = true;
         }
       });
       this.rightList.items = all.filter(i => i.old);
     },
+    /**
+     * 构建右侧列表
+     */
+    initRightData() {
+      this.rightList.items = this.insideAllNode.filter(i => i.old);
+      console.log(this.rightList);
+    },
     /**
      * 左侧多选框改变
      */
@@ -484,7 +493,7 @@ export default {
       this.leftList.default = [];
     },
     removeTree() {
-      this.$refs.roleTree[this.index].setCheckedKeys([]);
+      this.$refs.roleTree.setCheckedKeys([]);
     },
     /**
      * 节点禁用函数
@@ -526,14 +535,14 @@ export default {
     },
     deleteTree(item) {
       this.$nextTick(() => {
-        this.$refs.roleTree[this.index].setChecked(item.id, false);
+        this.$refs.roleTree.setChecked(item.id, false);
       });
     },
     /**
      * 左侧树状图选择
      */
     handleSelectionChange(data, status) {
-      const checkedId = this.$refs.roleTree[this.index].getCheckedKeys();
+      const checkedId = this.$refs.roleTree.getCheckedKeys();
       const allNode = [...this.allNode];
       const checkedNode = allNode.filter(
         i =>
@@ -563,14 +572,33 @@ export default {
      * 获取树结构
      */
     getInsideTreeData(lists) {
-      console.log(lists, "lists", this.selectBox.tabConfig.items);
       this.showList = false;
-      const temp = this.selectBox.tabConfig.items[this.index].treeConfig;
-      temp.expandedKeys = [];
-      this.selectBox.tabConfig.items[this.index].defaultProps = Object.assign(
+      this.treeConfig.expandedKeys = [];
+      this.treeConfig.defaultProps = Object.assign(
         this.defaultProps,
         this.defaultPer
       );
+      this.addItemIcon(lists);
+      this.treeConfig.insideTreeData = this.GLOBAL.array.transToTreeData(lists);
+      const list_t = [];
+      if (this.insideChecked.length !== 0) {
+        for (let i = 0; i < this.insideChecked.length; i++) {
+          list_t.push(this.insideChecked[i]);
+        }
+        this.treeConfig.expandedKeys = list_t;
+        console.log(this.treeConfig, list_t, "2112");
+      } else {
+        const expandedKeys = [];
+        this.getFirst(lists, expandedKeys);
+        // this.treeConfig.expandedKeys = [treeConfig.insideTreeData[0].id];
+      }
+      this.$nextTick(() => {
+        this.$refs.roleTree.setCheckedKeys(list_t);
+      });
+    },
+
+    // 添加图标
+    addItemIcon(lists) {
       for (let i = lists.length - 1; i >= 0; i--) {
         // 添加图标
         if (lists[i].type === this.iconConfig.parentType.key) {
@@ -579,21 +607,6 @@ export default {
           lists[i].icon = this.iconConfig.childrenType.icon;
         }
       }
-      temp.insideTreeData = this.GLOBAL.array.transToTreeData(lists);
-      this.$nextTick(() => {
-        const list_t = [];
-        if (this.insideChecked.length !== 0) {
-          for (let i = 0; i < this.insideChecked.length; i++) {
-            list_t.push(this.insideChecked[i].id);
-          }
-          temp.expandedKeys = [list_t[0]];
-        } else {
-          const expandedKeys = [];
-          this.getFirst(lists, expandedKeys);
-          temp.expandedKeys = [temp.insideTreeData[0].id];
-        }
-        this.$refs.roleTree[this.index].setCheckedKeys(list_t);
-      });
     },
     /*
       递归找第一个 type = 'permission'