2025-06-04

king

3 天以前 bf24b61a7170d8b026eb3234c6714fab3548f9f1

 src/tabviews/rolemanage/index.jsx

@@ -1,13 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Card, Col, Row, Icon, Menu, notification, Spin, Input, Tabs, Button, Tree, Empty } from 'antd'
import { Card, Col, Row, Menu, notification, Spin, Input, Tabs, Button, Tree, Empty, Select } from 'antd'
import { BankOutlined } from '@ant-design/icons'
import md5 from 'md5'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import './index.scss'

const { Search } = Input
@@ -19,15 +19,15 @@

export default class RoleManage extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string, // 菜单参数
    MenuID: PropTypes.string // 菜单Id
    MenuID: PropTypes.string  // 菜单Id
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    loading: true,
    loadingTree: false,
    loadingAppTree: false,
    roleList: null,
    filterRoleList: [],
    selectRoleId: '',
    mainMenus: null,
    menuTrees: null,
@@ -36,9 +36,17 @@
    selectMenuTrees: null,
    selectMenuOpenKeys: [],
    primarykey: '',
    tabKey: '',
    submitloading: false,
    initCheckKeys: null
    initCheckKeys: null,
    activeKey: 'manage',
    appTrees: null,
    appCheckedKeys: [],
    appOpenKeys: [],
    applist: [],
    selectApp: null,
    selectSubApp: null,
    selectAppTrees: null,
    selectAppOpenKeys: [],
  }

  /**
@@ -52,7 +60,8 @@

    if (result.status) {
      this.setState({
        roleList: result.data
        roleList: result.data,
        filterRoleList: result.data || []
      })
    } else {
      notification.warning({
@@ -63,12 +72,42 @@
    }
  }

  getAppList = () => {
    let param = {
      func: 's_get_kei'
    }

    Api.getSystemConfig(param).then(result => {
      if (result.status) {
        let applist = result.data.map(item => {
          item.sublist = item.data_detail || []
          item.sublist = item.sublist.map(cell => {
            cell.ID = cell.d_id
            return cell
          })

          return item
        })
        let selectApp = applist[0] || null

        this.setState({ applist, selectApp })
      } else {
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  /**
   * @description 获取一级菜单，用于构建结构树
   */
  getMainMenuList = async () => {
    let param = {
      func: 's_rolemenu_get_FstMenu'
      func: 's_rolemenu_get_FstMenu',
      version: 1
    }
    let result = await Api.getSystemConfig(param)

@@ -78,7 +117,7 @@
        loading: false,
        mainMenus: result.data.map(item => {
          return {
            title: item.MenuName,
            title: item.langname ? item.MenuName + '(' + item.langname + ')' : item.MenuName,
            key: item.MenuID,
            children: [],
            selected: true
@@ -103,12 +142,13 @@
   * @description 获取所有菜单节点，形成权限树
   */
  getAllMenuList = async () => {
    const { selectRoleId, mainMenus, tabKey } = this.state
    const { mainMenus } = this.state

    let param = {
      func: 's_rolemenu_get_FunMenu',
      RoleID: selectRoleId,
      SelectedType: tabKey
      RoleID: '',
      SelectedType: '',
      version: 1
    }

    let result = await Api.getSystemConfig(param)
@@ -122,9 +162,19 @@
      //     item.ParentID = item.TypeCharOne
      //   }
      // })
      // let map = new Map() // 去重

      // result.data = result.data.filter(item => {
      //   if (map.has(item.ParentID + item.MenuID)) return false

      //   map.set(item.ParentID + item.MenuID, true)
        
      //   return true
      // })

      let _tree = this.getTree(fromJS(mainMenus).toJS(), result.data)
      if (_tree[0]) {
        if (_tree[0].key === 'PC' && _tree[0].children) {
        if (_tree[0].key.indexOf('PC') > -1 && _tree[0].children) {
          // _openKeys = _tree[0].children.map(cell => cell.key)
          this.getOpenNode(_tree[0].children[0], _openKeys)
        } else {
@@ -136,6 +186,10 @@
        loadingTree: false,
        menuTrees: _tree,
        menuOpenKeys: _openKeys
      }, () => {
        if (this.state.selectRoleId) {
          this.getSelectMenuList()
        }
      })
    } else {
      this.setState({
@@ -153,61 +207,149 @@
   * @description 选择角色且存在权限树时，获取已分配结构
   */
  getSelectMenuList = async () => {
    const { selectRoleId, menuTrees, tabKey } = this.state
    if (!menuTrees) return
    const { selectRoleId, menuTrees, activeKey } = this.state
    if (!menuTrees || !selectRoleId || activeKey !== 'manage') return

    let param = {
      func: 's_rolemenu_get_Menulist',
      RoleID: selectRoleId
      RoleID: selectRoleId,
      version: 1
    }

    this.setState({
      loadingTree: true
    })

    let result = await Api.getSystemConfig(param)

    if (result.status) {
      let _openKeys = []

      if (tabKey === '') {
        let _initKeys = result.data.map(item => item.MenuID)
        _initKeys = Array.from(new Set(_initKeys))
      let _initKeys = result.data.map(item => item.MenuID)
      _initKeys = Array.from(new Set(_initKeys))

        selectMap = new Map()
        this.getCheckedKeys(fromJS(menuTrees).toJS(), _initKeys)
      selectMap = new Map()
      this.getCheckedKeys(fromJS(menuTrees).toJS(), _initKeys)

        if (menuTrees[0]) {
          if (menuTrees[0].key === 'PC' && menuTrees[0].children) {
            this.getOpenNode(menuTrees[0].children[0], _openKeys)
          } else {
            this.getOpenNode(menuTrees[0], _openKeys)
          }
      if (menuTrees[0]) {
        if (menuTrees[0].key.indexOf('PC') > -1 && menuTrees[0].children) {
          this.getOpenNode(menuTrees[0].children[0], _openKeys)
        } else {
          this.getOpenNode(menuTrees[0], _openKeys)
        }

        this.setState({
          loadingTree: false,
          initCheckKeys: _initKeys,
          checkedKeys: Array.from(selectMap.keys()),
          menuOpenKeys: _openKeys
        })
      } else {
        let Keys = result.data.map(item => item.MenuID)
        let _tree = this.getSelectTree(fromJS(menuTrees).toJS(), Keys)

        if (_tree[0]) {
          if (_tree[0].key === 'PC' && _tree[0].children) {
            this.getOpenNode(_tree[0].children[0], _openKeys)
          } else {
            this.getOpenNode(_tree[0], _openKeys)
          }
        }

        this.setState({
          loadingTree: false,
          selectMenuTrees: _tree,
          selectMenuOpenKeys: _openKeys
        })
      }

      let _openkeys = []
      let Keys = result.data.map(item => item.MenuID)
      let _tree = this.getSelectTree(fromJS(menuTrees).toJS(), Keys)

      if (_tree[0]) {
        if (_tree[0].key.indexOf('PC') > -1 && _tree[0].children) {
          this.getOpenNode(_tree[0].children[0], _openkeys)
        } else {
          this.getOpenNode(_tree[0], _openkeys)
        }
      }

      this.setState({
        loadingTree: false,
        initCheckKeys: _initKeys,
        checkedKeys: Array.from(selectMap.keys()),
        menuOpenKeys: _openKeys,
        selectMenuTrees: _tree,
        selectMenuOpenKeys: _openkeys
      })
    } else {
      this.setState({
        loadingTree: false
      })
      notification.warning({
        top: 92,
        message: result.message,
        duration: 5
      })
    }
  }

  /**
   * @description 选择角色且存在权限树时，获取已分配结构
   */
  getSelectAppNodeList = async () => {
    const { selectRoleId, selectSubApp, selectApp, appTrees, activeKey } = this.state

    if (!appTrees || !selectRoleId || activeKey !== 'app' || !selectSubApp || !selectApp) return

    let param = {
      func: 's_rolemenu_get_Menulist',
      RoleID: selectRoleId,
      TypeCharOne: selectApp.kei_no,
      typename: selectSubApp.typename,
      lang: selectSubApp.lang,
      version: 1
    }

    this.setState({
      loadingAppTree: true
    })

    let result = await Api.getSystemConfig(param)

    if (result.status) {
      let _initKeys = result.data.map(item => item.MenuID)
      _initKeys = Array.from(new Set(_initKeys))
      let _checkedKeys = []

      let getCheckedKeys = (parents) => {
        parents.forEach(item => {
          if (_initKeys.includes(item.key)) {
            if (item.children && item.children.length > 0) {
              getCheckedKeys(item.children)
            } else {
              _checkedKeys.push(item.key)
            }
          }
        })
      }

      getCheckedKeys(appTrees)

      let _openKeys = []
      let getOpenNode = (parentNode) => {
        if (parentNode && parentNode.children && parentNode.children.length > 0) {
          _openKeys.push(parentNode.key)
          parentNode.children.forEach(node => {
            getOpenNode(node)
          })
        }
      }
      getOpenNode(appTrees[0])

      let Keys = result.data.map(item => item.MenuID)
      let _tree = this.getSelectTree(fromJS(appTrees).toJS(), Keys)


      let _openkeys = []
      let _getOpenNode = (parentNode) => {
        if (parentNode && parentNode.children && parentNode.children.length > 0) {
          _openkeys.push(parentNode.key)
          parentNode.children.forEach(node => {
            _getOpenNode(node)
          })
        }
      }
      _getOpenNode(_tree[0])

      this.setState({
        loadingAppTree: false,
        appInitCheckKeys: _initKeys,
        appCheckedKeys: _checkedKeys,
        appOpenKeys: _openKeys,
        selectAppTrees: _tree,
        selectAppOpenKeys: _openkeys
      })
    } else {
      this.setState({
        loadingAppTree: false
      })
      notification.warning({
        top: 92,
@@ -232,7 +374,7 @@
  /**
   * @description 获取权限分配树
   */
  getTree = (parents, options) => {
  getTree = (parents, options, addSelf) => {
    parents.forEach(parent => {
      parent.children = []

@@ -243,7 +385,7 @@
            title: option.MenuName,
            key: option.MenuID,
            addSelf: option.OnlySelf === 'true',
            tabs: option.Tabs
            // tabs: option.Tabs
          })
        }
      })
@@ -251,13 +393,13 @@
      if (parent.children.length === 0) {
        parent.children = null
        // 针对标签，生成新的id，并保存关联关系（标签不唯一）
        if (parent.tabs) {
          let _uuid = Utils.getuuid()
          linkMap.set(_uuid, parent.key)
        // if (parent.tabs) {
        //   let _uuid = Utils.getuuid()
        //   linkMap.set(_uuid, parent.key)

          parent.originKey = parent.key
          parent.key = _uuid
        }
        //   parent.originKey = parent.key
        //   parent.key = _uuid
        // }
      } else {
        // 三级菜单创建子项
        if (parent.addSelf) {
@@ -268,20 +410,29 @@
          parent.children.unshift({
            title: parent.title + '(仅页面)',
            key: _uuid,
            isSubView: true
            // isSubView: true
          })
        } else if (addSelf) {
          let _uuid = Utils.getuuid()
          linkMap.set(_uuid, parent.key)
          parent.subKey = _uuid

          parent.children.unshift({
            title: parent.title + '(表格)',
            key: _uuid,
          })
        }

        // 针对标签，生成新的id，并保存关联关系（标签不唯一）
        if (parent.tabs) {
          let _uuid = Utils.getuuid()
          linkMap.set(_uuid, parent.key)
        // if (parent.tabs) {
        //   let _uuid = Utils.getuuid()
        //   linkMap.set(_uuid, parent.key)
          
          parent.originKey = parent.key
          parent.key = _uuid
        }
        //   parent.originKey = parent.key
        //   parent.key = _uuid
        // }

        parent.children = this.getTree(parent.children, options)
        parent.children = this.getTree(parent.children, options, parent.addSelf)
      }
    })
    return parents
@@ -318,8 +469,8 @@
          }
        }
        return true
      } else if (parent.isSubView) {
        return true
      // } else if (parent.isSubView) {
      //   return true
      }
      return false
    })
@@ -334,10 +485,10 @@
    if (selectRoleId === role.RoleID) return

    this.setState({
      selectRoleId: role.RoleID,
      loadingTree: true
      selectRoleId: role.RoleID
    }, () => {
      this.getSelectMenuList()
      this.getSelectAppNodeList()
    })
  }

@@ -369,23 +520,13 @@
  }

  /**
   * @description 已分配与未分配切换
   * @description 节点选择事件
   */
  changeTab = (key) => {
    const { selectRoleId } = this.state

  onAppCheck = (checkedKeys, info) => {
    this.setState({
      tabKey: key === 'selected' ? key : '',
      loadingTree: true
    }, () => {
      if (selectRoleId) {
        this.getSelectMenuList()
      } else {
        this.setState({
          selectMenuTrees: [],
          loadingTree: false
        })
      }
      appCheckedKeys: checkedKeys,
      appHalfCheckedKeys: info.halfCheckedKeys,
      appInitCheckKeys: null
    })
  }

@@ -429,36 +570,103 @@

    Api.getSystemConfig(param).then(result => {
      if (result.status) {
        if (!window.GLOB.mainSystemApi) {
          notification.success({
            top: 92,
            message: '保存成功',
            duration: 2
          })
          this.setState({
            submitloading: false,
            loadingTree: true
          }, () => {
            this.getSelectMenuList()
          })
        } else {
          Api.getLocalConfig(localParam).then(res => {
            if (res.status) {
              notification.success({
        notification.success({
          top: 92,
          message: '保存成功',
          duration: 2
        })
        this.setState({
          submitloading: false
        }, () => {
          this.getSelectMenuList()
          this.clearBackSqlCache()
        })
        if (window.GLOB.mainSystemApi) {
          Api.genericInterface(localParam).then(res => {
            if (!res.status) {
              notification.warning({
                top: 92,
                message: '保存成功',
                duration: 2
                message: res.message,
                duration: 5
              })
              this.setState({
                submitloading: false,
                loadingTree: true
              }, () => {
                this.getSelectMenuList()
              })
            } else {
              this.setState({
                submitloading: false
              })
            }
          })
        }
      } else {
        this.setState({
          submitloading: false
        })
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  clearBackSqlCache = () => {
    if (!window.backend) return

    Api.cacheInterface({}).then(res => {
      if (!res.status) {
        notification.warning({
          top: 92,
          message: res.message || '缓存清空失败！',
          duration: 5
        })
      }
    })
  }

  /**
   * @description 提交已选的权限
   */
  appRoleSubmit = () => {
    const { selectApp, selectSubApp, appCheckedKeys, appHalfCheckedKeys, selectRoleId, appInitCheckKeys } = this.state

    let _keys = []

    if (appInitCheckKeys) {
      _keys = appInitCheckKeys
    } else {
      _keys = appCheckedKeys.concat(appHalfCheckedKeys)
    }

    let param = {
      func: 's_rolemenu_sub',
      RoleID: selectRoleId,
      TypeCharOne: selectApp.kei_no,
      typename: selectSubApp.typename,
      lang: selectSubApp.lang,
      RoleMenu: _keys.map(key => {
        return {MenuID: key}
      })
    }

    let localParam = fromJS(param).toJS()
    localParam.func = 's_rolemenu_sub_local'

    this.setState({
      submitloading: true
    })

    Api.getSystemConfig(param).then(result => {
      if (result.status) {
        notification.success({
          top: 92,
          message: '保存成功',
          duration: 2
        })
        this.setState({
          submitloading: false
        }, () => {
          this.getSelectAppNodeList()
        })
        
        if (window.GLOB.mainSystemApi) {
          Api.genericInterface(localParam).then(res => {
            if (!res.status) {
              notification.warning({
                top: 92,
                message: res.message,
@@ -489,25 +697,168 @@
      loading: true,
      loadingTree: false,
      roleList: null,
      filterRoleList: [],
      selectRoleId: '',
      mainMenus: null,
      menuTrees: null,
      checkedKeys: [],
      appCheckedKeys: [],
      menuOpenKeys: [],
      selectMenuTrees: null,
      selectMenuOpenKeys: [],
      primarykey: '',
      tabKey: '',
      submitloading: false,
      initCheckKeys: null
      initCheckKeys: null,
      appInitCheckKeys: null,
      activeKey: 'manage',
      appTrees: null,
      appOpenKeys: [],
      applist: [],
      selectApp: null,
      selectSubApp: null,
      selectAppTrees: null,
      selectAppOpenKeys: []
    })
    this.getRoleList()
    this.getMainMenuList()
    this.getAppList()
  }

  filterRole = () => {
    const { primarykey, roleList } = this.state

    let _roleList  = []

    if (roleList && roleList.length > 0) {
      _roleList = roleList.filter(role => role.RoleName.toLowerCase().indexOf(primarykey.toLowerCase()) >= 0)
    }

    this.setState({filterRoleList: _roleList})
  }

  getTreeList = () => {
    const { selectApp, selectSubApp } = this.state
    let param = {
      func: 's_get_menus_roles_tree',
      typecharone: selectApp.kei_no,
      lang: selectSubApp.lang
    }

    param.upid = md5(window.GLOB.appkey + selectApp.kei_no + selectSubApp.typename + selectSubApp.lang)

    this.setState({loadingAppTree: true})

    Api.getSystemConfig(param).then(result => {
      if (result.status) {
        if (!result.data || result.data.length === 0) {
          this.setState({loadingAppTree: false, appTrees: [], appInitCheckKeys: null, appCheckedKeys: [], appOpenKeys: [], selectAppTrees: [], selectAppOpenKeys: []})
        } else {
          this.initTrees(result.data)
        }
      } else {
        this.setState({loadingAppTree: false, appTrees: [], appInitCheckKeys: null, appCheckedKeys: [], appOpenKeys: [], selectAppTrees: [], selectAppOpenKeys: []})
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  initTrees = (data) => {
    let trees = []
    let map = new Map()
    let _data = data.sort((a, b) => {
      return a.sort - b.sort
    })

    _data.forEach(menu => {
      if (menu.ParentID === 'top') {
        trees.push({
          key: menu.MenuID,
          title: menu.MenuName,
          children: []
        })
      } else {
        map.set(menu.MenuID, menu)
      }
    })

    let reset = (m) => {
      return m.map(n => {
        [...map.keys()].forEach(key => {
          if (map.get(key).ParentID === n.key) {
            let c = map.get(key)
            n.children.push({
              key: c.MenuID,
              title: c.MenuName,
              children: []
            })
            map.delete(key)
          }
        })
        if (n.children.length > 0) {
          n.children = reset(n.children)
        }
        return n
      })
    }

    trees = reset(trees)

    let expandedKeys = this.getExpandedKeys(trees, 0, [])

    this.setState({loadingAppTree: false, appInitCheckKeys: null, appCheckedKeys: [], selectAppTrees: [], selectAppOpenKeys: [], appTrees: trees, appOpenKeys: expandedKeys}, () => {
      this.getSelectAppNodeList()
    })
  }

  getExpandedKeys = (trees, i, keys) => {
    if (i >= 3 || !trees[0]) return keys

    keys.push(trees[0].key)

    i++

    if (trees[0].children && trees[0].children.length > 0) {
      keys = this.getExpandedKeys(trees[0].children, i, keys)
    }

    return keys
  }

  changeType = (val) => {
    this.setState({
      activeKey: val
    }, () => {
      this.getSelectMenuList()
      this.getSelectAppNodeList()
    })
  }

  changeApp = (val) => {
    const { applist } = this.state

    let app = applist.filter(item => item.ID === val)[0]

    this.setState({selectApp: app, selectSubApp: null})
  }
  
  changeSubApp = (val) => {
    const { selectApp } = this.state

    let subapp = selectApp.sublist.filter(item => item.ID === val)[0]

    this.setState({selectSubApp: subapp}, () => {
      this.getTreeList()
    })
  }

  UNSAFE_componentWillMount () {
    this.getRoleList()
    this.getMainMenuList()
    this.getAppList()
  }

  componentDidMount () {
@@ -529,66 +880,134 @@
  }

  render() {
    const { roleList, loading, loadingTree, primarykey, menuTrees, checkedKeys, menuOpenKeys, selectMenuTrees, tabKey, selectRoleId, selectMenuOpenKeys, submitloading } = this.state

    let _roleList  = []

    if (roleList && roleList.length > 0) {
      _roleList = roleList.filter(role => role.RoleName.toLowerCase().indexOf(primarykey.toLowerCase()) >= 0)
    }
    const { activeKey, filterRoleList, applist, selectApp, selectSubApp, loading, loadingTree, loadingAppTree, primarykey, menuTrees, appTrees, checkedKeys, appCheckedKeys, menuOpenKeys, selectMenuTrees, selectAppTrees, selectRoleId, selectMenuOpenKeys, selectAppOpenKeys, submitloading, appOpenKeys } = this.state

    return (
      <div className="rolemanage">
      <div className={'rolemanage' + (applist.length === 0 ? ' manager' : '')}>
        {loading && <Spin size="large" />}
        <Row gutter={16}>
          <Col span={5}>
            <Card
              className="role-list"
              title={
                <span className="role-title">
                  <Icon type="bank" />
                  <span className="title">{this.state.dict['main.role.title']}</span>
                  <Search placeholder="" onSearch={value => this.setState({primarykey: value})} />
                </span>
              }
              bordered={false}
            >
              <Menu
                onClick={this.handleClick}
                mode="inline"
              >
                {_roleList.map((role, index) =>
                  <Menu.Item key={index} onClick={() => this.changeRole(role)}>{role.RoleName}</Menu.Item>
                )}
              </Menu>
            </Card>
          </Col>
          <Col span={19}>
            <Tabs defaultActiveKey="all" tabBarExtraContent={!tabKey && selectRoleId ? <Button type="primary" loading={submitloading} onClick={this.roleSubmit}>提交</Button> : null} onChange={this.changeTab}>
              <TabPane tab="菜单列表" key="all">
                {!loadingTree && menuTrees && menuTrees.length > 0 ? <Tree
                  checkable
                  selectable={false}
                  defaultExpandedKeys={menuOpenKeys}
                  autoExpandParent={true}
                  onCheck={this.onCheck}
                  checkedKeys={checkedKeys}
        <Tabs activeKey={activeKey} type="card" onChange={this.changeType}>
          <TabPane tab="管理系统" key="manage">
            <Row gutter={16}>
              <Col span={5}>
                <Card
                  className="role-list"
                  title={
                    <span className="role-title">
                      <BankOutlined />
                      <span className="title">角色</span>
                      <Search placeholder="" value={primarykey} onChange={e => this.setState({primarykey: e.target.value})} onSearch={this.filterRole} />
                    </span>
                  }
                  bordered={false}
                >
                  {this.renderTreeNodes(menuTrees)}
                </Tree> : null}
                {!loadingTree && (!menuTrees || menuTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                {loadingTree ? <Spin className="load-tree" /> : null}
              </TabPane>
              <TabPane tab="已授权菜单" key="selected">
                {!loadingTree && selectMenuTrees && selectMenuTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectMenuOpenKeys}>
                  {this.renderTreeNodes(selectMenuTrees)}
                </DirectoryTree> : null}
                {!loadingTree && (!selectMenuTrees || selectMenuTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                {loadingTree ? <Spin className="load-tree" /> : null}
              </TabPane>
            </Tabs>
          </Col>
        </Row>
                  <Menu selectedKeys={[selectRoleId]} mode="inline">
                    {filterRoleList.map((role) =>
                      <Menu.Item key={role.RoleID} onClick={() => this.changeRole(role)}>{role.RoleName}</Menu.Item>
                    )}
                  </Menu>
                </Card>
              </Col>
              <Col span={19}>
                <Tabs defaultActiveKey="all">
                  <TabPane tab="权限" key="all">
                    {selectRoleId ? <Button className="submitBtn" type="primary" loading={submitloading} onClick={this.roleSubmit}>提交</Button> : null}
                    {!loadingTree && menuTrees && menuTrees.length > 0 ? <Tree
                      checkable
                      selectable={false}
                      defaultExpandedKeys={menuOpenKeys}
                      autoExpandParent={true}
                      onCheck={this.onCheck}
                      checkedKeys={checkedKeys}
                    >
                      {this.renderTreeNodes(menuTrees)}
                    </Tree> : null}
                    {!loadingTree && (!menuTrees || menuTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                    {loadingTree ? <Spin className="load-tree" /> : null}
                  </TabPane>
                  <TabPane tab="已授权" key="selected">
                    {!loadingTree && selectMenuTrees && selectMenuTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectMenuOpenKeys}>
                      {this.renderTreeNodes(selectMenuTrees)}
                    </DirectoryTree> : null}
                    {!loadingTree && (!selectMenuTrees || selectMenuTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                    {loadingTree ? <Spin className="load-tree" /> : null}
                  </TabPane>
                </Tabs>
              </Col>
            </Row>
          </TabPane>
          <TabPane tab="应用" key="app">
            <div className="app-select">
              <div className="mk-form-item">
                <label>应用:</label>
                <Select value={selectApp ? selectApp.ID : ''} onChange={this.changeApp}>
                  {applist.map(option =>
                    <Select.Option key={option.ID} value={option.ID}>{option.remark}</Select.Option>
                  )}
                </Select>
              </div>
              <div className="mk-form-item">
                <label>子应用:</label>
                <Select value={selectSubApp ? selectSubApp.ID : ''} onChange={this.changeSubApp}>
                  {selectApp && selectApp.sublist.map(option =>
                    <Select.Option key={option.ID} value={option.ID}>{`${option.typename}（${option.lang}）`}</Select.Option>
                  )}
                </Select>
              </div>
            </div>
            <Row gutter={16}>
              <Col span={5}>
                <Card
                  className="role-list"
                  title={
                    <span className="role-title">
                      <BankOutlined />
                      <span className="title">角色</span>
                      <Search placeholder="" value={primarykey} onChange={e => this.setState({primarykey: e.target.value})} onSearch={this.filterRole} />
                    </span>
                  }
                  bordered={false}
                >
                  <Menu selectedKeys={[selectRoleId]} mode="inline">
                    {filterRoleList.map((role) =>
                      <Menu.Item key={role.RoleID} onClick={() => this.changeRole(role)}>{role.RoleName}</Menu.Item>
                    )}
                  </Menu>
                </Card>
              </Col>
              <Col span={19}>
                <Tabs defaultActiveKey="all">
                  <TabPane tab="权限" key="all">
                    {selectSubApp && selectRoleId ? <Button className="submitBtn" type="primary" loading={submitloading} onClick={this.appRoleSubmit}>提交</Button> : null}
                    {selectSubApp ? <div>
                      {!loadingAppTree && appTrees && appTrees.length > 0 ? <Tree
                        checkable
                        selectable={false}
                        defaultExpandedKeys={appOpenKeys}
                        autoExpandParent={true}
                        onCheck={this.onAppCheck}
                        checkedKeys={appCheckedKeys}
                      >
                        {this.renderTreeNodes(appTrees)}
                      </Tree> : null}
                      {!loadingAppTree && (!appTrees || appTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                      {loadingAppTree ? <Spin className="load-tree" /> : null}
                    </div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'请选择子应用'} />}
                  </TabPane>
                  <TabPane tab="已授权" key="selected">
                    {selectSubApp ? <div>
                      {!loadingAppTree && selectAppTrees && selectAppTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectAppOpenKeys}>
                        {this.renderTreeNodes(selectAppTrees)}
                      </DirectoryTree> : null}
                      {!loadingAppTree && (!selectAppTrees || selectAppTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                      {loadingAppTree ? <Spin className="load-tree" /> : null}
                    </div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'请选择子应用'} />}
                  </TabPane>
                </Tabs>
              </Col>
            </Row>
          </TabPane>
        </Tabs>
        
      </div>
    )
  }