update 大量细节处理

web-react/src/components/query-tree-layout/index.jsx

@@ -2,6 +2,94 @@ import React, { Component } from 'react'
 import { Breadcrumb, Empty, Input, Layout, Spin, Tooltip, Tree } from 'antd'
 import { AntIcon, Container } from 'components'
 
+function generateKey(data, level) {
+    const n = level || [0]
+    n.push(0)
+    data.forEach((p, i) => {
+        n[n.length - 1] = i
+        p.key = n.join('-')
+        p.scopedSlots = { title: 'title' }
+        if (p[this.replaceFields.children]) {
+            generateKey.call(this, p[this.replaceFields.children], Object.assign([], n))
+        }
+    })
+    return data
+}
+
+function generateList(data) {
+    // 这里获取不到Key
+    for (let i = 0; i < data.length; i++) {
+        const { key } = data[i]
+        this.list.push({
+            key,
+            [this.replaceFields.value]: data[i][this.replaceFields.value],
+            [this.replaceFields.title]: data[i][this.replaceFields.title]
+        })
+        if (data[i][this.replaceFields.children]) {
+            generateList.call(this, data[i][this.replaceFields.children])
+        }
+    }
+}
+
+function getParentKey(key, tree) {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+        const node = tree[i]
+        if (node[this.replaceFields.children]) {
+            if (node[this.replaceFields.children].some(item => item.key === key)) {
+                parentKey = node.key
+            } else if (getParentKey.call(this, key, node[this.replaceFields.children])) {
+                parentKey = getParentKey.call(this, key, node[this.replaceFields.children])
+            }
+        }
+    }
+    return parentKey;
+}
+
+function renderTitle(nodeData) {
+    const title = nodeData[this.replaceFields.title]
+    if (this.state.searchValue && title.indexOf(this.state.searchValue) > -1) {
+        return <>
+            {title.substr(0, title.indexOf(this.state.searchValue))}
+            <span style={{ color: '#f50' }}>{this.state.searchValue}</span>
+            {title.substr(title.indexOf(this.state.searchValue) + this.state.searchValue.length)}
+        </>
+    }
+    return <>{title}</>
+}
+
+function renderBreadcrumbItem() {
+
+    const path = ['顶级']
+
+    const findPath = (data, level) => {
+        level = level || 1
+        for (let i = 0; i < data.length; i++) {
+            const item = data[i]
+
+            path[level] = item[this.replaceFields.title]
+
+            if (item[this.replaceFields.value] === this.state.selectedKey) {
+                path.length = level + 1
+                return true
+            }
+
+            if (item[this.replaceFields.children] && item[this.replaceFields.children].length) {
+                const found = findPath(item[this.replaceFields.children], level + 1)
+                if (found) {
+                    return true
+                }
+            }
+        }
+    }
+
+    if (this.state.selectedKey) {
+        findPath(this.state.dataSource)
+    }
+
+    return path.map((p, i) => <Breadcrumb.Item key={i}>{p}</Breadcrumb.Item>)
+}
+
 export default class QueryTreeLayout extends Component {
 
     state = {
@@ -49,13 +137,13 @@ export default class QueryTreeLayout extends Component {
      * 加载数据
      * 调用外部传入的loadData函数,可在loadData中自行改变参数
      */
-    async onLoadData() {
+    onLoadData = async () => {
         this.onLoading()
 
         const res = await this.props.loadData()
-        const data = this.generateKey(res)
+        const data = generateKey.call(this, res)
         this.list = []
-        this.generateList(data)
+        generateList.call(this, data)
 
         let expandedKeys = []
         if (this.defaultExpanded) {
@@ -71,7 +159,7 @@ export default class QueryTreeLayout extends Component {
     /**
      * 数据开始加载
      */
-    onLoading() {
+    onLoading = () => {
         this.setState({
             loading: {
                 indicator: <AntIcon type="loading" />
@@ -82,22 +170,22 @@ export default class QueryTreeLayout extends Component {
     /**
      * 数据加载完成
      */
-    onLoaded() {
+    onLoaded = () => {
         this.setState({ loading: false })
     }
 
-    onReloadData() {
+    onReloadData = () => {
         this.onLoadData()
     }
 
-    onExpand(expandedKeys) {
+    onExpand = (expandedKeys) => {
         this.setState({
             expandedKeys,
             autoExpandParent: false
         })
     }
 
-    onSelect(selectedKeys) {
+    onSelect = (selectedKeys) => {
         const selectedIds = []
         selectedKeys.forEach(p => {
             const data = this.list.find(m => m.key === p)
@@ -111,11 +199,11 @@ export default class QueryTreeLayout extends Component {
         }
     }
 
-    onSearch(value) {
+    onSearch = (value) => {
         const expandedKeys = this.list
             .map(p => {
                 if (p[this.replaceFields.title].indexOf(value) > -1) {
-                    return this.getParentKey(p.key, this.state.dataSource)
+                    return getParentKey.call(this, p.key, this.state.dataSource)
                 }
                 return null
             })
@@ -128,94 +216,6 @@ export default class QueryTreeLayout extends Component {
         })
     }
 
-    generateKey(data, level) {
-        const n = level || [0]
-        n.push(0)
-        data.forEach((p, i) => {
-            n[n.length - 1] = i
-            p.key = n.join('-')
-            p.scopedSlots = { title: 'title' }
-            if (p[this.replaceFields.children]) {
-                this.generateKey(p[this.replaceFields.children], Object.assign([], n))
-            }
-        })
-        return data
-    }
-
-    generateList(data) {
-        // 这里获取不到Key
-        for (let i = 0; i < data.length; i++) {
-            const { key } = data[i]
-            this.list.push({
-                key,
-                [this.replaceFields.value]: data[i][this.replaceFields.value],
-                [this.replaceFields.title]: data[i][this.replaceFields.title]
-            })
-            if (data[i][this.replaceFields.children]) {
-                this.generateList(data[i][this.replaceFields.children])
-            }
-        }
-    }
-
-    getParentKey(key, tree) {
-        let parentKey;
-        for (let i = 0; i < tree.length; i++) {
-            const node = tree[i]
-            if (node[this.replaceFields.children]) {
-                if (node[this.replaceFields.children].some(item => item.key === key)) {
-                    parentKey = node.key
-                } else if (this.getParentKey(key, node[this.replaceFields.children])) {
-                    parentKey = this.getParentKey(key, node[this.replaceFields.children])
-                }
-            }
-        }
-        return parentKey;
-    }
-
-    titleRender(nodeData) {
-        const title = nodeData[this.replaceFields.title]
-        if (this.state.searchValue && title.indexOf(this.state.searchValue) > -1) {
-            return <>
-                {title.substr(0, title.indexOf(this.state.searchValue))}
-                <span style={{ color: '#f50' }}>{this.state.searchValue}</span>
-                {title.substr(title.indexOf(this.state.searchValue) + this.state.searchValue.length)}
-            </>
-        }
-        return <>{title}</>
-    }
-
-    renderBreadcrumbItem() {
-
-        const path = ['顶级']
-
-        const findPath = (data, level) => {
-            level = level || 1
-            for (let i = 0; i < data.length; i++) {
-                const item = data[i]
-
-                path[level] = item[this.replaceFields.title]
-
-                if (item[this.replaceFields.value] === this.state.selectedKey) {
-                    path.length = level + 1
-                    return true
-                }
-
-                if (item[this.replaceFields.children] && item[this.replaceFields.children].length) {
-                    const found = findPath(item[this.replaceFields.children], level + 1)
-                    if (found) {
-                        return true
-                    }
-                }
-            }
-        }
-
-        if (this.state.selectedKey) {
-            findPath(this.state.dataSource)
-        }
-
-        return path.map((p, i) => <Breadcrumb.Item key={i}>{p}</Breadcrumb.Item>)
-    }
-
     render() {
 
         const { dataSource, expandedKeys, autoExpandParent } = this.state
@@ -268,7 +268,7 @@ export default class QueryTreeLayout extends Component {
                                     <Tree
                                         {...props}
                                         {...on}
-                                        titleRender={(nodeData) => this.titleRender(nodeData)}
+                                        titleRender={(nodeData) => renderTitle.call(this, nodeData)}
                                     />
                             }
                         </Spin>
@@ -277,7 +277,7 @@ export default class QueryTreeLayout extends Component {
                 <Layout.Content>
                     <Container mode="fluid">
                         <Breadcrumb className="mt-md mb-md">
-                            {this.renderBreadcrumbItem()}
+                            {renderBreadcrumbItem.call(this)}
                         </Breadcrumb>
                     </Container>
                     {this.props.children}