2022-10-22

king

2022-10-22 03a22ec6f9ad7303d10b4c65bb5bc6fa5cbd448a

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

@@ -16,6 +16,7 @@
const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))
const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent'))
const PasteComponent = asyncIconComponent(() => import('@/components/paste'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))

class HeaderCol extends Component {
  deleteCol = () => {
@@ -49,7 +50,7 @@
  }

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

    if (index !== undefined) {
      return connectDragSource(
@@ -104,10 +105,14 @@

const ColTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index
    const item = monitor.getItem()
    const dragIndex = item.index
    const hoverIndex = props.index

    if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) {
    if (item.$init) {
      props.dropCol(item, hoverIndex)
      return
    } else if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) {
      return
    }

@@ -145,13 +150,13 @@

    if (column && column.type === 'custom') {
      return (
        <td style={{padding: 0, minWidth: column.Width || 100, ...(column.style || {})}} className={className}>
        <td style={{padding: 0, minWidth: (column.Width || 100) / 2, ...(column.style || {})}} className={className}>
          <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/>
        </td>
      )
    } else if (column && column.type === 'action') {
      return (
        <td style={{padding: '0 5px', textAlign: column.Align, minWidth: column.Width || 100}} className={'action-column ' + className}>
        <td style={{padding: '0 5px', textAlign: column.Align, minWidth: (column.Width || 100) / 2}} className={'action-column ' + className}>
          <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/>
        </td>
      )
@@ -167,7 +172,7 @@
        }
      }
      return (
        <td style={{...style, minWidth: column.Width || 100}} className={className}>
        <td style={{...style, minWidth: (column.Width || 100) / 2}} className={className}>
          {val}
          {column.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null}
          {column.marks && column.marks.length ? <AntDesignOutlined className="profile"/> : null}
@@ -265,10 +270,31 @@
    })
  }

  dropCol = (item, hoverIndex) => {
    let _columns = fromJS(this.state.columns).toJS()

    let col = { focus: true, uuid: Utils.getuuid(), label: 'label', field: '', type: item.subType, elements: [] }
    if (col.type === 'colspan') {
      col.subcols = []
    } else if (col.type === 'action') {
      col.label = '操作'
    } else if (col.type === 'index') {
      col.label = '序号'
    }

    _columns.splice(hoverIndex, 0, col)

    this.setState({
      columns: _columns
    }, () => {
      this.editColumn(col)
    })
  }

  loopCol = (columns, col) => {
    return columns.map(column => {
      if (column.type === 'colspan') {
        column.subcols = this.loopCol(column.subcols, col)
        column.subcols = this.loopCol(column.subcols || [], col)
      }
      if (column.uuid === col.uuid) {
        return col
@@ -467,7 +493,6 @@
        title: col.label,
        dataIndex: col.uuid,
        align: col.Align,
        // sorter: !isSub && col.IsSort === 'true',
        sorter: col.IsSort === 'true',
        onCell: () => ({
          column: col,
@@ -482,6 +507,7 @@
          align: col.Align,
          moveCol: this.moveCol,
          updateCol: this.updateCol,
          dropCol: this.dropCol,
          addElement: this.addElement,
          editColumn: this.editColumn,
          pasteCell: this.pasteCell,
@@ -493,6 +519,27 @@
    })
  }

  plusColumns = (id, items) => {
    const { config } = this.props

    if (id !== config.uuid) return

    let _columns = fromJS(this.state.columns).toJS()
    _columns = _columns.filter(a => !a.origin)

    _columns.push(...items)

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

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

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
@@ -500,6 +547,7 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('plusColumns', this.plusColumns)
  }

  render() {
@@ -519,6 +567,7 @@
    return (
      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''}`} id={tableId}>
        <div className="col-control">
          <FieldsComponent config={config} type="columns" />
          <CopyOutlined title="复制显示列" onClick={this.copycolumn} />
          <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} />
        </div>