From d4f4804aeedb44d81b7518cd5469abcb0c215d6b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 29 十月 2019 16:12:32 +0800
Subject: [PATCH] level1 menu
---
src/components/header/index.jsx | 300 ++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 221 insertions(+), 79 deletions(-)
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index 998f794..f018e16 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -3,12 +3,13 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-import {Dropdown, Menu, Icon, Modal, message, Form, notification } from 'antd'
+import {Dropdown, Menu, Icon, Modal, message, Form, notification, Button, Switch, Spin } from 'antd'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import md5 from 'md5'
-import SimpleForm from '@/components/simpleform'
-import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState} from '@/store/action'
+import MenuForm from './menuform'
+import TransferForm from './transferform'
+import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState, resetEditLevel} from '@/store/action'
import Resetpwd from '@/components/resetpwd'
import DragElement from '@/components/dragelement'
import Api from '@/api'
@@ -18,9 +19,9 @@
import logourl from '../../assets/img/mlogo.png'
import avatar from '../../assets/img/avatar.jpg'
import './index.scss'
+import { Promise } from 'q';
const { confirm } = Modal
-const { SubMenu } = Menu
let previewList = null
class Header extends Component {
@@ -33,10 +34,12 @@
}
state = {
menulist: null, // 涓�绾ц彍鍗�
+ thawmenulist: null, // 宸插喕缁撶殑涓�绾ц彍鍗�
visible: false, // 淇敼瀵嗙爜妯℃�佹
addMvisible: false, // 娣诲姞鑿滃崟妯℃�佹
editMenu: null, // 缂栬緫鑿滃崟
editMvisible: false, // 缂栬緫鑿滃崟妯℃�佹
+ thawMvisible: false, // 瑙ｉ櫎鍐荤粨妯℃�佹
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
confirmLoading: false,
userName: localStorage.getItem('username')
@@ -44,7 +47,9 @@
handleCollapse = () => {
// 灞曞紑銆佹敹璧峰乏渚ц彍鍗曟爮
- this.props.toggleCollapse(!this.props.collapse)
+ if (!this.props.editState) {
+ this.props.toggleCollapse(!this.props.collapse)
+ }
}
changePassword = () => {
@@ -122,7 +127,12 @@
changeMenu (value) {
// 涓昏彍鍗曞垏鎹�
- this.props.modifyMainMenu(value)
+ console.log(value)
+ if (value.PageParam.OpenType === 'menu') {
+ this.props.modifyMainMenu(value)
+ } else {
+ window.open('#/' + value.PageParam.linkUrl + '/')
+ }
}
async loadmenu () {
@@ -154,6 +164,11 @@
previewList = result.data.map((item, index) => {
item.id = index
item.text = item.MenuName
+ if (item.PageParam) {
+ item.PageParam = JSON.parse(item.PageParam)
+ } else {
+ item.PageParam = {OpenType: 'menu', linkUrl: ''}
+ }
return item
})
@@ -170,38 +185,85 @@
handleButton = (type) => {
// 鑿滃崟缂栬緫锛氭坊鍔狅紝纭畾锛屽彇娑�
- if (type === 'add') {
+ if ((type === 'add' || type === 'thawmenu') && !is(fromJS(previewList), fromJS(this.state.menulist))) {
+ notification.warning({
+ top: 92,
+ message: this.state.dict['header.menu.presave'],
+ duration: 10
+ })
+ } else if (type === 'add') {
this.setState({
addMvisible: true
})
} else if (type === 'confirm' && !is(fromJS(previewList), fromJS(this.state.menulist))) {
- Api.logoutsystem().then(res => {
+ let _this = this
+ let param = {}
+ param.func = 'sPC_Menu_SortUpt'
+ param.LText = []
+ previewList.forEach((item, index) => {
+ param.LText.push('selectmspace\'' + item.MenuID + '\'mspaceasmspaceMenuid,' + (index + 1) * 10 + 'mspaceasmspacesort')
+ })
+ param.LText = param.LText.join('mspaceunionmspace')
+ confirm({
+ title: this.state.dict['header.menu.resetorder'],
+ content: '',
+ okText: this.state.dict['header.confirm'],
+ cancelText: this.state.dict['header.cancel'],
+ onOk() {
+ return Api.submitInterface(param).then(res => {
+ if (res.status) {
+ _this.setState({
+ menulist: null
+ })
+ _this.loadmenu()
+ } else {
+ message.warning(res.message)
+ }
+ })
+ },
+ onCancel() {}
+ })
+ } else if (type === 'thawmenu') {
+ this.setState({
+ thawMvisible: true
+ })
+ Api.submitInterface({
+ func: 'sPC_Get_FrozenMenu',
+ ParentID: '0',
+ TYPE: 10
+ }).then(res => {
if (res.status) {
- this.loadmenu()
+ this.setState({
+ thawmenulist: res.data.map(menu => {
+ return {
+ key: menu.MenuID,
+ title: menu.MenuName
+ }
+ })
+ })
} else {
message.warning(res.message)
}
})
} else {
previewList = this.state.menulist
- this.props.resetEditState(false)
+ this.props.resetEditLevel(false)
}
}
handleMenu = (Menu) => {
// 鑿滃崟缂栬緫锛氫慨鏀广�佸垹闄�
const _this = this
- const menu = fromJS(Menu)
- const card = menu.get('card')
+ const menu = fromJS(Menu).toJS()
if (!is(fromJS(previewList), fromJS(this.state.menulist))) {
notification.warning({
top: 92,
message: this.state.dict['header.menu.presave'],
duration: 10
})
- } else if (menu.get('type') === 'close') {
+ } else if (menu.type === 'close') {
confirm({
- title: this.state.dict['header.menu.close'].replace('@M', card.get('MenuName')),
+ title: this.state.dict['header.menu.close'].replace('@M', menu.card.MenuName),
content: '',
okText: this.state.dict['header.confirm'],
cancelText: this.state.dict['header.cancel'],
@@ -216,27 +278,10 @@
},
onCancel() {}
})
- } else if (menu.get('type') === 'edit') {
+ } else if (menu.type === 'edit') {
this.setState({
editMvisible: true,
- editMenu: [
- {
- type: 'text',
- key: 'menuID',
- label: this.state.dict['header.menu.menuID'],
- initVal: card.get('MenuID'),
- required: true,
- readonly: true
- },
- {
- type: 'text',
- key: 'menuName',
- label: this.state.dict['header.menu.menuName'],
- initVal: card.get('MenuName'),
- required: true,
- readonly: false
- }
- ]
+ editMenu: menu.card
})
}
}
@@ -248,17 +293,20 @@
addMemuSubmit = () => {
// 鏂板缓鑿滃崟锛氭彁浜�
- this.addMenuFormRef.handleConfirm().then(res => {
+ this.addMenuFormRef.handleConfirm().then(param => {
+ param.func = 'sPC_MainMenu_Add'
+ param.Sort = (this.state.menulist.length + 1) * 10
this.setState({
confirmLoading: true
})
- Api.logoutsystem().then(res => {
+ Api.submitInterface(param).then(res => {
if (res.status) {
this.setState({
confirmLoading: false,
- addMvisible: false
+ addMvisible: false,
+ menulist: null
})
- this.addMenuFormRef.handleReset()
+ this.addMenuFormRef.handleReset('add')
this.loadmenu()
} else {
this.setState({
@@ -276,21 +324,23 @@
confirmLoading: false,
addMvisible: false
})
- this.addMenuFormRef.handleReset()
+ this.addMenuFormRef.handleReset('add')
}
editMemuSubmit = () => {
// 缂栬緫鑿滃崟锛氭彁浜�
- this.editMenuFormRef.handleConfirm().then(res => {
+ this.editMenuFormRef.handleConfirm().then(param => {
+ param.func = 'sPC_MainMenu_Upt'
this.setState({
confirmLoading: true
})
- Api.logoutsystem().then(res => {
+ Api.submitInterface(param).then(res => {
if (res.status) {
this.setState({
confirmLoading: false,
editMvisible: false,
- editMenu: null
+ editMenu: null,
+ menulist: null
})
this.loadmenu()
} else {
@@ -307,9 +357,95 @@
// 缂栬緫鑿滃崟锛氬彇娑�
this.setState({
confirmLoading: false,
- editMvisible: false
+ editMvisible: false,
+ editMenu: null
})
- this.editMenuFormRef.handleReset()
+ }
+
+ deleteMemu = () => {
+ let _this = this
+ confirm({
+ title: this.state.dict['header.menu.close'].replace('@M', this.state.editMenu.MenuName),
+ content: '',
+ okText: this.state.dict['header.confirm'],
+ cancelText: this.state.dict['header.cancel'],
+ onOk() {
+ let param = {
+ func: 'sPC_MainMenu_Del',
+ MenuID: _this.state.editMenu.MenuID
+ }
+ return Api.submitInterface(param).then(res => {
+ if (res.status) {
+ _this.setState({
+ editMvisible: false,
+ editMenu: null,
+ menulist: null
+ })
+ _this.loadmenu()
+ } else {
+ message.warning(res.message)
+ }
+ })
+ },
+ onCancel() {}
+ })
+ }
+
+ thawMemuSubmit = () => {
+ if (this.refs.trawmenu.state.targetKeys.length === 0) {
+ notification.warning({
+ top: 92,
+ message: this.state.dict['header.menu.thawmenu.select'],
+ duration: 10
+ })
+ } else {
+ this.setState({
+ confirmLoading: true
+ })
+ let defers = this.refs.trawmenu.state.targetKeys.map(item => {
+ return new Promise((resolve) => {
+ Api.submitInterface({
+ func: 'sPC_MainMenu_ReDel',
+ MenuID: item
+ }).then(res => {
+ if (res.status) {
+ resolve('')
+ } else {
+ resolve(res.message)
+ }
+ })
+ })
+ })
+ Promise.all(defers).then(res => {
+ let msg = res.filter(Boolean)[0]
+ if (msg) {
+ notification.error({
+ top: 92,
+ message: msg,
+ duration: 15
+ })
+ } else {
+ this.setState({
+ confirmLoading: false,
+ thawMvisible: false,
+ thawmenulist: null,
+ menulist: null
+ })
+ this.loadmenu()
+ }
+ })
+ }
+ }
+
+ thawMemuCancel = () => {
+ this.setState({
+ thawMvisible: false,
+ thawmenulist: null
+ })
+ }
+
+ enterEdit = () => {
+ this.props.resetEditLevel('level1')
}
UNSAFE_componentWillMount () {
@@ -324,11 +460,10 @@
render () {
const menu = (
<Menu overlayclassname="header-dropdown">
- {this.props.debug && <SubMenu title="缂栬緫">
- <Menu.Item onClick={() => {this.changeEditState('level1')}}>涓�绾ц彍鍗�</Menu.Item>
- <Menu.Item>浜岀骇鑿滃崟</Menu.Item>
- <Menu.Item>涓夌骇鑿滃崟</Menu.Item>
- </SubMenu>}
+ {this.props.debug && <Menu.Item key="0">
+ {this.state.dict['header.edit']}
+ <Switch size="small" className="edit-switch" onChange={this.changeEditState} />
+ </Menu.Item>}
<Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['header.password']}</Menu.Item>
<Menu.Item key="2" onClick={this.logout}>{this.state.dict['header.logout']}</Menu.Item>
</Menu>
@@ -340,7 +475,8 @@
<div className={this.props.collapse ? "collapse header-collapse" : "header-collapse"} onClick={this.handleCollapse}>
<Icon type={this.props.collapse ? 'menu-unfold' : 'menu-fold'} />
</div>
- {this.props.editState !== 'level1' && this.state.menulist && <ul className="header-menu">{
+ {/* 姝ｅ父鑿滃崟 */}
+ {this.props.editLevel !== 'level1' && this.state.menulist && <ul className="header-menu">{
this.state.menulist.map(item => {
return (
<li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={this.props.selectmenu.MenuID === item.MenuID ? 'active' : ''}>
@@ -349,7 +485,10 @@
)
})
}</ul>}
- {this.props.editState === 'level1' && this.state.menulist && <DndProvider className="header-drag-menu" backend={HTML5Backend}>
+ {/* 杩涘叆缂栬緫鎸夐挳 */}
+ {this.props.editState && !this.props.editLevel && <Icon onClick={this.enterEdit} className="edit-check" type="edit" />}
+ {/* 缂栬緫鑿滃崟 */}
+ {this.props.editLevel === 'level1' && this.state.menulist && <DndProvider className="header-drag-menu" backend={HTML5Backend}>
<DragElement
dict={this.state.dict}
list={this.state.menulist}
@@ -358,6 +497,8 @@
handleButton={this.handleButton}
/>
</DndProvider>}
+ {/* 缂栬緫mask */}
+ <div className={'mask ' + (this.props.editLevel === 'level1' ? 'active' : '')}></div>
<Dropdown className="header-setting" overlay={menu}>
<div>
<img src={avatar} alt=""/>
@@ -388,27 +529,10 @@
confirmLoading={this.state.confirmLoading}
onCancel={this.addMemuCancel}
>
- <SimpleForm
+ <MenuForm
dict={this.state.dict}
- formlist={[
- {
- type: 'text',
- key: 'menuID',
- label: this.state.dict['header.menu.menuID'],
- initVal: '',
- required: true,
- readonly: false
- },
- {
- type: 'text',
- key: 'menuName',
- label: this.state.dict['header.menu.menuName'],
- initVal: '',
- required: true,
- readonly: false
- }
- ]}
- cols={1}
+ type="add"
+ menu={null}
wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
/>
</Modal>
@@ -418,16 +542,32 @@
okText={this.state.dict['header.confirm']}
cancelText={this.state.dict['header.cancel']}
visible={this.state.editMvisible}
- onOk={this.editMemuSubmit}
- confirmLoading={this.state.confirmLoading}
- onCancel={this.editMemuCancel}
+ footer={null}
>
- <SimpleForm
+ {this.state.editMenu && <MenuForm
dict={this.state.dict}
- formlist={this.state.editMenu || []}
- cols={1}
+ type="edit"
+ menu={this.state.editMenu}
wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
- />
+ />}
+ <div className="edit-modal-footer">
+ <Button onClick={this.editMemuCancel}>{this.state.dict['header.cancel']}</Button>
+ <Button type="primary" onClick={this.editMemuSubmit} loading={this.state.confirmLoading}>{this.state.dict['header.confirm']}</Button>
+ <Button type="danger" onClick={this.deleteMemu}>{this.state.dict['header.delete']}</Button>
+ </div>
+ </Modal>
+ {/* 瑙ｉ櫎鍐荤粨鑿滃崟妯℃�佹 */}
+ <Modal
+ title={this.state.dict['header.thawmenu']}
+ okText={this.state.dict['header.confirm']}
+ cancelText={this.state.dict['header.cancel']}
+ visible={this.state.thawMvisible}
+ onOk={this.thawMemuSubmit}
+ confirmLoading={this.state.confirmLoading}
+ onCancel={this.thawMemuCancel}
+ >
+ {!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
+ {this.state.thawmenulist && <TransferForm ref="trawmenu" dict={this.state.dict} menulist={this.state.thawmenulist}/>}
</Modal>
</header>
)
@@ -439,7 +579,8 @@
collapse: state.collapse,
selectmenu: state.selectedMainMenu,
debug: state.debug,
- editState: state.editState
+ editState: state.editState,
+ editLevel: state.editLevel
}
}
@@ -449,7 +590,8 @@
modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
resetState: () => dispatch(resetState()),
resetDebug: () => dispatch(resetDebug()),
- resetEditState: (state) => dispatch(resetEditState(state))
+ resetEditState: (state) => dispatch(resetEditState(state)),
+ resetEditLevel: (level) => dispatch(resetEditLevel(level))
}
}
--
Gitblit v1.8.0