2024-08-25

king

2024-08-25 ae170a9d58b4f91a225eada1dc83ed4a116b8d50

 src/templates/sharecomponent/columncomponent/index.jsx

@@ -1,17 +1,17 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Tooltip, Modal, notification, Switch, message } from 'antd'
import { Modal, notification, Switch, message } from 'antd'
import { CopyOutlined } from '@ant-design/icons'

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

import ColumnForm from './columnform'
import ColspanForm from './colspanform'
import GridBtnForm from './gridbtnform'
import DragElement from './dragcolumn'
import MarkColumn from './markcolumn'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { confirm } = Modal
@@ -24,7 +24,6 @@
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    columnlist: null,    // 显示列
    showField: true,     // 显示列字段
    modaltype: '',       // 模态框控制
@@ -38,18 +37,6 @@
    this.setState({
      columnlist: fromJS(this.props.config.columns).toJS()
    })
  }

  /**
   * @description 监听到显示列复制时，触发显示列编辑
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { config } = this.props
    const { columnlist } = this.state

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

  /**
@@ -293,13 +280,12 @@
   */
  deleteElement = (card) => {
    const { config } = this.props
    const { dict } = this.state
    let _this = this
    let that = this

    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} ？`,
      content: `确定删除 - ${card.label} ？`,
      onOk() {
        let _columnlist = fromJS(_this.state.columnlist).toJS()
        let _columnlist = fromJS(that.state.columnlist).toJS()

        _columnlist = _columnlist.filter(item => item.uuid !== card.uuid)

@@ -365,10 +351,10 @@
          }
        }

        _this.setState({
        that.setState({
          columnlist: _columnlist
        }, ()=> {
          _this.props.updatecolumn({...config, columns: _columnlist})
          that.props.updatecolumn({...config, columns: _columnlist})
        })
      },
      onCancel() {}
@@ -385,6 +371,11 @@
    let val = {
      copyType: 'columns',
      columns: columnlist
    }

    let srcid = localStorage.getItem(window.GLOB.sysSign + 'srcId')
    if (srcid) {
      val.$srcId = srcid
    }

    oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
@@ -460,8 +451,38 @@
    })
  }

  plusColumns = (MenuId, items) => {
    const { config } = this.props
    const { columnlist } = this.state

    if (MenuId !== config.uuid) return

    let list = [...columnlist, ...items]

    if (list[0] && list[0].origin) {
      list = list.filter(col => !col.origin)
    }

    this.setState({
      columnlist: list
    }, () => {
      this.props.updatecolumn({...config, columns: list})
    })
  }

  // revert = () => {
  //   this.setState({
  //     columnlist: fromJS(this.props.config.columns).toJS()
  //   })
  // }

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

  componentDidMount () {
    // MKEmitter.addListener('revert', this.revert)
    MKEmitter.addListener('plusColumns', this.plusColumns)
  }

  /**
@@ -471,21 +492,18 @@
    this.setState = () => {
      return
    }
    // MKEmitter.removeListener('revert', this.revert)
    MKEmitter.removeListener('plusColumns', this.plusColumns)
  }

  render() {
    const { config } = this.props
    const { modaltype, columnlist, dict, card } = this.state
    const { modaltype, columnlist, card } = this.state

    return (
      <div className="model-table-column-list">
        <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.column.guide']}>
          <Icon type="question-circle" />
        </Tooltip>
        {columnlist && columnlist.length > 0 ?
          <Icon className="column-copy" title="copy" type="copy" onClick={this.copycolumn} /> : null
        }
        <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={this.onFieldChange} />
        {columnlist && columnlist.length > 0 ? <CopyOutlined className="column-copy" title="copy" onClick={this.copycolumn} /> : null}
        <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={this.onFieldChange} />
        <DragElement
          list={columnlist}
          setting={config.setting}
@@ -496,20 +514,18 @@
          markMenu={this.markElement}
          handleGridBtn={this.handleGridBtn}
          showfield={this.state.showField}
          placeholder={this.state.dict['header.form.column.placeholder']}
        />
        {/* 显示列编辑 */}
        <Modal
          title={dict['header.modal.column.edit']}
          title="显示列-编辑"
          visible={modaltype === 'columns'}
          width={800}
          width={850}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
          destroyOnClose
        >
          <ColumnForm
            dict={dict}
            card={card}
            MenuID={this.props.menu.MenuID}
            inputSubmit={this.handleSubmit}
@@ -519,16 +535,15 @@
        </Modal>
        {/* 合并列编辑 */}
        <Modal
          title={dict['model.form.colspan'] + '-' + dict['model.edit']}
          title="合并列-编辑"
          visible={modaltype === 'colspan'}
          width={800}
          width={850}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
          destroyOnClose
        >
          <ColspanForm
            dict={dict}
            card={card}
            inputSubmit={this.handleSubmit}
            columns={columnlist}
@@ -537,16 +552,15 @@
        </Modal>
        {/* 操作列编辑 */}
        <Modal
          title={dict['header.modal.gridbtn.edit']}
          title="操作列-编辑"
          visible={modaltype === 'gridbtn'}
          width={800}
          width={850}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
          destroyOnClose
        >
          <GridBtnForm
            dict={dict}
            inputSubmit={this.handleSubmit}
            card={config.gridBtn}
            wrappedComponentRef={(inst) => this.gridBtnFormRef = inst}
@@ -559,7 +573,7 @@
          visible={modaltype === 'mark'}
          width={'75vw'}
          maskClosable={false}
          okText={dict['model.submit']}
          okText="提交"
          onOk={this.markSubmit}
          onCancel={() => { this.setState({ modaltype: '' }) }}
          destroyOnClose
@@ -567,7 +581,6 @@
          <MarkColumn
            ref="markRef"
            card={card}
            dict={dict}
            columns={columnlist}
          />
        </Modal>