import React, {Component} from 'react'
|
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'
|
import zhCN from 'antd/es/locale/zh_CN'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { confirm } = Modal
|
const { TreeNode } = Tree
|
// const { Paragraph } = Typography
|
const { Search } = Input
|
|
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
|
const Header = asyncComponent(() => import('./header'))
|
const TransferForm = asyncComponent(() => import('@/templates/zshare/basetransferform'))
|
|
sessionStorage.setItem('isEditState', 'true')
|
|
class RoleManage extends Component {
|
state = {
|
app: null,
|
loading: false,
|
menulist: [],
|
columns: [
|
{ title: '菜单名称', dataIndex: 'MenuName', key: 'MenuName', align: 'center' },
|
{
|
title: '操作',
|
key: 'action',
|
align: 'center',
|
render: (text, record) => (
|
<div>
|
<Button type="link" onClick={() => this.deleteMenu(record)} style={{color: '#ff4d4f'}}>删除</Button>
|
</div>
|
),
|
},
|
],
|
selectApp: null,
|
selectSubApp: null,
|
visible: false,
|
thawmenulist: [],
|
confirmLoading: false,
|
targetKeys: [],
|
trees: [],
|
expandedKeys: [],
|
searchkey: ''
|
}
|
|
UNSAFE_componentWillMount() {
|
let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))
|
|
this.setState({app: param}, () => {
|
this.getMenuList()
|
this.getThawMenulist()
|
})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
getMenuList = () => {
|
const { app } = this.state
|
let param = {
|
func: 's_get_app_menus',
|
TypeCharOne: app.kei_no,
|
typename: app.typename,
|
LText: `select '${window.GLOB.appkey}'`,
|
timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
|
lang: app.lang
|
}
|
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
this.setState({
|
loading: true
|
})
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
this.setState({
|
loading: false,
|
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({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
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})
|
})
|
}
|
|
getThawMenulist = () => {
|
Api.getCloudConfig({
|
func: 'sPC_Get_FrozenMenu',
|
ParentID: '0',
|
TYPE: 10
|
}).then(res => {
|
if (res.status) {
|
this.setState({
|
thawmenulist: res.data.map(menu => {
|
return {
|
key: menu.MenuID,
|
title: menu.MenuName
|
}
|
})
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
deleteMenu = (record) => {
|
// const { app } = this.state
|
const _this = this
|
|
let param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: record.MenuID,
|
// ID: app.ID,
|
// TypeCharOne: app.kei_no,
|
// typename: app.typename,
|
// lang: app.lang
|
}
|
|
confirm({
|
content: '确定删除该菜单吗？',
|
onOk() {
|
return new Promise(resolve => {
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '操作成功！',
|
duration: 3
|
})
|
_this.getMenuList()
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
resolve()
|
}, () => {
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
thawSubmit = () => {
|
const { targetKeys } = this.state
|
|
if (targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择解除冻结的菜单！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
confirmLoading: true
|
})
|
|
let defers = targetKeys.map(item => {
|
return new Promise((resolve) => {
|
// Api.getCloudConfig({
|
// func: 'sPC_MainMenu_ReDel',
|
// MenuID: item
|
// }).then(res => {
|
// if (res.status) {
|
// resolve('')
|
// } else {
|
// resolve(res.message)
|
// }
|
// })
|
resolve('')
|
})
|
})
|
Promise.all(defers).then(res => {
|
let msg = res.filter(Boolean)[0]
|
if (msg) {
|
notification.error({
|
top: 92,
|
message: msg,
|
duration: 10
|
})
|
} else {
|
this.setState({
|
confirmLoading: false,
|
visible: false,
|
targetKeys: [],
|
thawmenulist: this.state.thawmenulist.filter(item => !targetKeys.includes(item.key))
|
})
|
this.getMenuList()
|
}
|
})
|
}
|
|
onDrop = info => {
|
const dropKey = info.node.props.eventKey;
|
const dragKey = info.dragNode.props.eventKey;
|
const dropPos = info.node.props.pos.split('-');
|
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
|
const loop = (data, key, callback) => {
|
data.forEach((item, index, arr) => {
|
if (item.key === key) {
|
return callback(item, index, arr)
|
}
|
if (item.children) {
|
return loop(item.children, key, callback)
|
}
|
})
|
}
|
const data = [...this.state.trees]
|
|
let dragObj
|
loop(data, dragKey, (item, index, arr) => {
|
arr.splice(index, 1)
|
dragObj = item
|
})
|
|
if (!info.dropToGap) {
|
loop(data, dropKey, item => {
|
item.children = item.children || []
|
|
item.children.push(dragObj)
|
})
|
} else if ((info.node.props.children || []).length > 0 && info.node.props.expanded && dropPosition === 1 ) {
|
loop(data, dropKey, item => {
|
item.children = item.children || []
|
|
item.children.unshift(dragObj)
|
})
|
} else {
|
let ar;
|
let i;
|
|
loop(data, dropKey, (item, index, arr) => {
|
ar = arr
|
i = index
|
})
|
|
if (dropPosition === -1) {
|
ar.splice(i, 0, dragObj)
|
} else {
|
ar.splice(i + 1, 0, dragObj)
|
}
|
}
|
|
this.setState({
|
trees: data
|
})
|
}
|
|
renderNode = data => {
|
return data.map(item => {
|
if (item.children && item.children.length) {
|
return (
|
<TreeNode key={item.key} title={item.title}>
|
{this.renderNode(item.children)}
|
</TreeNode>
|
)
|
}
|
return <TreeNode key={item.key} title={item.title} />
|
})
|
}
|
|
initTree = () => {
|
const _this = this
|
confirm({
|
content: '初始化会根据菜单重置权限树，确定执行吗？',
|
onOk() {
|
_this.initMenutree()
|
},
|
onCancel() {}
|
})
|
}
|
|
syncTree = () => {
|
confirm({
|
content: '同步会根据菜单删除或新增节点，确定执行吗？',
|
onOk() {
|
|
},
|
onCancel() {}
|
})
|
}
|
|
saveTree = () => {
|
confirm({
|
content: '确定执行吗？',
|
onOk() {
|
|
},
|
onCancel() {}
|
})
|
}
|
|
render () {
|
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">
|
<ConfigProvider locale={_locale}>
|
<Header app={app} />
|
{loading ?
|
<div className="loading-mask">
|
<Spin size="large" />
|
</div> : null
|
}
|
<div className="view-wrap">
|
<div className="left-view">
|
<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}
|
pagination={false}
|
/>
|
</div>
|
</div>
|
<div className="right-view">
|
<div className="app-action">
|
<Button className="mk-primary" onClick={this.initTree}>初始化</Button>
|
<Button className="mk-purple" onClick={this.syncTree}>同步</Button>
|
<Button className="mk-green save" onClick={this.saveTree}>保存</Button>
|
</div>
|
{trees.length ? <Tree
|
className="draggable-tree"
|
defaultExpandedKeys={this.state.expandedKeys}
|
// showLine
|
draggable
|
blockNode
|
onDrop={this.onDrop}
|
>
|
{this.renderNode(trees)}
|
</Tree> : <div className="empty">
|
<Empty />
|
</div>}
|
</div>
|
</div>
|
<Modal
|
title="解除冻结"
|
visible={this.state.visible}
|
width={600}
|
onOk={this.thawSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={() => this.setState({visible: false, targetKeys: []})}
|
destroyOnClose
|
>
|
<TransferForm onChange={(vals) => this.setState({targetKeys: vals})} menulist={this.state.thawmenulist}/>
|
</Modal>
|
</ConfigProvider>
|
</div>
|
)
|
}
|
}
|
|
export default RoleManage
|
