2024-02-04

king

2024-02-04 0bbaa727cdfc65622e33e91c4bf694c83f184535

 src/templates/sharecomponent/tablecomponent/index.jsx

@@ -6,10 +6,8 @@
import moment from 'moment'

import Api from '@/api'
import options from '@/store/options.js'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import MKEmitter from '@/utils/events.js'
import { queryTableSql } from '@/utils/option.js'

import './index.scss'
@@ -24,9 +22,7 @@
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    tables: [],          // 系统表
    tableFields: [],     // 已选表字段集
    selectedTables: [],  // 已选表
  }

@@ -36,15 +32,28 @@
  UNSAFE_componentWillMount () {
    const { config } = this.props

    let tables = config.tables ? fromJS(config.tables).toJS() : []

    window.GLOB.publicTables = tables

    this.setState({
      selectedTables: config.tables ? fromJS(config.tables).toJS() : []
    }, () => {
      this.gettableFields()
      selectedTables: tables
    })
  }

  componentDidMount () {
    MKEmitter.addListener('publicTableChange', this.publicTableChange)
    this.gettables()
  }

  publicTableChange = (table, type) => {
    if (type === 'plus') {
      this.onTableChange(table)
    } else if (type === 'del') {
      this.deleteTable(table)
    } else if (type === 'init' && window.GLOB.publicTables.length === 0) {
      this.onTableChange(table)
    }
  }

  /**
@@ -55,22 +64,25 @@
      func: 'sPC_Get_SelectedList',
      LText: queryTableSql,
      obj_name: 'data',
      arr_field: 'TbName,Remark'
      arr_field: 'TbName,Remark',
      exec_type: 'x'
    }

    param.LText = Utils.formatOptions(param.LText)
    param.LText = Utils.formatOptions(param.LText, 'x')
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)
    param.secretkey = Utils.encrypt('', param.timestamp)
    param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 云端数据验证

    if (options.cloudServiceApi) { // 且存在云端地址
      param.rduri = options.cloudServiceApi
    if (window.GLOB.cloudServiceApi) { // 且存在云端地址
      param.rduri = window.GLOB.cloudServiceApi
      param.userid = sessionStorage.getItem('CloudUserID') || ''
      param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
    }

    Api.getSystemCacheConfig(param).then(res => {
      if (res.status) {
        let tbNames = res.data.map(item => item.TbName).join(',')
        sessionStorage.setItem('mk_tb_names', ',' + tbNames.toLowerCase() + ',')
        this.setState({
          tables: res.data
        })
@@ -84,157 +96,28 @@
    })
  }

  gettableFields = () => {
    let deffers = this.state.selectedTables.map(item => {
      return new Promise(resolve => {
        let param = {func: 'sPC_Get_FieldName', TBName: item.TbName}
        if (options.cloudServiceApi) { // 且存在云端地址
          param.rduri = options.cloudServiceApi
          param.userid = sessionStorage.getItem('CloudUserID') || ''
          param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
        }

        Api.getSystemCacheConfig(param).then(res => {
          res.TBName = item.TbName
          resolve(res)
        })
      })
    })
    Promise.all(deffers).then(response => {
      let _columns = []
      response.forEach(res => {
        if (res.status) {
          let tabmsg = {
            tableName: res.TBName,
            columns: res.FDName.map(item => {
              let _type = item.FieldType.toLowerCase()
              let _decimal = 0
              let _length = 50
              if (/^nvarchar/.test(_type)) {
                try { // 存在max
                  _length = +_type.match(/\d+/)[0] || 50
                } catch (e) {
                  _length = 2048
                }
                _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'
              }
  
              return {
                field: item.FieldName || '',
                label: item.FieldDec,
                type: _type,
                datatype: _type,
                decimal: _decimal,
                length: _length,
                $datatype: item.FieldType.toLowerCase()
              }
            })
          }
          _columns.push(tabmsg)
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
        }
      })

      this.setState({
        tableFields: _columns
      })
      window.GLOB.tableFields = _columns
    })
  }

  /**
   * @description 添加表名
   */
  onTableChange = (value) => {
    const { config } = this.props
    const { tables, tableFields, selectedTables } = this.state
    const { tables, selectedTables } = this.state

    let _table = tables.filter(item => item.TbName === value)[0]
    let isSelected = !!selectedTables.filter(cell => cell.TbName === value)[0]
    if (!isSelected) {
      this.setState({
        selectedTables: [...selectedTables, _table]
      })

      let _config = {...config, tables: [...selectedTables, _table]}
      
      Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: value}).then(res => {
        if (res.status) {
          let tabmsg = {
            tableName: _table.TbName,
            columns: res.FDName.map(item => {
              let _type = item.FieldType.toLowerCase()
              let _decimal = 0
              let _length = 50
    if (!_table || selectedTables.findIndex(cell => cell.TbName === value) > -1) return

              if (/^nvarchar/.test(_type)) {
                try { // 存在max
                  _length = +_type.match(/\d+/)[0] || 50
                } catch (e) {
                  _length = 2048
                }
                _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'
              }
    let _tables = [...selectedTables, _table]

              return {
                field: item.FieldName,
                label: item.FieldDec,
                type: _type,
                datatype: _type,
                decimal: _decimal,
                length: _length,
                $datatype: item.FieldType.toLowerCase()
              }
            })
          }
    window.GLOB.publicTables = _tables

          let _columns = [...tableFields, tabmsg]
    this.setState({
      selectedTables: _tables
    })

          this.setState({
            tableFields: _columns
          })

          window.GLOB.tableFields = _columns

          this.props.updatetable(_config)
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
        }
      })
    }
    let _config = {...config, tables: _tables}
    
    this.props.updatetable(_config)
  }

  /**
@@ -242,17 +125,15 @@
   */
  deleteTable = (table) => {
    const { config } = this.props
    const { selectedTables, tableFields } = this.state
    const { selectedTables } = this.state

    let _tables = selectedTables.filter(item => item.TbName !== table.TbName)
    let _fields = tableFields.filter(item => item.tableName !== table.TbName)

    window.GLOB.publicTables = _tables

    this.setState({
      selectedTables: _tables,
      tableFields: _fields
    })

    window.GLOB.tableFields = _fields

    this.props.updatetable({...config, tables: _tables})
  }
