试用借助worker生成树

vue/src/main.js

@@ -24,9 +24,6 @@ Object.keys(filters).forEach(key => {
     Vue.filter(key, filters[key])
 })
 
-//刷新时socket重连
-store.dispatch('socket/init', store.state.user).then()
-
 //注册插件
 Vue.prototype.$bottomTip = BottomTip
 Vue.prototype.$guide = Guide
@@ -42,3 +39,6 @@ new Vue({
     store,
     render: h => h(App)
 })
+
+//页面刷新时socket重连
+store.dispatch('socket/init', store.state.user).catch()

vue/src/utils/tree.js

@@ -11,11 +11,14 @@ import {createWorker} from '@/utils/worker'
  */
 export function createTree(list, rootSign = 0, idKey = 'id', pidKey = 'pid', childrenKey = 'children') {
     if (!list || list.length <= 0) return []
-    let info = {}
+
+    const info = {}
+
     list.forEach(i => {
         i[childrenKey] = []
         info[i[idKey]] = i
     })
+
     return list.filter(node => {
         info[node[pidKey]] && info[node[pidKey]][childrenKey].push(node)
         return node[pidKey] === rootSign
@@ -33,9 +36,10 @@ export function createLimitTree(full, limit) {
         m[n.id] = n.value
         return m
     }, {})
+
     full = JSON.parse(JSON.stringify(full))
 
-    const result = shapeTree(full, node => {
+    const result = shakeTree(full, node => {
         const value = map[node.id]
         if (value !== undefined) {
             node.value = value
@@ -93,20 +97,25 @@ export function createLimitTreeByMap(fullMap, limit) {
  * @param childrenKey
  * @returns {*[]} 经过裁剪后的树
  */
-export function shapeTree(tree = [], predicate = () => true, childrenKey = 'children') {
+export function shakeTree(tree = [], predicate = () => true, childrenKey = 'children') {
     return tree.filter(data => {
-        data[childrenKey] = shapeTree(data[childrenKey], predicate)
+        data[childrenKey] = shakeTree(data[childrenKey], predicate)
         return predicate(data) || data[childrenKey].length
     })
 }
 
 export function calc(node, valueKey = 'value', childrenKey = 'children') {
     if (!node) return 0
+
     const children = node[childrenKey]
     const childValue = node[valueKey] || 0
+
     if (!children) return childValue
+
     const value = childValue + children.reduce((v, child) => v + calc(child), 0)
+
     node[valueKey] = value
+
     return value
 }
 
@@ -119,54 +128,62 @@ export function calc(node, valueKey = 'value', childrenKey = 'children') {
  */
 export function elTreeControl(ref, action = 'expand', level = 1) {
     ref.store._getAllNodes().forEach(node => {
-        let value = action === 'expand'
+        const value = action === 'expand'
         node.expanded = level === 0 || node.level <= level ? value : !value
     })
 }
 
 export function getNodeId(arr) {
     if (!arr) return []
-    let res = []
+
+    const res = []
+
     arr.forEach(i => {
         res.push(i.id)
         if (i.children && i.children.length > 0) {
             res.push(...getNodeId(i.children))
         }
     })
+
     return res
 }
 
 export function getNodesByDfs(node) {
-    let nodes = []
-    let stack = []
+    const nodes = []
+    const stack = []
+
     stack.push(node)
+
     while (stack.length > 0) {
-        let item = stack.pop()
+        const item = stack.pop()
         nodes.push(item)
-        let children = item.children
+        const children = item.children
         for (let i = children.length - 1; i >= 0; i--) {
             stack.push(children[i])
         }
     }
+
     return nodes
 }
 
 export function getNodesByBfs(node) {
-    let nodes = []
-    let queue = []
+    const nodes = []
+    const queue = []
     queue.unshift(node)
+
     while (queue.length > 0) {
-        let item = queue.shift()
+        const item = queue.shift()
         nodes.push(item)
         queue.push(...item.children)
     }
+
     return nodes
 }
 
 //借助worker生成树
 export function createTreeByWorker(list) {
     return new Promise(resolve => {
-        let worker = createWorker(workerTree, list, ({data}) => {
+        const worker = createWorker(workerTree, list, ({data}) => {
             resolve(data)
             worker.terminate()
         })

vue/src/utils/worker.js

@@ -1,9 +1,12 @@
-export function createWorker(func, initData, c) {
-    let blob = new Blob(['(' + func.toString() + ')()'])
-    let url = window.URL.createObjectURL(blob)
-    let worker = new Worker(url)
-    worker.onmessage = c
-    worker.postMessage(initData)
+export function createWorker(func, data, callback) {
+    const blob = new Blob(['(' + func.toString() + ')()'])
+    const url = window.URL.createObjectURL(blob)
+    const worker = new Worker(url)
+
+    worker.onmessage = callback
+    worker.postMessage(data)
+
     window.URL.revokeObjectURL(url)
+
     return worker
 }

vue/src/views/system/department/index.vue

@@ -54,7 +54,7 @@
     import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
     import EditDialog from "./components/EditDialog"
     import {auth} from "@/utils/auth"
-    import {createTree} from "@/utils/tree"
+    import {createTreeByWorker} from "@/utils/tree"
     import {isEmpty} from '@/utils'
     import {elConfirm, elError, elSuccess} from "@/utils/message"
     import {delDepartment, getAllDepartments} from "@/api/system/department"
@@ -141,20 +141,9 @@
                 this.currentNode = null
                 this.loading = true
                 getAllDepartments()
+                    .then(data => createTreeByWorker(data))
                     .then(data => {
-                        data = createTree(data)
-
-                        function handler(arr, name) {
-                            arr.forEach(i => {
-                                i.label = i.name
-                                i.parentName = name
-                                if (isEmpty(name)) i.fullname = i.name
-                                else i.fullname = name + ' > ' + i.name
-                                if (i.children) handler(i.children, i.fullname)
-                            })
-                        }
-
-                        handler(data)
+                        completeDepartment(data)
                         this.data = data[0]
                     })
                     .finally(() => this.loading = false)
@@ -164,6 +153,19 @@
             this.search()
         }
     }
+
+    //将部门树转换为页面需要的结构
+    function completeDepartment(arr, name) {
+        arr.forEach(i => {
+            i.label = i.name
+            i.parentName = name
+
+            if (isEmpty(name)) i.fullname = i.name
+            else i.fullname = name + ' > ' + i.name
+
+            if (i.children) completeDepartment(i.children, i.fullname)
+        })
+    }
 </script>
 
 <style lang="scss">

vue/src/views/system/resource/index.vue

@@ -24,7 +24,7 @@
     import {getAllResources} from "@/api/system/resource"
     import {elError, elSuccess} from "@/utils/message"
     import {auth} from "@/utils/auth"
-    import {createTree} from "@/utils/tree"
+    import {createTreeByWorker} from "@/utils/tree"
     import tableMixin from '@/mixins/tablePageMixin'
 
     const baseUrl = '/system/resource'
@@ -49,7 +49,8 @@
                 this.config.loading = true
                 this.row = null
                 getAllResources()
-                    .then(data => this.tableData = createTree(data))
+                    .then(data => createTreeByWorker(data))
+                    .then(data => this.tableData = data)
                     .finally(() => this.config.loading = false)
             },
             edit() {

vue/src/views/system/role/components/RoleResource.vue

@@ -9,12 +9,16 @@
             map: {type: Object, default: () => ({})}
         },
         render(h, context) {
-            let {ids, map} = context.props
+            const {ids, map} = context.props
             let tree = []
+
             for (let id of ids) map[id] && tree.push(map[id])
+
             tree = createTree(tree)
-            let nodes = []
-            let fun = (arr, left) => {
+
+            const nodes = []
+
+            const fun = (arr, left) => {
                 for (let r of arr) {
                     nodes.push(
                         <span style={'margin-left:' + left + 'px'}>
@@ -29,7 +33,9 @@
                 }
                 nodes.push(<p/>)
             }
+
             fun(tree, 0)
+
             return nodes
         }
     }