import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Spin, Empty, Input, Tree, Dropdown } from 'antd'
|
import { FolderOpenOutlined, FolderOutlined, FileOutlined, MoreOutlined } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import UtilsDM from '@/utils/utils-datamanage.js'
|
import MKEmitter from '@/utils/events.js'
|
import TimerTask from '@/utils/timer-task.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TreeNode } = Tree
|
const { Search } = Input
|
|
const MainAction = asyncComponent(() => import('@/tabviews/zshare/actionList'))
|
|
class NormalTree extends Component {
|
static propTpyes = {
|
config: PropTypes.object
|
}
|
|
state = {
|
BID: '', // 主表ID
|
config: null, // 图表配置信息
|
loading: false, // 数据加载状态
|
data: null, // 数据
|
searchkey: null, // 过滤条件
|
treedata: null, // 列表数据集
|
treeNodes: null, // 列表数据集
|
expandedKeys: [], // 展开的树节点
|
selectedKeys: [], // 选中的树节点
|
selected: false // 选中首行
|
}
|
|
loaded = false
|
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
let _config = fromJS(config).toJS()
|
let _data = null
|
let BID = ''
|
let BData = ''
|
|
if (_config.setting.supModule) {
|
BData = window.GLOB.CacheData.get(_config.setting.supModule)
|
} else {
|
BData = window.GLOB.CacheData.get(_config.$pageId)
|
}
|
if (BData) {
|
BID = BData.$BID || ''
|
}
|
|
if (_config.setting.sync === 'true') {
|
_config.setting.onload = 'false'
|
|
if (window.GLOB.SyncData.has(_config.dataName)) {
|
_data = window.GLOB.SyncData.get(_config.dataName) || []
|
|
if (_config.$cache) {
|
Api.writeCacheConfig(_config.uuid, fromJS(_data).toJS(), BID)
|
}
|
|
_config.setting.sync = 'false'
|
|
this.loaded = true
|
|
window.GLOB.SyncData.delete(_config.dataName)
|
}
|
}
|
|
_config.wrap.contentHeight = config.wrap.title || config.wrap.searchable === 'true' ? 'calc(100% - 45px)' : '100%'
|
|
this.setState({
|
selected: _config.wrap.selected === 'true',
|
config: _config,
|
data: _data,
|
BID: BID || ''
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentDidMount () {
|
const { config } = this.state
|
|
MKEmitter.addListener('reloadData', this.reloadData)
|
MKEmitter.addListener('resetSelectLine', this.resetParentParam)
|
MKEmitter.addListener('queryModuleParam', this.queryModuleParam)
|
MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult)
|
|
if (config.setting.useMSearch) {
|
MKEmitter.addListener('searchRefresh', this.searchRefresh)
|
}
|
|
if (config.setting.sync === 'true') {
|
MKEmitter.addListener('transferSyncData', this.transferSyncData)
|
}
|
|
if (config.timer) {
|
this.timer = new TimerTask()
|
this.timer.init(config.uuid, config.timer, config.timerRepeats, () => {
|
this.loadData('timer')
|
})
|
}
|
|
this.initExec()
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('reloadData', this.reloadData)
|
MKEmitter.removeListener('searchRefresh', this.searchRefresh)
|
MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
|
MKEmitter.removeListener('queryModuleParam', this.queryModuleParam)
|
MKEmitter.removeListener('transferSyncData', this.transferSyncData)
|
MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult)
|
|
this.timer && this.timer.stop()
|
}
|
|
initExec = () => {
|
const { config, BID } = this.state
|
|
if (config.$cache) {
|
if (config.$time) {
|
if (!this.loaded) {
|
Api.getLCacheConfig(config.uuid, config.$time, BID).then(res => {
|
if (!res.valid && config.setting.onload === 'true') {
|
setTimeout(() => {
|
this.loadData('init')
|
}, config.setting.delay || 0)
|
}
|
|
if (!res.data || this.loaded) return
|
|
this.setState({data: res.data}, () => {
|
this.handleData()
|
})
|
})
|
} else {
|
this.handleData()
|
}
|
} else {
|
if (!this.loaded) {
|
Api.getLCacheConfig(config.uuid, 0, BID).then(res => {
|
if (!res.data || this.loaded) return
|
|
this.setState({data: res.data}, () => {
|
this.handleData()
|
})
|
})
|
}
|
|
if (config.setting.onload === 'true') {
|
setTimeout(() => {
|
this.loadData('init')
|
}, config.setting.delay || 0)
|
} else if (this.loaded) {
|
this.handleData()
|
}
|
}
|
} else if (config.setting.onload === 'true') {
|
setTimeout(() => {
|
this.loadData()
|
}, config.setting.delay || 0)
|
} else if (this.loaded) {
|
this.handleData()
|
}
|
}
|
|
transferSyncData = (syncId) => {
|
const { config, BID } = this.state
|
|
if (config.$syncId !== syncId) return
|
|
let _data = window.GLOB.SyncData.get(config.dataName) || []
|
|
if (config.$cache) {
|
Api.writeCacheConfig(config.uuid, fromJS(_data).toJS(), BID)
|
}
|
|
this.loaded = true
|
|
this.setState({data: _data}, () => {
|
this.handleData()
|
})
|
|
window.GLOB.SyncData.delete(config.dataName)
|
|
MKEmitter.removeListener('transferSyncData', this.transferSyncData)
|
}
|
|
searchRefresh = (searchId) => {
|
const { config } = this.state
|
|
if (config.$searchId !== searchId) return
|
|
this.setState({}, () => {
|
this.loadData()
|
})
|
}
|
|
reloadData = (menuId) => {
|
const { config } = this.state
|
|
if (config.uuid !== menuId) return
|
|
this.loadData()
|
}
|
|
resetParentParam = (MenuID, id) => {
|
const { config } = this.state
|
|
if (!config.setting.supModule || config.setting.supModule !== MenuID) return
|
if (id !== this.state.BID || id !== '') {
|
this.setState({ BID: id }, () => {
|
this.loadData()
|
})
|
}
|
}
|
|
/**
|
* @description 导出Excel时，获取页面搜索排序等参数
|
*/
|
queryModuleParam = (menuId, callback) => {
|
const { config } = this.state
|
|
if (config.uuid !== menuId) return
|
|
let searches = []
|
if (config.setting.useMSearch) { // 主表搜索条件
|
searches = window.GLOB.SearchBox.get(config.$searchId) || []
|
}
|
|
callback({
|
orderBy: config.setting.order || '',
|
search: searches
|
})
|
}
|
|
/**
|
* @description 按钮执行完成后页面刷新
|
* @param {*} menuId // 菜单Id
|
* @param {*} position // 刷新位置
|
* @param {*} btn // 执行的按钮
|
*/
|
refreshByButtonResult = (menuId, position, btn) => {
|
const { config, BID } = this.state
|
|
if (config.uuid !== menuId) return
|
|
if ((position === 'mainline' || position === 'popclose') && config.setting.supModule && BID) { // 刷新源组件时，附带刷新上级行与当前组件
|
MKEmitter.emit('reloadData', config.setting.supModule, BID)
|
} else {
|
this.loadData()
|
}
|
}
|
|
/**
|
* @description 数据加载
|
*/
|
async loadData (type) {
|
const { config, BID } = this.state
|
|
if (config.setting.supModule && !BID) { // BID 不存在时，不做查询
|
this.setState({
|
data: []
|
}, () => {
|
this.handleData()
|
})
|
this.loaded = true
|
return
|
}
|
|
let searches = []
|
if (config.setting.useMSearch) { // 主表搜索条件
|
searches = window.GLOB.SearchBox.get(config.$searchId) || []
|
}
|
|
if (config.$s_req && searches.filter(item => item.required && item.value === '').length > 0) {
|
return
|
}
|
|
if (type !== 'timer') {
|
this.setState({
|
loading: true
|
})
|
}
|
|
let _orderBy = config.setting.order || ''
|
let param = UtilsDM.getQueryDataParams(config.setting, searches, _orderBy, '', '', BID)
|
|
let result = await Api.genericInterface(param)
|
if (result.status) {
|
this.loaded = true
|
if (config.$cache && type === 'init') {
|
Api.writeCacheConfig(config.uuid, result.data || [], BID)
|
}
|
|
this.setState({
|
data: result.data,
|
loading: false
|
}, () => {
|
this.handleData()
|
})
|
|
if (config.timer && config.clearField && result.data && result.data[0]) {
|
let vals = (config.clearValue || '').split(',')
|
if (vals.includes(result.data[0][config.clearField])) {
|
this.timer && this.timer.stop()
|
}
|
}
|
|
UtilsDM.querySuccess(result)
|
} else {
|
this.setState({
|
loading: false
|
})
|
this.timer && this.timer.stop()
|
|
UtilsDM.queryFail(result)
|
}
|
}
|
|
handleData = () => {
|
const { data, searchkey, config, selectedKeys, selected } = this.state
|
if (!data || data.length === 0) {
|
this.setState({
|
selectedKeys: [],
|
expandedKeys: [],
|
treedata: [],
|
treeNodes: [],
|
})
|
|
MKEmitter.emit('resetSelectLine', config.uuid, '', '')
|
return
|
}
|
let parentNodes = []
|
let _options = []
|
let logMap = new Map()
|
let selectKey = selectedKeys[0] || ''
|
let selectData = ''
|
let hasSelectKey = false
|
|
data.forEach(item => {
|
let pval = item[config.wrap.parentField] + ''
|
let val = item[config.wrap.valueField] + ''
|
let uuid = item[config.setting.primaryKey] + ''
|
|
if (!val || logMap.has(val)) return
|
|
if (selectKey && selectKey === val) {
|
hasSelectKey = true
|
selectData = {
|
...item,
|
$$uuid: uuid,
|
$title: item[config.wrap.labelField] || '',
|
$key: val,
|
$parentId: ''
|
}
|
}
|
|
logMap.set(val, true)
|
if (pval === config.wrap.mark) {
|
parentNodes.push({
|
...item,
|
mk_floor: 1,
|
$$uuid: uuid,
|
$title: item[config.wrap.labelField] || '',
|
$key: val,
|
$parentId: ''
|
})
|
} else if (pval) {
|
_options.push({
|
...item,
|
$$uuid: uuid,
|
$title: item[config.wrap.labelField] || '',
|
$key: val,
|
$parentId: pval
|
})
|
}
|
})
|
let _treedata = this.getTree(parentNodes, _options)
|
|
let _treeNodes = []
|
|
if (!searchkey) {
|
_treeNodes = fromJS(_treedata).toJS()
|
} else {
|
_treeNodes = this.getFilterTree(fromJS(_treedata).toJS(), searchkey.toLowerCase())
|
}
|
|
this.setState({
|
expandedKeys: _treeNodes[0] ? [_treeNodes[0].$key] : [],
|
treedata: _treedata,
|
treeNodes: _treeNodes,
|
})
|
|
if (selected && !hasSelectKey && _treeNodes[0]) {
|
this.setState({
|
selectedKeys: [_treeNodes[0].$key]
|
})
|
|
setTimeout(() => {
|
MKEmitter.emit('resetSelectLine', config.uuid, _treeNodes[0].$$uuid, _treeNodes[0])
|
}, 200)
|
} else if (!hasSelectKey && selectKey) {
|
this.setState({
|
selectedKeys: []
|
})
|
|
MKEmitter.emit('resetSelectLine', config.uuid, '', '')
|
} else if (hasSelectKey) {
|
MKEmitter.emit('resetSelectLine', config.uuid, selectData.$$uuid, selectData)
|
}
|
}
|
|
treeFilter = (value) => {
|
const { treedata } = this.state
|
|
let _treeNodes = []
|
|
if (!value) {
|
_treeNodes = fromJS(treedata).toJS()
|
} else {
|
_treeNodes = this.getFilterTree(fromJS(treedata).toJS(), value.toLowerCase())
|
}
|
|
this.setState({
|
searchkey: value,
|
treeNodes: _treeNodes
|
})
|
}
|
|
/**
|
* @description 获取结构树信息
|
*/
|
getFilterTree = (parents, searchkey) => {
|
return parents.filter(node => {
|
if (!node.children) {
|
return (node.$title.toLowerCase().indexOf(searchkey) >= 0 || node.$key.toLowerCase().indexOf(searchkey) >= 0)
|
} else {
|
if (node.$title.toLowerCase().indexOf(searchkey) >= 0 || node.$key.toLowerCase().indexOf(searchkey) >= 0) {
|
return true
|
}
|
|
node.children = this.getFilterTree(node.children, searchkey)
|
if (node.children.length === 0) {
|
return false
|
} else {
|
return true
|
}
|
}
|
})
|
}
|
|
/**
|
* @description 获取结构树信息
|
*/
|
getTree = (parents, options) => {
|
parents.forEach(parent => {
|
parent.children = []
|
// 添加菜单的子元素
|
options = options.filter(option => {
|
if (option.$parentId === parent.$key) {
|
option.mk_floor = parent.mk_floor + 1
|
parent.children.push(option)
|
return false
|
}
|
return true
|
})
|
|
if (parent.children.length === 0) {
|
parent.children = null
|
} else {
|
parent.children = this.getTree(parent.children, options)
|
}
|
})
|
return parents
|
}
|
|
/**
|
* @description 获取树节点
|
*/
|
renderTreeNodes = (nodes) => {
|
return nodes.map(item => {
|
if (item.children) {
|
return (
|
<TreeNode icon={<span><FolderOpenOutlined /><FolderOutlined /></span>} title={item.$title} key={item.$key} dataRef={item}>
|
{this.renderTreeNodes(item.children)}
|
</TreeNode>
|
)
|
}
|
return <TreeNode icon={<FileOutlined />} key={item.$key} title={item.$title} dataRef={item} isLeaf />
|
})
|
}
|
|
renderActionTreeNodes = (nodes) => {
|
return nodes.map(item => {
|
let title = <>
|
{item.$title}
|
<Dropdown overlay={
|
<div className="mk-tree-dropdown-wrap" onClick={(e) => e.stopPropagation()}>
|
<MainAction
|
BID={this.state.BID}
|
BData={this.state.BData}
|
setting={this.state.config.setting}
|
actions={this.state.config.action}
|
columns={this.state.config.columns}
|
selectedData={[{...item, children: ''}]}
|
/>
|
</div>
|
} placement="bottomCenter" trigger={['hover']}>
|
<MoreOutlined onClick={(e) => e.stopPropagation()}/>
|
</Dropdown>
|
</>
|
|
if (item.children) {
|
return (
|
<TreeNode icon={<span><FolderOpenOutlined /><FolderOutlined /></span>} title={title} key={item.$key} dataRef={item}>
|
{this.renderActionTreeNodes(item.children)}
|
</TreeNode>
|
)
|
}
|
return <TreeNode icon={<FileOutlined />} key={item.$key} title={title} dataRef={item} isLeaf />
|
})
|
}
|
|
changeExpandedKeys = (expandedKeys) => {
|
this.setState({
|
expandedKeys: expandedKeys
|
})
|
}
|
|
// 右键展开节点下的全部分支
|
changeExpandedAllKeys = ({event, node}) => {
|
const { expandedKeys } = this.state
|
let _node = node.props.dataRef
|
event.stopPropagation()
|
|
let keys = []
|
this.getExpandKeys(_node, keys)
|
|
this.setState({
|
expandedKeys: Array.from(new Set([...keys, ...expandedKeys])),
|
})
|
}
|
|
getExpandKeys = (node, keys) => {
|
if (node.children) {
|
keys.push(node.$key)
|
node.children.forEach(_node => {
|
this.getExpandKeys(_node, keys)
|
})
|
}
|
}
|
|
selectTreeNode = (selectedKeys, {selected, node}) => {
|
const { config } = this.state
|
let _expandedKeys = fromJS(this.state.expandedKeys).toJS()
|
let _data = fromJS(node.props.dataRef).toJS()
|
|
if (_expandedKeys.indexOf(_data.$key) >= 0) {
|
_expandedKeys = _expandedKeys.filter(key => key !== _data.$key)
|
} else {
|
if (_data.children) {
|
_expandedKeys.push(_data.$key)
|
_expandedKeys = Array.from(new Set(_expandedKeys))
|
}
|
}
|
|
if (selected) {
|
delete _data.children
|
MKEmitter.emit('resetSelectLine', config.uuid, (_data ? _data.$$uuid : ''), _data)
|
}
|
|
this.setState({
|
expandedKeys: _expandedKeys,
|
selectedKeys: [_data.$key]
|
})
|
}
|
|
render() {
|
const { config, loading, treeNodes, expandedKeys, selectedKeys } = this.state
|
|
let extra = config.action && config.action.length > 0
|
|
return (
|
<div className="custom-tree-box" id={'anchor' + config.uuid} style={config.style}>
|
{loading ?
|
<div className="loading-mask">
|
<div className="ant-spin-blur"></div>
|
<Spin />
|
</div> : null
|
}
|
{config.wrap.title || config.wrap.searchable === 'true' ? <div className="tree-header" style={config.headerStyle}>
|
<span className={'title ' + (config.wrap.searchable !== 'true' ? 'search-unable' : '')}>{config.wrap.title}</span>
|
{config.wrap.searchable === 'true' ? <Search allowClear onSearch={this.treeFilter} /> : null}
|
</div> : null}
|
{treeNodes && treeNodes.length > 0 ? <div className="tree-box" style={{height: config.wrap.contentHeight}}>
|
<Tree
|
blockNode
|
onSelect={this.selectTreeNode}
|
expandedKeys={expandedKeys}
|
selectedKeys={selectedKeys}
|
onRightClick={!extra ? this.changeExpandedAllKeys : null}
|
onExpand={this.changeExpandedKeys}
|
showIcon={config.wrap.showIcon === 'true'}
|
showLine={config.wrap.showLine === 'true'}
|
>
|
{!extra ? this.renderTreeNodes(treeNodes) : this.renderActionTreeNodes(treeNodes)}
|
</Tree>
|
</div> : null}
|
{treeNodes && treeNodes.length === 0 ? <Empty description={false}/> : null}
|
</div>
|
)
|
}
|
}
|
|
export default NormalTree
|
