2021-06-02

king

2021-06-02 e543372cc70a19ff2630c79d8421c2c593e54e5f

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

@@ -14,7 +14,7 @@

const { confirm } = Modal
const EditColumn = asyncIconComponent(() => import('./editColumn'))
const MarkColumn = asyncIconComponent(() => import('./markcolumn'))
const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))
const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent'))

class HeaderCol extends Component {
@@ -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>
      )
@@ -175,18 +178,37 @@
  }

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

  UNSAFE_componentWillMount () {
    const { config } = this.props

    let tableId = (() => {
      let uuid = []
      let _options = 'abcdefghigklmnopqrstuv'
      for (let i = 0; i < 19; i++) {
        uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
      }
      return uuid.join('')
    }) ()

    if (config.wrap && config.wrap.borderColor) { // 边框颜色
      let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${config.wrap.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    }

    this.setState({
      tableId,
      columns: fromJS(config.cols).toJS(),
      fields: fromJS(config.columns).toJS(),
      lineMarks: config.lineMarks ? fromJS(config.lineMarks).toJS() : []
@@ -203,6 +225,11 @@
      }
    } else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) {
      this.setState({fields: fromJS(nextProps.config.columns).toJS()})
    } else if (this.props.config.wrap.borderColor !== nextProps.config.wrap.borderColor) {
      let style = `#${this.state.tableId} table, #${this.state.tableId} tr, #${this.state.tableId} th, #${this.state.tableId} td {border-color: ${nextProps.config.wrap.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    }
  }

@@ -318,6 +345,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

@@ -372,8 +417,8 @@

    let oInput = document.createElement('input')
    let val = {
      copyType: 'columns',
      columns: columns
      copyType: 'cols',
      cols: columns.filter(col => !col.origin)
    }

    oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
@@ -410,6 +455,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,
@@ -457,9 +503,23 @@
    })
  }

  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 } = this.state
    const { fields, card, lineMarks, dict, tableId } = this.state
    const components = {
      header: {
        cell: DragableHeaderCol
@@ -471,8 +531,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}`}>
      <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} />
@@ -481,7 +549,9 @@
        <DndProvider>
          <Table
            rowKey="uuid"
            size={config.wrap.size || 'middle'}
            rowClassName="editable-row"
            style={style}
            bordered={config.wrap.bordered !== 'false'}
            components={components}
            dataSource={this.state.data}