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 | 127 ++++++++++++++++++++++++++++++++++++-----
1 files changed, 110 insertions(+), 17 deletions(-)
diff --git a/src/tabviews/custom/components/tabs/antv-tabs/index.jsx b/src/tabviews/custom/components/tabs/antv-tabs/index.jsx
index 1f89c25..9b46381 100644
--- a/src/tabviews/custom/components/tabs/antv-tabs/index.jsx
+++ b/src/tabviews/custom/components/tabs/antv-tabs/index.jsx
@@ -1,41 +1,78 @@
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'
const TabTransfer = asyncComponent(() => import('../../share/tabtransfer'))
-
const { TabPane } = Tabs
-class antvBarLineChart extends Component {
+class antvTabs extends Component {
static propTpyes = {
- BID: PropTypes.any, // 鐖剁骇Id
config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅
mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢
- menuType: PropTypes.any, // 鑿滃崟绫诲瀷
- dataManager: PropTypes.any, // 鏁版嵁鏉冮檺
}
state = {
- tabs: null
+ tabs: null,
+ activeIndex: 1
}
UNSAFE_componentWillMount () {
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
+ tabs: _tabs
})
}
shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.state), fromJS(nextState))
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
}
- componentDidMount () {}
+ 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)
+ }
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
@@ -44,18 +81,74 @@
this.setState = () => {
return
}
+ MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
+ }
+
+ resetParentParam = (MenuID, id, data) => {
+ const { tabs } = this.state
+
+ 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
+ })}
+ })
+ }
+ }
+ }
+
+ 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 { BID, mainSearch } = this.props
+ 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>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span>} key={tab.uuid}>
- <TabTransfer config={tab} BID={BID} 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>
@@ -64,4 +157,4 @@
}
}
-export default antvBarLineChart
\ No newline at end of file
+export default antvTabs
\ No newline at end of file
--
Gitblit v1.8.0