338 lines
10 KiB
JavaScript
338 lines
10 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Breadcrumb, Button, Col, Empty, Input, Layout, Row, Spin, Tooltip, Tree } from 'antd'
|
|
import { AntIcon, Container } from 'components'
|
|
import { SIDER_BREAK_POINT } from 'util/global'
|
|
|
|
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 = {
|
|
loading: false,
|
|
dataSource: [],
|
|
expandedKeys: [],
|
|
selectedKey: '',
|
|
autoExpandParent: true,
|
|
searchValue: '',
|
|
|
|
collapsed: false,
|
|
showSider: false,
|
|
}
|
|
|
|
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()
|
|
}
|
|
|
|
window.addEventListener('resize', this.onResizeLayout)
|
|
this.onResizeLayout()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener('resize', this.onResizeLayout)
|
|
}
|
|
|
|
/**
|
|
* 加载数据
|
|
* 调用外部传入的loadData函数,可在loadData中自行改变参数
|
|
*/
|
|
onLoadData = async () => {
|
|
this.onLoading()
|
|
|
|
const res = await this.props.loadData()
|
|
const data = generateKey.call(this, res)
|
|
this.list = []
|
|
generateList.call(this, 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 })
|
|
}
|
|
|
|
onReloadData = () => {
|
|
this.onLoadData()
|
|
}
|
|
|
|
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 getParentKey.call(this, p.key, this.state.dataSource)
|
|
}
|
|
return null
|
|
})
|
|
.filter((p, i, self) => p && self.indexOf(p) === i)
|
|
|
|
this.setState({
|
|
expandedKeys,
|
|
autoExpandParent: !!value,
|
|
searchValue: value,
|
|
})
|
|
}
|
|
|
|
onResizeLayout = () => {
|
|
this.setState({
|
|
collapsed: window.innerWidth <= SIDER_BREAK_POINT,
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const { loading, dataSource, expandedKeys, autoExpandParent, collapsed, showSider } =
|
|
this.state
|
|
|
|
const props = {
|
|
treeData: dataSource,
|
|
expandedKeys,
|
|
autoExpandParent,
|
|
}
|
|
|
|
const on = {
|
|
onExpand: expandedKeys => this.onExpand(expandedKeys),
|
|
onSelect: selectedKeys => this.onSelect(selectedKeys),
|
|
}
|
|
|
|
return (
|
|
<Layout className="yo-tree-layout">
|
|
<Layout.Sider
|
|
width="240px"
|
|
className={[
|
|
collapsed ? 'yo-tree-layout--collapsed' : '',
|
|
showSider ? 'open' : '',
|
|
]
|
|
.filter(p => p)
|
|
.join(' ')}
|
|
onMouseLeave={() => this.setState({ showSider: false })}
|
|
>
|
|
<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="undo" onClick={() => this.onReloadData()} />
|
|
</Tooltip>
|
|
<Tooltip placement="bottom" title="折叠全部">
|
|
<AntIcon
|
|
type="switcher"
|
|
onClick={() => this.setState({ expandedKeys: [] })}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="yo-tree-layout--content">
|
|
<Spin
|
|
spinning={loading}
|
|
indicator={<AntIcon type="loading" />}
|
|
wrapperClassName="h-100-p"
|
|
>
|
|
{!loading && !dataSource.length ? (
|
|
<Empty
|
|
image={
|
|
<div className="text-center pt-md">
|
|
<AntIcon className="h3 mt-xl mb-md" type="smile" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
}
|
|
description={false}
|
|
/>
|
|
) : (
|
|
<Tree
|
|
{...props}
|
|
{...on}
|
|
titleRender={nodeData => renderTitle.call(this, nodeData)}
|
|
/>
|
|
)}
|
|
</Spin>
|
|
</div>
|
|
</Layout.Sider>
|
|
<Layout.Content>
|
|
<Container mode="fluid">
|
|
<Row gutter={16} align="middle">
|
|
{collapsed && (
|
|
<Col>
|
|
<Button
|
|
type="text"
|
|
icon={<AntIcon type="menu" />}
|
|
onClick={() => this.setState({ showSider: true })}
|
|
/>
|
|
</Col>
|
|
)}
|
|
<Col flex="1">
|
|
<Breadcrumb className="mt-md mb-md">
|
|
{renderBreadcrumbItem.call(this)}
|
|
</Breadcrumb>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
{this.props.children}
|
|
</Layout.Content>
|
|
</Layout>
|
|
)
|
|
}
|
|
}
|