refactor tree

Author: Create-Peace

src/App.vue

@@ -8,26 +8,12 @@
       draggable
       @on-checkbox-change="handleChangeCheckBox" 
       @on-checked-item="handleChangeItem">
-      <!-- <template v-slot="{node}">
-        <span>{{ node.data.name }}</span>
-        <span class="icon">+</span>
-        <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">
-          <DropdownItem data="上海">上海</DropdownItem>
-          <DropdownItem data="北京">北京</DropdownItem>
-          <DropdownItem data="西安">西安</DropdownItem>
-        </DropdownMenu>
-      </Dropdown> -->
   </div>
 </template>
 
 <script>
-import Tree from './components/Tree'
+import Tree from './components/Tree/Tree'
 import Mock from './utils/mock'
 export default {
   name: 'App',
@@ -376,4 +362,39 @@ export default {
   color: #fff;
 }
 }
+.vue-checkbox {
+  position: relative;
+  width: 13px;
+  height: 13px;
+  &-input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    background: transparent
+  }
+  &-indeterminate {
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: #0075ff;
+    z-index: 4;
+    border-radius: 3px;
+    &:after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 2px;
+      background: #fff;;
+      top: 50%;
+      left: 0;
+    }
+  }
+}
+
 </style>

src/components/Tree/Checkbox.js

@@ -0,0 +1,26 @@
+
+
+const prefixCls = 'vue-checkbox'
+
+export default {
+  name: 'Checkbox',
+  props: {
+    value: [Boolean],
+    indeterminate: [Boolean],
+    disabled: [Boolean]
+  },
+  methods: {
+    handleClick () {
+      this.$emit('change', this.value)
+    }
+  },
+  render () {
+    const { value, disabled, indeterminate, handleClick } = this
+    return (
+      <div class={prefixCls} onClick={handleClick}>
+        { indeterminate && <div class={`${prefixCls}-indeterminate`}></div> }
+        <input class={`${prefixCls}-input`} checked={value} disabled={disabled} type="checkbox" />
+      </div>
+    )
+  }
+}

src/components/Tree/GenTree.js

@@ -0,0 +1,44 @@
+import TreeData from './TreeData'
+export default {
+  name: 'GenTree',
+  data () {
+    return {
+      nodeMap: {}
+    }
+  },
+  methods: {
+    updateNodeChecked (nodeId) {
+      if (!nodeId || nodeId === 'root') return
+      const res = {
+        checked: this.showCheckbox,
+        selected: !this.showCheckbox
+      }
+      if ((Array.isArray(this.checkedValue) && this.checkedValue.includes(nodeId)) || this.checkedValue === nodeId) {
+        return res
+      }
+    },
+    generateTree (rootNode, props, level = 0) {
+      const { children, ...rest } = rootNode
+      const tmpProps = {}
+      if (rest.id === 'root') { // root node must expanded
+        tmpProps.expanded = true
+      }
+      const node = new TreeData({ ...rest, ...props, ...tmpProps, level, ...this.updateNodeChecked(rest.id) })
+      this.nodeMap[rest.id] = node
+      children && children.forEach((child) => {
+        node.addChild(this.generateTree(child, props, level + 1))
+      })
+      return node
+    },
+    genFlatTree (node) {
+      const { children, data = {} } = node
+      if (!data.expanded || !children || !children.length) return []
+      return children && children.reduce((total, cur) => {
+        return total.concat(cur, this.genFlatTree(cur))
+      }, [])
+    }
+
+  }
+}
+
+// export { generateTree, genFlatTree }