update 搬迁树节点页面
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user