2021-07-23

king

2021-07-23 c7414c3cc93649479119d51b230c4b8e36884ca7

 src/views/rolemanage/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
// import { fromJS } from 'immutable'
import { Spin, notification, Button, Table, Modal, ConfigProvider, Tree } from 'antd'
import { fromJS } from 'immutable'
import { Spin, notification, Button, Table, Modal, ConfigProvider, Tree, Input, Empty } from 'antd'
import moment from 'moment'
// import md5 from 'md5'
import enUS from 'antd/es/locale/en_US'
@@ -14,7 +14,7 @@
const { confirm } = Modal
const { TreeNode } = Tree
// const { Paragraph } = Typography
// const { Search } = Input
const { Search } = Input

const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const Header = asyncComponent(() => import('./header'))
@@ -47,109 +47,14 @@
    confirmLoading: false,
    targetKeys: [],
    trees: [],
    expandedKeys: []
    expandedKeys: [],
    searchkey: ''
  }

  UNSAFE_componentWillMount() {
    let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))

    let expandedKeys = []
    const data = [
      {
        key: Utils.getuuid(),
        title: '导航栏',
        children: [
          {
            key: Utils.getuuid(),
            title: '采购',
            children: [
              {
                key: Utils.getuuid(),
                title: '采购业务',
                children: [
                  {
                    key: Utils.getuuid(),
                    title: '采购单管理'
                  },
                  {
                    key: Utils.getuuid(),
                    title: '委外采购'
                  }
                ]
              },
              {
                key: Utils.getuuid(),
                title: '主数据'
              }
            ]
          },
          {
            key: Utils.getuuid(),
            title: '库存',
            children: [
              {
                key: Utils.getuuid(),
                title: '库存管理',
                children: [
                  {
                    key: Utils.getuuid(),
                    title: '收货管理'
                  },
                  {
                    key: Utils.getuuid(),
                    title: '销退收货'
                  },
                  {
                    key: Utils.getuuid(),
                    title: '发货通知单'
                  }
                ]
              }
            ]
          },
          {
            key: Utils.getuuid(),
            title: '报表',
            children: [
              {
                key: Utils.getuuid(),
                title: '报表查询',
                children: [
                  {
                    key: Utils.getuuid(),
                    title: '采购查询'
                  },
                  {
                    key: Utils.getuuid(),
                    title: '库存查询'
                  },
                  {
                    key: Utils.getuuid(),
                    title: '出库查询'
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        key: Utils.getuuid(),
        title: '首页001'
      },
      {
        key: Utils.getuuid(),
        title: '供应商'
      }
    ]

    if (data[0]) {
      expandedKeys.push(data[0].key)
      if (data[0].children && data[0].children[0]) {
        expandedKeys.push(data[0].children[0].key)
      }
    }
    this.setState({app: param, trees: data, expandedKeys}, () => {
    this.setState({app: param}, () => {
      this.getMenuList()
      this.getThawMenulist()
    })
@@ -185,7 +90,25 @@
      if (result.status) {
        this.setState({
          loading: false,
          menulist: result.menus
          menulist: result.menus.map(item => {
            item.nodes = ''
            item.type = 'view'
            if (item.menus_rolelist) {
              try {
                let pageParam = JSON.parse(window.decodeURIComponent(window.atob(item.menus_rolelist)))
                item.nodes = pageParam
                if (pageParam.type === 'navbar') {
                  item.type = 'navbar'
                }
              } catch {
                item.nodes = ''
              }
            }
            
            return item
          })
        }, () => {
          this.initMenutree()
        })
      } else {
        this.setState({
@@ -197,6 +120,63 @@
          duration: 5
        })
      }
    })
  }

  initMenutree = () => {
    const { menulist } = this.state

    let navbars = []
    let map = new Map()

    fromJS(menulist).toJS().forEach(menu => {
      if (!menu.nodes) return
      
      if (menu.type === 'navbar') {
        navbars.push(menu.nodes)
      } else {
        map.set(menu.MenuID, menu.nodes)
      }
    })

    let data = []

    if (navbars.length === 0) {
      data = [...map.values()]
    } else {
      let reset = (m) => {
        return m.map(n => {
          if (n.children && n.children.length > 0) {
            n.children = reset(n.children)
          } else if (map.has(n.key)) {
            let p = map.get(n.key)
            if (p.children && p.children.length > 0) {
              n.children = reset(p.children)
            }
            map.delete(n.key)
          }
          return n
        })
      }

      data = reset(navbars)
      data = [...data, ...map.values()]
    }

    let expandedKeys = []

    if (data[0]) {
      expandedKeys.push(data[0].key)
      if (data[0].children && data[0].children[0]) {
        expandedKeys.push(data[0].children[0].key)
        if (data[0].children[0].children && data[0].children[0].children[0]) {
          expandedKeys.push(data[0].children[0].children[0].key)
        }
      }
    }

    this.setState({trees: [], expandedKeys: []}, () => {
      this.setState({trees: data, expandedKeys})
    })
  }

@@ -318,13 +298,6 @@
    })
  }

  onDragEnter = info => {
    // expandedKeys 需要受控时设置
    // this.setState({
    //   expandedKeys: info.expandedKeys,
    // });
  }

  onDrop = info => {
    const dropKey = info.node.props.eventKey;
    const dragKey = info.dragNode.props.eventKey;
@@ -396,10 +369,11 @@
  }

  initTree = () => {
    const _this = this
    confirm({
      content: '初始化会根据菜单重置权限树，确定执行吗？',
      onOk() {
        
        _this.initMenutree()
      },
      onCancel() {}
    })
@@ -426,7 +400,12 @@
  }

  render () {
    const { app, loading, columns, menulist, trees } = this.state
    const { app, loading, columns, menulist, trees, searchkey } = this.state
    let _menulist = menulist

    if (searchkey) {
      _menulist = _menulist.filter(item => item.MenuName.toLowerCase().indexOf(searchkey.toLowerCase()) > -1)
    }

    return (
      <div className="mk-role-manage">
@@ -442,11 +421,12 @@
              <div className="app-table">
                <div className="app-action">
                  <Button className="mk-green" onClick={() => this.setState({ visible: true, targetKeys: [] })}>解冻菜单</Button>
                  <Search placeholder="综合搜索" onSearch={value => this.setState({ searchkey: value })} enterButton />
                </div>
                <Table
                  rowKey="MenuID"
                  columns={columns}
                  dataSource={menulist}
                  dataSource={_menulist}
                  pagination={false}
                />
              </div>
@@ -457,17 +437,18 @@
                <Button className="mk-purple" onClick={this.syncTree}>同步</Button>
                <Button className="mk-green save" onClick={this.saveTree}>保存</Button>
              </div>
              <Tree
              {trees.length ? <Tree
                className="draggable-tree"
                defaultExpandedKeys={this.state.expandedKeys}
                // showLine
                draggable
                blockNode
                onDragEnter={this.onDragEnter}
                onDrop={this.onDrop}
              >
                {this.renderNode(trees)}
              </Tree>
              </Tree> : <div className="empty">
                <Empty />
              </div>}
            </div>
          </div>
          <Modal