import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Tabs } from 'antd'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import MkIcon from '@/components/mk-icon'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const TabTransfer = asyncComponent(() => import('../../share/tabtransfer'))
|
const { TabPane } = Tabs
|
|
class antvTabs extends Component {
|
static propTpyes = {
|
BID: PropTypes.any, // 页面BID
|
bids: PropTypes.any, // 父级Id集
|
config: PropTypes.object, // 组件配置信息
|
mainSearch: PropTypes.any, // 外层搜索条件
|
}
|
|
state = {
|
tabs: null,
|
parentIds: [],
|
bids: {},
|
activeIndex: 1
|
}
|
|
UNSAFE_componentWillMount () {
|
const { config, bids } = this.props
|
|
let _tabs = fromJS(config).toJS()
|
|
if (_tabs.setting.supModule) {
|
_tabs.subtabs = []
|
}
|
|
this.setState({
|
tabs: _tabs,
|
parentIds: config.parentIds || [],
|
bids: bids ? bids : {}
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentDidMount () {
|
const { config } = this.props
|
|
if (config.setting.autoSwitch === 'true' && config.subtabs.length > 1 && config.setting.interval) {
|
this.autoSwitch(config.setting.interval)
|
}
|
MKEmitter.addListener('resetSelectLine', this.resetParentParam)
|
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
|
}
|
|
resetParentParam = (MenuID, id, data) => {
|
const { parentIds, bids, tabs } = this.state
|
|
if (parentIds.includes(MenuID)) {
|
this.setState({
|
bids: {...bids, [MenuID]: id, [MenuID + '_data']: data}
|
})
|
}
|
|
if (tabs.setting.supModule === MenuID) {
|
if (!data) {
|
this.setState({
|
tabs: {...tabs, subtabs: []}
|
})
|
} else {
|
let val = data[tabs.setting.controlField] === undefined ? '' : data[tabs.setting.controlField] + ''
|
this.setState({
|
tabs: {...tabs, subtabs: this.props.config.subtabs.filter(tab => {
|
if (tab.controlVal === val) {
|
return false
|
} else if (/,/ig.test(tab.controlVal)) {
|
return tab.controlVal.split(',').includes(val)
|
}
|
return true
|
})}
|
})
|
}
|
}
|
}
|
|
autoSwitch = (interval) => {
|
const { tabs, activeIndex } = this.state
|
|
if (!tabs) return
|
|
let index = activeIndex
|
|
if (!tabs.subtabs[index]) {
|
index = 0
|
}
|
|
let id = 'tab' + tabs.subtabs[index].uuid
|
|
this.setState({activeIndex: ++index})
|
|
setTimeout(() => {
|
let node = document.getElementById(id)
|
if (node) {
|
node.click()
|
this.autoSwitch(interval)
|
}
|
}, interval * 1000)
|
}
|
|
render() {
|
const { mainSearch, BID } = this.props
|
const { tabs, bids } = this.state
|
|
if (!tabs.subtabs.length) return null
|
|
return (
|
<div className={'menu-antv-tabs-wrap ' + tabs.setting.tabLabel} style={tabs.style}>
|
<Tabs defaultActiveKey="1" tabBarStyle={{background: tabs.setting.backgroundColor || 'transparent'}} tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}>
|
{tabs.subtabs.map(tab => (
|
<TabPane tab={<span id={'tab' + tab.uuid}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span>} style={{backgroundColor: tab.backgroundColor || 'transparent'}} key={tab.uuid}>
|
<TabTransfer BID={BID} config={tab} bids={bids} mainSearch={mainSearch}/>
|
</TabPane>
|
))}
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default antvTabs
|
