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 { is, fromJS } from 'immutable'
import { Icon, Tooltip, Modal, notification } from 'antd'
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'
@@ -23,7 +22,6 @@
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    tabgroups: [],     // 标签组
    card: [],          // 编辑标签
    group: [],         // 编辑组
@@ -221,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) {
@@ -247,10 +243,10 @@
          return _group
        })

        _this.setState({
        that.setState({
          tabgroups: tabgroups
        }, () => {
          _this.props.updatetabs({...config, tabgroups: tabgroups}, [card])
          that.props.updatetabs({...config, tabgroups: tabgroups})
        })
      },
      onCancel() {}
@@ -262,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 => {
@@ -281,10 +275,10 @@
          sublist:[]
        })

        _this.setState({
        that.setState({
          tabgroups: _tabgroups
        }, () => {
          _this.props.updatetabs({...config, tabgroups: _tabgroups})
          that.props.updatetabs({...config, tabgroups: _tabgroups})
        })
      },
      onCancel() {}
@@ -296,20 +290,18 @@
   */
  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
        }, () => {
          _this.props.updatetabs({...config, tabgroups: _tabgroups}, group.sublist)
          that.props.updatetabs({...config, tabgroups: _tabgroups}, group.sublist)
        })
      },
      onCancel() {}
@@ -376,6 +368,10 @@
    }
  }

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

  /**
   * @description 组件销毁，清除state更新
   */
@@ -386,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}
@@ -423,7 +418,6 @@
          destroyOnClose
        >
          <TabForm
            dict={this.state.dict}
            card={this.state.card}
            tabs={this.props.tabs}
            levels={this.state.levels}