2020-03-12

king

2020-03-12 1dfd49b103e721f9bb63fd4d472b6fcc225d94a1

 src/tabviews/rolemanage/index.jsx

@@ -1,14 +1,18 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Card, Col, Row, Icon, Menu, notification, Spin, Input } from 'antd'
import { Card, Col, Row, Icon, Menu, notification, Spin, Input, Tabs, Button, Tree } from 'antd'

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

const { Search } = Input
const { TabPane } = Tabs
const { TreeNode, DirectoryTree } = Tree
let _checkedKeys = null

export default class RoleManage extends Component {
  static propTpyes = {
@@ -18,9 +22,19 @@

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    loadingview: true,
    loading: true,
    roleList: null,
    primarykey: ''
    selectRoleId: '',
    mainMenus: null,
    menuTrees: null,
    checkedKeys: [],
    menuOpenKeys: [],
    selectMenuTrees: null,
    selectMenuOpenKeys: [],
    primarykey: '',
    tabKey: '',
    submitloading: false,
    initCheckKeys: null
  }

  getRoleList = async () => {
@@ -31,11 +45,12 @@

    if (result.status) {
      this.setState({
        roleList: result.data
        roleList: result.data,
        loading: false
      })
    } else {
      this.setState({
        loadingview: false
        loading: false
      })
      notification.warning({
        top: 92,
@@ -45,17 +60,103 @@
    }
  }

  getMenuList = async () => {
  getMainMenuList = async () => {
    let param = {
      func: 's_rolemenu_get_FstMenu'
    }
    let result = await Api.getSystemConfig(param)

    if (result.status) {
      
      this.setState({
        mainMenus: result.data.map(item => {
          return {
            title: item.MenuName,
            key: item.MenuID,
            children: []
          }
        })
      }, () => {
        this.getAllMenuList()
      })
    } else {
      notification.warning({
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }

  getAllMenuList = async () => {
    const { selectRoleId, mainMenus, tabKey } = this.state

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

    let result = await Api.getSystemConfig(param)

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

      let _state = {
        loading: false
      }

      if (tabKey === '') {
        let _mainMenuKeys = mainMenus.map(menu => menu.key)

        _checkedKeys = []
        let _checkMainKeys = [] // 选中的一级菜单，需判断是否含有子菜单
        let _initCheckKeys = [] // 初始选中的菜单id
        result.data.forEach(item => {
          if (item.Selected !== 'true') return

          if (!_mainMenuKeys.includes(item.MenuID)) {
            _checkedKeys.push(item.MenuID)
          } else {
            _checkMainKeys.push(item.MenuID)
          }
          _initCheckKeys.push(item.MenuID)
        })

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

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

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

        _tree.forEach(item => {
          if (_checkMainKeys.includes(item.key) && !item.children) {
            _checkedKeys.push(item.key)
          }
        })

        _state.menuTrees = _tree
        _state.initCheckKeys = _initCheckKeys
        _state.checkedKeys = _checkedKeys
        _state.menuOpenKeys = _openKeys
      } else {
        _tree = this.getTree(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({
        loadingview: false
        loading: false
      })
      notification.warning({
        top: 92,
@@ -65,13 +166,146 @@
    }
  }

  changeRole = () => {
  getOpenNode = (parentNode, keys) => {
    if (parentNode.children) {
      keys.push(parentNode.key)
      parentNode.children.forEach(node => {
        this.getOpenNode(node, keys)
      })
    }
  }

  getTree = (parents, options) => {
    parents.forEach(parent => {
      parent.children = []

      options.forEach((option, index) => {
        if (option.ParentID === parent.key) {
          parent.children.push({
            title: option.MenuName,
            key: option.MenuID,
            selected: option.Selected === 'true'
          })
        }
      })
      

      if (parent.children.length === 0) {
        parent.children = null
      } else {
        if (_checkedKeys && parent.selected) {
          _checkedKeys = _checkedKeys.filter(key => key !== parent.key)
        }
        parent.children = this.getTree(parent.children, options)
      }
    })

    return parents
  }

  changeRole = (role) => {
    const { selectRoleId } = this.state

    if (selectRoleId === role.RoleID) return

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

  renderTreeNodes = (data) => {
    return data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        )
      }
      return <TreeNode key={item.key} showIcon={true} {...item} isLeaf />
    })
  }

  onCheck = (checkedKeys, info) => {
    console.log(checkedKeys)
    this.setState({
      checkedKeys: checkedKeys,
      halfCheckedKeys: info.halfCheckedKeys,
      initCheckKeys: null
    })
  }

  changeTab = (key) => {
    const { menuTrees, selectMenuTrees } = this.state

    this.setState({
      tabKey: key === 'selected' ? key : ''
    }, () => {
      if ((key === 'selected' && !selectMenuTrees) || (key === 'all' && !menuTrees)) {
        this.getAllMenuList()
      }
    })
  }

  roleSubmit = async () => {
    const { checkedKeys, halfCheckedKeys, selectRoleId, initCheckKeys } = this.state

    let _keys = []
    
    if (initCheckKeys) {
      _keys = initCheckKeys
    } else {
      _keys = checkedKeys.concat(halfCheckedKeys)
    }
    
    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)
    }

    this.setState({
      submitloading: true
    })

    let result = await Api.getSystemConfig(param)

    if (result.status) {
      notification.success({
        top: 92,
        message: '保存成功',
        duration: 2
      })
      this.setState({
        submitloading: false,
        selectMenuTrees: null,
        selectMenuOpenKeys: []
      })
    } else {
      notification.warning({
        top: 92,
        message: result.message,
        duration: 10
      })
      this.setState({
        submitloading: false
      })
    }
  }

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

  shouldComponentUpdate (nextProps, nextState) {
@@ -79,7 +313,7 @@
  }

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

    let _roleList  = []

@@ -89,9 +323,9 @@

    return (
      <div className="rolemanage">
        {loadingview && <Spin size="large" />}
        {loading && <Spin size="large" />}
        <Row gutter={16}>
          <Col span={6}>
          <Col span={5}>
            <Card
              className="role-list"
              title={
@@ -113,10 +347,30 @@
              </Menu>
            </Card>
          </Col>
          <Col span={18}>
            <Card title="Card title" bordered={false}>
              Card content
            </Card>
          <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
                  checkable
                  selectable={false}
                  defaultExpandedKeys={menuOpenKeys}
                  autoExpandParent={true}
                  onCheck={this.onCheck}
                  checkedKeys={checkedKeys}
                >
                  {this.renderTreeNodes(menuTrees)}
                </Tree> : null}
                {menuTrees && menuTrees.length === 0 ? <p className="nodata">未查询到菜单列表</p> : null}
                {!loading && !menuTrees ? <Spin className="load-tree" /> : null}
              </TabPane>
              <TabPane tab="已授权菜单" key="selected">
                {selectMenuTrees && selectMenuTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectMenuOpenKeys}>
                  {this.renderTreeNodes(selectMenuTrees)}
                </DirectoryTree> : null}
                {selectMenuTrees && selectMenuTrees.length === 0 ? <p className="nodata">未查询到已授权菜单</p> : null}
                {!loading && !selectMenuTrees ? <Spin className="load-tree" /> : null}
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </div>