2020-08-31

king

2020-08-31 b3547d1c531e479021219fda5df153a11b9b52a3

 src/templates/sharecomponent/tabscomponent/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { is, fromJS } from 'immutable'
import { Icon, Tooltip, Modal, notification } from 'antd'

import Utils from '@/utils/utils.js'
@@ -14,10 +14,8 @@

const { confirm } = Modal

// **悲观者往往正确，乐观者往往成功
class TablesComponent extends Component {
  static propTpyes = {
    type: PropTypes.string,       // 菜单类型
    tabs: PropTypes.array,        // 标签组
    config: PropTypes.object,     // 页面配置
    setSubConfig: PropTypes.func, // 子标签配置
@@ -25,10 +23,11 @@
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    tabgroups: [],     // 标签组
    card: [],          // 编辑标签
    group: [],         // 编辑组
    levels: null,      // 树形页面的标签级别关联
    visible: false     // 模态框控制
  }

@@ -41,6 +40,17 @@
    this.setState({
      tabgroups: fromJS(config.tabgroups).toJS()
    })
  }

  /**
   * @description 标签组变化时，更新标签
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { tabgroups } = this.state

    if (!is(fromJS(nextProps.config.tabgroups), fromJS(this.props.config.tabgroups)) && !is(fromJS(nextProps.config.tabgroups), fromJS(tabgroups))) {
      this.setState({tabgroups: fromJS(nextProps.config.tabgroups).toJS()})
    }
  }

  /**
@@ -63,8 +73,9 @@
      this.setState({tabgroups: _tabgroups})
      this.handleTab(card, _group)
    } else {
      this.setState({tabgroups: _tabgroups})
      this.props.updatetabs({...config, tabgroups: _tabgroups})
      this.setState({tabgroups: _tabgroups}, () => {
        this.props.updatetabs({...config, tabgroups: _tabgroups})
      })
    }
  }

@@ -72,22 +83,28 @@
   * @description 标签编辑，筛选可选的下级标签与已关联的下级标签
   */
  handleTab = (card, _group) => {
    const { config } = this.props
    let tabgroups = fromJS(this.state.tabgroups).toJS()

    let menus = [
      {value: '', text: '空'},
      {value: 'mainTable', text: this.props.type === 'main' ? '主表' : '主数据'}
      {value: 'mainTable', text: '主表'}
    ]
    let equalTabs = []
    let supMenu = card.supMenu || ''
    let equalTab = card.equalTab || []
    let isuptab = true
    let equalTabIds = []
    let levels = {}

    tabgroups.forEach((group, i) => {
    tabgroups.forEach(group => {
      if (group.uuid === _group.uuid) {
        isuptab = false
        group.sublist.forEach(tab => { // 可关联的同级标签
          if (tab.level || tab.level === 0) {
            levels[tab.uuid] = tab.level
          }

          if (tab.uuid === card.uuid) return

          equalTabIds.push(tab.uuid)
@@ -95,6 +112,10 @@
        })
      } else if (isuptab) {
        group.sublist.forEach(tab => {
          if (tab.level || tab.level === 0) {
            levels[tab.uuid] = tab.level
          }

          menus.push({
            value: tab.uuid,
            text: tab.label
@@ -111,11 +132,16 @@
      equalTab = equalTab.filter(tabId => equalTabIds.includes(tabId))
    }

    if (config.Template !== 'TreePage') {
      levels = null
    }

    this.setState({
      visible: true,
      card: card,
      levels: levels,
      group: _group,
      formlist: getTabForm(card, supMenu, menus, equalTab, equalTabs, this.props.type)
      formlist: getTabForm(card, supMenu, menus, equalTab, equalTabs, config.Template)
    })
  }

@@ -165,13 +191,28 @@
        return _group
      })

      // 更新与之关联的标签显示级别
      if (config.Template === 'TreePage' && res.level !== card.level) {
        tabgroups = tabgroups.map(_group => {
          _group.sublist = _group.sublist.map(item => {
            if (item.supMenu === res.uuid) {
              item.level = res.level
            }

            return item
          })
          return _group
        })
      }

      this.setState({
        card: null,
        group: null,
        tabgroups: tabgroups, 
        visible: false
      }, () => {
        this.props.updatetabs({...config, tabgroups: tabgroups})
      })
      this.props.updatetabs({...config, tabgroups: tabgroups})
    })
  }
  
@@ -185,8 +226,6 @@

    confirm({
      content: `确定删除<<${card.label}>>吗？`,
      okText: this.state.dict['model.confirm'],
      cancelText: this.state.dict['header.cancel'],
      onOk() {
        tabgroups = tabgroups.map(_group => {
          if (_group.uuid === group.uuid) {
@@ -195,10 +234,22 @@
          return _group
        })

        // 清除与之关联标签的上级标签设置
        tabgroups = tabgroups.map(_group => {
          _group.sublist = _group.sublist.map(item => {
            if (item.supMenu === card.uuid) {
              item.supMenu = ''
            }
            return item
          })
          return _group
        })

        _this.setState({
          tabgroups: tabgroups
        }, () => {
          _this.props.updatetabs({...config, tabgroups: tabgroups})
        })
        _this.props.updatetabs({...config, tabgroups: tabgroups}, [card])
      },
      onCancel() {}
    })
@@ -214,8 +265,6 @@

    confirm({
      content: `确定新建标签组吗？`,
      okText: this.state.dict['model.confirm'],
      cancelText: this.state.dict['header.cancel'],
      onOk() {
        if (_tabgroups.length === 1) {
          _tabgroups.forEach(group => {
@@ -230,8 +279,9 @@

        _this.setState({
          tabgroups: _tabgroups
        }, () => {
          _this.props.updatetabs({...config, tabgroups: _tabgroups})
        })
        _this.props.updatetabs({...config, tabgroups: _tabgroups})
      },
      onCancel() {}
    })
@@ -247,16 +297,14 @@

    confirm({
      content: `确定删除标签组吗？`,
      okText: this.state.dict['model.confirm'],
      cancelText: this.state.dict['header.cancel'],
      onOk() {

        _tabgroups = _tabgroups.filter(_group => _group.uuid !== group.uuid)

        _this.setState({
          tabgroups: _tabgroups
        }, () => {
          _this.props.updatetabs({...config, tabgroups: _tabgroups}, group.sublist)
        })
        _this.props.updatetabs({...config, tabgroups: _tabgroups}, group.sublist)
      },
      onCancel() {}
    })
@@ -277,8 +325,9 @@

    this.setState({
      tabgroups: _tabgroups
    }, () => {
      this.props.updatetabs({...config, tabgroups: _tabgroups})
    })
    this.props.updatetabs({...config, tabgroups: _tabgroups})

    notification.success({
      top: 92,
@@ -309,8 +358,9 @@
        group: null,
        tabgroups: _tabgroups,
        visible: false
      }, () => {
        this.props.updatetabs({...config, tabgroups: _tabgroups})
      })
      this.props.updatetabs({...config, tabgroups: _tabgroups})
    } else {
      this.setState({
        card: null,
@@ -318,6 +368,10 @@
        visible: false
      })
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
@@ -352,13 +406,13 @@
                handleMenu={(card) => this.handleTab(card, group)}
                deleteMenu={(card) => this.deleteElement(card, group)}
                doubleClickCard={this.props.setSubConfig}
                placeholder={this.state.dict['header.form.tab.placeholder']}
                placeholder={dict['form.required.add'] + dict['model.form.tab']}
              />
            </div>)
        })}
        {/* 标签编辑 */}
        <Modal
          title={this.state.dict['header.modal.tabs.edit']}
          title={dict['header.modal.tabs.edit']}
          visible={visible}
          width={750}
          maskClosable={false}
@@ -367,9 +421,10 @@
          destroyOnClose
        >
          <TabForm
            dict={this.state.dict}
            dict={dict}
            card={this.state.card}
            tabs={this.props.tabs}
            levels={this.state.levels}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
            wrappedComponentRef={(inst) => this.tabsFormRef = inst}