update 搬迁树节点页面

web-react/src/components/authorized/handler.js

@@ -19,6 +19,8 @@ const authByArray = (auth, permissions) => {
             case Boolean:
                 flags.push([p, '&&'])
                 break
+            default:
+                break
         }
     })
 
@@ -77,6 +79,8 @@ const authByJson = (auth, permissions) => {
             case Array:
                 flags.push(authByArray(deepName(app, key), permissions))
                 break
+            default:
+                break
         }
     }
 
@@ -122,6 +126,8 @@ const auth = (auth) => {
             case Object:
                 flag = authByJson(auth, permissions)
                 break
+            default:
+                break
         }
     }
 

web-react/src/components/modal-form/index.jsx

@@ -51,7 +51,7 @@ export default class ModalForm extends Component {
      * 打开弹窗
      * @param {*} data 
      */
-    open(data) {
+    open(data = {}) {
         this.data = data
         this.setState({ visible: true })
     }
@@ -86,7 +86,10 @@ export default class ModalForm extends Component {
      */
     async onClose() {
         const body = this.childNode.current
-        if (!body) return
+        if (!body) {
+            this.close()
+            return
+        }
 
         if (this.compareOnClose) {
             const formData = body.form.current.getFieldsValue()

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

@@ -1,11 +1,271 @@
 import React, { Component } from 'react'
+import { Breadcrumb, Empty, Input, Layout, Spin, Tooltip, Tree } from 'antd'
+import { AntIcon, Container } from 'components'
 
 export default class QueryTreeLayout extends Component {
-    render() {
-        return (
-            <div>
 
-            </div>
+    state = {
+        loading: false,
+        dataSource: [],
+        expandedKeys: [],
+        selectedKey: '',
+        autoExpandParent: true,
+        searchValue: ''
+    }
+
+    list = []
+
+    defaultExpandedKeys = []
+
+    replaceFields = {
+        value: 'id',
+        title: 'title',
+        children: 'children'
+    }
+
+    constructor(props) {
+        super(props)
+
+        this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
+        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+
+        this.defaultExpanded = typeof this.props.defaultExpanded === 'boolean' ? this.props.defaultExpanded : false
+
+        if (this.props.replaceFields) {
+            this.replaceFields = this.props.replaceFields
+        }
+    }
+
+    /**
+     * 自动加载数据
+     */
+    componentDidMount() {
+        if (this.autoLoad) {
+            this.onLoadData()
+        }
+    }
+
+    /**
+     * 加载数据
+     * 调用外部传入的loadData函数,可在loadData中自行改变参数
+     */
+    async onLoadData() {
+        this.onLoading()
+
+        const res = await this.props.loadData()
+        const data = this.generateKey(res)
+        this.list = []
+        this.generateList(data)
+
+        let expandedKeys = []
+        if (this.defaultExpanded) {
+            expandedKeys = this.list.map(p => p.key)
+        }
+        this.setState({
+            dataSource: data,
+            expandedKeys
+        })
+        this.onLoaded()
+    }
+
+    /**
+     * 数据开始加载
+     */
+    onLoading() {
+        this.setState({
+            loading: {
+                indicator: <AntIcon type="loading" />
+            }
+        })
+    }
+
+    /**
+     * 数据加载完成
+     */
+    onLoaded() {
+        this.setState({ loading: false })
+    }
+
+    onExpand(expandedKeys) {
+        this.setState({
+            expandedKeys,
+            autoExpandParent: false
+        })
+    }
+
+    onSelect(selectedKeys) {
+        const selectedIds = []
+        selectedKeys.forEach(p => {
+            const data = this.list.find(m => m.key === p)
+            selectedIds.push(data[this.replaceFields.value])
+        })
+        this.setState({
+            selectedKey: selectedIds[0]
+        })
+        if (this.props.onSelect) {
+            this.props.onSelect(selectedIds[0])
+        }
+    }
+
+    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 null
+            })
+            .filter((p, i, self) => p && self.indexOf(p) === i)
+
+        this.setState({
+            expandedKeys,
+            autoExpandParent: !!value,
+            searchValue: value
+        })
+    }
+
+    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 props = {
+            treeData: this.state.dataSource,
+            expandedKeys: this.state.expandedKeys,
+            autoExpandParent: this.state.autoExpandParent
+        }
+
+        const on = {
+            onExpand: (expandedKeys) => this.onExpand(expandedKeys),
+            onSelect: (selectedKeys) => this.onSelect(selectedKeys)
+        }
+
+        return (
+            <Layout className="yo-tree-layout">
+                <Layout.Sider width="240px">
+                    <Layout.Header>
+                        <div className="header-actions">
+                            <Input.Search
+                                allowClear={true}
+                                placeholder="请输入检索关键字"
+                                onSearch={(value) => this.onSearch(value)}
+                            />
+                        </div>
+                    </Layout.Header>
+                    <div className="yo-tree-layout--bar">
+                        <Tooltip placement="bottom" title="折叠全部">
+                            <AntIcon type="switcher" onClick={() => this.setState({ expandedKeys: [] })} />
+                        </Tooltip>
+                    </div>
+                    <div className="yo-tree-layout--content">
+                        <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                            {
+                                !this.state.loading && !this.state.dataSource.length ?
+                                    <Empty />
+                                    :
+                                    <Tree
+                                        {...props}
+                                        {...on}
+                                        titleRender={(nodeData) => this.titleRender(nodeData)}
+                                    />
+                            }
+                        </Spin>
+                    </div>
+                </Layout.Sider>
+                <Layout.Content>
+                    <Container mode="fluid">
+                        <Breadcrumb className="mt-md mb-md">
+                            {this.renderBreadcrumbItem()}
+                        </Breadcrumb>
+                    </Container>
+                    {this.props.children}
+                </Layout.Content>
+            </Layout>
         )
     }
 }