@@ -264,20 +145,21 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('publicTableChange', this.publicTableChange)
  }

  render() {
    const { containerId } = this.props
    const { dict, tables, selectedTables } = this.state
    const { tables, selectedTables } = this.state

    return (
      <div className="model-table-tablemanage-view">
      <div className="model-tablename-manage-view">
        {/* 表名添加 */}
        <div className="ant-col ant-form-item-label">
          <label>
            <Tooltip placement="topLeft" title="此处可以添加页面配置相关的常用表，可通过工具栏中的添加按钮，可批量添加表格相关字段。">
            <Tooltip placement="topLeft" title="此处可以添加页面配置相关的常用表。">
              <QuestionCircleOutlined className="mk-form-tip" />
              {dict['header.menu.table.add']}
              表名
            </Tooltip>
          </label>
        </div>
@@ -286,17 +168,19 @@
          className="tables"
          style={{ width: '100%' }}
          optionFilterProp="children"
          value={dict['header.menu.table.placeholder']}
          onChange={this.onTableChange}
          value="请选择表名"
          onSelect={this.onTableChange}
          dropdownClassName="mk-tables"
          dropdownMatchSelectWidth={false}
          showArrow={false}
          getPopupContainer={() => containerId ? document.getElementById(containerId) : document.body}
          filterOption={(input, option) => {
            return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
              option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
            return option.props.children[0].toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
              option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0
          }}
        > 
          {tables.map((table, index) => (
            <Option key={index} title={table.TbName} value={table.TbName}>{table.Remark}</Option>
            <Option key={index} title={table.TbName} value={table.TbName}>{table.Remark}<br/>{table.TbName}</Option>
          ))}
        </Select>
        {selectedTables.length > 0 && <List
@@ -306,7 +190,6 @@
          renderItem={(item, index) => <List.Item key={index} title={item.Remark + ' (' + item.TbName + ')'}>
            {item.Remark + ' (' + item.TbName + ')'}
            <CloseOutlined onClick={() => this.deleteTable(item)}/>
            <div className="bottom-mask"></div>
          </List.Item>}
        />}
      </div>