fix: optimize code

Author: Create-Peace

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <Tree :tree-data="demeData" 
+      expandedAll
       show-checkbox 
       hasHalfelEction
       draggable
@@ -12,6 +13,7 @@
         <span class="icon">-</span>
       </template> -->
     </Tree>
+    <!-- <List :data="baseData" bordered /> -->
     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
      <!-- <Dropdown @on-click="handleClick" trigger="click">
         <DropdownMenu transfer slot="dropdownList">
@@ -25,13 +27,15 @@
 
 <script>
 import Tree from './components/Tree'
+import Mock from './utils/mock'
 export default {
   name: 'App',
   components: {
     Tree
   },
   data () {
     return {
+      baseData: [],
       demeData: [
   {
     name: "一级 1",
@@ -44,19 +48,19 @@ export default {
           {
             name: "三级 1-1-1",
             id: "3",
+            selected: true,
             children: [
               {
                 name: "四级 1-1-1-1",
                 id: "4",
                 children: [],
-                selected: true,
                 disabled: false,
               },
               {
                 name: "四级 1-1-1-2",
                 id: "5",
                 children: [],
-                selected: true,
+                // selected: true,
               },
             ],
           },
@@ -124,7 +128,26 @@ export default {
 ]
     }
   },
+  created () {
+    this.genBaseData()
+  },
   methods: {
+    genBaseData () {
+        const start = Math.round(Math.random())
+        const end = start + Math.round(Math.random() * 4)
+        const res = Mock.mock({
+          'data|10': [
+            {
+              'id': /[a-z]{2}[A-Z]{2}[0-9]/,
+              'status|1': ['success', 'fail'],
+              'tags|1-2': ['success', 'normal', 'warning', 'error'].slice(start, end),
+              'time': '@date("yyyy-MM-dd")',
+              'name': "@ctitle(4,6)",
+            }
+          ]
+        })
+        this.baseData = res.data
+      },
     handleClick (data) {
       console.log(data)
     },
@@ -176,5 +199,12 @@ export default {
 }
 .rotate-motion(rotate90, 90deg);
 .rotate-motion(rotate180, 180deg);
+.el-tree__drop-indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: #409eff;
+}
   
 </style>

src/components/Tree.js

@@ -21,7 +21,7 @@ export default {
   props: {
     expandedAll: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     checkStrictly: {
       type: Boolean,
@@ -72,30 +72,45 @@ export default {
         isInitData: false
       },
       checkedNodes: [],
-      checkedNodeKeys: []
+      checkedNodeKeys: [],
+      selectedNodes: []
     }
   },
   created() {
-    this.walk();
+    this.initData(); //init
+    // this.isInitData = true // 
     console.log(this.checkedNodeKeys)
     console.log(this.checkedNodes)
 
   },
   methods: {
-    walk(root = this.root) {
-      const { children = [] } = root;
-      children?.forEach((child) => {
+    initData(root = this.root) {
+      // const { children = [] } = root;
+      /*children?.forEach((child) => {
         const { data } = child;
         // TODO 保存选中的值
         this.getCheckedValue(child)
         if (data.selected && !this.checkStrictly) {
-          this.refreshUp(child);
+          // this.refreshUp(child);
+
           this.refreshDown(child);
         } else {
-          this.walk(child);
+          this.initData(child);
         }
-      });
-      this.isInitData = true
+      });*/
+      const selectedNodes = []
+      this.recurTree(root, selectedNodes)
+      selectedNodes.forEach((node) => {
+        this.refreshUp(node)
+        this.refreshDown(node)
+      })
+      this.recurTree(root, this.selectedNodes)
+    },
+    recurTree(node, db){
+      if(node.isSelected()){
+        db.push(node)
+      }
+      node?.children?.forEach((child) => this.recurTree(child, db))
     },
     refreshExpandedDown(node) {
       // eslint-disable-next-line no-debugger
@@ -144,7 +159,7 @@ export default {
       node?.children.forEach((child) => {
         const fromState = child.isSelected();
         // TODO  遍历children 初始化数据  不能直接跳出
-        if (fromState === toState || !this.isInitData) {
+        if (fromState === toState) {
           return
         }
 
@@ -223,7 +238,7 @@ export default {
       if (dropPrev || dropInner || dropNext) {
         dragInfo.dropNode = dropNode;
       }
-      console.log('dropNode', dropNode)
+      // console.log('dropNode', dropNode)
       // TODO 这里的逻辑需要实现
       if (dropNode.node.nextSibling === draggingNode.node) {
         dropNext = false;
@@ -359,7 +374,7 @@ export default {
           return <TreeNode key={node?.data?.name ?? index} node={node} />;
         })}
         <div
-        style={{display: this.dragInfo.showDropIndicator? 'none' : 'block'}}
+        style={{display: this.dragInfo.showDropIndicator? 'block': 'none'}}
       class="el-tree__drop-indicator"
       ref="dropIndicator"></div>
       </div>

src/components/TreeData.js

@@ -7,8 +7,12 @@ export default class TreeData {
   setParent(node) {
     this.parent = node;
   }
-  addChild(node) {
-    this.children.push(node);
+  addChild(node, index = -1) {
+    if(index === -1){
+      this.children.push(node);
+    }else{
+      this.children.splice(index, 0, node)
+    }
     node.setParent(this);
   }
   isSelected() {
@@ -108,5 +112,18 @@ export default class TreeData {
       this.children.splice(index, 0, child);
     }
   }
+
+  moveNode(node, toParent, toIndex = -1){
+    const fromIndex = this.getIndex(node)
+    node.parent.children.splice(fromIndex, 1)
+    toParent.addChild(node, toIndex)
+  }
+
+  getIndex(node){
+    if(!node?.parent){
+      return 0
+    }
+    return node.parent.indexOf(node)
+  }
 
 }

src/components/TreeNode.js

@@ -55,13 +55,13 @@ export default {
       return (name && <div
        style={`margin-left: ${level * 10}px; margin-bottom: 6px; display: inline-block;`}
        >
-        {node.children && node.children.length? <span class={['icon', 'sh__expand-icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => this.toggleFold(node)} style="padding: 1px; background: #eee; cursor: pointer">▲</span> : null}
+        {<span class={['icon', 'sh__expand-icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => this.foldToggle(node)} style={{padding: 1,  background: '#eee', cursor: 'pointer', visibility: node.children && node.children.length ? 'visible' : 'hidden'}}>▲</span>}
         { partialSelected && `-`}
         {this.tree.showCheckbox && <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />}
         { renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }
       </div>)
     },
-    toggleFold(node) {
+    foldToggle(node) {
       Object.assign(node.data, {expanded: !node.data.expanded})
       if (!node.data.expanded) {
         this.tree.refreshExpandedDown(node)

src/utils/mock.js

@@ -7,10 +7,10 @@ const cdn = {
     'shsc-ui': 'shscUI'
   },
   css: [
-    'https://testcdnqiniu.shuhaisc.com/shsc-ui/3.5.6/index.css'
+    'https://uatcdnqiniu.shuhaisc.com/shsc-ui/3.5.7/index.css'
   ],
   js: [
-    'https://testcdnqiniu.shuhaisc.com/shsc-ui/3.5.6/index.umd.min.js'
+    'https://uatcdnqiniu.shuhaisc.com/shsc-ui/3.5.7/index.umd.min.js'
   ]
 }