2024-03-07

king

2024-03-07 cdd5b449130ea4d7223fde4f414a11a7d0c33d6d

 src/components/normalform/modalform/mkTable/index.jsx

@@ -3,9 +3,10 @@
import { fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Input, InputNumber, Popconfirm, Form, Select, Radio, Cascader, notification, Typography, Button } from 'antd'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { PlusOutlined, EditOutlined, DeleteOutlined, ArrowRightOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import ColorSketch from '@/mob/colorsketch'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
@@ -74,14 +75,14 @@

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

    if (inputType === 'number' && unlimit) {
      return <InputNumber onPressEnter={() => this.getValue(form)} />
    } else if (inputType === 'number') {
      return <InputNumber min={min} max={max} precision={0} onPressEnter={() => this.getValue(form)} />
    } else if (inputType === 'color') {
      return <ColorSketch />
      return <ColorSketch allowClear={allowClear}/>
    } else if (inputType === 'icon') {
      return <MkEditIcon allowClear/>
    } else if (inputType === 'select') {
@@ -152,8 +153,9 @@

class EditTable extends Component {
  static propTpyes = {
    columns: PropTypes.array,       // 显示列
    onChange: PropTypes.func        // 数据变化
    actions: PropTypes.array,
    columns: PropTypes.array,
    onChange: PropTypes.func
  }

  state = {
@@ -165,6 +167,7 @@
  }

  UNSAFE_componentWillMount () {
    const { actions } = this.props
    let columns = fromJS(this.props.columns).toJS()

    let operation = {
@@ -187,15 +190,16 @@
          </div>
        ) : (
          <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px', whiteSpace: 'nowrap'}}>
            <span className="primary" onClick={() => {editingKey === '' && this.edit(record)}}><EditOutlined /></span>
            {editingKey === '' ? <Popconfirm
            {actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record)}}><EditOutlined /></span> : null}
            {actions.includes('del') && editingKey === '' ? <Popconfirm
              overlayClassName="popover-confirm"
              title="确定删除吗?"
              onConfirm={() => this.handleDelete(record.uuid)
            }>
              <span className="danger"><DeleteOutlined /></span>
            </Popconfirm> : null}
            {editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null}
            {actions.includes('del') && editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null}
            {actions.includes('view') ? <span className="copy" onClick={() => {editingKey === '' && this.changeMenu(record)}}><ArrowRightOutlined /></span> : null}
          </div>
        )
      }
@@ -213,6 +217,25 @@
  // shouldComponentUpdate (nextProps, nextState) {
  //   return !is(fromJS(this.state), fromJS(nextState))
  // }

  changeMenu = (record) => {
    let MenuId = record.menu
    if (MenuId === 'IM') {
      if (!sessionStorage.getItem('instantMessage')) return

      let param = {
        MenuID: sessionStorage.getItem('instantMessage'),
        copyMenuId: '',
        type: 'view'
      }
  
      param = window.btoa(window.encodeURIComponent(JSON.stringify(param)))
  
      MKEmitter.emit('changeEditMenu', {routerUrl: '/imdesign/' + param})
    } else {
      MKEmitter.emit('changeEditMenu', { ...record, MenuID: MenuId})
    }
  }

  isEditing = record => record.uuid === this.state.editingKey

@@ -253,7 +276,18 @@
    columns.forEach(col => {
      if (col.unique !== true || !unique) return

      let _index = newData.findIndex(item => record.uuid !== item.uuid && record[col.dataIndex] === item[col.dataIndex])
      let _index = newData.findIndex(item => {
        if (record.uuid === item.uuid) return false

        if (col.inputType === 'cascader') {
          if (!Array.isArray(record[col.dataIndex]) || !Array.isArray(item[col.dataIndex])) {
            return false
          }
          return record[col.dataIndex].toString() === item[col.dataIndex].toString()
        }

        return record[col.dataIndex] === item[col.dataIndex]
      })

      if (_index > -1) {
        notification.warning({
@@ -371,6 +405,7 @@
  }

  render() {
    const { actions } = this.props
    let components = {
      body: {
        cell: EditableCell
@@ -379,8 +414,11 @@

    let moveprops = {}
    components.body.row = DragableBodyRow
    moveprops.moveAble = !this.state.editingKey
    moveprops.moveRow = this.moveRow

    if (actions.includes('move')) {
      moveprops.moveAble = !this.state.editingKey
      moveprops.moveRow = this.moveRow
    }
    
    let  columns = this.state.columns.map(col => {
      if (col.copy) {
@@ -399,6 +437,7 @@
          unlimit: col.unlimit,
          required: col.required !== false ? true : false,
          title: col.title,
          allowClear: col.allowClear === true,
          editing: this.isEditing(record),
          onSave: this.execSave,
        }),
@@ -414,7 +453,7 @@
    return (
      <EditableContext.Provider value={this.props.form}>
        <div className="modal-editable-table">
          <Button disabled={!!this.state.editingKey} type="link" onClick={this.addline}><PlusOutlined style={{}}/></Button>
          {actions.includes('add') ? <Button disabled={!!this.state.editingKey} type="link" onClick={this.addline}><PlusOutlined style={{}}/></Button> : null}
          <DndProvider>
            <Table
              bordered
@@ -431,6 +470,7 @@
              })}
            />
          </DndProvider>
          {this.props.tip ? this.props.tip : null}
        </div>
      </EditableContext.Provider>
    )