From 03a22ec6f9ad7303d10b4c65bb5bc6fa5cbd448a Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 22 十月 2022 23:21:42 +0800 Subject: [PATCH] 2022-10-22 --- src/tabviews/custom/components/tabs/antv-tabs/index.jsx | 121 +++++++++++++++++++++++++++++++++------- 1 files changed, 99 insertions(+), 22 deletions(-) diff --git a/src/tabviews/custom/components/tabs/antv-tabs/index.jsx b/src/tabviews/custom/components/tabs/antv-tabs/index.jsx index 61e8418..9b46381 100644 --- a/src/tabviews/custom/components/tabs/antv-tabs/index.jsx +++ b/src/tabviews/custom/components/tabs/antv-tabs/index.jsx @@ -1,9 +1,10 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Tabs, Icon } from 'antd' +import { Tabs } from 'antd' import asyncComponent from '@/utils/asyncComponent' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import './index.scss' @@ -12,25 +13,45 @@ class antvTabs extends Component { static propTpyes = { - BID: PropTypes.any, // 椤甸潰BID - bids: PropTypes.any, // 鐖剁骇Id闆� config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 - menuType: PropTypes.any, // 鑿滃崟绫诲瀷 } state = { tabs: null, - parentIds: [], - bids: {} + activeIndex: 1 } UNSAFE_componentWillMount () { - const { config, bids } = this.props + const { config } = this.props + + let _tabs = fromJS(config).toJS() + + if (_tabs.setting.supModule) { + _tabs.subtabs = [] + + let data = window.GLOB.CacheData.get(_tabs.setting.supModule) + + if (data) { + let val = '' + Object.keys(data).forEach(key => { + if (key.toLowerCase() === _tabs.setting.controlField) { + val = data[key] + } + }) + _tabs.subtabs = config.subtabs.filter(tab => { + if (tab.controlVal === val) { + return false + } else if (/,/ig.test(tab.controlVal)) { + return !tab.controlVal.split(',').includes(val) + } + return true + }) + } + } + this.setState({ - tabs: config, - parentIds: config.parentIds || [], - bids: bids ? bids : {} + tabs: _tabs }) } @@ -39,6 +60,17 @@ } componentDidMount () { + const { config } = this.props + + if (config.setting.autoSwitch === 'true' && config.subtabs.length > 1 && config.setting.interval) { + this.autoSwitch(config.setting.interval) + } + + if (config.activeKey) { + let node = document.getElementById('tab' + config.activeKey) + node && node.click() + } + MKEmitter.addListener('resetSelectLine', this.resetParentParam) } @@ -52,26 +84,71 @@ MKEmitter.removeListener('resetSelectLine', this.resetParentParam) } - resetParentParam = (MenuID, id) => { - const { parentIds, bids } = this.state + resetParentParam = (MenuID, id, data) => { + const { tabs } = this.state - if (!parentIds.includes(MenuID)) return + if (tabs.setting.supModule === MenuID) { + if (!data) { + this.setState({ + tabs: {...tabs, subtabs: []} + }) + } else { + let val = '' + Object.keys(data).forEach(key => { + if (key.toLowerCase() === tabs.setting.controlField) { + val = data[key] + } + }) + 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 + })} + }) + } + } + } - this.setState({ - bids: {...bids, [MenuID]: id} - }) + 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 + const { mainSearch } = this.props + const { tabs } = this.state + + if (!tabs.subtabs.length) return null return ( - <div className="menu-antv-tabs-wrap" style={tabs.style}> - <Tabs defaultActiveKey="1" tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}> + <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 ? <Icon type={tab.icon} /> : null}{tab.label}</span>} key={tab.uuid}> - <TabTransfer BID={BID} config={tab} bids={bids} mainSearch={mainSearch}/> + <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 config={tab} mainSearch={mainSearch}/> </TabPane> ))} </Tabs> -- Gitblit v1.8.0