2024-05-07

king

2024-05-07 2aa5ab63b4bbce5c36dbb3511b205b3b5f6af9bd

 src/templates/sharecomponent/fieldscomponent/index.jsx

@@ -3,31 +3,29 @@
import { is, fromJS } from 'immutable'
import { Button, Modal, Empty, notification } from 'antd'

import Api from '@/api'
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 {
  static propTpyes = {
    type: PropTypes.string,          // 搜索条件添加、显示列添加
    config: PropTypes.object,        // 容器Id
    tableFields: PropTypes.string,   // 已选表字段集
    type: PropTypes.string,
    config: PropTypes.object,
    updatefield: PropTypes.func
  }

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

  queryField = () => {
    const { type, config, tableFields } = this.props
    // 判断是否已选择表名
    if (!config.tables || config.tables.length === 0) {
  checkField = () => {
    if (!window.GLOB.publicTables || window.GLOB.publicTables.length === 0) {
      notification.warning({
        top: 92,
        message: '请选择表名！',
@@ -36,225 +34,334 @@
      return
    }

    window.GLOB.tableFields = window.GLOB.tableFields || []

    let index = 0

    let deffers = window.GLOB.publicTables.map(item => {
      let tb = window.GLOB.tableFields.filter(tab => tab.tableName === item.TbName)[0]

      if (tb) {
        return Promise.resolve(fromJS(tb).toJS())
      }

      return new Promise(resolve => {
        setTimeout(() => {
          Api.getCloudConfig({func: 'sPC_Get_FieldName', TBName: item.TbName}).then(res => {
            let tabmsg = {
              status: res.status,
              message: res.message,
              tableName: item.TbName,
              columns: []
            }

            if (res.FDName && res.FDName.length > 0) {
              tabmsg.columns = res.FDName.map(item => {
                let _type = item.FieldType.toLowerCase()
                let _datatype = item.FieldType.toLowerCase()
                let _decimal = 0
                let _length = 50
                if (/^nvarchar/.test(_type)) {
                  try { // 存在max
                    _length = +_type.match(/\d+/)[0] || 50
                  } catch (e) {
                    _length = 4000
                  }
                  _type = 'text'
                } else if (/^int/.test(_type)) {
                  _type = 'number'
                } else if (/^decimal/.test(_type)) {
                  _decimal = _type.split(',')[1]
                  _decimal = parseInt(_decimal)
                  _type = 'number'
                } else if (/^datetime/.test(_type)) {
                  _type = 'datetime'
                } else if (/^date/.test(_type)) {
                  _type = 'date'
                } else {
                  _type = 'text'
                }

                if (/^nvarchar/.test(_datatype)) {
                  _datatype = _datatype.replace(/^nvarchar/, 'Nvarchar')
                } else if (/^decimal/.test(_datatype)) {
                  _datatype = _datatype.replace(/^decimal/, 'Decimal')
                } else if (/^int/.test(_datatype)) {
                  _datatype = _datatype.replace(/^int/, 'Int')
                }
    
                return {
                  field: item.FieldName || '',
                  label: item.FieldDec,
                  type: _type,
                  datatype: _type,
                  decimal: _decimal,
                  length: _length,
                  $datatype: _datatype
                }
              })
            }

            resolve(tabmsg)
          })
        }, index * 50)

        index++
      })
    })
    Promise.all(deffers).then(response => {
      let error = false
      let _columns = response

      response.forEach(item => {
        if (!item.status) {
          error = item.message || '字段查询失败！'
        }
      })

      if (error) {
        notification.warning({
          top: 92,
          message: error,
          duration: 5
        })
      } else {
        window.GLOB.tableFields = _columns
        this.queryField(_columns)
      }
    })
  }

  queryField = (tableFields) => {
    const { type, config } = this.props

    // 表字段集转为map数据
    let columns = new Map()
    tableFields.forEach(table => {
      table.columns.forEach(column => {
        columns.set(column.field, column)
        columns.set(column.field.toLowerCase(), column)
      })
    })

    if (type === 'search') {
      // 添加搜索条件，字段集中存在搜索条件字段，使用搜索条件对象替换字段集，设置数据类型
      config.search.forEach(item => {
        if (columns.has(item.field)) {
          let _datatype = columns.get(item.field).datatype
          columns.set(item.field, {...item, selected: true, datatype: _datatype})
        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})
        }
      })
    } else if (type === 'columns') {
      // 添加显示列，字段集中存在显示列字段，使用显示列对象替换字段集，设置数据类型
      config.columns.forEach(item => {
        if (columns.has(item.field)) {
          let _datatype = columns.get(item.field).datatype
          columns.set(item.field, {...item, selected: true, datatype: _datatype})
        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})
        }
      })
    } else if (type === 'fields') {
      config.columns.forEach(item => {
        if (columns.has(item.field)) {
          let _datatype = columns.get(item.field).datatype
          columns.set(item.field, {...item, selected: true, datatype: _datatype})
        if (columns.has(item.field.toLowerCase())) {
          let _datatype = columns.get(item.field.toLowerCase()).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, 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, card)
      columnsMap.set(card.field.toLowerCase(), card)
    })

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

          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)
        } 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: [],
            dataSource: '',
            linkField: '',
            valueField: '',
            valueText: '',
            orderBy: '',
            orderType: 'asc',
            match: _match,
            display: 'dropdown'
          }

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

          if (cell.selected) {
            items.push(item)
          }
          columnsMap.delete(item.field)
        } 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
          }

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

          if (cell.selected) {
            items.push(item)
          }
          columnsMap.delete(item.field)
      selectCards.forEach(item => {
        let _match = ''
        let initval = ''
        let _type = item.type
        if (item.type === 'date') {
          _type = 'daterange'
        } else if (item.type === 'select') {
          _match = '='
        } else {
          items.push(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: _type,
          resourceType: '0',
          options: [],
          orderType: 'asc',
          match: _match,
        }

        items.push(newcard)
        keys.push(item.field.toLowerCase())
      })
    }

    let _config = null

    if (type === 'search') {
      _config = {...this.props.config, search: items}

      this.props.updatefield(_config)

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

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

      notification.success({
        top: 92,
        message: '操作成功',
        duration: 2
        if (item.type === 'date') {
          newcard.textFormat = 'YYYY-MM-DD'
        } else if (item.type === 'datetime') {
          newcard.textFormat = 'YYYY-MM-DD HH:mm:ss'
        }

        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.unshift(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 (/^icon|images?$/ig.test(item.field)) {
          newcard.type = 'fileupload'
          newcard.fileType = 'picture-card'
          newcard.fieldlength = item.length || 512
          newcard.maxSize = 1
          newcard.maxfile = 1
        } else 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
          }
        } else if (item.type === 'text') {
          newcard.fieldlength = item.length || 50
        }

        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) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
@@ -266,45 +373,37 @@
    }
  }

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

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

    let label = ''
    let label = '批量添加'
    if (type === 'search') {
      label = dict['header.menu.search.add']
      label = '添加搜索'
    } else if (type === 'columns') {
      label = dict['model.menu.column.add']
    } else if (type === 'fields') {
      label = dict['model.menu.field.add']
      label = '添加显示列'
    }

    return (
      <div className="quickly-add">
        <Button type="primary" block onClick={this.queryField}>{label}</Button>
        <Button type="primary" block onClick={this.checkField}>{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>
    )