king
2021-01-15 76a4300654a18d228838c3f27455dc8e7a8cd616
src/tabviews/treepage/index.jsx
@@ -2,10 +2,9 @@
import PropTypes from 'prop-types'
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 { notification, Spin, Tabs, Icon, Tree, Row, Col, Card, Input, Empty } from 'antd'
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'
@@ -16,13 +15,13 @@
import NotFount from '@/components/404'
import './index.scss'
const VerifyCard = asyncComponent(() => import('@/tabviews/zshare/verifycard'))
const SubTable = asyncSpinComponent(() => import('@/tabviews/subtable'))
const SettingComponent = asyncComponent(() => import('@/tabviews/zshare/settingcomponent'))
const PagemsgComponent = asyncComponent(() => import('@/tabviews/zshare/pageMessage'))
const { TabPane } = Tabs
const { TreeNode } = Tree
const { Search } = Input
const { Paragraph } = Typography
class TreePage extends Component {
  static propTpyes = {
@@ -40,22 +39,17 @@
    viewlost: false,      // 页面丢失:1、未获取到配置-页面丢失;2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},           // 页面配置信息,包括按钮、搜索、显示列、标签等
    userConfig: null,     // 用户自定义设置
    userParam: null,      // 保存用户编辑中的配置
    setting: null,        // 页面全局设置:数据源、按钮及显示列固定、主键等
    treedata: null,       // 列表数据集
    treeNodes: null,      // 列表数据集
    loading: false,       // 列表数据加载中
    BIDs: {},             // 上级表id
    visible: false,       // 弹框显示隐藏控制
    treevisible: false,   // 菜单结构树弹框显示隐藏控制
    confirmLoading: false,// 自定义设置模态框加载中
    revertLoading: false, // 恢复默认设置
    settingVisible: false,// 自定义设置模态框
    tabActive: null,      // 标签页展开控制
    expandedKeys: [],     // 展开的树节点
    selectedKeys: [],     // 选中的树节点
    debug: sessionStorage.getItem('debug') === 'true'
    shortcuts: null       // 快捷键
  }
  /**
@@ -72,11 +66,12 @@
    if (result.status) {
      let config = ''
      let userConfig = null
      let _curUserConfig = ''
      let shortcuts = []
      try { // 配置信息解析
        config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam)))
        config.MenuID = this.props.MenuID
        config.MenuName = this.props.MenuName
      } catch (e) {
        console.warn('Parse Failure')
        config = ''
@@ -84,11 +79,15 @@
      
      if (result.LongParamUser) {
        try { // 配置信息解析
          userConfig = JSON.parse(window.decodeURIComponent(window.atob(result.LongParamUser)))
          _curUserConfig = userConfig[this.props.MenuID]
          let userConfig = JSON.parse(window.decodeURIComponent(window.atob(result.LongParamUser)))
          if (userConfig) {
            shortcuts = userConfig.action
            userConfig.printers.forEach(item => {
              window.GLOB.UserCacheMap.set(item.parentId + item.uuid, item)
            })
          }
        } catch (e) {
          console.warn('Parse Failure')
          userConfig = null
        }
      }
@@ -121,12 +120,6 @@
        )
      })
      if (_curUserConfig) {
        config.setting = {...config.setting, ..._curUserConfig.setting}
        config.easyCode = _curUserConfig.easyCode || config.easyCode || ''
      }
      let _tabActive = {} // 筛选展开的tab页
      let _tabgroups = []
      config.tabgroups.forEach(group => {
@@ -134,7 +127,6 @@
        _group.sublist = _group.sublist.filter(tab => tab.level === 0)
        if (_group.sublist.length > 0) {
          _tabActive[_group.uuid] = _group.sublist[0].uuid
          _tabgroups.push(_group)
        }
      })
@@ -185,10 +177,9 @@
        BID: param && param.BID ? param.BID : '',
        loadingview: false,
        config: config,
        tabActive: _tabActive,
        userConfig: userConfig,
        setting: config.setting,
        tabgroups: _tabgroups
        tabgroups: _tabgroups,
        shortcuts
      }, () => {
        this.loadmaindata()
        this.setShortcut()
@@ -207,8 +198,12 @@
  }
  setShortcut = () => {
    const { userConfig, config } = this.state
    if (!userConfig) return
    const { shortcuts } = this.state
    if (!shortcuts || shortcuts.length === 0) {
      document.onkeydown = () => {}
      return
    }
    document.onkeydown = (event) => {
      let e = event || window.event
@@ -223,45 +218,21 @@
        preKey = 'alt'
      }
      if (!preKey) return
      if (!preKey || !keyCode) return
      let triggerId = ''
      let _shortcut = `${preKey}+${keyCode}`
      Object.keys(userConfig).some(key => {
        if (key === this.props.MenuID || !userConfig[key].action) return false
      shortcuts.some(item => {
        if (item.$shortcut === _shortcut) {
          MKEmitter.emit('triggerBtnId', item.uuid)
        let _actions = userConfig[key].action
        Object.keys(_actions).some(btnkey => {
          let item = _actions[btnkey]
          if (Array.isArray(item.shortcut) && preKey === item.shortcut[0] && keyCode === item.shortcut[1]) {
            e.preventDefault()
            triggerId = btnkey
            let _groupId = ''
            let _ActiveTabId = ''
            config.tabgroups.forEach(group => {
              let _tab = group.sublist.filter(tab => tab.uuid === key)[0]
              if (!_tab) return
              _groupId = group.uuid
              _ActiveTabId = _tab.uuid
            })
            this.setState({
              tabActive: {...this.state.tabActive, [_groupId]: _ActiveTabId}
            }, () => {
              MKEmitter.emit('triggerBtnId', triggerId)
            })
          let element = item.parentId ? document.getElementById(item.parentId) : '' // 标签切换
          if (element && element.click) {
            element.click()
          }
            return true
          }
          return false
        })
        if (triggerId) return true
        return false
      })
    }
@@ -431,14 +402,12 @@
    if (selected) {
      let _tabgroups = []
      let _tabActive = {}
      config.tabgroups.forEach(group => {
        let _group = fromJS(group).toJS()
        _group.sublist = _group.sublist.filter(tab => (!tab.level && tab.level !== 0) || tab.level === _data.level)
        if (_group.sublist.length > 0) {
          _tabActive[_group.uuid] = _group.sublist[0].uuid
          _tabgroups.push(_group)
        }
      })
@@ -447,7 +416,6 @@
      this.handleTableId('mainTable', _data.key, _data)
      this.setState({
        tabgroups: _tabgroups,
        tabActive: _tabActive,
        expandedKeys: _expandedKeys,
        selectedKeys: [_data.key]
      })
@@ -467,12 +435,12 @@
      loadingview: true,
      viewlost: false,
      config: {},
      userConfig: null,
      setting: null,
      treedata: null,
      treeNodes: null,
      loading: false,
      BIDs: {},
      shortcuts: null,
      expandedKeys: [],
      selectedKeys: []
    }, () => {
@@ -492,158 +460,6 @@
        [type]: id,
        [type + 'data']: data
      }
    })
  }
  handleviewconfig = (e) => {
    e.stopPropagation()
    const { MenuNo } = this.props
    const { config } = this.state
    if (config && config.funcs && config.funcs.length > 0) {
      this.setState({
        treevisible: true
      })
    } else {
      let oInput = document.createElement('input')
      oInput.value = MenuNo || ''
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)
      message.success(this.state.dict['main.copy.success'])
    }
  }
  getTreeNode = (data) => {
    let _type = {
      view: '页面',
      btn: '按钮',
      tab: '标签'
    }
    return data.map(item => {
      let _title = _type[item.subtype]
      let _others = []
      _others.push(
        (item.menuNo ? item.menuNo + '(菜单参数)' : ''),
        (item.tableName ? item.tableName + '(表名) ' : ''),
        (item.innerFunc ? item.innerFunc + '(内部函数) ' : ''),
        (item.outerFunc ? item.outerFunc + '(外部函数)' : '')
      )
      _others = _others.filter(Boolean)
      _others = _others.join('、')
      if (item.label) {
        _title = _title + '(' + item.label + ')'
      }
      if (_others) {
        _title = _title + ': ' + _others
      }
      if (item.subfuncs && item.subfuncs.length > 0) {
        return (
          <TreeNode title={_title} key={item.uuid} dataRef={item} selectable={false}>
            {this.getTreeNode(item.subfuncs)}
          </TreeNode>
        )
      }
      return <TreeNode key={item.uuid} title={_title} isLeaf selectable={false} />
    })
  }
  controlCustomSetting = () => {
    this.setState({
      settingVisible: true,
      confirmLoading: false,
      revertLoading: false
    })
  }
  changeMenuParam = (param) => {
    this.setState({userParam: param})
  }
  settingRevert = () => {
    let param = {
      func: 's_TrdMenu_UserParam_del',
      MenuID: this.props.MenuID
    }
    this.setState({
      revertLoading: true
    })
    Api.getSystemConfig(param).then(result => {
      if (!result.status) {
        this.setState({
          revertLoading: false
        })
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
        return
      }
      this.setState({
        settingVisible: false,
        revertLoading: false
      }, () => {
        window.GLOB.CacheMap = new Map()
        this.reloadview()
      })
    })
  }
  settingSubmit = () => {
    const { userParam } = this.state
    let _LongParam = ''
    try {
      _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(userParam)))
    } catch (e) {
      notification.warning({
        top: 92,
        message: '编译错误',
        duration: 5
      })
      return
    }
    let easyCode = userParam[this.props.MenuID] ? userParam[this.props.MenuID].easyCode : ''
    let param = {
      func: 'sPC_TrdMenu_UserParam',
      MenuID: this.props.MenuID,
      EasyCode: easyCode || '',
      LongParam: _LongParam
    }
    this.setState({
      confirmLoading: true
    })
    Api.getSystemConfig(param).then(result => {
      if (!result.status) {
        this.setState({
          confirmLoading: false
        })
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
        return
      }
      this.setState({
        settingVisible: false,
        confirmLoading: false
      }, () => {
        window.GLOB.CacheMap = new Map()
        this.reloadview()
      })
    })
  }
@@ -730,7 +546,7 @@
  render() {
    const { menuType } = this.props
    const { debug, setting, loadingview, viewlost, config, userConfig, tabActive, tabgroups, treeNodes, treedata, expandedKeys, selectedKeys } = this.state
    const { setting, loadingview, viewlost, config, tabgroups, treeNodes, treedata, expandedKeys, selectedKeys, shortcuts } = this.state
    return (
      <div className="tree-page" id={this.state.ContainerId}>
@@ -767,11 +583,11 @@
          </Col>
          <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}})}>
              <Tabs key={group.uuid} >
                {group.sublist.map(_tab => {
                  return (
                    <TabPane tab={
                      <span>
                      <span id={_tab.uuid}>
                        {_tab.icon ? <Icon type={_tab.icon} /> : null}
                        {_tab.label}
                      </span>
@@ -781,7 +597,6 @@
                          Tab={_tab}
                          MenuID={_tab.linkTab}
                          mainSearch={null}
                          userConfig={userConfig ? userConfig[_tab.uuid] : null}
                          SupMenuID={this.props.MenuID}
                          ContainerId={this.state.ContainerId}
                          BID={this.state.BIDs[_tab.supMenu] || ''}
@@ -795,59 +610,8 @@
            )}
          </Col>
        </Row> : null}
        {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={'菜单结构树'}
          width={'650px'}
          maskClosable={false}
          visible={this.state.treevisible}
          onCancel={() => this.setState({treevisible: false})}
          footer={[
            <Button key="close" onClick={() => this.setState({treevisible: false})}>{this.state.dict['main.close']}</Button>
          ]}
          destroyOnClose
        >
          <div className="menu-header">
            <span>菜单名称:{this.props.MenuName}</span>
            <span>菜单参数:{<Paragraph copyable>{this.props.MenuNo}</Paragraph>}</span>
          </div>
          {this.state.treevisible ? <Tree defaultExpandAll showLine={true}>
            {this.getTreeNode(config.funcs)}
          </Tree> : null}
        </Modal>
        {/* 按钮使用系统存储过程时,验证信息模态框 */}
        <Modal
          wrapClassName="common-table-custom-modal"
          title={'自定义设置'}
          maskClosable={false}
          width={950}
          visible={this.state.settingVisible}
          onCancel={() => { this.setState({ settingVisible: false }) }}
          footer={[
            <Button key="revert" type="danger" loading={this.state.revertLoading} onClick={this.settingRevert}>{this.state.dict['main.revert.default']}</Button>,
            <Button key="cancel" onClick={() => { this.setState({ settingVisible: false }) }}>{this.state.dict['main.cancel']}</Button>,
            <Button key="confirm" type="primary" loading={this.state.confirmLoading} onClick={this.settingSubmit}>{this.state.dict['main.submit']}</Button>
          ]}
          destroyOnClose
        >
          {this.state.settingVisible ?
            <VerifyCard
              MenuID={this.props.MenuID}
              MenuName={this.props.MenuName}
              permAction={this.props.permAction}
              config={this.state.config}
              userConfig={this.state.userConfig}
              columns={[]}
              handleParam={this.changeMenuParam}
            /> : null
          }
        </Modal>
        {menuType !== 'HS' ? <PagemsgComponent menu={{MenuName: this.props.MenuName, MenuNo: this.props.MenuNo}} config={config} dict={this.state.dict} /> : null}
        {menuType !== 'HS' && shortcuts ? <SettingComponent config={config} dict={this.state.dict} shortcuts={shortcuts} permAction={this.props.permAction}/> : null}
        {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
      </div>
    )