fix(tree): unable to directly click on leaf nodes for selection

src/components/tree/DeviceTree/index.vue

@@ -218,13 +218,8 @@ export default {
     },
     onSearch () {
       const regx = this.deviceName ? new RegExp(this.deviceName) : null
-      const rootOption = {
-        checked: false,
-        indeterminate: false
-      }
-      const children = this.onFilter(rootOption, this.$nodes, regx)
-      rootOption.children = children
-      rootOption.disabled = !children.some(({ disabled }) => !disabled)
+      const rootOption = this.createNode()
+      this.setNodes(rootOption, this.onFilter(rootOption, this.$nodes, regx))
       this.rootOption = rootOption
     },
     onFilter (parent, nodes, regx) {
@@ -237,20 +232,15 @@ export default {
         })
       }
       return nodes.map(({ children, ...node }) => {
-        const subNode = {
-          ...node,
-          parent,
-          checked: false,
-          indeterminate: false,
-          disabled: false
-        }
-        if (children) {
-          const subNodes = this.onFilter(subNode, children, regx)
-          subNode.children = subNodes
-          subNode.disabled = !subNodes.some(({ disabled }) => !disabled)
-        } else if (this.filter) {
-          subNode.disabled = !this.filter(node)
+        if (!children) {
+          const leafNode = this.createLeafNode(parent, node)
+          if (this.filter) {
+            leafNode.disabled = !this.filter(node)
+          }
+          return leafNode
         }
+        const subNode = this.createNode(node, parent)
+        this.setNodes(subNode, this.onFilter(subNode, children, regx))
         return subNode
       })
     },

src/components/tree/tree.js

@@ -39,16 +39,41 @@ export default {
   },
   methods: {
     emitChange () {
+      if (!this.checkbox) {
+        return
+      }
       this.$emit(
         'change',
         this.flatNode(this.rootOption, [])
       )
     },
+    createNode (item, parent) {
+      return {
+        parent,
+        disabled: false,
+        checked: false,
+        indeterminate: false,
+        children: [],
+        ...item
+      }
+    },
+    createLeafNode (parent, item) {
+      return {
+        parent,
+        disabled: false,
+        checked: false,
+        ...item
+      }
+    },
+    setNodes (parent, nodes) {
+      parent.children = nodes
+      parent.disabled = !nodes.some(({ disabled }) => !disabled)
+    },
     flatNode (node, arr) {
       const { checked, indeterminate, children, ...info } = node
       if (!children && checked) {
         arr.push(info)
-      } else if (checked || indeterminate) {
+      } else if (children && (checked || indeterminate)) {
         children.forEach(sub => {
           this.flatNode(sub, arr)
         })
@@ -69,13 +94,17 @@ export default {
       this.emitChange()
     },
     setNodeChekced (node, bool) {
-      if (!node.disabled) {
-        node.checked = bool
-        node.indeterminate = false
-        node.children?.forEach(child => {
-          this.setNodeChekced(child, bool)
-        })
+      if (node.disabled) {
+        return
+      }
+      node.checked = bool
+      if (!node.children) {
+        return
       }
+      node.indeterminate = false
+      node.children.forEach(child => {
+        this.setNodeChekced(child, bool)
+      })
     },
     clickNode (node, nodeComponent) {
       if (this.checkbox && this.checkOnClickNode) {

src/views/dashboard/components/DeviceGroupTree.vue

@@ -29,32 +29,24 @@ export default {
   },
   methods: {
     init () {
-      const rootOption = {
-        checked: false,
-        indeterminate: false
-      }
-      rootOption.children = this.groups.map(this.transfromGroup)
-      rootOption.disabled = !rootOption.children.some(({ disabled }) => !disabled)
+      const rootOption = this.createNode()
+      this.setNodes(rootOption, this.groups.map(item => this.transfromGroup(item, rootOption)))
       this.defaultExpand = rootOption.children.length <= 1
       this.rootOption = rootOption
     },
-    transfromGroup ({ id, name, children }) {
-      const list = children.map(this.transformDevice).sort(this.sort)
-      const group = {
-        id, name,
-        checked: false,
-        indeterminate: false,
-        disabled: !list.some(({ disabled }) => !disabled),
-        children: list
-      }
+    transfromGroup ({ id, name, children }, parent) {
+      const group = this.createNode({
+        id,
+        name
+      }, parent)
+      this.setNodes(group, children.map(item => this.transformDevice(item, group)).sort(this.sort))
       return group
     },
-    transformDevice ({ id, name, productId, lastOnline, onlineStatus }) {
-      return {
+    transformDevice ({ id, name, productId, lastOnline, onlineStatus }, parent) {
+      return this.createLeafNode(parent, {
         id, name, productId, lastOnline,
-        checked: false,
         disabled: onlineStatus !== 1
-      }
+      })
     },
     sort (a, b) {
       if (a.disabled === b.disabled) {

src/views/platform/upgrade/deploy/components/DeviceTypeTree.vue

@@ -54,43 +54,41 @@ export default {
       this.fetchDevices().then(
         data => {
           const map = {}
+          const groups = []
           const arr = []
+          const rootOption = this.createNode()
           data.forEach(({ id, name, remark }) => {
             if (remark) {
               if (!map[remark]) {
-                map[remark] = []
+                map[remark] = {
+                  node: this.createNode({
+                    id: remark,
+                    name: remark
+                  }, rootOption),
+                  children: []
+                }
+                groups.push(map[remark].node)
               }
-              map[remark].push({
+              const { node, children } = map[remark]
+              children.push(this.createLeafNode(node, {
                 id,
-                name,
-                checked: false,
-                indeterminate: false
-              })
+                name
+              }))
             } else {
-              arr.push({
+              arr.push(this.createLeafNode(rootOption, {
                 id,
-                name,
-                checked: false,
-                indeterminate: false
-              })
+                name
+              }))
             }
           })
-          this.rootOption = {
-            checked: false,
-            indeterminate: false,
-            children: [
-              ...Object.keys(map).map(key => {
-                return {
-                  id: key,
-                  name: key,
-                  checked: false,
-                  indeterminate: false,
-                  children: map[key]
-                }
-              }),
-              ...arr
-            ]
-          }
+          groups.forEach(group => {
+            this.setNodes(group, map[group.id].children)
+          })
+          this.setNodes(rootOption, [
+            ...groups,
+            ...arr
+          ])
+          this.rootOption = rootOption
         },
         () => {
           this.error = true