2022-01-21

king

2022-01-21 46f79b491173d284a4900d19e7aecf7509481438

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

@@ -2,7 +2,8 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Input, Popconfirm, Form, Icon, notification } from 'antd'
import { Table, Input, Popconfirm, Form, notification } from 'antd'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import FileUpload from '@/tabviews/zshare/fileupload'
@@ -143,8 +144,11 @@
class EdiDataTable extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    type: PropTypes.object,         // 数据类型，文本、图片
    transfield: PropTypes.object,   // 字段名称
    type: PropTypes.string,         // 是否为关联表单
    display: PropTypes.string,      // 数据类型，文本、图片
    fields: PropTypes.array,        // 字段集
    linkSubFields: PropTypes.array, // 填充字段
    onChange: PropTypes.func        // 数据变化
  }

@@ -164,7 +168,12 @@
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.fields), fromJS(nextProps.fields)) || !is(fromJS(this.props.type), fromJS(nextProps.type))) {
    if (
      !is(fromJS(this.props.fields), fromJS(nextProps.fields)) ||
      !is(fromJS(this.props.linkSubFields), fromJS(nextProps.linkSubFields)) ||
      this.props.display !== nextProps.display ||
      this.props.type !== nextProps.type
    ) {
      this.setState({editingKey: ''}, () => {
        this.setState({
          columns: this.getCloumns()
@@ -174,15 +183,16 @@
  }

  getCloumns = () => {
    const { type, fields } = this.props
    const { display, fields, linkSubFields, transfield, type } = this.props
    let columns = []
    let keys = ['ParentID']

    if (type === 'picture') {
    if (display === 'picture') {
      columns.push({
        title: 'url',
        dataIndex: '$url',
        inputType: 'file',
        width: '40%',
        // width: '40%',
        editable: true,
        render: (text) => {
          if (!text) return ''
@@ -190,11 +200,26 @@
        }
      })
    } else {
      columns = fields.map(item => ({
        title: item.field,
        dataIndex: item.field,
        editable: true,
      }))
      columns = fields.map(item => {
        keys.push(item.field)
        return {
          title: item.field,
          dataIndex: item.field,
          editable: true,
        }
      })
    }

    if (linkSubFields.length > 0) {
      linkSubFields.forEach(m => {
        if (keys.includes(m)) return

        columns.push({
          title: transfield[m] || m,
          dataIndex: m,
          editable: true,
        })
      })
    }
    
    columns.unshift({
@@ -202,6 +227,14 @@
      dataIndex: '$value',
      editable: true,
    })

    if (type === 'link') {
      columns.unshift({
        title: 'ParentID',
        dataIndex: 'ParentID',
        editable: true,
      })
    }

    columns.push({
      title: '操作',
@@ -224,15 +257,15 @@
          </span>
        ) : (
          <div className={'operation-btn' + (editingKey !== '' ? ' disabled' : '')}>
            <span className="primary" onClick={() => {editingKey === '' && this.edit(record.key)}}><Icon type="edit" /></span>
            <span className="primary" onClick={() => {editingKey === '' && this.edit(record.key)}}><EditOutlined /></span>
            {editingKey === '' ? <Popconfirm
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              onConfirm={() => this.handleDelete(record.key)
            }>
              <span className="danger"><Icon type="delete" /></span>
              <span className="danger"><DeleteOutlined /></span>
            </Popconfirm> : null}
            {editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null}
            {editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null}
          </div>
        )
      }
@@ -296,7 +329,7 @@
  }

  handleAdd = () => {
    const { fields, type } = this.props
    const { fields, display } = this.props
    if (this.state.data.length >= 100) {
      notification.warning({
        top: 92,
@@ -306,9 +339,9 @@
      return
    }

    let item = { key: Utils.getuuid(), $value: `${this.state.data.length + 1}` }
    let item = { key: Utils.getuuid(), $value: `${this.state.data.length + 1}`, ParentID: '' }

    if (type === 'picture') {
    if (display === 'picture') {
      item.$url = ''
    } else {
      fields.forEach(f => {
@@ -368,7 +401,7 @@
    })

    let addable = false
    if (this.props.type === 'picture') {
    if (this.props.display === 'picture') {
      addable = true
    } else if (this.props.fields && this.props.fields.length > 0) {
      addable = true
@@ -377,7 +410,7 @@
    return (
      <EditableContext.Provider value={this.props.form}>
        <div className="modal-card-data-table">
          {addable ? <Icon className="add-row" type="plus" onClick={this.handleAdd} /> : null}
          {addable ? <PlusOutlined className="add-row" onClick={this.handleAdd} /> : null}
          <DndProvider>
            <Table
              components={components}