2020-06-03

king

2020-06-03 d3172b799eccdf7fa69050a0f2d596309bd78059

 src/tabviews/treepage/index.jsx

@@ -53,6 +53,8 @@
    settingVisible: false,// 自定义设置模态框
    triggerBtn: null,     // 点击表格中或快捷键触发的按钮
    tabActive: null,      // 标签页展开控制
    expandedKeys: [],     // 展开的树节点
    selectedKeys: []      // 选中的树节点
  }

  /**
@@ -110,9 +112,13 @@

      // 权限过滤
      config.tabgroups.forEach(group => {
        group.sublist = group.sublist.filter(tab => permAction[tab.linkTab])
        group.sublist = group.sublist.filter(tab => {
          if (tab.supMenu === 'mainTable') {
            tab.isTreeNode = true
          }
          return permAction[tab.linkTab]}
        )
      })
      config.tabgroups = config.tabgroups.filter(group => group.sublist.length > 0)

      if (_curUserConfig) {
        config.setting = {...config.setting, ..._curUserConfig.setting}
@@ -236,7 +242,7 @@
   * @description 主表数据加载
   */ 
  async loadmaindata () {
    const { setting, BIDs } = this.state
    const { setting, searchKey } = this.state
    let param = ''

    this.setState({
@@ -247,12 +253,6 @@
      param = this.getCustomParam()
    } else {
      param = this.getDefaultParam()
    }

    this.handleTableId('mainTable', '', '')

    if (!param) { // 未获取参数时，不发请求
      return
    }

    let result = await Api.genericInterface(param)
@@ -281,15 +281,19 @@
        }
      })
      let _treedata = this.getTree(parentNodes, _options)
      
      let _treeNodes = []

      if (!searchKey) {
        _treeNodes = fromJS(_treedata).toJS()
      } else {
        _treeNodes = this.getFilterTree(fromJS(_treedata).toJS(), searchKey.toLowerCase())
      }

      this.setState({
        treedata: _treedata,
        treeNodes: fromJS(_treedata).toJS(),
        loading: false,
        BIDs: {
          ...BIDs,
          mainTable: ''
        }
        treeNodes: _treeNodes,
        loading: false
      })
    } else {
      this.setState({
@@ -338,7 +342,7 @@
    return nodes.map(item => {
      if (item.children) {
        return (
          <TreeNode icon={<Icon type="folder-open" />} title={item.title} key={item.key} dataRef={item}>
          <TreeNode icon={<span><Icon type="folder-open" /><Icon type="folder" /></span>} title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        )
@@ -347,35 +351,86 @@
    })
  }

  selectTreeNode = (selectedKeys, {selected, node}) => {
    const { config } = this.state
  treeFilter = (value) => {
    const { treedata } = this.state

    let selectId = selectedKeys[0]
    let _data = fromJS(node.props.dataRef).toJS()
    delete _data.children
    let _treeNodes = []

    let _tabgroups = []
    let _tabActive = {}

    config.tabgroups.forEach(group => {
      let _group = fromJS(group).toJS()
      _group.sublist = _group.sublist.filter(tab => !tab.level || (selected && tab.level === _data.level))

      if (_group.sublist.length > 0) {
        _tabActive[_group.uuid] = _group.sublist[0].uuid
        _tabgroups.push(_group)
      }
    })
    if (!value) {
      _treeNodes = fromJS(treedata).toJS()
    } else {
      _treeNodes = this.getFilterTree(fromJS(treedata).toJS(), value.toLowerCase())
    }

    this.setState({
      tabgroups: _tabgroups,
      tabActive: _tabActive
      searchKey: value,
      treeNodes: _treeNodes
    })
  }

  /**
   * @description 获取结构树信息
   */
  getFilterTree = (parents, searchKey) => {
    return parents.filter(node => {
      if (!node.children) {
        return (node.title.toLowerCase().indexOf(searchKey) >= 0 || node.key.toLowerCase().indexOf(searchKey) >= 0)
      } else {
        if (node.title.toLowerCase().indexOf(searchKey) >= 0 || node.key.toLowerCase().indexOf(searchKey) >= 0) {
          return true
        }
        
        node.children = this.getFilterTree(node.children, searchKey)
        if (node.children.length === 0) {
          return false
        } else {
          return true
        }
      }
    })
  }

  selectTreeNode = (selectedKeys, {selected, node}) => {
    const { config } = this.state
    let _expandedKeys = fromJS(this.state.expandedKeys).toJS()
    let _data = fromJS(node.props.dataRef).toJS()

    if (_expandedKeys.indexOf(_data.key) >= 0) {
      _expandedKeys = _expandedKeys.filter(key => key !== _data.key)
    } else {
      if (_data.children) {
        _expandedKeys.push(_data.key)
        _expandedKeys = Array.from(new Set(_expandedKeys))
      }
    }

    if (selected) {
      this.handleTableId('mainTable', selectId, _data)
      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)
        }
      })

      delete _data.children
      this.handleTableId('mainTable', _data.key, _data)
      this.setState({
        tabgroups: _tabgroups,
        tabActive: _tabActive,
        expandedKeys: _expandedKeys,
        selectedKeys: [_data.key]
      })
    } else {
      this.handleTableId('mainTable', '', '')
      this.setState({
        expandedKeys: _expandedKeys,
        selectedKeys: [_data.key]
      })
    }
  }

