2022-09-06

king

2022-09-06 b8e1395f02c929eaa96b949cf6027ee2a43856a6

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

@@ -18,6 +18,7 @@
const TableVerify = asyncComponent(() => import('./tableIn'))
const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))
const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent'))
const PasteComponent = asyncIconComponent(() => import('@/components/paste'))

class HeaderCol extends Component {
  deleteCol = () => {
@@ -43,7 +44,7 @@
      return true
    }

    if (!nextProps.column) return false
    if (!nextProps.column) return true

    return !is(fromJS(this.props.column), fromJS(nextProps.column)) ||
      !is(fromJS(this.props.fields), fromJS(nextProps.fields)) ||
@@ -51,19 +52,27 @@
  }

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

    if (!column) return (
      <th {...restProps} index={index}>
        {children}
      </th>
    )

    return connectDragSource(
      connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move', textAlign: align }} onDoubleClick={() => column && this.props.editColumn(column)}>
      connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move', textAlign: align }} onDoubleClick={() => this.props.editColumn(column)}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}>
            {column && ['custom', 'action'].includes(column.type) ?
            {['custom', 'action'].includes(column.type) ?
              <PlusOutlined className="plus" title="添加" onClick={() => this.props.addElement(column)} /> : null
            }
            <EditOutlined className="edit" title="编辑" onClick={() => this.props.editColumn(column)} />
            {column && column.type === 'custom' ? <FontColorsOutlined className="style" title="调整样式" onClick={() => this.props.changeStyle(column)}/> : null}
            {column.type === 'custom' ? <PasteComponent options={['customCardElement']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null}
            {column.type === 'action' ? <PasteComponent options={['action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null}
            {column.type === 'custom' ? <FontColorsOutlined className="style" title="调整样式" onClick={() => this.props.changeStyle(column)}/> : null}
            <DeleteOutlined className="close" title="删除" onClick={this.deleteCol} />
            {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
            {['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
          </div>
        } trigger="hover">
          {children}
@@ -143,7 +152,7 @@
        val = column.formula
        if (column.eval === 'false') {
          val = val.replace(/\n/ig, '<br/>').replace(/\s/ig, '&nbsp;')
          val = <span dangerouslySetInnerHTML={{__html: val}}></span>
          val = <span style={{fontWeight: 'inherit'}} dangerouslySetInnerHTML={{__html: val}}></span>
        }
      }
      return (
@@ -193,18 +202,17 @@
      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() : []
    }, () => {
      const element = document.getElementById(tableId)
      element && element.style.setProperty('--mk-table-border-color', config.wrap.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', config.wrap.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', config.wrap.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', config.wrap.fontWeight || 'normal')
    })
  }

@@ -218,11 +226,12 @@
      }
    } 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)
    } else if (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) {
      const element = document.getElementById(this.state.tableId)
      element && element.style.setProperty('--mk-table-border-color', nextProps.config.wrap.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', nextProps.config.wrap.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', nextProps.config.wrap.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', nextProps.config.wrap.fontWeight || 'normal')
    }
  }

@@ -276,6 +285,16 @@
    })
  }

  pasteCell = (col, cell, resolve) => {
    resolve({status: true})
    
    delete cell.copyType
    cell.uuid = Utils.getuuid()
    cell.focus = true
    
    MKEmitter.emit('cardAddElement', [this.props.config.uuid, col.uuid], cell)
  }

  addElement = (col) => {
    const { config } = this.props
    let column = fromJS(col).toJS()
@@ -322,27 +341,25 @@
      editStyleCard: fromJS(col).toJS()
    })

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

  changeSubmitStyle = () => {
    const { config } = this.props

    MKEmitter.emit('changeStyle', [config.uuid, 'submit'], ['font', 'background', 'border', 'margin', 'padding'], config.submit.style || {})
    MKEmitter.emit('changeStyle', ['font', 'background', 'border', 'margin', 'padding'], config.submit.style || {}, this.getSubmitStyle)
  }

  getStyle = (comIds, style) => {
  getSubmitStyle = (style) => {
    const { config } = this.props

    let submit = {...config.submit, style}

    this.props.updatecolumn({...config, submit: submit})
  }

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

    if (comIds.length === 2 && comIds[0] === config.uuid && comIds[1] === 'submit') {
      let submit = {...config.submit, style}

      this.props.updatecolumn({...config, submit: submit})

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

    let _card = {...editStyleCard, style}
    
@@ -403,6 +420,11 @@
    let val = {
      copyType: 'cols',
      cols: columns.filter(col => !col.origin)
    }

    let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId')
    if (srcid) {
      val.$srcId = srcid
    }

    oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
@@ -511,6 +533,13 @@
      }
    }

    let rowSelection = null
    if (config.wrap.tableType) {
      rowSelection = {
        type: config.wrap.tableType === 'radio' ? 'radio' : 'checkbox',
      }
    }

    const columns = this.state.columns.map((col, index) => {
      let title = col.label
      if (col.editable === 'true') {
@@ -536,19 +565,12 @@
          updateCol: this.updateCol,
          addElement: this.addElement,
          editColumn: this.editColumn,
          pasteCell: this.pasteCell,
          changeStyle: this.changeStyle,
          deleteCol: this.deleteCol,
        }),
      }
    })

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

    return (
      <div className={`edit-table-columns ${config.setting.laypage} ${config.wrap.mode || ''}`} id={tableId}>
@@ -571,8 +593,8 @@
            rowKey="uuid"
            size={config.wrap.size || 'middle'}
            rowClassName="editable-row"
            style={style}
            bordered={config.wrap.bordered !== 'false'}
            rowSelection={rowSelection}
            components={components}
            dataSource={this.state.data}
            columns={columns}