From a0d5241e8b7ec3d11e5e029187c48920c3834f8c Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 24 十月 2019 16:37:09 +0800
Subject: [PATCH] top-menu
---
src/components/header/index.jsx | 253 ++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 243 insertions(+), 10 deletions(-)
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index 8673e4c..998f794 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -3,10 +3,14 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-import {Dropdown, Menu, Icon, Modal, message, Form } from 'antd'
+import {Dropdown, Menu, Icon, Modal, message, Form, notification } from 'antd'
+import { DndProvider } from 'react-dnd'
+import HTML5Backend from 'react-dnd-html5-backend'
import md5 from 'md5'
-import {toggleCollapse, modifyMainMenu, resetState, resetDebug} from '@/store/action'
+import SimpleForm from '@/components/simpleform'
+import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState} from '@/store/action'
import Resetpwd from '@/components/resetpwd'
+import DragElement from '@/components/dragelement'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
@@ -16,6 +20,8 @@
import './index.scss'
const { confirm } = Modal
+const { SubMenu } = Menu
+let previewList = null
class Header extends Component {
static propTpyes = {
@@ -26,8 +32,11 @@
])
}
state = {
- menulist: null,
- visible: false,
+ menulist: null, // 涓�绾ц彍鍗�
+ visible: false, // 淇敼瀵嗙爜妯℃�佹
+ addMvisible: false, // 娣诲姞鑿滃崟妯℃�佹
+ editMenu: null, // 缂栬緫鑿滃崟
+ editMvisible: false, // 缂栬緫鑿滃崟妯℃�佹
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
confirmLoading: false,
userName: localStorage.getItem('username')
@@ -142,10 +151,165 @@
this.props.modifyMainMenu(result.data[0])
}
+ previewList = result.data.map((item, index) => {
+ item.id = index
+ item.text = item.MenuName
+ return item
+ })
+
this.setState({
- menulist: result.data
+ menulist: previewList
})
}
+ }
+
+ handlePreviewList = (List) => {
+ // 鑿滃崟椤哄簭鏀瑰彉鏃讹紝淇濆瓨涓棿鐘舵��
+ previewList = List
+ }
+
+ handleButton = (type) => {
+ // 鑿滃崟缂栬緫锛氭坊鍔狅紝纭畾锛屽彇娑�
+ if (type === 'add') {
+ this.setState({
+ addMvisible: true
+ })
+ } else if (type === 'confirm' && !is(fromJS(previewList), fromJS(this.state.menulist))) {
+ Api.logoutsystem().then(res => {
+ if (res.status) {
+ this.loadmenu()
+ } else {
+ message.warning(res.message)
+ }
+ })
+ } else {
+ previewList = this.state.menulist
+ this.props.resetEditState(false)
+ }
+ }
+
+ handleMenu = (Menu) => {
+ // 鑿滃崟缂栬緫锛氫慨鏀广�佸垹闄�
+ const _this = this
+ const menu = fromJS(Menu)
+ const card = menu.get('card')
+ 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') {
+ confirm({
+ title: this.state.dict['header.menu.close'].replace('@M', card.get('MenuName')),
+ content: '',
+ okText: this.state.dict['header.confirm'],
+ cancelText: this.state.dict['header.cancel'],
+ onOk() {
+ return Api.logoutsystem().then(res => {
+ if (res.status) {
+ _this.loadmenu()
+ } else {
+ message.warning(res.message)
+ }
+ })
+ },
+ onCancel() {}
+ })
+ } else if (menu.get('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
+ }
+ ]
+ })
+ }
+ }
+
+ changeEditState = (state) => {
+ // 淇敼缂栬緫鑿滃崟绫诲瀷
+ this.props.resetEditState(state)
+ }
+
+ addMemuSubmit = () => {
+ // 鏂板缓鑿滃崟锛氭彁浜�
+ this.addMenuFormRef.handleConfirm().then(res => {
+ this.setState({
+ confirmLoading: true
+ })
+ Api.logoutsystem().then(res => {
+ if (res.status) {
+ this.setState({
+ confirmLoading: false,
+ addMvisible: false
+ })
+ this.addMenuFormRef.handleReset()
+ this.loadmenu()
+ } else {
+ this.setState({
+ confirmLoading: false
+ })
+ message.warning(res.message)
+ }
+ })
+ }, () => {})
+ }
+
+ addMemuCancel = () => {
+ // 鏂板缓鑿滃崟锛氬彇娑�
+ this.setState({
+ confirmLoading: false,
+ addMvisible: false
+ })
+ this.addMenuFormRef.handleReset()
+ }
+
+ editMemuSubmit = () => {
+ // 缂栬緫鑿滃崟锛氭彁浜�
+ this.editMenuFormRef.handleConfirm().then(res => {
+ this.setState({
+ confirmLoading: true
+ })
+ Api.logoutsystem().then(res => {
+ if (res.status) {
+ this.setState({
+ confirmLoading: false,
+ editMvisible: false,
+ editMenu: null
+ })
+ this.loadmenu()
+ } else {
+ this.setState({
+ confirmLoading: false
+ })
+ message.warning(res.message)
+ }
+ })
+ }, () => {})
+ }
+
+ editMemuCancel = () => {
+ // 缂栬緫鑿滃崟锛氬彇娑�
+ this.setState({
+ confirmLoading: false,
+ editMvisible: false
+ })
+ this.editMenuFormRef.handleReset()
}
UNSAFE_componentWillMount () {
@@ -159,7 +323,12 @@
render () {
const menu = (
- <Menu className="header-dropdown">
+ <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>}
<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>
@@ -171,7 +340,7 @@
<div className={this.props.collapse ? "collapse header-collapse" : "header-collapse"} onClick={this.handleCollapse}>
<Icon type={this.props.collapse ? 'menu-unfold' : 'menu-fold'} />
</div>
- {this.state.menulist && <ul className="header-menu">{
+ {this.props.editState !== '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' : ''}>
@@ -180,14 +349,24 @@
)
})
}</ul>}
+ {this.props.editState === 'level1' && this.state.menulist && <DndProvider className="header-drag-menu" backend={HTML5Backend}>
+ <DragElement
+ dict={this.state.dict}
+ list={this.state.menulist}
+ handlePreviewList={this.handlePreviewList}
+ handleMenu={this.handleMenu}
+ handleButton={this.handleButton}
+ />
+ </DndProvider>}
<Dropdown className="header-setting" overlay={menu}>
<div>
<img src={avatar} alt=""/>
<span>
- {this.state.userName} <Icon type="down" />
+ <span className="username">{this.state.userName}</span> <Icon type="down" />
</span>
</div>
</Dropdown>
+ {/* 淇敼瀵嗙爜 */}
<Modal
title={this.state.dict['header.password']}
okText={this.state.dict['header.confirm']}
@@ -199,6 +378,57 @@
>
<Resetpwd dict={this.state.dict} wrappedComponentRef={(inst) => this.formRef = inst} resetPwdSubmit={this.resetPwdSubmit}/>
</Modal>
+ {/* 鏂板缓鑿滃崟妯℃�佹 */}
+ <Modal
+ title={this.state.dict['header.menu.addtitle']}
+ okText={this.state.dict['header.confirm']}
+ cancelText={this.state.dict['header.cancel']}
+ visible={this.state.addMvisible}
+ onOk={this.addMemuSubmit}
+ confirmLoading={this.state.confirmLoading}
+ onCancel={this.addMemuCancel}
+ >
+ <SimpleForm
+ 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}
+ wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
+ />
+ </Modal>
+ {/* 缂栬緫鑿滃崟妯℃�佹 */}
+ <Modal
+ title={this.state.dict['header.menu.edittitle']}
+ 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}
+ >
+ <SimpleForm
+ dict={this.state.dict}
+ formlist={this.state.editMenu || []}
+ cols={1}
+ wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
+ />
+ </Modal>
</header>
)
}
@@ -207,7 +437,9 @@
const mapStateToProps = (state) => {
return {
collapse: state.collapse,
- selectmenu: state.selectedMainMenu
+ selectmenu: state.selectedMainMenu,
+ debug: state.debug,
+ editState: state.editState
}
}
@@ -216,7 +448,8 @@
toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
resetState: () => dispatch(resetState()),
- resetDebug: () => dispatch(resetDebug())
+ resetDebug: () => dispatch(resetDebug()),
+ resetEditState: (state) => dispatch(resetEditState(state))
}
}
--
Gitblit v1.8.0