Merge branch 'develop'

king

2022-08-02 8d66ff34fae5b048a6b7923cc75d34f13a08be9d

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

@@ -43,7 +43,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)) ||
@@ -53,17 +53,23 @@
  render() {
    const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, 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' ? <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 columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
          </div>
        } trigger="hover">
          {children}
@@ -143,7 +149,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 +199,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 +223,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')
    }
  }

@@ -281,7 +287,7 @@
    let column = fromJS(col).toJS()

    if (column.type === 'custom') {
      let newcard = {uuid: Utils.getuuid(), focus: true, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}}
      let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}}
  
      // 注册事件-添加元素
      MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard)
@@ -405,6 +411,11 @@
      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)))
    document.body.appendChild(oInput)
    oInput.select()
@@ -511,10 +522,17 @@
      }
    }

    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') {
        title = <span>{col.label}<EditOutlined style={{position: 'absolute', bottom: 0, right: 0, color: '#1890ff'}}/></span>
        title = <span>{col.label}<EditOutlined style={{position: 'absolute', bottom: 0, right: 0, color: '#1890ff', opacity: '0.7'}}/></span>
      }
      return {
        title: title,
@@ -542,14 +560,6 @@
      }
    })

    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}>
        <div className="col-control">
@@ -571,8 +581,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}