2023-08-27

king

2023-08-27 da64ab0923bf8817fc8599a6e37b953ce38f64c8

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

@@ -2,12 +2,15 @@
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, message } from 'antd'
import { PlusOutlined, EditOutlined, DeleteOutlined, SwapOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import FileUpload from '@/tabviews/zshare/fileupload'
import asyncComponent from '@/utils/asyncComponent'
// import FileUpload from '@/tabviews/zshare/fileupload'
import './index.scss'

const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const EditableContext = React.createContext()
let dragingIndex = -1

@@ -72,12 +75,13 @@
  getInput = (form) => {
    const { inputType, record } = this.props
    if (inputType === 'file') {
      return <FileUpload config={{
        initval: record ? (record.$url || '') : '',
        suffix: '',
        maxfile: 1,
        fileType: 'picture-card'
      }}/>
      return <SourceComponent initialValue={record ? (record.$url || '') : ''} type="" placement="right"/>
      // return <FileUpload config={{
      //   initval: record ? (record.$url || '') : '',
      //   suffix: '',
      //   maxfile: 1,
      //   fileType: 'picture-card'
      // }}/>
    } else {
      return <Input onPressEnter={() => this.getValue(form)} />
    }
@@ -117,14 +121,14 @@
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item style={{ margin: 0 }}>
          <Form.Item style={{ margin: '0 -5px 0 -5px' }}>
            {getFieldDecorator(dataIndex, {
              rules: [
                {
                  required: dataIndex === '$value',
                  message: `Please Input ${title}!`,
                },
              ],
              // rules: [
              //   {
              //     required: dataIndex === '$value',
              //     message: `Please Input ${title}!`,
              //   },
              // ],
              initialValue: _val,
            })(this.getInput(form))}
          </Form.Item>
@@ -142,9 +146,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 +170,13 @@
  }

  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 ||
      (nextProps.multiple && this.props.multiple !== nextProps.multiple) ||
      this.props.type !== nextProps.type
    ) {
      this.setState({editingKey: ''}, () => {
        this.setState({
          columns: this.getCloumns()
@@ -174,27 +186,54 @@
  }

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

    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 ''
          return <span style={{display: 'block', width: '70px', height: '70px'}}><img style={{width: '100%', height: '100%'}} src={text} alt="" /></span>
        }
      })
    } else {
      columns = fields.map(item => ({
    } else if (display === 'color') {
      columns.push({
        title: 'Color',
        dataIndex: '$color',
        inputType: 'text',
        editable: true,
        render: (text) => {
          if (!text) return ''
          return <div style={{height: '20px', background: text}}></div>
        }
      })
    }

    fields.forEach(item => {
      keys.push(item.field)
      columns.push({
        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 +241,22 @@
      dataIndex: '$value',
      editable: true,
    })

    if (multiple === 'dropdown' && display === 'text') {
      columns.unshift({
        title: 'pid',
        dataIndex: 'pid',
        editable: true,
      })
    }

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

    columns.push({
      title: '操作',
@@ -224,15 +279,16 @@
          </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>
            <span className="hide-control" title="显示/隐藏" onClick={() => {editingKey === '' && this.handleHide(record.key)}}><SwapOutlined /></span>
            {editingKey === '' ? <Popconfirm
              overlayClassName="popover-confirm"
              title={this.props.dict['model.query.delete']}
              title="确定删除吗?"
              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>
        )
      }
@@ -248,8 +304,20 @@
  }

  onSave = (record) => {
    const { type } = this.props
    const newData = [...this.state.data]
    const index = newData.findIndex(item => record.key === item.key)

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

    if (index > -1) {
      newData.splice(index, 1, record)
      this.setState({ data: newData, editingKey: '' }, () => {
@@ -270,6 +338,8 @@
  }

  save(form, key) {
    const { type } = this.props

    form.validateFields((error, row) => {
      if (error) {
        return;
@@ -277,6 +347,17 @@

      const newData = [...this.state.data]
      const index = newData.findIndex(item => key === item.key)

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

      if (index > -1) {
        const item = newData[index]
        newData.splice(index, 1, {
@@ -296,25 +377,27 @@
  }

  handleAdd = () => {
    const { fields, type } = this.props
    if (this.state.data.length >= 20) {
    const { fields, display } = this.props
    if (this.state.data.length >= 100) {
      notification.warning({
        top: 92,
        message: '最多可添加20项！',
        message: '最多可添加100项！',
        duration: 5
      })
      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 => {
        item[f.field] = `${this.state.data.length + 1}`
      })
    } else if (display === 'color') {
      item.$color = ''
    }

    fields.forEach(f => {
      item[f.field] = `${this.state.data.length + 1}`
    })

    let data = [...this.state.data, item]

@@ -325,6 +408,20 @@

  edit(key) {
    this.setState({ editingKey: key })
  }

  handleHide = (key) => {
    let _data = this.state.data.map(item => {
      if (item.key === key) {
        item.Hide = !item.Hide
      }
      return item
    })
    this.setState({
      data: _data
    }, () => {
      this.props.onChange(_data)
    })
  }

  moveRow = (dragIndex, hoverIndex) => {
@@ -343,6 +440,8 @@
  }

  render() {
    const { display, fields } = this.props

    const components = {
      body: {
        row: DragableBodyRow,
@@ -368,16 +467,16 @@
    })

    let addable = false
    if (this.props.type === 'picture') {
    if (display === 'picture' || display === 'color') {
      addable = true
    } else if (this.props.fields && this.props.fields.length > 0) {
    } else if (fields && fields.length > 0) {
      addable = true
    }

    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}
@@ -385,7 +484,7 @@
              rowKey="key"
              dataSource={this.state.data}
              columns={columns}
              rowClassName="editable-row"
              rowClassName={(record) => record.Hide ? 'editable-row hide' : 'editable-row'}
              onRow={(record, index) => ({
                index,
                moveAble: !this.state.editingKey,