2024-08-25

king

2024-08-25 ae170a9d58b4f91a225eada1dc83ed4a116b8d50

 src/templates/sharecomponent/tabscomponent/index.jsx

@@ -1,12 +1,11 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Icon, Tooltip, Modal, notification } from 'antd'
import { is, fromJS } from 'immutable'
import { Tooltip, Modal, notification } from 'antd'
import { QuestionCircleOutlined, ArrowDownOutlined, ArrowUpOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getTabForm } from '@/templates/zshare/formconfig'
import { getTabForm } from './formconfig'

import TabForm from './tabform'
import TabDragElement from './tabdragelement'
@@ -14,10 +13,8 @@

const { confirm } = Modal

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

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

@@ -41,6 +38,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 +71,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 +81,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 +110,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 +130,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 +189,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})
    })
  }
  
@@ -180,13 +219,11 @@
   */
  deleteElement = (card, group) => {
    const { config } = this.props
    let _this = this
    let that = this
    let tabgroups = fromJS(this.state.tabgroups).toJS()

    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 +232,22 @@
          return _group
        })

        _this.setState({
          tabgroups: tabgroups
        // 清除与之关联标签的上级标签设置
        tabgroups = tabgroups.map(_group => {
          _group.sublist = _group.sublist.map(item => {
            if (item.supMenu === card.uuid) {
              item.supMenu = ''
            }
            return item
          })
          return _group
        })
        _this.props.updatetabs({...config, tabgroups: tabgroups}, [card])

        that.setState({
          tabgroups: tabgroups
        }, () => {
          that.props.updatetabs({...config, tabgroups: tabgroups})
        })
      },
      onCancel() {}
    })
@@ -209,13 +258,11 @@
   */
  addTabGroup = () => {
    const { config } = this.props
    let _this = this
    let that = this
    let _tabgroups = fromJS(this.state.tabgroups).toJS()

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

        _this.setState({
        that.setState({
          tabgroups: _tabgroups
        }, () => {
          that.props.updatetabs({...config, tabgroups: _tabgroups})
        })
        _this.props.updatetabs({...config, tabgroups: _tabgroups})
      },
      onCancel() {}
    })
@@ -242,21 +290,19 @@
   */
  delTabGroup = (group) => {
    const { config } = this.props
    let _this = this
    let that = this
    let _tabgroups = fromJS(this.state.tabgroups).toJS()

    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({
        that.setState({
          tabgroups: _tabgroups
        }, () => {
          that.props.updatetabs({...config, tabgroups: _tabgroups}, group.sublist)
        })
        _this.props.updatetabs({...config, tabgroups: _tabgroups}, group.sublist)
      },
      onCancel() {}
    })
@@ -277,8 +323,9 @@

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

    notification.success({
      top: 92,
@@ -309,8 +356,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 +366,10 @@
        visible: false
      })
    }
  }

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

  /**
@@ -330,35 +382,34 @@
  }

  render() {
    const { tabgroups, visible, dict } = this.state
    const { tabgroups, visible } = this.state

    return (
      <div className="model-table-tab-list">
        {tabgroups.map((group, index) => {
          return (
            <div key={index} className="tab-line-list">
              {index === 0 ? <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.tabs.guide']}>
                <Icon type="question-circle" />
              {index === 0 ? <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《标签页》中，选择对应类型的标签页拖至此处添加。">
                <QuestionCircleOutlined style={{color: '#c49f47', position: 'absolute', left: '5px', top: '20px'}} />
              </Tooltip> : null}
              {index !== (tabgroups.length - 1) ?
                <Icon type="arrow-down" onClick={() => {this.handleGroup(index, 'down')}} /> : null
                <ArrowDownOutlined onClick={() => {this.handleGroup(index, 'down')}} /> : null
              }
              {index !== 0 ? <Icon type="arrow-up" onClick={() => {this.handleGroup(index, 'up')}} /> : null}
              {index === 0 ? <Icon type="plus" onClick={this.addTabGroup} /> : null}
              {index !== 0 ? <Icon type="delete" onClick={() => {this.delTabGroup(group)}} /> : null}
              {index !== 0 ? <ArrowUpOutlined onClick={() => {this.handleGroup(index, 'up')}} /> : null}
              {index === 0 ? <PlusOutlined onClick={this.addTabGroup} /> : null}
              {index !== 0 ? <DeleteOutlined onClick={() => {this.delTabGroup(group)}} /> : null}
              <TabDragElement
                list={group.sublist}
                handleList={(list, newcard) => this.handleList(list, newcard, group.uuid)}
                handleMenu={(card) => this.handleTab(card, group)}
                deleteMenu={(card) => this.deleteElement(card, group)}
                doubleClickCard={this.props.setSubConfig}
                placeholder={this.state.dict['header.form.tab.placeholder']}
              />
            </div>)
        })}
        {/* 标签编辑 */}
        <Modal
          title={this.state.dict['header.modal.tabs.edit']}
          title="标签-编辑"
          visible={visible}
          width={750}
          maskClosable={false}
@@ -367,9 +418,9 @@
          destroyOnClose
        >
          <TabForm
            dict={this.state.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}