2020-06-28

king

2020-06-28 48a18736c461ad730bd264b0ac7b40b68a0e33a1

 src/templates/sharecomponent/columncomponent/index.jsx

@@ -13,11 +13,11 @@
import ColspanForm from './colspanform'
import GridBtnForm from './gridbtnform'
import DragElement from './dragcolumn'
import MarkColumn from './markcolumn'
import './index.scss'

const { confirm } = Modal

// **悲观者往往正确，乐观者往往成功
class ColumnComponent extends Component {
  static propTpyes = {
    menu: PropTypes.object,          // 三级菜单信息
@@ -28,9 +28,9 @@
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    columnlist: null,    // 显示列
    loading: false,      // 查询显示列关联菜单
    loading: false,      // 查询显示列联动菜单
    showField: false,    // 显示列字段
    modaltype: '',       // 模态框控制
    card: null           // 编辑中元素
@@ -49,18 +49,22 @@
   * @description 监听到显示列复制时，触发显示列编辑
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { config } = this.props
    const { columnlist } = this.state

    if (
      nextProps.pasteContent &&
      columnlist.length === 0 &&
      nextProps.pasteContent.columns &&
      nextProps.pasteContent.copyType === 'columns' &&
      nextProps.pasteContent.columns.length > 0
    ) {
      this.setState({columnlist: nextProps.pasteContent.columns})
    } else if (!is(fromJS(nextProps.config.columns), fromJS(this.props.config.columns)) && !is(fromJS(nextProps.config.columns), fromJS(columnlist))) {
      this.setState({columnlist: nextProps.config.columns})
      if (columnlist.filter(col => !col.origin).length === 0) {
        this.setState({columnlist: nextProps.pasteContent.columns}, () => {
          this.props.updatecolumn({...config, columns: nextProps.pasteContent.columns})
        })
      }
    } else if (!is(fromJS(nextProps.config.columns), fromJS(config.columns)) && !is(fromJS(nextProps.config.columns), fromJS(columnlist))) {
      this.setState({columnlist: fromJS(nextProps.config.columns).toJS()})
    }
  }

@@ -74,8 +78,9 @@
      this.setState({columnlist: list})
      this.handleColumn(card)
    } else {
      this.setState({columnlist: list})
      this.props.updatecolumn({...config, search: list})
      this.setState({columnlist: list}, ()=> {     
        this.props.updatecolumn({...config, columns: list})
      })
    }
  }

@@ -98,7 +103,7 @@
        let _param = {
          func: 'sPC_Get_FunMenu',
          ParentID: card.linkmenu[0],
          systemType: options.systemType,
          systemType: options.sysType,
          debug: 'Y'
        }

