2022-10-22

king

2022-10-22 03a22ec6f9ad7303d10b4c65bb5bc6fa5cbd448a

 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
export default antvTabs