2022-01-21

king

2022-01-21 46f79b491173d284a4900d19e7aecf7509481438

 src/templates/zshare/modalform/modaleditable/index.jsx

@@ -1,7 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Table, Input, Popconfirm, Form, Icon, Radio } from 'antd'
import { Table, Input, Popconfirm, Form, Radio, message } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, DeleteOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons'

import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import './index.scss'
@@ -38,6 +40,9 @@
      if (datatype === 'number') {
        Object.keys(values).forEach(key => {
          values[key] = parseFloat(values[key])
          if (isNaN(values[key])) {
            values[key] = 0
          }
        })
      }
      handleSave({ ...record, ...values })
@@ -66,8 +71,8 @@
        {form.getFieldDecorator(dataIndex, {
          rules: [
            {
              required: dataIndex === 'Value' || dataIndex === 'Text',
              message: 'NOT NULL.',
              required: dataIndex === 'Text',
              message: '不可为空.',
            },
            ...rules
          ],
@@ -109,98 +114,28 @@

class EditTable extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    type: PropTypes.string,         // 表单类型
    linkSubFields: PropTypes.array, // 关联字段
    transfield: PropTypes.object,   // 表单字段名称
    onChange: PropTypes.func        // 数据变化
  }

  state = {
    columns: [],
    dataSource: [],
    count: 0,
    type: null,
    linkSubFields: []
    count: 0
  }

  UNSAFE_componentWillMount () {
    const { linkSubFields, type, dict } = this.props
    let data = this.props['data-__meta'].initialValue
    const { linkSubFields, type } = this.props
    let data = this.props['data-__meta'].initialValue || []

    if (!data) {
      data = []
    }

    let fields = []
    let dataItem = data[0] || ''

    if (type === 'select' || type === 'radio' || type === 'link') {
      fields = linkSubFields.map(cell => {
        return {
          title: cell.label,
          dataIndex: cell.field,
          editable: true,
          datatype: dataItem && typeof(dataItem[cell.field]) === 'number' ? 'number' : 'string'
        }
      })
    }

    let columns = [
      {
        title: 'Value',
        dataIndex: 'Value',
        editable: true,
        datatype: dataItem && typeof(dataItem.Value) === 'number' ? 'number' : 'string'
      },
      {
        title: 'Text',
        dataIndex: 'Text',
        editable: true,
        datatype: dataItem && typeof(dataItem.Text) === 'number' ? 'number' : 'string'
      },
      ...fields,
      {
        title: '操作',
        align: 'center',
        width: '20%',
        dataIndex: 'operation',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <div>
              <span className="operation-btn" title={dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
              <span className="operation-btn" title={dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
              <Popconfirm
                overlayClassName="popover-confirm"
                title={dict['model.query.delete']}
                onConfirm={() => this.handleDelete(record.key)
              }>
                <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span>
              </Popconfirm>
            </div>
          ) : null,
      }
    ]

    if (type === 'link') {
      columns.unshift({
        title: 'ParentID',
        dataIndex: 'ParentID',
        editable: true,
        datatype: dataItem && typeof(dataItem.ParentID) === 'number' ? 'number' : 'string'
      })
    }
    const { columns } = this.getColumns(type, linkSubFields, data)

    this.setState({
      columns: columns.map(col => {
        if (col.dataIndex !== 'operation') {
          col = {...col, ...this.getColumnSearchProps(col)}
        }
        return col
      }),
      columns: columns,
      dataSource: data,
      count: data.length,
      type: type,
      linkSubFields: linkSubFields
      count: data.length
    })
  }

@@ -218,7 +153,7 @@
      </div>
    ),
    filterIcon: () => (
      <Icon type="swap" style={{ color: column.datatype === 'number' ? '#1890ff' : undefined}} />
      <SwapOutlined style={{ color: column.datatype === 'number' ? '#1890ff' : ''}} />
    )
  })