@@ -481,28 +536,17 @@
    this.setState({
      loadingview: true,
      viewlost: false,
      lostmsg: '',
      config: {},
      userConfig: null,
      userParam: null,
      setting: null,
      treedata: null,
      treeNodes: null,
      loading: false,
      BIDs: {},
      expandedKeys: [],
      selectedKeys: []
    }, () => {
      this.loadconfig()
    })
  }

  /**
   * @description 表格刷新
   */
  reloadtable = () => {
    this.setState({
      pageIndex: 1
    }, () => {
      this.loadmaindata()
    })
  }

@@ -511,9 +555,9 @@
   */
  handleMainTable = (type, tab) => {
    if (type === 'maingrid' && tab.supMenu === 'mainTable') {
      this.reloadtable()
      this.loadmaindata()
    } else if (type === 'mainline' && tab.supMenu === 'mainTable') {
      this.reloadtable()
      this.loadmaindata()
    } else if ((type === 'maingrid' || type === 'mainline') && tab.supMenu) {
      this.setState({
        refreshtabs: [type, tab.supMenu]
@@ -733,8 +777,37 @@
    document.onkeydown = () => {}
  }

  changeExpandedKeys = (expandedKeys) => {
    this.setState({
      expandedKeys: expandedKeys
    })
  }

  // 右键展开节点下的全部分支
  changeExpandedAllKeys = ({event, node}) => {
    const { expandedKeys } = this.state
    let _node = node.props.dataRef
    event.stopPropagation()

    let keys = []
    this.getExpandKeys(_node, keys)

    this.setState({
      expandedKeys: Array.from(new Set([...keys, ...expandedKeys])),
    })
  }

  getExpandKeys = (node, keys) => {
    if (node.children) {
      keys.push(node.key)
      node.children.forEach(_node => {
        this.getExpandKeys(_node, keys)
      })
    }
  }

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

    return (
      <div className="tree-page" id={this.state.ContainerId}>
@@ -746,7 +819,7 @@
              title={
                <span className="tree-title">
                  <span className="title">{setting.title}</span>
                  {setting.searchable !== 'false' ? <Search onSearch={this.treeFilter} /> : null}
                  {setting.searchable !== 'false' ? <Search allowClear onSearch={this.treeFilter} /> : null}
                </span>
              }
              bordered={false}
@@ -755,6 +828,10 @@
                <Tree
                  blockNode
                  onSelect={this.selectTreeNode}
                  expandedKeys={expandedKeys}
                  selectedKeys={selectedKeys}
                  onRightClick={this.changeExpandedAllKeys}
                  onExpand={this.changeExpandedKeys}
                  showIcon={setting.showIcon === 'true'}
                  showLine={setting.showLine === 'true'}
                >