2020-05-29

king

2020-05-29 3b43ee5ead5f625d532150afceddcf1b481b823d

 src/tabviews/rolemanage/index.jsx

@@ -12,8 +12,8 @@
const { Search } = Input
const { TabPane } = Tabs
const { TreeNode, DirectoryTree } = Tree
let checkedKeysMap = null
let linkMap = null

let linkMap = new Map()
let selectMap = null

export default class RoleManage extends Component {
@@ -25,6 +25,7 @@
  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    loading: true,
    loadingTree: false,
    roleList: null,
    selectRoleId: '',
    mainMenus: null,
@@ -39,6 +40,9 @@
    initCheckKeys: null
  }

  /**
   * @description 获取角色列表
   */
  getRoleList = async () => {
    let param = {
      func: 's_rolemenu_get_list'
@@ -47,13 +51,9 @@

    if (result.status) {
      this.setState({
        roleList: result.data,
        loading: false
        roleList: result.data
      })
    } else {
      this.setState({
        loading: false
      })
      notification.warning({
        top: 92,
        message: result.message,
@@ -62,6 +62,9 @@
    }
  }

  /**
   * @description 获取一级菜单，用于构建结构树
   */
  getMainMenuList = async () => {
    let param = {
      func: 's_rolemenu_get_FstMenu'
@@ -70,6 +73,8 @@

    if (result.status) {
      this.setState({
        loadingTree: true,
        loading: false,
        mainMenus: result.data.map(item => {
          return {
            title: item.MenuName,
@@ -82,6 +87,9 @@
        this.getAllMenuList()
      })
    } else {
      this.setState({
        loading: false
      })
      notification.warning({
        top: 92,
        message: result.message,
@@ -90,6 +98,9 @@
    }
  }

  /**
   * @description 获取所有菜单节点，形成权限树
   */
  getAllMenuList = async () => {
    const { selectRoleId, mainMenus, tabKey } = this.state

@@ -102,54 +113,22 @@
    let result = await Api.getSystemConfig(param)

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

      let _state = {
        loading: false
      // MenuID（菜单Id）、MenuName（菜单名称）、OnlySelf（值为true，表示三级菜单，增加-仅页面）、Type（菜单级别）
      // ParentID（父级Id）、Selected（是否选中-已失效）、Tabs（ 标签类型）、TypeCharOne 菜单类型PC或其他
      let _tree = this.getTree(fromJS(mainMenus).toJS(), result.data)
      if (_tree[0]) {
        this.getOpenNode(_tree[0], _openKeys)
      }

      if (tabKey === '') {
        let _initCheckKeys = [] // 初始选中的菜单id
        checkedKeysMap = new Map()
        linkMap = new Map()
        selectMap = new Map()

        result.data.forEach(item => {
          if (item.Selected !== 'true') return

          checkedKeysMap.set(item.MenuID, true)
          _initCheckKeys.push(item.MenuID)
      this.setState({
        loadingTree: false,
        menuTrees: _tree,
        menuOpenKeys: _openKeys
        })

        _initCheckKeys = Array.from(new Set(_initCheckKeys))

        _tree = this.getTree(JSON.parse(JSON.stringify(mainMenus)), result.data)

        if (_tree[0]) {
          this.getOpenNode(_tree[0], _openKeys)
        }

        _state.menuTrees = _tree
        _state.initCheckKeys = _initCheckKeys
        _state.checkedKeys = Array.from(checkedKeysMap.keys())
        _state.menuOpenKeys = _openKeys
      } else {
        _tree = this.getSelectTree(JSON.parse(JSON.stringify(mainMenus)), result.data)
        _tree = _tree.filter(node => node.children)

        if (_tree[0]) {
          this.getOpenNode(_tree[0], _openKeys)
        }

        _state.selectMenuTrees = _tree
        _state.selectMenuOpenKeys = _openKeys
      }

      this.setState(_state)
    } else {
      this.setState({
        loading: false
        loadingTree: false
      })
      notification.warning({
        top: 92,
@@ -159,6 +138,69 @@
    }
  }

  /**
   * @description 选择角色且存在权限树时，获取已分配结构
   */
  getSelectMenuList = async () => {
    const { selectRoleId, menuTrees, tabKey } = this.state
    if (!menuTrees) return

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

    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))

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

        if (menuTrees[0]) {
          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]) {
          this.getOpenNode(_tree[0], _openKeys)
        }

        this.setState({
          loadingTree: false,
          selectMenuTrees: _tree,
          selectMenuOpenKeys: _openKeys
        })
      }
    } else {
      this.setState({
        loadingTree: false
      })
      notification.warning({
        top: 92,
        message: result.message,
        duration: 5
      })
    }
  }

  /**
   * @description 获取展开节点
   */
  getOpenNode = (parentNode, keys) => {
    if (parentNode.children) {
      keys.push(parentNode.key)
@@ -168,100 +210,105 @@
    }
  }

  /**
   * @description 获取权限分配树
   */
  getTree = (parents, options) => {
    parents.forEach(parent => {
      parent.children = []

      // 添加菜单的子元素
      options.forEach(option => {
        if (option.ParentID === parent.key) {
          parent.children.push({
            title: option.MenuName,
            key: option.MenuID,
            selected: parent.selected && option.Selected === 'true',
            addSelf: option.OnlySelf === 'true',
            tabs: option.Tabs
          })
        }
      })
      

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

          if (parent.selected) {
            checkedKeysMap.set(_uuid, true)
            checkedKeysMap.delete(parent.key)

            selectMap.set(_uuid, parent.key)
          }

          parent.originKey = parent.key
          parent.key = _uuid
        }
      } else {
        if (parent.selected) {
          checkedKeysMap.delete(parent.key)
        }
        // 三级菜单创建子项
        if (parent.addSelf) {
          let _uuid = Utils.getuuid()
          linkMap.set(_uuid, parent.key)

          if (parent.selected) {
            checkedKeysMap.set(_uuid, true)
          }
          parent.subKey = _uuid

          parent.children.unshift({
            title: parent.title + '(仅页面)',
            key: _uuid,
            isSubView: true
          })
        }

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

          if (parent.selected) {
            selectMap.set(_uuid, parent.key)
          }

          parent.originKey = parent.key
          parent.key = _uuid
        }

        parent.children = this.getTree(parent.children, options)
      }
    })

    return parents
  }

  getSelectTree = (parents, options) => {
  /**
   * @description 获取已选择的节点
   */
  getCheckedKeys = (parents, initKeys) => {
    parents.forEach(parent => {
      parent.children = []

      options.forEach(option => {
        if (option.ParentID === parent.key) {
          parent.children.push({
            title: option.MenuName,
            key: option.MenuID,
            tabs: option.Tabs
          })
      if ((parent.originKey && initKeys.indexOf(parent.originKey) > -1) || initKeys.indexOf(parent.key) > -1) {
        if (parent.children) {
          if (parent.subKey) {
            selectMap.set(parent.subKey, true)
          }
          this.getCheckedKeys(parent.children, initKeys)
        } else {
          selectMap.set(parent.key, true)
        }
        }
      })
  }
      

      parent.key = Utils.getuuid()
  /**
   * @description 生成已分配权限的结构树
   */
  getSelectTree = (parents, options) => {
    return parents.filter(parent => {
      if ((parent.originKey && options.indexOf(parent.originKey) > -1) || options.indexOf(parent.key) > -1) {
        if (parent.children) {
          parent.children = this.getSelectTree(parent.children, options)
      if (parent.children.length === 0) {
        parent.children = null
      } else {
        parent.children = this.getSelectTree(parent.children, options)
      }
        }
        return true
      } else if (parent.isSubView) {
        return true
      }
      return false
    })

    return parents
  }

  /**
   * @description 角色切换
   */
  changeRole = (role) => {
    const { selectRoleId } = this.state

@@ -269,16 +316,15 @@

    this.setState({
      selectRoleId: role.RoleID,
      menuTrees: null,
      checkedKeys: [],
      menuOpenKeys: [],
      selectMenuTrees: null,
      selectMenuOpenKeys: []
      loadingTree: true
    }, () => {
      this.getAllMenuList()
      this.getSelectMenuList()
    })
  }

  /**
   * @description 获取树节点
   */
  renderTreeNodes = (data) => {
    return data.map(item => {
      if (item.children) {
@@ -292,6 +338,9 @@
    })
  }

  /**
   * @description 节点选择事件
   */
  onCheck = (checkedKeys, info) => {
    this.setState({
      checkedKeys: checkedKeys,
@@ -300,18 +349,30 @@
    })
  }

  /**
   * @description 已分配与未分配切换
   */
  changeTab = (key) => {
    const { menuTrees, selectMenuTrees } = this.state
    const { selectRoleId } = this.state

    this.setState({
      tabKey: key === 'selected' ? key : ''
      tabKey: key === 'selected' ? key : '',
      loadingTree: true
    }, () => {
      if ((key === 'selected' && !selectMenuTrees) || (key === 'all' && !menuTrees)) {
        this.getAllMenuList()
      if (selectRoleId) {
        this.getSelectMenuList()
      } else {
        this.setState({
          selectMenuTrees: [],
          loadingTree: false
        })
      }
    })
  }

  /**
   * @description 提交已选的权限
   */
  roleSubmit = async () => {
    const { checkedKeys, halfCheckedKeys, selectRoleId, initCheckKeys } = this.state

@@ -328,25 +389,13 @@
          _keys.push(key)
        }
      })
      _cKeys = new Map(_cKeys.map(key => [key, true]))
      _keys = new Map(_keys.map(key => [key, true]))

      Array.from(selectMap.keys()).forEach(key => {
        if (!_cKeys.has(key)) {
          _keys.delete(selectMap.get(key))
      _keys = Array.from(new Set(_keys))
        }
      })

      _keys = Array.from(_keys.keys())
    }
    
    // let _LText = _keys.map(key => `select '${key}' as MenuID`)
    // _LText = _LText.join(' union all ')

    let param = {
      func: 's_rolemenu_sub',
      RoleID: selectRoleId,
      // LText: Utils.formatOptions(_LText)
      RoleMenu: _keys.map(key => {
        return {MenuID: key}
      })
@@ -366,22 +415,18 @@
      })
      this.setState({
        submitloading: false,
        menuTrees: null,
        checkedKeys: [],
        menuOpenKeys: [],
        selectMenuTrees: null,
        selectMenuOpenKeys: []
        loadingTree: true
      }, () => {
        this.getAllMenuList()
        this.getSelectMenuList()
      })
    } else {
      this.setState({
        submitloading: false
      })
      notification.warning({
        top: 92,
        message: result.message,
        duration: 5
      })
      this.setState({
        submitloading: false
      })
    }
  }
@@ -405,7 +450,7 @@
  }

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

    let _roleList  = []

@@ -442,7 +487,7 @@
          <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">
                {menuTrees && menuTrees.length > 0 ? <Tree
                {!loadingTree && menuTrees && menuTrees.length > 0 ? <Tree
                  checkable
                  selectable={false}
                  defaultExpandedKeys={menuOpenKeys}
@@ -452,15 +497,15 @@
                >
                  {this.renderTreeNodes(menuTrees)}
                </Tree> : null}
                {menuTrees && menuTrees.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                {!loading && !menuTrees ? <Spin className="load-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">
                {selectMenuTrees && selectMenuTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectMenuOpenKeys}>
                {!loadingTree && selectMenuTrees && selectMenuTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectMenuOpenKeys}>
                  {this.renderTreeNodes(selectMenuTrees)}
                </DirectoryTree> : null}
                {selectMenuTrees && selectMenuTrees.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                {!loading && !selectMenuTrees ? <Spin className="load-tree" /> : null}
                {!loadingTree && (!selectMenuTrees || selectMenuTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
                {loadingTree ? <Spin className="load-tree" /> : null}
              </TabPane>
            </Tabs>
          </Col>