From ebb3dcdf617c7455b9fd0a84f37ddc384cc83af8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 03 十一月 2019 20:58:22 +0800
Subject: [PATCH] second-level-menu
---
src/components/sidemenu/index.jsx | 421 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 413 insertions(+), 8 deletions(-)
diff --git a/src/components/sidemenu/index.jsx b/src/components/sidemenu/index.jsx
index 500f3a9..38125c2 100644
--- a/src/components/sidemenu/index.jsx
+++ b/src/components/sidemenu/index.jsx
@@ -3,12 +3,21 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-import { Menu, Icon } from 'antd'
-import {modifyTabview} from '@/store/action'
+import { Menu, Icon, Button, notification, Modal, Spin} from 'antd'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { DndProvider } from 'react-dnd'
+import {modifyTabview, resetEditLevel} from '@/store/action'
+import TransferForm from '@/components/transferform'
+import DragElement from './dragelement'
+import MenuForm from './menuform'
+import zhCN from '@/locales/zh-CN/header.js'
+import enUS from '@/locales/en-US/header.js'
import Api from '@/api'
import './index.scss'
const { SubMenu } = Menu
+const { confirm } = Modal
+let previewList = null
class Sidemenu extends Component {
static propTypes = {
@@ -20,12 +29,26 @@
}
state = {
+ mainMenuList: null,
subMenulist: null,
rootSubmenuKeys: null,
+ modalOptions: {
+ visible: false,
+ title: '',
+ level: 'slevel',
+ type: 'add',
+ menu: null
+ },
+ confirmLoading: false,
+ menuLoading: false,
+ thawMvisible: false,
+ thawmenulist: null,
+ dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
openKeys: null
}
async loadsubmenu (menu) {
+ this.setState({menuLoading: true})
let result = await Api.getSubMenuData(menu.MenuID)
if (result.status) {
let param = sessionStorage.getItem('view_param') // 鏄惁涓烘墦寮�鏂伴〉闈�
@@ -41,7 +64,15 @@
let parentID = result.data[submenuindex] ? result.data[submenuindex].ParentID : '' // 灞曞紑浜岀骇鑿滃崟ID
this.setState({
+ menuLoading: false,
subMenulist: result.data.map((item, i) => {
+ item.id = i
+ item.text = item.MenuNameP
+ try {
+ item.PageParam = JSON.parse(item.PageParamP)
+ } catch (e) {
+ item.PageParam = {Icon: 'folder'}
+ }
if (item.FunMenu) {
item.children = item.FunMenu.map((child, n) => {
let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 寰呭畬鍠�
@@ -55,6 +86,8 @@
} else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
child.type = 'iframe'
}
+ child.id = n
+ child.text = item.MenuName
return child
})
}
@@ -124,18 +157,308 @@
})
}
}
+
+ enterSubEdit = (e) => {
+ // 缂栬緫浜岀骇鑿滃崟
+ e.stopPropagation()
+ previewList = null
+ this.props.resetEditLevel('level2')
+ Api.getMainMenuData().then(res => {
+ this.setState({
+ mainMenuList: res.data.map(item => {
+ return {
+ id: item.MenuID,
+ text: item.MenuName
+ }
+ })
+ })
+ })
+ }
+
+ handlePreviewList = (List) => {
+ // 鑿滃崟椤哄簭鏀瑰彉鏃讹紝淇濆瓨涓棿鐘舵��
+ previewList = List
+ }
+
+ handleMenu = (menu) => {
+ // 鑿滃崟缂栬緫锛氫慨鏀广�佸垹闄�
+ const _this = this
+ if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
+ notification.warning({
+ top: 92,
+ message: this.state.dict['header.menu.presave'],
+ duration: 10
+ })
+ } else if (menu.type === 'close') {
+ confirm({
+ title: this.state.dict['header.menu.close'].replace('@M', menu.card.text),
+ content: '',
+ okText: this.state.dict['header.confirm'],
+ cancelText: this.state.dict['header.cancel'],
+ onOk() {
+ let param = {
+ func: 'sPC_MainMenu_Del',
+ MenuID: menu.card.ParentID
+ }
+ return Api.submitInterface(param).then(res => {
+ if (res.status) {
+ _this.loadsubmenu(_this.props.mainMenu)
+ } else {
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 10
+ })
+ }
+ })
+ },
+ onCancel() {}
+ })
+ } else if (menu.type === 'edit') {
+ this.setState({
+ modalOptions: {
+ visible: true,
+ title: this.state.dict['header.menu.editTitle'],
+ level: 'slevel',
+ type: 'edit',
+ parentMenu: this.props.mainMenu,
+ supMenuList: this.state.mainMenuList,
+ menu: menu.card
+ }
+ })
+ }
+ }
+
+ handleSubBtn = (type) => {
+ // 鎿嶄綔鎸夐挳
+ if (type === 'add') {
+ this.setState({
+ modalOptions: {
+ visible: true,
+ title: this.state.dict['header.menu.addtitle'],
+ level: 'slevel',
+ type: 'add',
+ parentMenu: this.props.mainMenu,
+ supMenuList: this.state.mainMenuList,
+ menu: null
+ }
+ })
+ } else if (type === 'thaw') {
+ this.setState({
+ thawMvisible: true
+ })
+ Api.submitInterface({
+ func: 'sPC_Get_FrozenMenu',
+ ParentID: this.props.mainMenu.MenuID,
+ TYPE: 20
+ }).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: 10
+ })
+ }
+ })
+ } else if (type === 'confirm') {
+ if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
+ 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.loadsubmenu(_this.props.mainMenu)
+ } else {
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 10
+ })
+ }
+ })
+ },
+ onCancel() {}
+ })
+ } else {
+ this.props.resetEditLevel(false)
+ }
+ } else if (type === 'close') {
+ this.props.resetEditLevel(false)
+ }
+ }
+
+ memuHandleSubmit = () => {
+ let options = this.state.modalOptions
+ if (options.type === 'add' && options.level === 'slevel') {
+ // 鏂板缓鑿滃崟锛氭彁浜�
+ this.menuFormRef.handleConfirm().then(param => {
+ param.func = 'sPC_SndMenu_Add'
+ param.Sort = (this.state.subMenulist.length + 1) * 10
+ this.setState({
+ confirmLoading: true
+ })
+ Api.submitInterface(param).then(res => {
+ if (res.status) {
+ this.setState({
+ confirmLoading: false,
+ modalOptions: {
+ ...options,
+ visible: false,
+ parentMenu: null,
+ supMenuList: null,
+ menu: null
+ }
+ })
+ this.loadsubmenu(this.props.mainMenu)
+ } else {
+ this.setState({
+ confirmLoading: false
+ })
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 10
+ })
+ }
+ })
+ }, () => {})
+ } else if (options.type === 'edit' && options.level === 'slevel') {
+ // 缂栬緫鑿滃崟锛氭彁浜�
+ this.menuFormRef.handleConfirm().then(param => {
+ param.func = 'sPC_SndMenu_Upt'
+ this.setState({
+ confirmLoading: true
+ })
+ Api.submitInterface(param).then(res => {
+ if (res.status) {
+ this.setState({
+ confirmLoading: false,
+ modalOptions: {
+ ...options,
+ visible: false,
+ parentMenu: null,
+ supMenuList: null,
+ menu: null
+ }
+ })
+ this.loadsubmenu(this.props.mainMenu)
+ } else {
+ this.setState({
+ confirmLoading: false
+ })
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 10
+ })
+ }
+ })
+ }, () => {})
+ }
+ }
+
+ memuHandleCancel = () => {
+ let options = this.state.modalOptions
+ this.setState({
+ modalOptions: {
+ ...options,
+ visible: false,
+ menu: null
+ }
+ })
+ }
+
+ callback = () => {
+
+ }
+
+ 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.loadsubmenu(this.props.mainMenu)
+ }
+ })
+ }
+ }
+
+ thawMemuCancel = () => {
+ this.setState({
+ thawMvisible: false,
+ thawmenulist: null
+ })
+ }
+
render () {
+ const editShow = (this.props.editState && !this.props.editLevel) || false
return (
<aside className={"side-menu ant-menu-dark" + (this.props.collapse ? ' side-menu-collapsed' : '') + (this.props.isiframe ? ' iframe' : '')}>
- {this.state.subMenulist &&
+ {this.state.subMenulist && (!this.props.editLevel || this.props.editLevel === 'level1') &&
<Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.collapse}>
- {this.state.subMenulist.map(item => {
+ {this.state.subMenulist.map((item, index) => {
return (
<SubMenu
key={item.ParentID}
title={
- <span>
- {item.IconP ? <Icon type={item.IconP} /> : <Icon type="folder" />}
+ <span className={editShow && index === 0 ? 'edit-control' : ''}>
+ <Icon type={item.PageParam.Icon} />
+ {editShow && index === 0 && <Icon onClick={this.enterSubEdit} className="edit-check" type="edit" />}
<span>{item.MenuNameP}</span>
</span>
}
@@ -151,6 +474,85 @@
)
})}
</Menu>}
+ {this.props.editLevel === 'level2' && !this.state.menuLoading &&
+ <div>
+ <DndProvider className="header-drag-menu" backend={HTML5Backend}>
+ <DragElement
+ list={this.state.subMenulist}
+ handlePreviewList={this.handlePreviewList}
+ handleMenu={this.handleMenu}
+ />
+ </DndProvider>
+ <div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
+ <Icon type="plus" />
+ </div>
+ <div className="menu-btn">
+ <Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{this.state.dict['header.thawmenu']}</Button>
+ <Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{this.state.dict['header.confirm']}</Button>
+ <Button onClick={() => {this.handleSubBtn('close')}}>{this.state.dict['header.close']}</Button>
+ </div>
+ </div>
+ }
+ <Modal
+ title={this.state.modalOptions.title}
+ okText={this.state.dict['header.confirm']}
+ cancelText={this.state.dict['header.cancel']}
+ visible={this.state.modalOptions.visible}
+ onOk={this.memuHandleSubmit}
+ confirmLoading={this.state.confirmLoading}
+ onCancel={this.memuHandleCancel}
+ >
+ <MenuForm
+ dict={this.state.dict}
+ options={this.state.modalOptions}
+ wrappedComponentRef={(inst) => this.menuFormRef = inst}
+ />
+ </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>
+ {/* {this.props.editLevel === 'level2' && <div className="editboard">
+ <div className="workplace">
+ <Tabs defaultActiveKey="1" onChange={this.callback}>
+ <TabPane tab="浜岀骇鑿滃崟" key="1">
+ <div className="ant-card ant-card-bordered level2-left">
+ <div className="ant-card-head">
+ <div className="ant-card-head-wrapper">
+ <div className="ant-card-head-title">
+ <Radio.Group name="radiogroup" defaultValue={1}>
+ <Radio value={1}>鎺掑簭</Radio>
+ <Radio value={2}>缂栬緫</Radio>
+ </Radio.Group>
+ <Icon onClick={this.enterEdit} className="edit-check" type="plus" />
+ </div>
+ </div>
+ </div>
+ <div className="ant-card-body">
+ <p>Card content</p>
+ <p>Card content</p>
+ <p>Card content</p>
+ </div>
+ </div>
+ </TabPane>
+ <TabPane tab="涓夌骇鑿滃崟" key="2">
+ <Card title="df" style={{ width: 300 }}>
+ <p>Card content</p>
+ <p>Card content</p>
+ <p>Card content</p>
+ </Card>
+ </TabPane>
+ </Tabs>
+ </div>
+ </div>} */}
</aside>
)
}
@@ -161,13 +563,16 @@
tabviews: state.tabviews,
collapse: state.collapse,
isiframe: state.isiframe,
- mainMenu: state.selectedMainMenu
+ mainMenu: state.selectedMainMenu,
+ editState: state.editState,
+ editLevel: state.editLevel
}
}
const mapDispatchToProps = (dispatch) => {
return {
- modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
+ modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
+ resetEditLevel: (level) => dispatch(resetEditLevel(level))
}
}
--
Gitblit v1.8.0