2021-05-08

king

2021-05-08 6afdec0062dacbded57e166230eb22cc55ced0c1

 src/templates/sharecomponent/fieldscomponent/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { is, fromJS } from 'immutable'
import { Button, Modal, Empty, notification } from 'antd'

import Utils from '@/utils/utils.js'
@@ -10,25 +10,23 @@

import './index.scss'

// **悲观者往往正确，乐观者往往成功
class FieldsComponent extends Component {
  static propTpyes = {
    type: PropTypes.string,          // 搜索条件添加、显示列添加
    config: PropTypes.object,        // 容器Id
    tableFields: PropTypes.string,   // 已选表字段集
    updatefield: PropTypes.func
  }

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

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

    // 表字段集转为map数据
    let columns = new Map()
    tableFields.forEach(table => {
    window.GLOB.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 (columns.has(item.field.toLowerCase())) {
          let _datatype = columns.get(item.field.toLowerCase()).datatype
          columns.set(item.field.toLowerCase(), {...item, selected: 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, selected: 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})
        }
      })
    } 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})
        }
      })
    }
@@ -85,14 +97,14 @@
    let cards = this.refs.searchcard.state.selectCards
    let columnsMap = new Map()
    cards.forEach(card => {
      columnsMap.set(card.field, card)
      columnsMap.set(card.field.toLowerCase(), card)
    })

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

          if (cell.selected && cell.type === item.type) { // 数据未修改
            items.push(item)
@@ -110,7 +122,7 @@
            item.initval = ''
            items.push(item)
          }
          columnsMap.delete(item.field)
          columnsMap.delete(item.field.toLowerCase())
        } else if (!item.origin) {
          items.push(item)
        }
@@ -139,11 +151,6 @@
            resourceType: '0',
            setAll: 'false',
            options: [],
            dataSource: '',
            linkField: '',
            valueField: '',
            valueText: '',
            orderBy: '',
            orderType: 'asc',
            match: _match,
            display: 'dropdown'
@@ -152,15 +159,16 @@
          items.push(newcard)
        }
      })
      config.search = items
    } else if (type === 'columns') {
      config.columns.forEach(item => {
        if (columnsMap.has(item.field)) {
          let cell = columnsMap.get(item.field)
        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)
          columnsMap.delete(item.field.toLowerCase())
        } else if (!item.origin) {
          items.push(item)
        }
@@ -181,21 +189,103 @@
            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())
        } else {
          items.push(item)
        }
      })

      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)
        }
      })
    } 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 = lastItem ? lastItem.span || 12 : 12

      _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',
            span: span,
            labelwidth: 33.3,
            options: [],
            dataSource: '',
            decimal: item.decimal,
            orderType: 'asc',
            readonly: 'false',
            required: 'true'
          }
  
          items.push(newcard)
        }
      })
  
      config.fields = items
    }

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

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

    if (_config) {
      this.props.updatefield(_config)
      notification.success({
        top: 92,
        message: '操作成功',
        duration: 2
      })
    } else if (type === 'fields') {
      this.props.updatefield(items)

      notification.success({
        top: 92,
@@ -203,6 +293,10 @@
        duration: 2
      })
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
@@ -218,16 +312,9 @@
    const { type } = this.props
    const { dict, fields } = this.state

    let label = ''
    if (type === 'search') {
      label = dict['header.menu.search.add']
    } else if (type === 'columns') {
      label = dict['header.menu.column.add']
    }

    return (
      <div>
        <Button type="primary" block onClick={this.queryField}>{label}</Button>
      <div className="quickly-add">
        <Button type="primary" block onClick={this.queryField}>{dict['model.batchAdd']}</Button>
        {/* 根据字段名添加显示列及搜索条件 */}
        <Modal
          wrapClassName="model-table-fieldmanage-modal"
@@ -235,8 +322,7 @@
          visible={this.state.tableVisible}
          width={'65vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          cancelText={dict['header.close']}
          cancelText={dict['model.close']}
          onOk={this.addFieldSubmit}
          onCancel={() => { // 取消添加
            this.setState({