@@ -228,13 +163,9 @@
    let _data = dataSource.map(item => {
      let val = item[column.dataIndex]
      if (value === 'number') {
        try {
          val = parseFloat(val)
          if (isNaN(val)) {
            val = ''
          }
        } catch (e) {
          val = ''
        val = parseFloat(val)
        if (isNaN(val)) {
          val = 0
        }
      } else {
        val = '' + val
@@ -302,15 +233,18 @@

  handleAdd = (e) => {
    e.stopPropagation()
    const { type, count, dataSource } = this.state
    const { linkSubFields } = this.props
    const { count, dataSource } = this.state
    const newData = {
      key: Utils.getuuid(),
      Value: `${count}`,
      Text: `${count}`
      Text: `${count}`,
      ParentID: ''
    }
    if (type === 'link') {
      newData.ParentID = `${count}`
    }

    linkSubFields.forEach(m => {
      newData[m] = newData[m] || ''
    })

    let _data = [...dataSource, newData]

@@ -323,9 +257,21 @@
  }

  handleSave = row => {
    const { type } = this.props
    const newData = [...this.state.dataSource]
    const index = newData.findIndex(item => row.key === item.key)
    const item = newData[index]

    if (type === 'link') {
      if (newData.filter(m => row.key !== m.key && row.Value === m.Value && row.ParentID === m.ParentID).length > 0) {
        message.warning('相同ParentID下，此Value值已存在！')
      }
    } else {
      if (newData.filter(m => row.key !== m.key && row.Value === m.Value).length > 0) {
        message.warning('此Value值已存在！')
      }
    }

    newData.splice(index, 1, {
      ...item,
      ...row
@@ -335,29 +281,35 @@
    })
  }

  resetColumn = (type, linkSubFields) => {
    let dataSource = JSON.parse(JSON.stringify(this.state.dataSource))
    let fields = []
  getColumns = (type, linkSubFields, dataSource) => {
    const { transfield } = this.props

    if ((type === 'select' || type === 'radio') && linkSubFields.length > this.state.linkSubFields) {
      let addcol = linkSubFields.slice(-1)[0]
      dataSource = dataSource.map(data => {
        data[addcol.field] = data.Text
    let _dataSource = fromJS(dataSource).toJS()
    let fields = []
    let dataItem = ''
    let subFields = linkSubFields.filter(m => m !== 'Value' && m !== 'Text')

    if (subFields.length > 0) {
      _dataSource = _dataSource.map(data => {
        subFields.forEach(n => {
          if (data[n] !== undefined) return
          data[n] = data.Text || ''
        })
        return data
      })
    }

    let dataItem = dataSource ? dataSource[0] : ''
      dataItem = _dataSource ? _dataSource[0] : ''

    if (type === 'select' || type === 'radio' || type === 'link') {
      fields = linkSubFields.map(field => {
      fields = subFields.map(field => {
        return {
          title: field.label,
          dataIndex: field.field,
          title: transfield[field] || field,
          dataIndex: field,
          editable: true,
          datatype: dataItem && typeof(dataItem[field.field]) === 'number' ? 'number' : 'string'
          datatype: dataItem && typeof(dataItem[field]) === 'number' ? 'number' : 'string'
        }
      })
    } else {
      dataItem = _dataSource ? _dataSource[0] : ''
    }

    let columns = [
@@ -381,15 +333,15 @@
        dataIndex: 'operation',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <div>
              <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
              <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
            <div style={{fontSize: '15px'}}>
              <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span>
              <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span>
              <Popconfirm
                title="确定删除吗？"
                overlayClassName="popover-confirm"
                title={this.props.dict['model.query.delete']}
                onConfirm={() => this.handleDelete(record.key)
              }>
                <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span>
                <span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></span>
              </Popconfirm>
            </div>
          ) : null,
@@ -405,18 +357,32 @@
      })
    }

    this.setState({
    return {
      columns: columns.map(col => {
        if (col.dataIndex !== 'operation') {
          col = {...col, ...this.getColumnSearchProps(col)}
        }
        return col
      }),
      dataSource: dataSource,
      type: type
    }, () => {
      this.props.onChange(dataSource)
    })
      dataSource: _dataSource
    }
  }

  resetColumn = (type, linkSubFields) => {
    const { columns, dataSource } = this.getColumns(type, linkSubFields, this.state.dataSource)

    if (!is(fromJS(dataSource), fromJS(this.state.dataSource))) {
      this.setState({
        columns,
        dataSource
      }, () => {
        this.props.onChange(dataSource)
      })
    } else {
      this.setState({
        columns
      })
    }
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
@@ -451,7 +417,7 @@
    })
    return (
      <div className="common-modal-edit-table">
        <Icon className="add-row" type="plus" onClick={this.handleAdd} />
        <PlusOutlined className="add-row" onClick={this.handleAdd} />
        <Table
          components={components}
          rowClassName={() => 'editable-row'}