2020-12-04

king

2020-12-04 d441fa1e1cc80f4ea462a750a42a2b25c1f2b202

 src/tabviews/treepage/index.jsx

@@ -3,16 +3,16 @@
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { notification, Spin, Tabs, Icon, Modal, Button, message, Tree, Typography, Row, Col, Card, Input, Empty } from 'antd'
import moment from 'moment'

import Api from '@/api'
import options from '@/store/options.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import Utils from '@/utils/utils.js'
import UtilsDM from '@/utils/utils-datamanage.js'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import asyncSpinComponent from '@/utils/asyncSpinComponent'
import {refreshTabView, modifyTabview} from '@/store/action'

import NotFount from '@/components/404'
import './index.scss'

@@ -26,6 +26,7 @@

class TreePage extends Component {
  static propTpyes = {
    param: PropTypes.string,     // 其他页面传递的参数
    MenuID: PropTypes.string,    // 菜单Id
    MenuNo: PropTypes.string,    // 菜单参数
    MenuName: PropTypes.string   // 菜单名称
@@ -35,6 +36,7 @@
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    ContainerId: Utils.getuuid(), // 菜单外层html Id
    loadingview: true,    // 页面加载中
    BID: null,            // 页面跳转时携带ID
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},           // 页面配置信息，包括按钮、搜索、显示列、标签等
@@ -47,27 +49,26 @@
    BIDs: {},             // 上级表id
    visible: false,       // 弹框显示隐藏控制
    treevisible: false,   // 菜单结构树弹框显示隐藏控制
    refreshtabs: null,    // 需要刷新的标签集
    confirmLoading: false,// 自定义设置模态框加载中
    revertLoading: false, // 恢复默认设置
    settingVisible: false,// 自定义设置模态框
    triggerBtn: null,     // 点击表格中或快捷键触发的按钮
    tabActive: null,      // 标签页展开控制
    expandedKeys: [],     // 展开的树节点
    selectedKeys: []      // 选中的树节点
    selectedKeys: [],     // 选中的树节点
    debug: sessionStorage.getItem('debug') === 'true'
  }

  /**
   * @description 获取页面配置信息
   */
  async loadconfig () {
    const { permAction } = this.props
    const { permAction, param } = this.props

    let _param = {
      func: 'sPC_Get_LongParam',
      MenuID: this.props.MenuID
    }
    let result = await Api.getSystemCacheConfig(_param)
    let result = await Api.getCacheConfig(_param)

    if (result.status) {
      let config = ''
@@ -138,7 +139,50 @@
        }
      })

      // 数据源信息预处理
      config.setting.laypage = false                                  // 是否分页，转为boolean 统一格式
      config.setting.execute = config.setting.default !== 'false'     // 默认sql是否执行，转为boolean 统一格式
      config.setting.customScript = ''                                // 自定义脚本

      // 数据源
      if (config.setting.interType === 'inner' && !config.setting.innerFunc) {
        config.setting.interType = 'system'
      }

      if (config.setting.interType === 'system') {
        if (config.setting.scripts && config.setting.scripts.length > 0) {
          let _customScript = ''
          config.setting.scripts.forEach(item => {
            if (item.status === 'false') return
            _customScript += `
              ${item.sql}
            `
          })
          config.setting.customScript = _customScript
        }
  
        if (!config.setting.execute) { // 默认sql 不执行时 置空
          config.setting.dataresource = ''
        } else {
          config.setting.dataresource = config.setting.dataresource || ''
        }
        if (/\s/.test(config.setting.dataresource)) {
          config.setting.dataresource = '(' + config.setting.dataresource + ') tb'
        }
  
        if (sessionStorage.getItem('dataM') === 'true') { // 数据权限
          config.setting.dataresource = config.setting.dataresource.replace(/\$@/ig, '/*')
          config.setting.dataresource = config.setting.dataresource.replace(/@\$/ig, '*/')
          config.setting.customScript = config.setting.customScript.replace(/\$@/ig, '/*')
          config.setting.customScript = config.setting.customScript.replace(/@\$/ig, '*/')
        } else {
          config.setting.dataresource = config.setting.dataresource.replace(/@\$|\$@/ig, '')
          config.setting.customScript = config.setting.customScript.replace(/@\$|\$@/ig, '')
        }
      }

      this.setState({
        BID: param && param.BID ? param.BID : '',
        loadingview: false,
        config: config,
        tabActive: _tabActive,
@@ -181,59 +225,44 @@

      if (!preKey) return

      let istrigger = false
      let triggerId = ''

      Object.keys(userConfig).forEach(key => {
        if (key === this.props.MenuID || !userConfig[key].action || istrigger) return
      Object.keys(userConfig).some(key => {
        if (key === this.props.MenuID || !userConfig[key].action) return false

        let _actions = userConfig[key].action

        Object.keys(_actions).forEach(btnkey => {
        Object.keys(_actions).some(btnkey => {
          let item = _actions[btnkey]

          if (!item.shortcut || typeof(item.shortcut) !== 'object' || item.shortcut.length === 0 || istrigger) return

          if (preKey === item.shortcut[0] && keyCode === item.shortcut[1]) {
          if (Array.isArray(item.shortcut) && preKey === item.shortcut[0] && keyCode === item.shortcut[1]) {
            e.preventDefault()
            istrigger = true
            triggerId = btnkey

            let _groupId = ''
            let _ActiveTabId = ''
            config.tabgroups.forEach(group => {
              if (group.sublist.length === 0) return

              let _tab = group.sublist.filter(tab => tab.uuid === key)[0]
              if (_tab) {
                _groupId = group.uuid
                _ActiveTabId = _tab.uuid
              }

              if (!_tab) return

              _groupId = group.uuid
              _ActiveTabId = _tab.uuid
            })

            if (this.state.tabActive[_groupId] === _ActiveTabId) {
              this.setState({
                triggerBtn: {
                  uuid: new Date().getTime(),
                  parentId: key,
                  button: {...item, uuid: btnkey},
                  data: null
                }
              })
            } else {
              this.setState({
                tabActive: {...this.state.tabActive, [_groupId]: _ActiveTabId}
              }, () => {
                this.setState({
                  triggerBtn: {
                    uuid: new Date().getTime(),
                    parentId: key,
                    button: {...item, uuid: btnkey},
                    data: null
                  }
                })
              })
            }
            this.setState({
              tabActive: {...this.state.tabActive, [_groupId]: _ActiveTabId}
            }, () => {
              MKEmitter.emit('triggerBtnId', triggerId)
            })

            return true
          }
          return false
        })

        if (triggerId) return true
        return false
      })
    }
  }
@@ -242,18 +271,14 @@
   * @description 主表数据加载
   */ 
  async loadmaindata () {
    const { setting, searchKey } = this.state
    let param = ''
    const { setting, searchKey, BID } = this.state

    this.setState({
      loading: true
    })

    if (setting.interType !== 'inner' || (setting.interType === 'inner' && setting.innerFunc)) {
      param = this.getCustomParam()
    } else {
      param = this.getDefaultParam()
    }
    let arr_field = `${setting.valueField},${setting.labelField},${setting.parentField}`
    let param = UtilsDM.getQueryDataParams(setting, arr_field, [], setting.order, '', '', BID, this.props.menuType)

    let result = await Api.genericInterface(param)
    if (result.status) {
@@ -435,101 +460,6 @@
  }

  /**
   * @description 获取用户自定义存储过程传参
   */
  getCustomParam = () => {
    const { setting } = this.state

    let param = {
      OrderCol: setting.order,
      dataM: this.props.dataManager ? 'Y' : '',
    }

    if (setting.interType === 'inner') {
      param.func = setting.innerFunc
    } else {
      if (setting.sysInterface === 'true' && window.GLOB.mainSystemApi) {
        param.rduri = window.GLOB.mainSystemApi
      } else if (setting.sysInterface !== 'true') {
        param.rduri = setting.interface
      }

      if (setting.outerFunc) {
        param.func = setting.outerFunc
      }
    }

    return param
  }

  /**
   * @description 获取系统存储过程 sPC_Get_TableData 的参数
   */
  getDefaultParam = () => {
    const { setting } = this.state

    let arr_field = `${setting.valueField},${setting.labelField},${setting.parentField}`
    
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field,
      custom_script: setting.customScript || '',
      default_sql: setting.default || 'true',
      dataM: this.props.dataManager ? 'Y' : ''
    }
    
    let _dataresource = setting.dataresource

    if (/\s/.test(_dataresource)) {
      _dataresource = '(' + _dataresource + ') tb'
    }

    if (this.props.dataManager) { // 数据权限
      _dataresource = _dataresource.replace(/\$@/ig, '/*')
      _dataresource = _dataresource.replace(/@\$/ig, '*/')
      param.custom_script = param.custom_script.replace(/\$@/ig, '/*')
      param.custom_script = param.custom_script.replace(/@\$/ig, '*/')
    } else {
      _dataresource = _dataresource.replace(/@\$|\$@/ig, '')
      param.custom_script = param.custom_script.replace(/@\$|\$@/ig, '')
    }

    let LText = ''

    if (setting.default !== 'false') {
      LText = `select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${setting.order}) as rows from ${_dataresource}) tmptable order by tmptable.rows`
    }

    if (param.custom_script) {
      param.custom_script = param.custom_script.replace(/@orderBy@/ig, setting.order)

      if (LText) {
        LText += `
          aaa:
          if @ErrorCode!=''
            insert into tmp_err_retmsg (ID, ErrorCode, retmsg, CreateUserID) select @time_id@,@ErrorCode, @retmsg,@UserID@
        `
      } else {
        param.custom_script += `
          aaa:
          if @ErrorCode!=''
            insert into tmp_err_retmsg (ID, ErrorCode, retmsg, CreateUserID) select @time_id@,@ErrorCode, @retmsg,@UserID@
        `
      }

      param.custom_script = Utils.formatOptions(param.custom_script)
    }

    param.LText = Utils.formatOptions(LText)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)
    param.DateCount = ''

    return param
  }

  /**
   * @description 页面刷新，重新获取配置
   */
  reloadview = () => {
@@ -548,33 +478,6 @@
    }, () => {
      this.loadconfig()
    })
  }

  /**
   * @description 子表操作完成后刷新主表
   */
  handleMainTable = (type, tab) => {
    if (type === 'maingrid' && (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0))) {
      this.loadmaindata()
    } else if (type === 'mainline' && (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0))) {
      this.loadmaindata()
    } else if ((type === 'maingrid' || type === 'mainline') && tab.supMenu) {
      this.setState({
        refreshtabs: [type, tab.supMenu]
      }, () => {
        this.setState({
          refreshtabs: null
        })
      })
    } else if (type === 'equaltab' && tab.equalTab && tab.equalTab.length > 0) {
      this.setState({
        refreshtabs: tab.equalTab
      }, () => {
        this.setState({
          refreshtabs: null
        })
      })
    }
  }

  /**
@@ -744,27 +647,43 @@
    })
  }

  reloadData = (menuId) => {
    const { MenuID } = this.props

    if (MenuID !== menuId) return
    
    this.loadmaindata()
  }

  reloadMenuView = (menuId) => {
    const { MenuID } = this.props

    if (MenuID !== menuId) return

    this.reloadview()
  }

  resetActiveMenu = (menuId) => {
    const { MenuID } = this.props

    if (MenuID !== menuId) return

    this.setShortcut()
  }

  UNSAFE_componentWillMount () {
    // 组件加载时，获取菜单数据
    this.loadconfig()
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.refreshTab && nextProps.refreshTab.MenuID === this.props.MenuID) {
      if (nextProps.refreshTab.position === 'view') {
        this.reloadview()
      }
      this.props.refreshTabView('')
    } else if (!is(fromJS(this.props.tabviews), fromJS(nextProps.tabviews))) {
      let selectTab = nextProps.tabviews.filter(tab => tab.selected)[0]
      if (selectTab && selectTab.MenuID === this.props.MenuID) {
        this.setShortcut()
      }
    }
  }

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

  componentDidMount () {
    MKEmitter.addListener('reloadData', this.reloadData)
    MKEmitter.addListener('reloadMenuView', this.reloadMenuView)
    MKEmitter.addListener('resetActiveMenu', this.resetActiveMenu)
  }

  /**
@@ -775,6 +694,9 @@
      return
    }
    document.onkeydown = () => {}
    MKEmitter.removeListener('reloadData', this.reloadData)
    MKEmitter.removeListener('reloadMenuView', this.reloadMenuView)
    MKEmitter.removeListener('resetActiveMenu', this.resetActiveMenu)
  }

  changeExpandedKeys = (expandedKeys) => {
@@ -807,7 +729,8 @@
  }

  render() {
    const { setting, loadingview, viewlost, config, triggerBtn, userConfig, tabActive, tabgroups, treeNodes, treedata, expandedKeys, selectedKeys } = this.state
    const { menuType } = this.props
    const { debug, setting, loadingview, viewlost, config, userConfig, tabActive, tabgroups, treeNodes, treedata, expandedKeys, selectedKeys } = this.state

    return (
      <div className="tree-page" id={this.state.ContainerId}>
@@ -842,7 +765,7 @@
              {!treedata ? <Spin /> : null}
            </Card>
          </Col>
          <Col span={24 - setting.width} style={{paddingTop: 6}}>
          <Col span={24 - setting.width}>
            {tabgroups.map(group => (
              <Tabs activeKey={tabActive[group.uuid]} key={group.uuid} onChange={(key) => this.setState({tabActive: {...tabActive, [group.uuid]: key}})}>
                {group.sublist.map(_tab => {
@@ -856,18 +779,14 @@
                      {_tab.type === 'SubTable' ?
                        <SubTable
                          Tab={_tab}
                          menuType="main"
                          MenuID={_tab.linkTab}
                          mainSearch={null}
                          userConfig={userConfig ? userConfig[_tab.uuid] : null}
                          triggerBtn={triggerBtn}
                          SupMenuID={this.props.MenuID}
                          refreshtabs={this.state.refreshtabs}
                          ContainerId={this.state.ContainerId}
                          BID={this.state.BIDs[_tab.supMenu] || ''}
                          BData={this.state.BIDs[_tab.supMenu + 'data'] || ''}
                          handleTableId={this.handleTableId}
                          handleMainTable={(type) => this.handleMainTable(type, _tab)}
                        /> : null}
                    </TabPane>
                  )
@@ -876,13 +795,12 @@
            )}
          </Col>
        </Row> : null}
        
        <Button
        {debug && options.sysType !== 'cloud' && menuType !== 'HS' ? <Button
          icon="copy"
          shape="circle"
          className="tree-page-copy"
          onClick={this.handleviewconfig}
        />
        /> : null}
        <Modal
          className="menu-tree-modal"
          title={'菜单结构树'}
@@ -923,7 +841,6 @@
              MenuID={this.props.MenuID}
              MenuName={this.props.MenuName}
              permAction={this.props.permAction}
              permRoles={this.props.permRoles}
              config={this.state.config}
              userConfig={this.state.userConfig}
              columns={[]}
@@ -939,21 +856,14 @@

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    refreshTab: state.refreshTab,
    menuType: state.editLevel,
    permAction: state.permAction,
    permMenus: state.permMenus,
    permRoles: state.permRoles,
    memberLevel: state.memberLevel,
    dataManager: state.dataManager
    memberLevel: state.memberLevel
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)),
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
const mapDispatchToProps = () => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(TreePage)