2024-05-23

king

2024-05-23 9a11e62adeb8d435b52a361eb62d5b59e1deef2a

 src/templates/zshare/editTable/index.jsx

@@ -3,7 +3,7 @@
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Input, InputNumber, Popconfirm, Switch, Form, Select, Radio, Cascader, notification, message, Modal, Typography } from 'antd'
import { CopyOutlined, EditOutlined, DeleteOutlined, SwapOutlined, PlusOutlined } from '@ant-design/icons'
import { CopyOutlined, EditOutlined, DeleteOutlined, SwapOutlined, PlusOutlined, ConsoleSqlOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import ColorSketch from '@/mob/colorsketch'
@@ -123,7 +123,7 @@

class EditableCell extends Component {
  getInput = (form) => {
    const { inputType, options, min, max, unlimit, allowClear } = this.props
    const { inputType, options, min, max, unlimit, allowClear, typeChange } = this.props

    if (inputType === 'number' && unlimit) {
      return <InputNumber onPressEnter={() => this.getValue(form)} />
@@ -137,7 +137,7 @@
      return <CusSwitch />
    } else if (inputType === 'select') {
      return (
        <Select>
        <Select onChange={typeChange}>
          {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))}
        </Select>
      )
@@ -176,11 +176,18 @@

  renderCell = (form) => {
    const { getFieldDecorator } = form
    const { editing, dataIndex, title, record, children, className, required, inputType, rules } = this.props
    const { editing, pass, dataIndex, title, record, children, className, required, inputType, rules } = this.props

    if (!editing) {
      return (
        <td className={className}>
          {children}
        </td>
      )
    }
    return (
      <td className={className}>
        {editing ? (
        {pass ? (
          <Form.Item style={{ margin: 0 }}>
            {getFieldDecorator(dataIndex, {
              rules: [
@@ -194,7 +201,7 @@
            })(this.getInput(form))}
          </Form.Item>
        ) : (
          children
          null
        )}
      </td>
    )
@@ -218,7 +225,9 @@
    data: [],
    editingKey: '',
    editLineId: '',
    columns: []
    columns: [],
    keyCol: null,
    keyVal: ''
  }

  UNSAFE_componentWillMount () {
@@ -226,6 +235,7 @@
    let columns = fromJS(this.props.columns).toJS()
    let operation = null
    let extra = null
    let keyCol = null
    
    if (actions) {
      actions.forEach(item => {
@@ -237,9 +247,17 @@

    if (actions && (actions.includes('edit') || actions.includes('copy') || actions.includes('del'))) {
      let _operation = null
      let render = null
      columns = columns.filter(item => {
        if (item.dataIndex === 'operation') {
          _operation = item
        }
        if (item.keyCol) {
          keyCol = item.dataIndex
        }
        if (item.dataIndex === 'sqlRender') {
          render = item.render
          return false
        }
        return item.dataIndex !== 'operation'
      })
@@ -271,7 +289,7 @@
            </div>
          ) : (
            <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px', whiteSpace: 'nowrap'}}>
              {actions.includes('edit') ? <span className="primary" title="编辑" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> : null}
              {actions.includes('edit') ? <span className="primary" title="编辑" onClick={() => {editingKey === '' && this.edit(record)}}><EditOutlined /></span> : null}
              {extra ? <span className="status" title={extra[2]} onClick={() => {editingKey === '' && this.handleStatus(record, extra[1])}}><SwapOutlined /></span> : null}
              {actions.includes('status') ? <span className="status" title="是否启用" onClick={() => {editingKey === '' && this.handleStatus(record, 'status')}}><SwapOutlined /></span> : null}
              {actions.includes('copy') ? <span className="copy" title="复制" onClick={() => {editingKey === '' && this.copy(record)}}><CopyOutlined /></span> : null}
@@ -279,10 +297,11 @@
                overlayClassName="popover-confirm"
                title="确定删除吗?"
                onConfirm={() => this.handleDelete(record.uuid)
              }>
                }>
                <span className="danger"><DeleteOutlined /></span>
              </Popconfirm> : null}
              {actions.includes('del') && editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null}
              {actions.includes('sql') ? <span className="primary" title="SQL" onClick={() => {editingKey === '' && this.showSql(record, render)}}><ConsoleSqlOutlined /></span> : null}
            </div>
          )
        }
@@ -298,7 +317,8 @@
    this.setState({
      data: data || [],
      operation,
      columns
      columns,
      keyCol
    })
  }

@@ -338,6 +358,20 @@
      return
    }
    MKEmitter.removeListener('editLineId', this.getEditLineId)
  }

  showSql = (record, render) => {
    let list = render(record)

    if (list) {
      Modal.info({
        title: '',
        width: 700,
        className: 'sql-example',
        icon: null,
        content: list.map((n, index) => <div key={index} dangerouslySetInnerHTML={{ __html: n }}></div>)
      })
    }
  }

  getEditLineId = (id) => {
@@ -719,8 +753,14 @@
    })
  }

  edit(uuid) {
    this.setState({ editingKey: uuid })
  edit(record) {
    const { keyCol } = this.state

    this.setState({ editingKey: record.uuid, keyVal: keyCol ? record[keyCol] : '' })
  }

  typeChange = (val) => {
    this.setState({ keyVal: val })
  }

  moveRow = (dragIndex, hoverIndex) => {
@@ -771,7 +811,7 @@

  render() {
    const { actions, indexShow, searchKey } = this.props
    const { editLineId } = this.state
    const { editLineId, keyVal } = this.state

    let components = {
      body: {
@@ -790,7 +830,9 @@
      if (col.copy) {
        col.render = (text) => (<Paragraph copyable>{text}</Paragraph>)
      }

      if (!col.editable) return col

      return {
        ...col,
        onCell: record => ({
@@ -804,9 +846,12 @@
          unlimit: col.unlimit,
          required: col.required !== false ? true : false,
          allowClear: col.allowClear === true,
          keyCol: col.keyCol === true,
          title: col.title,
          editing: this.isEditing(record),
          pass: col.keyVals ? col.keyVals.includes(keyVal) : true,
          onSave: this.onSave,
          typeChange: this.typeChange,
        }),
      }
    })
@@ -826,7 +871,17 @@
      return item
    })

    let reg = searchKey ? new RegExp(searchKey, 'i') : null
    let reg = null
    let regs = []

    if (searchKey) {
      reg = new RegExp(searchKey, 'i')
      this.state.columns.forEach(col => {
        if (col.searchable) {
          regs.push(col.dataIndex)
        }
      })
    }

    return (
      <EditableContext.Provider value={this.props.form}>
@@ -845,7 +900,7 @@
                  className += ' active'
                }
                if (searchKey) {
                  if (!reg.test(record.field) && !reg.test(record.label)) {
                  if (regs.findIndex(f => reg.test(record[f])) === -1) {
                    className += ' hidden'
                  }
                }