2023-08-27

king

2023-08-27 da64ab0923bf8817fc8599a6e37b953ce38f64c8

 src/templates/zshare/editTable/index.jsx

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

import Utils from '@/utils/utils.js'
import ColorSketch from '@/mob/colorsketch'
import PasteForm from '@/templates/zshare/pasteform'
import asyncComponent from '@/utils/asyncComponent'
import CusSwitch from './cusSwitch'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))
let eTDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const PasteBoard = asyncComponent(() => import('@/components/pasteboard'))
const EditableContext = React.createContext()
const { confirm } = Modal
let dragingIndex = -1
@@ -144,7 +141,7 @@
              rules: [
                {
                  required: required,
                  message: ['number', 'text', 'input'].includes(inputType) ? `${eTDict['form.required.input']} ${title}!` : `${eTDict['form.required.select']} ${title}!`,
                  message: ['number', 'text', 'input'].includes(inputType) ? `请输入${title}!` : `请选择${title}!`,
                },
                ...rules
              ],
@@ -166,6 +163,7 @@
class EditTable extends Component {
  static propTpyes = {
    actions: PropTypes.any,         // 操作项
    searchKey: PropTypes.any,       // 搜索条件
    data: PropTypes.any,            // 数据列表
    columns: PropTypes.array,       // 显示列
    onChange: PropTypes.func        // 数据变化
@@ -174,7 +172,6 @@
  state = {
    data: [],
    editingKey: '',
    visible: false,
    editLineId: '',
    columns: []
  }
@@ -183,6 +180,15 @@
    const { data, actions } = this.props
    let columns = fromJS(this.props.columns).toJS()
    let operation = null
    let extra = null
    
    if (actions) {
      actions.forEach(item => {
        if (/^extra/.test(item)) {
          extra = item.split(':')
        }
      })
    }

    if (actions && (actions.includes('edit') || actions.includes('copy') || actions.includes('del'))) {
      let _operation = null
@@ -195,10 +201,10 @@

      operation = {
        title: (<div>
          {eTDict['model.operation']}
          操作
          <span className="copy-control">
            {actions.includes('copy') ? <CopyOutlined title="复制" onClick={() => this.copy()} /> : null}
            {actions.includes('copy') ? <SnippetsOutlined title="粘贴" onClick={this.paste} /> : null}
            {actions.includes('copy') ? <PasteBoard getPasteValue={this.pasteSubmit}/> : null}
            {actions.includes('clear') ? <DeleteOutlined title="清空" onClick={this.clear} /> : null}
          </span>
        </div>),
@@ -212,20 +218,21 @@
              <EditableContext.Consumer>
                {form => (
                  <span onClick={() => this.save(form, record.uuid)} style={{ marginRight: 8 , color: '#1890ff', cursor: 'pointer'}}>
                    {eTDict['model.save']}
                    保存
                  </span>
                )}
              </EditableContext.Consumer>
              <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{eTDict['model.cancel']}</span>
              <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>取消</span>
            </div>
          ) : (
            <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px', whiteSpace: 'nowrap'}}>
              {actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> : null}
              {actions.includes('copy') ? <span className="copy" onClick={() => {editingKey === '' && this.copy(record)}}><CopyOutlined /></span> : null}
              {actions.includes('status') ? <span className="status" onClick={() => {editingKey === '' && this.handleStatus(record)}}><SwapOutlined /></span> : null}
              {actions.includes('edit') ? <span className="primary" title="编辑" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><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}
              {actions.includes('del') && editingKey === '' ? <Popconfirm
                overlayClassName="popover-confirm"
                title={eTDict['model.query.delete']}
                title="确定删除吗?"
                onConfirm={() => this.handleDelete(record.uuid)
              }>
                <span className="danger"><DeleteOutlined /></span>
@@ -354,67 +361,76 @@
    }
  }
  
  paste = () => {
    this.setState({visible: true})
  }
  
  pasteSubmit = () => {
  pasteSubmit = (res, callback) => {
    const { type } = this.props
    const { columns } = this.state
    let data = fromJS(this.state.data).toJS()

    this.pasteFormRef.handleConfirm().then(res => {
      if (res.copyType === 'columns' && type === 'datasourcefield') {
        res.type = 'array'
        res.data = []
        res.columns.forEach(col => {
          if (!col.field) return
          if (col.type === 'number') {
            let datatype = 'Int'
            if (col.decimal) {
              datatype = `Decimal(18,${col.decimal})`
            }

            res.data.push({
              $index: res.data.length + 1,
              datatype: datatype,
              field: col.field,
              decimal: col.decimal,
              label: col.label,
              type: 'number',
              uuid: Utils.getuuid()
            })
          } else {
            let datatype = 'Nvarchar(50)'
            let fieldlength = 50
            if (col.fieldlength && [10, 20, 50, 100, 256, 512, 1024, 2048].includes(col.fieldlength)) {
              fieldlength = col.fieldlength
              datatype = `Nvarchar(${fieldlength})`
            }

            res.data.push({
              $index: res.data.length + 1,
              datatype: datatype,
              field: col.field,
              fieldlength: fieldlength,
              label: col.label,
              type: 'text',
              uuid: Utils.getuuid()
            })
    if (res.copyType === 'columns' && type === 'datasourcefield') {
      res.type = 'array'
      res.data = []
      res.columns.forEach(col => {
        if (!col.field) return
        if (col.type === 'number') {
          let datatype = 'Int'
          if (col.decimal) {
            datatype = `Decimal(18,${col.decimal})`
          }

        })
      } else if (res.key !== type) {
        message.warning('配置信息格式错误！')
        return
      }
          res.data.push({
            $index: res.data.length + 1,
            datatype: datatype,
            field: col.field,
            decimal: col.decimal,
            label: col.label,
            type: 'number',
            uuid: Utils.getuuid()
          })
        } else {
          let datatype = 'Nvarchar(50)'
          let fieldlength = 50
          if (col.fieldlength && [10, 20, 50, 100, 256, 512, 1024, 2048].includes(col.fieldlength)) {
            fieldlength = col.fieldlength
            datatype = `Nvarchar(${fieldlength})`
          }

      if (res.type === 'line') {
        let unique = true
        res.data.uuid = Utils.getuuid()
        columns.forEach(col => {
          if (col.unique !== true || !unique) return
          res.data.push({
            $index: res.data.length + 1,
            datatype: datatype,
            field: col.field,
            fieldlength: fieldlength,
            label: col.label,
            type: 'text',
            uuid: Utils.getuuid()
          })
        }
      })
    } else if (res.key !== type) {
      message.warning('配置信息格式错误！')
      return
    }

    if (res.type === 'line') {
      let unique = true
      res.data.uuid = Utils.getuuid()
      columns.forEach(col => {
        if (col.unique !== true || !unique) return

        if (col.uniqueFunc) {
          unique = col.uniqueFunc(data, res.data)
        } else if (col.strict) {
          let key = res.data[col.dataIndex].toLowerCase()
          let _index = data.findIndex(item => key === item[col.dataIndex].toLowerCase())

          if (_index > -1) {
            notification.warning({
              top: 92,
              message: col.title + '不可重复！',
              duration: 5
            })
            unique = false
          }
        } else {
          let _index = data.findIndex(item => res.data[col.dataIndex] === item[col.dataIndex])

          if (_index > -1) {
@@ -425,44 +441,57 @@
            })
            unique = false
          }
        })
        }
      })

        if (!unique) return
      if (!unique) return

        data.unshift(res.data)
        this.setState({ data, editingKey: '', visible: false }, () => {
          this.props.onChange(data)
        })
      } else if (res.type === 'array') {
        res.data.forEach(cell => {
          let unique = true
          cell.uuid = Utils.getuuid()
          columns.forEach(col => {
            if (col.unique !== true || !unique) return
      data.unshift(res.data)
      this.setState({ data, editingKey: '', editLineId: res.data.uuid || '' }, () => {
        this.props.onChange(data)
      })
    } else if (res.type === 'array') {
      res.data.forEach(cell => {
        let unique = true
        cell.uuid = Utils.getuuid()
        columns.forEach(col => {
          if (col.unique !== true || !unique) return

          if (col.uniqueFunc) {
            unique = col.uniqueFunc(data, cell)
          } else if (col.strict) {
            let _index = data.findIndex(item => cell[col.dataIndex].toLowerCase() === item[col.dataIndex].toLowerCase())
  
            if (_index > -1) {
              unique = false
            }
          } else {
            let _index = data.findIndex(item => cell[col.dataIndex] === item[col.dataIndex])
  
            if (_index > -1) {
              unique = false
            }
          })
  
          if (!unique) return
  
          data.push(cell)
          }
        })

        this.setState({ data, editingKey: '', visible: false }, () => {
          this.props.onChange(data)
        })
      }
      message.success('粘贴成功。')
    })
        if (!unique) return

        data.push(cell)
      })

      this.setState({ data, editingKey: '' }, () => {
        this.props.onChange(data)
      })
    }

    callback()
    message.success('粘贴成功。')
  }

  handleStatus = (record) => {
  handleStatus = (record, type) => {
    const { data } = this.state

    record.status = record.status === 'false' ? 'true' : 'false'
    record[type] = record[type] === 'false' ? 'true' : 'false'

    let newData = data.map(item => {
      if (record.uuid === item.uuid) return record
@@ -493,15 +522,32 @@
    columns.forEach(col => {
      if (col.unique !== true || !unique) return

      let _index = newData.findIndex(item => record.uuid !== item.uuid && record[col.dataIndex] === item[col.dataIndex])
      if (col.uniqueFunc) {
        unique = col.uniqueFunc(newData, record)
        return
      } else if (col.strict) {
        let key = record[col.dataIndex].toLowerCase()
        let _index = newData.findIndex(item => record.uuid !== item.uuid && key === item[col.dataIndex].toLowerCase())

      if (_index > -1) {
        notification.warning({
          top: 92,
          message: col.title + '不可重复！',
          duration: 5
        })
        unique = false
        if (_index > -1) {
          notification.warning({
            top: 92,
            message: col.title + '不可重复！',
            duration: 5
          })
          unique = false
        }
      } else {
        let _index = newData.findIndex(item => record.uuid !== item.uuid && record[col.dataIndex] === item[col.dataIndex])
  
        if (_index > -1) {
          notification.warning({
            top: 92,
            message: col.title + '不可重复！',
            duration: 5
          })
          unique = false
        }
      }
    })

@@ -532,31 +578,49 @@
      }
      const newData = [...this.state.data]
      const index = newData.findIndex(item => uuid === item.uuid)
      if (index > -1) {
        row = {...newData[index], ...row}
      } else {
        row.uuid = uuid
      }

      let unique = true
      columns.forEach(col => {
        if (col.unique !== true || !unique) return

        let _index = newData.findIndex(item => uuid !== item.uuid && row[col.dataIndex] === item[col.dataIndex])

        if (_index > -1) {
          notification.warning({
            top: 92,
            message: col.title + '不可重复！',
            duration: 5
          })
          unique = false
        if (col.uniqueFunc) {
          unique = col.uniqueFunc(newData, row)
          return
        } else if (col.strict) {
          let key = row[col.dataIndex].toLowerCase()
          let _index = newData.findIndex(item => row.uuid !== item.uuid && key === item[col.dataIndex].toLowerCase())
  
          if (_index > -1) {
            notification.warning({
              top: 92,
              message: col.title + '不可重复！',
              duration: 5
            })
            unique = false
          }
        } else {
          let _index = newData.findIndex(item => row.uuid !== item.uuid && row[col.dataIndex] === item[col.dataIndex])
  
          if (_index > -1) {
            notification.warning({
              top: 92,
              message: col.title + '不可重复！',
              duration: 5
            })
            unique = false
          }
        }
      })

      if (!unique) return

      if (index > -1) {
        const item = newData[index]
        newData.splice(index, 1, {
          ...item,
          ...row,
        })
        newData.splice(index, 1, row)
        this.setState({ data: newData, editingKey: '' }, () => {
          this.props.onChange(newData)
        })
@@ -589,7 +653,7 @@
  }

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

    let components = {
@@ -599,7 +663,7 @@
    }

    let moveprops = {}
    if (actions.includes('move')) {
    if (actions.includes('move') && !searchKey) {
      components.body.row = DragableBodyRow
      moveprops.moveAble = !this.state.editingKey
      moveprops.moveRow = this.moveRow
@@ -645,6 +709,8 @@
      return item
    })

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

    return (
      <EditableContext.Provider value={this.props.form}>
        <div className="modal-edit-table">
@@ -655,7 +721,18 @@
              components={components}
              dataSource={data}
              columns={columns}
              rowClassName={record => !editLineId || editLineId !== record.uuid ? 'editable-row' : 'editable-row active'}
              rowClassName={record => {
                let className = 'editable-row'
                if (editLineId && editLineId === record.uuid) {
                  className += ' active'
                }
                if (searchKey) {
                  if (!reg.test(record.field) && !reg.test(record.label)) {
                    className += ' hidden'
                  }
                }
                return className
              }}
              pagination={false}
              onRow={(record, index) => ({
                index,
@@ -663,18 +740,6 @@
              })}
            />
          </DndProvider>
          {/* 信息粘贴 */}
          <Modal
            title={eTDict['header.form.paste']}
            visible={this.state.visible}
            width={600}
            maskClosable={false}
            onOk={this.pasteSubmit}
            onCancel={() => {this.setState({visible: false})}}
            destroyOnClose
          >
            <PasteForm dict={eTDict} wrappedComponentRef={(inst) => this.pasteFormRef = inst} inputSubmit={this.pasteSubmit}/>
          </Modal>
        </div>
      </EditableContext.Provider>
    )