import React, { Component } from 'react'
|
import { Button, notification, Modal, Table } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
|
// import './index.scss'
|
|
const { confirm } = Modal
|
|
class AppMenuFilter extends Component {
|
state = {
|
visible: false,
|
loading: false,
|
unUseMenus: [],
|
selectedRowKeys: [],
|
columns: [
|
{
|
title: '菜单名称', dataIndex: 'MenuName', key: 'MenuName', align: 'center'
|
},
|
{
|
title: '菜单参数', dataIndex: 'MenuNo', key: 'MenuNo', align: 'center'
|
},
|
{
|
title: '修改时间', dataIndex: 'modifydate', key: 'modifydate', align: 'center'
|
},
|
{
|
title: '操作',
|
key: 'action',
|
align: 'center',
|
render: (text, record) => (
|
<Button type="link" onClick={() => this.jumpApp(record)} style={{color: '#1890ff', marginLeft: '5px'}}>查看</Button>
|
),
|
},
|
]
|
}
|
|
menus = []
|
unchecks = []
|
allmenus = []
|
|
trigger = () => {
|
this.menus = []
|
this.unchecks = []
|
this.allmenus = []
|
|
this.setState({
|
visible: true,
|
loading: true,
|
unUseMenus: [],
|
selectedRowKeys: []
|
})
|
|
this.getAppViewList()
|
}
|
|
jumpApp = (item) => {
|
const { app } = this.props
|
|
let route = 'mobdesign'
|
if (app.typename === 'pc') {
|
route = 'pcdesign'
|
}
|
|
if (item.menus_rolelist) {
|
item.type = 'view'
|
try {
|
let pageParam = JSON.parse(window.decodeURIComponent(window.atob(item.menus_rolelist)))
|
if (pageParam.type === 'navbar') {
|
item.type = 'navbar'
|
}
|
} catch(e) {
|
|
}
|
}
|
|
if (item.type === 'navbar') {
|
notification.warning({
|
top: 92,
|
message: '导航栏不可单独打开，请在含有导航栏的页面中查看。',
|
duration: 5
|
})
|
return
|
}
|
|
window.open(window.location.href.replace(/#.+/ig, `#/${route}/${window.btoa(window.encodeURIComponent(JSON.stringify({...app, MenuID: item.MenuID, type: 'app'})))}`))
|
}
|
|
getAppViewList = () => {
|
const { app } = this.props
|
|
Api.getCloudConfig({
|
func: 's_get_keyids',
|
bid: app.ID
|
}).then(result => {
|
if (!result.status) {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
return
|
}
|
|
let indexPage = ''
|
|
result.data.forEach(item => {
|
if (item.keys_type === 'index') {
|
indexPage = item.keys_id
|
}
|
})
|
|
if (!indexPage) {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: '应用未设置首页！',
|
duration: 5
|
})
|
return
|
}
|
|
this.unchecks.push(indexPage)
|
|
if (app.user_binding === 'true' && app.userbind && indexPage !== app.userbind) {
|
this.unchecks.push(app.userbind)
|
}
|
|
this.getMenuList()
|
})
|
}
|
|
getMenuList = () => {
|
const { app } = this.props
|
|
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)
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
this.setState({
|
menulist: result.menus
|
})
|
|
this.allmenus = result.menus.map(item => item.MenuID)
|
|
if (result.menus.length === 0) {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: '子应用菜单为空！',
|
duration: 5
|
})
|
} else if (result.menus.findIndex(item => item.MenuID === this.unchecks[0]) === -1) {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: '请设置应用首页！',
|
duration: 5
|
})
|
} else {
|
this.getMenuParam()
|
}
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
getMenuParam = () => {
|
const { app } = this.props
|
const { visible } = this.state
|
|
if (!visible) return
|
|
let MenuID = this.unchecks.shift()
|
|
let param = {
|
func: 'sPC_Get_LongParam',
|
MenuID: MenuID,
|
TypeCharOne: app.kei_no,
|
typename: app.typename,
|
lang: app.lang,
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
let config = null
|
|
try {
|
config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null
|
} catch (e) {
|
console.warn('Parse Failure')
|
config = null
|
}
|
|
this.menus.push(MenuID)
|
if (config) {
|
let menus = []
|
|
if (config.type === 'navbar') {
|
config.menus.forEach(k => {
|
if (k.property === 'classify') {
|
k.sublist && k.sublist.forEach(m => {
|
if (m.property === 'classify') {
|
m.sublist && m.sublist.forEach(n => {
|
if (n.property === 'menu') {
|
menus.push(n.MenuID)
|
} else if (n.property === 'linkmenu') {
|
menus.push(n.linkMenuId)
|
}
|
})
|
} else if (m.property === 'menu') {
|
menus.push(m.MenuID)
|
} else if (m.property === 'linkmenu') {
|
menus.push(m.linkMenuId)
|
}
|
})
|
} else if (k.property === 'menu') {
|
menus.push(k.MenuID)
|
} else if (k.property === 'linkmenu') {
|
menus.push(k.linkMenuId)
|
}
|
})
|
}
|
config.components && this.resetConfig(config.components, menus)
|
|
menus = Array.from(new Set(menus))
|
|
menus.forEach(n => {
|
if (this.allmenus.includes(n) && !this.menus.includes(n)) {
|
this.unchecks.push(n)
|
}
|
})
|
}
|
|
if (this.unchecks.length > 0) {
|
setTimeout(() => {
|
this.getMenuParam()
|
}, 200)
|
} else {
|
this.setState({
|
loading: false
|
})
|
|
this.getUseMenus()
|
}
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
resetConfig = (components, menus) => {
|
components.forEach(item => {
|
if (item.subtype === 'tablecard') { // 兼容
|
item.type = 'card'
|
}
|
|
if (item.type === 'navbar') {
|
menus.push(item.uuid)
|
} else if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
this.resetConfig(tab.components, menus)
|
})
|
} else if (item.type === 'group') {
|
this.resetConfig(item.components, menus)
|
} else if (item.type === 'menubar') {
|
item.subMenus.forEach(cell => {
|
if (cell.setting.type === 'linkmenu' && cell.setting.linkMenuId && typeof(cell.setting.linkMenuId) === 'string') {
|
menus.push(cell.setting.linkMenuId)
|
} else if (cell.setting.type === 'menu') {
|
menus.push(cell.uuid)
|
}
|
})
|
} else if (['card', 'carousel', 'timeline'].includes(item.type)) {
|
if (item.subtype === 'propcard') {
|
if (item.wrap.jump === 'menu' && item.wrap.menu) {
|
menus.push(item.wrap.menu)
|
}
|
}
|
item.subcards.forEach(card => {
|
if (card.setting.click === 'menu' && typeof(card.setting.menu) === 'string') {
|
menus.push(card.setting.menu)
|
} else if (card.setting.click === 'menus') {
|
card.menus && card.menus.forEach(n => {
|
if (n.menu && typeof(n.menu) === 'string') {
|
menus.push(n.menu)
|
}
|
})
|
}
|
|
card.elements && card.elements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
if (cell.linkmenu && typeof(cell.linkmenu) === 'string') {
|
menus.push(cell.linkmenu)
|
} else if (cell.openmenu && typeof(cell.openmenu) === 'string') {
|
menus.push(cell.openmenu)
|
}
|
}
|
})
|
card.backElements && card.backElements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
if (cell.linkmenu && typeof(cell.linkmenu) === 'string') {
|
menus.push(cell.linkmenu)
|
} else if (cell.openmenu && typeof(cell.openmenu) === 'string') {
|
menus.push(cell.openmenu)
|
}
|
}
|
})
|
})
|
} else if (item.type === 'balcony') {
|
item.elements && item.elements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
if (cell.linkmenu && typeof(cell.linkmenu) === 'string') {
|
menus.push(cell.linkmenu)
|
} else if (cell.openmenu && typeof(cell.openmenu) === 'string') {
|
menus.push(cell.openmenu)
|
}
|
}
|
})
|
} else if (item.type === 'table') {
|
let loopCol = (cols) => {
|
cols.forEach(col => {
|
if (col.type === 'action') {
|
col.type = 'custom'
|
}
|
|
if (col.type === 'colspan' && col.subcols) {
|
loopCol(col.subcols)
|
} else if (col.type === 'custom') {
|
col.elements && col.elements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
if (cell.linkmenu && typeof(cell.linkmenu) === 'string') {
|
menus.push(cell.linkmenu)
|
} else if (cell.openmenu && typeof(cell.openmenu) === 'string') {
|
menus.push(cell.openmenu)
|
}
|
}
|
})
|
}
|
})
|
}
|
|
item.cols && loopCol(item.cols)
|
} else if (item.type === 'form') {
|
item.subcards.forEach(cell => {
|
if (cell.subButton && cell.subButton.linkmenu && typeof(cell.subButton.linkmenu) === 'string') {
|
menus.push(cell.subButton.linkmenu)
|
}
|
})
|
} else if (item.type === 'login') {
|
if (item.wrap.linkmenu && typeof(item.wrap.linkmenu) === 'string') {
|
menus.push(item.wrap.linkmenu)
|
}
|
} else if (item.type === 'topbar') {
|
if (item.wrap.linkmenu && typeof(item.wrap.linkmenu) === 'string') {
|
menus.push(item.wrap.linkmenu)
|
}
|
|
item.wrap.menus && item.wrap.menus.forEach(cell => {
|
if (cell.menu && typeof(cell.menu) === 'string') {
|
menus.push(cell.menu)
|
}
|
})
|
}
|
|
item.action && item.action.forEach(cell => {
|
if (cell.linkmenu && typeof(cell.linkmenu) === 'string') {
|
menus.push(cell.linkmenu)
|
} else if (cell.openmenu && typeof(cell.openmenu) === 'string') {
|
menus.push(cell.openmenu)
|
}
|
})
|
})
|
}
|
|
getUseMenus = () => {
|
const { menulist } = this.state
|
|
let unmenus = []
|
|
menulist.forEach(m => {
|
if (!this.menus.includes(m.MenuID)) {
|
unmenus.push(m)
|
}
|
})
|
|
this.setState({
|
unUseMenus: unmenus
|
})
|
}
|
|
deletemenu = () => {
|
const { app, getMenuList } = this.props
|
const { selectedRowKeys, unUseMenus, loading } = this.state
|
|
if (loading) {
|
notification.warning({
|
top: 92,
|
message: '菜单解析中，请稍后！',
|
duration: 5
|
})
|
return
|
}
|
|
if (unUseMenus.length === 0) {
|
this.setState({visible: false})
|
} else if (selectedRowKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择需要删除的菜单！',
|
duration: 5
|
})
|
} else {
|
let param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: selectedRowKeys.join(','),
|
TypeCharOne: app.kei_no,
|
typename: app.typename,
|
lang: app.lang
|
}
|
|
const that = this
|
|
confirm({
|
content: '确定删除菜单吗？',
|
onOk() {
|
return new Promise(resolve => {
|
Api.getCloudConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '删除成功！',
|
duration: 3
|
})
|
|
that.setState({visible: false})
|
getMenuList()
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
resolve()
|
}, () => {
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
}
|
|
render () {
|
const { visible, loading, columns, unUseMenus, selectedRowKeys } = this.state
|
|
return (
|
<>
|
<Button className="mk-orange" onClick={this.trigger}>过滤菜单</Button>
|
<Modal
|
title="过滤菜单"
|
wrapClassName="mk-scroll-modal"
|
visible={visible}
|
width={800}
|
onOk={this.deletemenu}
|
onCancel={() => this.setState({visible: false, loading: false})}
|
destroyOnClose
|
>
|
<div style={{fontSize: '16px', position: 'relative', top: '-15px', color: '#1890ff'}}>系统将自动过滤无关联关系的菜单，选择需要删除的菜单，点击确定。</div>
|
<Table
|
rowKey="MenuID"
|
columns={columns}
|
dataSource={unUseMenus}
|
loading={loading}
|
rowSelection={{
|
selectedRowKeys,
|
type: 'checkbox',
|
onChange: (keys) => this.setState({ selectedRowKeys: keys })
|
}}
|
pagination={false}
|
/>
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default AppMenuFilter
|
