2021-09-27

king

2021-09-27 54d01e6ef9ac31f10de4a0e92824eba50b77eda6

 src/templates/sharecomponent/fieldscomponent/index.jsx

@@ -8,6 +8,7 @@
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 {
@@ -21,7 +22,8 @@
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    appType: sessionStorage.getItem('appType'),
    fields: [],          // 字段集
    tableVisible: false,    // 模态框控制
    visible: false,         // 模态框控制
    selectCards: []
  }

  queryField = () => {
@@ -49,7 +51,7 @@
      config.search.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 === 'columns') {
@@ -57,87 +59,60 @@
      config.columns.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})
          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') {
      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})
          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) { // 数据类型修改
            item.initval = ''
            if (cell.type === 'select') {
              item.match = '='
            } else if (cell.type === 'daterange') {
              item.initval = '[30, 0]'
              item.match = 'between'
            } else {
              cell.type = 'text'
              item.match = 'like'
            }
            
            item.type = cell.type
            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) {
      selectCards.forEach(item => {
          let _match = ''
        let initval = ''
          if (item.type === 'select') {
            _match = '='
          } else if (item.type === 'daterange') {
          initval = '[30, 0]'
            _match = 'between'
          } else {
            item.type = 'text'
@@ -148,7 +123,7 @@
            uuid: Utils.getuuid(),
            label: item.label,
            field: item.field,
            initval: '',
          initval: initval,
            type: item.type,
            resourceType: '0',
            setAll: 'false',
@@ -159,27 +134,11 @@
          }

          items.push(newcard)
        }
        keys.push(item.field.toLowerCase())
      })
      config.search = items
      MKEmitter.emit('plusSearch', config.uuid, items, 'multil')
    } else if (type === 'columns') {
      config.columns.forEach(item => {
        if (item.field && 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) {
      selectCards.forEach(item => {
          let newcard = {
            uuid: Utils.getuuid(),
            Align: 'left',
@@ -198,65 +157,33 @@
          }

          items.push(newcard)
        }
        keys.push(item.field.toLowerCase())
      })
      config.columns = items
      MKEmitter.emit('plusColumns', config.uuid, items)
    } else if (type === 'fields') {
      config.columns.forEach(item => {
        if (columnsMap.has(item.field.toLowerCase())) {
          let cell = columnsMap.get(item.field.toLowerCase())
      items = [...config.columns]

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

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

      _columns.forEach(item => {
      selectCards.forEach(item => {
        let _t = item.$datatype || (item.type === 'number' ? 'Decimal(18,0)' : 'Nvarchar(50)')
        if (item.selected) {
          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') {
      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()]
      let lastItem = config.fields[config.fields.length - 1]
      let span = this.state.appType === 'mob' ? 24 : 12
      if (lastItem && lastItem.span) {
        span = lastItem.span
      }

      _columns.forEach(item => { // 循环添加新增字段
        if (item.selected) {
      selectCards.forEach(item => { // 循环添加新增字段
          let newcard = {
            uuid: Utils.getuuid(),
            label: item.label,
@@ -276,29 +203,27 @@
          }
  
          items.push(newcard)
        }
        keys.push(item.field.toLowerCase())
      })
  
      config.fields = items
      this.props.plusFields(items)
    }

    if (type === 'search' || type === 'columns' || type === 'form') {
      this.props.updatefield(config)
    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
      })
    } else if (type === 'fields') {
      this.props.updatefield(items)

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

  shouldComponentUpdate (nextProps, nextState) {
@@ -314,6 +239,10 @@
    }
  }

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

  render() {
    const { type } = this.props
    const { dict, fields } = this.state
@@ -325,24 +254,15 @@
        <Modal
          wrapClassName="model-table-fieldmanage-modal"
          title={dict['model.edit']}
          visible={this.state.tableVisible}
          visible={this.state.visible}
          width={'65vw'}
          maskClosable={false}
          cancelText={dict['model.close']}
          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>
    )