2021-07-28

king

2021-07-28 137fb8ea6af2789b3238b22bac31d80bced41dfe

 src/menu/components/table/normal-table/columns/index.jsx

@@ -37,17 +37,19 @@

  shouldComponentUpdate (nextProps, nextState) {

    if (this.props.rowSpan !== nextProps.rowSpan || this.props.colSpan !== nextProps.colSpan) {
      return true
    }

    if (!nextProps.column) return false

    return !is(fromJS(this.props.column), fromJS(nextProps.column)) ||
      !is(fromJS(this.props.fields), fromJS(nextProps.fields)) ||
      this.props.index !== nextProps.index ||
      this.props.rowSpan !== nextProps.rowSpan ||
      this.props.colSpan !== nextProps.colSpan
      this.props.index !== nextProps.index
  }

  render() {
    const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, deleteCol, index, column, align, fields, children, ...restProps } = this.props
    const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props

    if (index !== undefined) {
      return connectDragSource(
@@ -58,6 +60,7 @@
                <Icon className="plus" title="添加" type="plus" onClick={() => this.props.addElement(column)} /> : null
              }
              <Icon className="edit" title="编辑" type="edit" onClick={() => this.props.editColumn(column)} />
              {column && column.type === 'custom' ? <Icon className="style" title="调整样式" onClick={() => this.props.changeStyle(column)} type="font-colors" /> : null}
              <Icon className="close" title="删除" type="delete" onClick={this.deleteCol} />
              {column && ['text', 'number'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
            </div>
@@ -141,7 +144,7 @@

    if (column && column.type === 'custom') {
      return (
        <td style={{padding: 0, minWidth: column.Width || 100}} className={className}>
        <td style={{padding: 0, minWidth: column.Width || 100, ...(column.style || {})}} className={className}>
          <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/>
        </td>
      )
@@ -154,7 +157,7 @@
    } else if (column) {
      return (
        <td style={{...style, minWidth: column.Width || 100}} className={className}>
          {column.field}
          {column.field || (column.type === 'index' ? '$Index' : '')}
          {column.marks && column.marks.length ? <Icon className="profile" type="ant-design"/> : null}
        </td>
      )
@@ -176,11 +179,13 @@

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    appType: sessionStorage.getItem('appType'),
    tableId: '',
    data: [{uuid: Utils.getuuid()}],
    refresh: false,    // 强制刷新
    columns: [],
    fields: [],
    editStyleCard: null,
    lineMarks: []
  }

@@ -341,6 +346,24 @@
    this.updateCol(col)
  }

  changeStyle = (col) => {
    this.setState({
      editStyleCard: fromJS(col).toJS()
    })

    MKEmitter.emit('changeStyle', [col.uuid], ['font', 'padding'], col.style || {})
  }

  getStyle = (comIds, style) => {
    const { editStyleCard } = this.state

    if (!editStyleCard || comIds[0] !== editStyleCard.uuid || comIds.length !== 1) return

    let _card = {...editStyleCard, style}
    
    this.updateCol(_card)
  }

  cancelCol = () => {
    const { card } = this.state

@@ -361,22 +384,29 @@
  }

  deleteCol = (col) => {
    const { appType } = this.state
    let _columns = fromJS(this.state.columns).toJS()
    _columns = this.loopDelCol(_columns, col)

    if (col.type === 'action') {
      let uuids = []
      col.elements && col.elements.forEach(c => {
        uuids.push(c.uuid)
      })
      MKEmitter.emit('delButtons', uuids)
    }
    _columns = this.loopDelCol(_columns, col)

    this.setState({
      columns: _columns
    }, () => {
      this.props.updatecolumn({...this.props.config, cols: _columns})
    })

    if (col.type !== 'action' || appType === 'mob') return

    let uuids = []
    col.elements && col.elements.forEach(c => {
      if (appType === 'pc' && c.OpenType !== 'popview') return

      uuids.push(c.uuid)
    })

    if (uuids.length === 0) return
    
    MKEmitter.emit('delButtons', uuids)
  }

  updateLineMarks = (vals) => {
@@ -433,6 +463,7 @@
          updateCol: this.updateCol,
          addElement: this.addElement,
          editColumn: this.editColumn,
          changeStyle: this.changeStyle,
          deleteCol: this.deleteCol,
        }),
        children: col.subcols && col.subcols.length ? this.handlecolumns(col.subcols, fields, config, true) : null,
@@ -480,6 +511,20 @@
    })
  }

  componentDidMount () {
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  render() {
    const { config } = this.props
    const { fields, card, lineMarks, dict, tableId } = this.state
@@ -494,8 +539,16 @@

    const columns = this.handlecolumns(this.state.columns, fields, config)

    let style = {}
    if (config.wrap.color) {
      style.color = config.wrap.color
    }
    if (config.wrap.fontSize) {
      style.fontSize = config.wrap.fontSize
    }

    return (
      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType}`} id={tableId}>
      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''}`} id={tableId}>
        <div className="col-control">
          <Icon title="复制" type="copy" onClick={this.copycolumn} />
          <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} />
@@ -506,6 +559,7 @@
            rowKey="uuid"
            size={config.wrap.size || 'middle'}
            rowClassName="editable-row"
            style={style}
            bordered={config.wrap.bordered !== 'false'}
            components={components}
            dataSource={this.state.data}