2023-03-15

king

2023-03-15 3875da845b8fae679bd784d1246101a5fb1b61b5

 src/templates/sharecomponent/fieldscomponent/index.jsx

@@ -4,10 +4,9 @@
import { Button, Modal, Empty, notification } from 'antd'

import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import EditCard from './editcard'

import MKEmitter from '@/utils/events.js'
import './index.scss'

class FieldsComponent extends Component {
@@ -18,9 +17,10 @@
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    fields: [],          // 字段集
    tableVisible: false,    // 模态框控制
    appType: sessionStorage.getItem('appType'),
    fields: [],             // 字段集
    visible: false,         // 模态框控制
    selectCards: []
  }

  queryField = () => {
@@ -46,304 +46,200 @@
    if (type === 'search') {
      // 添加搜索条件，字段集中存在搜索条件字段，使用搜索条件对象替换字段集，设置数据类型
      config.search.forEach(item => {
        if (columns.has(item.field.toLowerCase())) {
        if (item.field && columns.has(item.field.toLowerCase())) {
          let _datatype = columns.get(item.field.toLowerCase()).datatype
          columns.set(item.field.toLowerCase(), {...item, selected: true, datatype: _datatype})
          columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
        }
      })
    } else if (type === 'columns') {
      // 添加显示列，字段集中存在显示列字段，使用显示列对象替换字段集，设置数据类型
      config.columns.forEach(item => {
        if (columns.has(item.field.toLowerCase())) {
        if (item.field && columns.has(item.field.toLowerCase())) {
          let _datatype = columns.get(item.field.toLowerCase()).datatype
          columns.set(item.field.toLowerCase(), {...item, selected: true, datatype: _datatype})
          columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
        }
      })
    } else if (type === 'fields') {
      config.columns.forEach(item => {
        if (columns.has(item.field.toLowerCase())) {
          let _datatype = columns.get(item.field.toLowerCase()).datatype
          columns.set(item.field.toLowerCase(), {...item, selected: true, datatype: _datatype})
          columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
        }
      })
    } else if (type === 'form') {
      if (config.groups.length > 1) {
        config.groups.forEach(group => {
          group.sublist.forEach(item => {
            if (item.field && columns.has(item.field.toLowerCase())) {
              let _datatype = columns.get(item.field.toLowerCase()).datatype
              columns.set(item.field.toLowerCase(), {...item, selected: true, datatype: _datatype})
            }
          })
        })
      } else {
        config.fields.forEach(item => {
          if (item.field && columns.has(item.field.toLowerCase())) {
            let _datatype = columns.get(item.field.toLowerCase()).datatype
            columns.set(item.field.toLowerCase(), {...item, selected: true, datatype: _datatype})
          }
        })
      }
      config.fields.forEach(item => {
        if (item.field && columns.has(item.field.toLowerCase())) {
          let _datatype = columns.get(item.field.toLowerCase()).datatype
          columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
        }
      })
    }

    // 显示字段集弹窗
    this.setState({
      tableVisible: true,
      visible: true,
      selectCards: [],
      fields: [...columns.values()]
    })
  }

  addFieldSubmit = () => {
    const { type } = this.props
    const { selectCards, fields } = this.state
    // 字段集为空，关闭弹窗
    if (!this.state.fields || this.state.fields.length === 0) {
      this.setState({
        tableVisible: false
      })
    if (!fields || fields.length === 0) {
      this.setState({ visible: false })
    }

    let config = fromJS(this.props.config).toJS()

    // 获取已选字段集合
    let cards = this.refs.searchcard.state.selectCards
    let cards = selectCards
    let columnsMap = new Map()
    cards.forEach(card => {
      columnsMap.set(card.field.toLowerCase(), card)
    })

    let items = []
    let keys = []
    if (type === 'search') {
      config.search.forEach(item => {
        if (columnsMap.has(item.field.toLowerCase())) {
          let cell = columnsMap.get(item.field.toLowerCase())

          if (cell.selected && cell.type === item.type) { // 数据未修改
            items.push(item)
          } else if (cell.selected) { // 数据类型修改
            if (cell.type === 'select') {
              item.match = '='
            } else if (cell.type === 'daterange') {
              item.match = 'between'
            } else {
              cell.type = 'text'
              item.match = 'like'
            }
            
            item.type = cell.type
            item.initval = ''
            items.push(item)
          }
          columnsMap.delete(item.field.toLowerCase())
        } else if (!item.origin) {
          items.push(item)
        }
      })

      let _columns = [...columnsMap.values()]

      _columns.forEach(item => {
        if (item.selected) {
          let _match = ''
          if (item.type === 'select') {
            _match = '='
          } else if (item.type === 'daterange') {
            _match = 'between'
          } else {
            item.type = 'text'
            _match = 'like'
          }

          let newcard = {
            uuid: Utils.getuuid(),
            label: item.label,
            field: item.field,
            initval: '',
            type: item.type,
            resourceType: '0',
            setAll: 'false',
            options: [],
            orderType: 'asc',
            match: _match,
            display: 'dropdown'
          }

          items.push(newcard)
        }
      })
      config.search = items
    } else if (type === 'columns') {
      config.columns.forEach(item => {
        if (columnsMap.has(item.field.toLowerCase())) {
          let cell = columnsMap.get(item.field.toLowerCase())

          if (cell.selected) {
            items.push(item)
          }
          columnsMap.delete(item.field.toLowerCase())
        } else if (!item.origin) {
          items.push(item)
        }
      })

      let _columns = [...columnsMap.values()]

      _columns.forEach(item => {
        if (item.selected) {
          let newcard = {
            uuid: Utils.getuuid(),
            Align: 'left',
            label: item.label,
            field: item.field,
            Hide: 'false',
            IsSort: item.type === 'picture' ? 'false' : 'true',
            type: item.type,
            Width: 120
          }

          if (item.type === 'number') {
            newcard.decimal = item.decimal
          } else {
            newcard.fieldlength = item.length || 50
          }

          items.push(newcard)
        }
      })
      config.columns = items
    } else if (type === 'fields') {
      config.columns.forEach(item => {
        if (columnsMap.has(item.field.toLowerCase())) {
          let cell = columnsMap.get(item.field.toLowerCase())

          if (cell.selected) {
            items.push(item)
          }
          columnsMap.delete(item.field.toLowerCase())
      selectCards.forEach(item => {
        let _match = ''
        let initval = ''
        if (item.type === 'select') {
          _match = '='
        } else {
          items.push(item)
          item.type = 'text'
          _match = 'like'
        }
      })

      let _columns = [...columnsMap.values()]

      _columns.forEach(item => {
        if (item.selected) {
          let newcard = {
            uuid: Utils.getuuid(),
            label: item.label,
            field: item.field,
            datatype: item.type === 'number' ? 'Decimal(18,0)' : 'Nvarchar(50)'
          }

          items.push(newcard)
        let newcard = {
          uuid: Utils.getuuid(),
          label: item.label,
          field: item.field,
          initval: initval,
          type: item.type,
          resourceType: '0',
          options: [],
          orderType: 'asc',
          match: _match,
        }
      })
    } else if (type === 'form') {
      if (config.groups.length > 1) {
        config.groups.forEach(group => {
          let _items = []
          group.sublist.forEach(item => {
            if (item.field && columnsMap.has(item.field.toLowerCase())) {
              let cell = columnsMap.get(item.field.toLowerCase())
      
              if (cell.selected && cell.type === item.type) { // 数据选择状态及类型未修改时，直接添加
                _items.push(item)
              } else if (cell.selected) {                     // 数据类型修改时，重置类型及初始值
                item.type = cell.type
                item.initval = ''
                _items.push(item)
              }
              columnsMap.delete(item.field.toLowerCase())
            } else if (!item.origin) {                        // 过滤示例项
              _items.push(item)
            }
          })
          group.sublist = _items
        })
        
        let _columns = [...columnsMap.values()]
    
        let _additems = _columns.map(item => { // 循环添加新增字段
          return {
            uuid: Utils.getuuid(),
            label: item.label,
            field: item.field,
            initval: '',
            type: item.type,
            resourceType: '0',
            setAll: 'false',
            options: [],
            dataSource: '',
            orderType: 'asc',
            decimal: item.decimal,
            readonly: 'false',
            required: 'true'
          }
        })
        config.groups[config.groups.length - 1].sublist = [...config.groups.slice(-1)[0].sublist, ..._additems]
      } else {
        config.fields.forEach(item => {
          if (item.field && columnsMap.has(item.field.toLowerCase())) {
            let cell = columnsMap.get(item.field.toLowerCase())
    
            if (cell.selected && cell.type === item.type) { // 数据选择状态及类型未修改时，直接添加
              items.push(item)
            } else if (cell.selected) {                     // 数据类型修改时，重置类型及初始值
              item.type = cell.type
              item.initval = ''
              items.push(item)
            }
            columnsMap.delete(item.field.toLowerCase())
          } else if (!item.origin) {                        // 过滤示例项
            items.push(item)
          }
        })
    
        let _columns = [...columnsMap.values()]
    
        _columns.forEach(item => { // 循环添加新增字段
          if (item.selected) {
            let newcard = {
              uuid: Utils.getuuid(),
              label: item.label,
              field: item.field,
              initval: '',
              type: item.type,
              resourceType: '0',
              setAll: 'false',
              options: [],
              dataSource: '',
              decimal: item.decimal,
              orderType: 'asc',
              readonly: 'false',
              required: 'true'
            }
    
            items.push(newcard)
          }
        })
    
        config.fields = items
      }
    }

    if (type === 'search' || type === 'columns' || type === 'form') {
      this.props.updatefield(config)

      notification.success({
        top: 92,
        message: '操作成功',
        duration: 2
        items.push(newcard)
        keys.push(item.field.toLowerCase())
      })
      MKEmitter.emit('plusSearch', config.uuid, items, 'multil')
    } else if (type === 'columns') {
      selectCards.forEach(item => {
        let newcard = {
          uuid: Utils.getuuid(),
          Align: 'left',
          label: item.label,
          field: item.field,
          Hide: 'false',
          IsSort: 'true',
          type: item.type,
          Width: item.type === 'number' ? 80 : 120
        }

        if (item.type === 'number') {
          newcard.decimal = item.decimal
        } else {
          newcard.fieldlength = item.length || 50
        }

        items.push(newcard)
        keys.push(item.field.toLowerCase())
      })
      MKEmitter.emit('plusColumns', config.uuid, items)
    } else if (type === 'fields') {
      this.props.updatefield(items)
      items = [...config.columns]

      notification.success({
        top: 92,
        message: '操作成功',
        duration: 2
      selectCards.forEach(item => {
        let _t = item.$datatype || (item.type === 'number' ? 'Decimal(18,0)' : 'Nvarchar(50)')
        let newcard = {
          uuid: Utils.getuuid(),
          label: item.label,
          field: item.field,
          datatype: _t
        }
        items.push(newcard)
        keys.push(item.field.toLowerCase())
      })

      this.props.updatefield(items)
    } else if (type === 'form') {
      let firstItem = config.fields[0]
      let span = this.state.appType === 'mob' ? 24 : 12
      let labelwidth = 33.3
      if (firstItem && firstItem.span) {
        span = firstItem.span
        labelwidth = firstItem.labelwidth || 33.3
      }
      selectCards.forEach(item => { // 循环添加新增字段
        let newcard = {
          uuid: Utils.getuuid(),
          label: item.label,
          field: item.field,
          initval: item.type === 'number' ? 0 : '',
          type: item.type,
          resourceType: '0',
          span: span,
          labelwidth: labelwidth,
          options: [],
          dataSource: '',
          decimal: item.decimal,
          orderType: 'asc',
          readonly: 'false',
          required: 'true'
        }

        if (item.type === 'text' && item.length >= 256) {
          newcard.type = 'textarea'
          newcard.required = 'false'
          newcard.fieldlength = item.length
          if (firstItem) {
            if (firstItem.type === newcard.type) {
              newcard.span = firstItem.span
              newcard.labelwidth = firstItem.labelwidth
            } else {
              newcard.span = 24
              if (firstItem.span === 12) {
                newcard.labelwidth = 16.2
              } else if (firstItem.span === 8) {
                newcard.labelwidth = 10.5
              } else if (firstItem.span === 6) {
                newcard.labelwidth = 7.7
              }
            }
          } else {
            newcard.span = 24
            newcard.labelwidth = 16.2
          }
        }

        items.push(newcard)
        keys.push(item.field.toLowerCase())
      })
      
      this.props.plusFields(items)
    }

    this.setState({
      selectCards: [],
      fields: fromJS(fields).toJS().map(cell => {
        if (keys.includes(cell.field.toLowerCase())) {
          cell.origin = true
        }
        return cell
      })
    })

    notification.success({
      top: 92,
      message: '操作成功',
      duration: 2
    })
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -359,36 +255,37 @@
    }
  }

  onChange = (selectCards) => {
    this.setState({selectCards})
  }

  render() {
    const { type } = this.props
    const { dict, fields } = this.state
    const { fields } = this.state

    let label = '批量添加'
    if (type === 'search') {
      label = '添加搜索'
    } else if (type === 'columns') {
      label = '添加显示列'
    }

    return (
      <div className="quickly-add">
        <Button type="primary" block onClick={this.queryField}>{dict['model.batchAdd']}</Button>
        <Button type="primary" block onClick={this.queryField}>{label}</Button>
        {/* 根据字段名添加显示列及搜索条件 */}
        <Modal
          wrapClassName="model-table-fieldmanage-modal"
          title={dict['model.edit']}
          visible={this.state.tableVisible}
          title="编辑"
          visible={this.state.visible}
          width={'65vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          cancelText={dict['model.close']}
          cancelText="关闭"
          onOk={this.addFieldSubmit}
          onCancel={() => { // 取消添加
            this.setState({
              tableVisible: false
            })
          }}
          onCancel={() => this.setState({ visible: false })}
          destroyOnClose
        >
          {fields.length > 0 ?
            <EditCard data={fields} ref="searchcard" type={type} dict={dict} /> : null
          }
          {(!fields || fields.length === 0) &&
            <Empty />
          }
          {fields.length > 0 ? <EditCard data={fields} onChange={this.onChange} type={type} /> : <Empty />}
        </Modal>
      </div>
    )