@@ -165,6 +170,16 @@
  }

  /**
   * @description 设置标志
   */
  markElement = (card) => {
    this.setState({
      modaltype: 'mark',
      card: card
    })
  }

  /**
   * @description 操作列编辑
   */
  handleGridBtn = () => {
@@ -206,7 +221,7 @@
   */
  handleSubmit = () => {
    const { config } = this.props
    const { modaltype } = this.state
    const { modaltype, card } = this.state

    let _columnlist = fromJS(this.state.columnlist).toJS()

@@ -249,11 +264,30 @@
          return
        }

        if (!card.focus && (card.type !== res.type || (res.field && card.field !== res.field))) {
          let refers = []
          _columnlist.forEach(column => {
            if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
              refers.push(column.label)
            }
          })

          if (refers.length > 0) {
            notification.warning({
              top: 92,
              message: '显示列《' + refers.join('、') + '》标记中含有该字段，此次修改会导致标记失效，请修改《' + refers.join('、') + '》标记设置！',
              duration: 5
            })
          }
        }

        this.setState({
          card: null,
          columnlist: _columnlist,
          modaltype: ''
        }, ()=> {
          this.props.updatecolumn({...config, columns: _columnlist})
        })
        this.props.updatecolumn({...config, columns: _columnlist})
      })
    } else if (modaltype === 'gridbtn') {
      this.gridBtnFormRef.handleConfirm().then(res => {
@@ -277,16 +311,34 @@
    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} ？`,
      okText: dict['model.confirm'],
      cancelText: this.state.dict['header.cancel'],
      cancelText: this.state.dict['model.cancel'],
      onOk() {
        let _columnlist = fromJS(_this.state.columnlist).toJS()

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

        if (card.field) {
          let refers = []
          _columnlist.forEach(column => {
            if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
              refers.push(column.label)
            }
          })

          if (refers.length > 0) {
            notification.warning({
              top: 92,
              message: '显示列《' + refers.join('、') + '》标记中含有该字段，删除会导致标记失效，请修改《' + refers.join('、') + '》标记设置！',
              duration: 5
            })
          }
        }

        _this.setState({
          columnlist: _columnlist
        }, ()=> {
          _this.props.updatecolumn({...config, columns: _columnlist})
        })
        _this.props.updatecolumn({...config, columns: _columnlist})
      },
      onCancel() {}
    })
@@ -350,6 +402,37 @@
    })
  }

  markSubmit = () => {
    const { config } = this.props
    const { card } = this.state
    let _columnlist = fromJS(this.state.columnlist).toJS()
    let _marks = this.refs.markRef.state.marks

    if (_marks.length === 0) {
      _marks = ''
    }

    _columnlist = _columnlist.map(item => {
      if (item.uuid === card.uuid) {
        item.marks = _marks
      }
        
      return item
    })

    this.setState({
      card: null,
      columnlist: _columnlist,
      modaltype: ''
    }, ()=> { 
      this.props.updatecolumn({...config, columns: _columnlist})
    })
  }

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

  /**
   * @description 组件销毁，清除state更新
   */
@@ -371,7 +454,7 @@
        {columnlist && columnlist.length > 0 ?
          <Icon className="column-copy" title="copy" type="copy" onClick={this.copycolumn} /> : null
        }
        <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={this.onFieldChange} />
        <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={this.onFieldChange} />
        <DragElement
          list={columnlist}
          setting={config.setting}
@@ -379,6 +462,7 @@
          handleList={this.handleList}
          handleMenu={this.handleColumn}
          deleteMenu={this.deleteElement}
          markMenu={this.markElement}
          handleGridBtn={this.handleGridBtn}
          showfield={this.state.showField}
          placeholder={this.state.dict['header.form.column.placeholder']}
@@ -387,7 +471,7 @@
        <Modal
          title={dict['header.modal.column.edit']}
          visible={modaltype === 'columns'}
          width={750}
          width={800}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
@@ -404,9 +488,9 @@
        </Modal>
        {/* 合并列编辑 */}
        <Modal
          title={dict['header.modal.colspan.edit']}
          title={dict['model.modal.colspan'] + '-' + dict['model.edit']}
          visible={modaltype === 'colspan'}
          width={750}
          width={800}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
@@ -424,7 +508,7 @@
        <Modal
          title={dict['header.modal.gridbtn.edit']}
          visible={modaltype === 'gridbtn'}
          width={700}
          width={800}
          maskClosable={false}
          onOk={this.handleSubmit}
          onCancel={this.editModalCancel}
@@ -437,6 +521,26 @@
            wrappedComponentRef={(inst) => this.gridBtnFormRef = inst}
          />
        </Modal>
        {/* 按钮使用系统存储过程时，验证信息模态框 */}
        <Modal
          wrapClassName="model-table-column-mark-modal"
          title={'标记设置'}
          visible={modaltype === 'mark'}
          width={'75vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          okText={dict['model.submit']}
          onOk={this.markSubmit}
          onCancel={() => { this.setState({ modaltype: '' }) }}
          destroyOnClose
        >
          <MarkColumn
            ref="markRef"
            card={card}
            dict={dict}
            columns={columnlist}
          />
        </Modal>
        {this.state.loading && <Spin size="large" />}
      </div>
    )