From fa80db0a824464cd0cbc46d5207021263211236d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 05 十一月 2019 09:21:32 +0800
Subject: [PATCH] thirdmenu
---
src/components/sidemenu/index.jsx | 417 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 300 insertions(+), 117 deletions(-)
diff --git a/src/components/sidemenu/index.jsx b/src/components/sidemenu/index.jsx
index 38125c2..138a695 100644
--- a/src/components/sidemenu/index.jsx
+++ b/src/components/sidemenu/index.jsx
@@ -3,7 +3,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-import { Menu, Icon, Button, notification, Modal, Spin} from 'antd'
+import { Menu, Icon, Button, notification, Modal, Spin, Tabs, Radio, Card, Row, Col} from 'antd'
import HTML5Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'
import {modifyTabview, resetEditLevel} from '@/store/action'
@@ -14,9 +14,11 @@
import enUS from '@/locales/en-US/header.js'
import Api from '@/api'
import './index.scss'
+import nortable from '@/assets/img/normaltable.jpg'
const { SubMenu } = Menu
const { confirm } = Modal
+const { TabPane } = Tabs
let previewList = null
class Sidemenu extends Component {
@@ -29,8 +31,9 @@
}
state = {
- mainMenuList: null,
- subMenulist: null,
+ mainMenuList: null, // 涓�绾ц彍鍗曪紝缂栬緫璋冩暣涓婄骇鑿滃崟鏃惰幏鍙�
+ subMenulist: null, // 浜岀骇鑿滃崟
+ editMenu: null, // 缂栬緫涓夌骇鑿滃崟鏃惰缃�
rootSubmenuKeys: null,
modalOptions: {
visible: false,
@@ -43,6 +46,7 @@
menuLoading: false,
thawMvisible: false,
thawmenulist: null,
+ createThirdMenu: false,
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
openKeys: null
}
@@ -66,32 +70,43 @@
this.setState({
menuLoading: false,
subMenulist: result.data.map((item, i) => {
- item.id = i
- item.text = item.MenuNameP
+ let _smenu = {}
+ _smenu.id = i
+ _smenu.MenuID = item.ParentID
+ _smenu.text = item.MenuNameP
try {
- item.PageParam = JSON.parse(item.PageParamP)
+ _smenu.PageParam = JSON.parse(item.PageParamP)
} catch (e) {
- item.PageParam = {Icon: 'folder'}
+ _smenu.PageParam = {Icon: 'folder'}
}
if (item.FunMenu) {
- item.children = item.FunMenu.map((child, n) => {
+ _smenu.children = item.FunMenu.map((child, n) => {
+ let _tmenu = {}
let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 寰呭畬鍠�
- child.src = '#/main/' + _msg
+ _tmenu.src = '#/main/' + _msg
if (child.LinkUrl === 'CommonTable') {
- child.type = 'CommonTable'
+ _tmenu.type = 'CommonTable'
} else if (child.LinkUrl === 'DataManage') {
- child.type = 'DataManage'
+ _tmenu.type = 'DataManage'
} else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
- child.type = 'RoleManage'
+ _tmenu.type = 'RoleManage'
} else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
- child.type = 'iframe'
+ _tmenu.type = 'iframe'
}
- child.id = n
- child.text = item.MenuName
- return child
+ try {
+ _tmenu.PageParam = JSON.parse(child.PageParam)
+ } catch (e) {
+ _tmenu.PageParam = {}
+ }
+ _tmenu.id = n
+ _tmenu.MenuID = child.MenuID
+ _tmenu.MenuNo = child.MenuNo
+ _tmenu.MenuName = child.MenuName
+ _tmenu.text = child.MenuName
+ return _tmenu
})
}
- return item
+ return _smenu
}),
rootSubmenuKeys: result.data.map(item => item.ParentID),
openKeys: (this.props.collapse || !parentID) ? [] : [parentID]
@@ -102,6 +117,20 @@
opentab.selected = true
this.props.modifyTabview([opentab])
}
+ // this.props.modifyTabview([{
+ // Action: 'Index',
+ // Icon: 'Content/icons/L32X32/RoleM.png',
+ // LinkUrl: 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM',
+ // MenuID: 'MMenu14002DBD0010',
+ // MenuName: '瑙掕壊鏉冮檺鍒嗛厤',
+ // MenuNo: 'RoleMenuM',
+ // Ot: '绌�',
+ // PageParam: '',
+ // SortSub: '720',
+ // id: 3,
+ // selected: true,
+ // type: 'RoleManage'
+ // }])
}
}
@@ -167,12 +196,20 @@
this.setState({
mainMenuList: res.data.map(item => {
return {
- id: item.MenuID,
+ MenuID: item.MenuID,
text: item.MenuName
}
})
})
})
+ }
+
+ enterThrEdit = (e, menu) => {
+ // 缂栬緫涓夌骇鑿滃崟
+ e.stopPropagation()
+ previewList = null
+ this.props.resetEditLevel('level3')
+ this.setState({editMenu: menu})
}
handlePreviewList = (List) => {
@@ -198,7 +235,7 @@
onOk() {
let param = {
func: 'sPC_MainMenu_Del',
- MenuID: menu.card.ParentID
+ MenuID: menu.card.MenuID
}
return Api.submitInterface(param).then(res => {
if (res.status) {
@@ -214,7 +251,7 @@
},
onCancel() {}
})
- } else if (menu.type === 'edit') {
+ } else if (menu.type === 'edit' && this.props.editLevel === 'level2') {
this.setState({
modalOptions: {
visible: true,
@@ -226,84 +263,188 @@
menu: menu.card
}
})
+ } else if (menu.type === 'edit' && this.props.editLevel === 'level3') {
+ this.setState({
+ modalOptions: {
+ visible: true,
+ title: this.state.dict['header.menu.editTitle'],
+ level: 'tlevel',
+ type: 'edit',
+ parentMenu: this.state.editMenu,
+ supMenuList: this.state.subMenulist,
+ menu: menu.card
+ }
+ })
}
+ }
+
+ createThMenu = () => {
+ this.setState({
+ modalOptions: {
+ visible: true,
+ title: this.state.dict['header.menu.addtitle'],
+ level: 'tlevel',
+ type: 'add',
+ parentMenu: this.state.editMenu,
+ supMenuList: this.state.subMenulist,
+ menu: null
+ }
+ })
}
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
- }
+ if (this.props.editLevel === 'level2') {
+ 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 {
- notification.warning({
- top: 92,
- message: res.message,
- duration: 10
- })
+ this.props.resetEditLevel(false)
}
- })
- } 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 {
+ } else if (type === 'close') {
this.props.resetEditLevel(false)
}
- } else if (type === 'close') {
- this.props.resetEditLevel(false)
+ } else {
+ if (type === 'add') {
+ this.setState({
+ createThirdMenu: true
+ // modalOptions: {
+ // visible: true,
+ // title: this.state.dict['header.menu.addtitle'],
+ // level: 'tlevel',
+ // type: 'add',
+ // parentMenu: this.state.editMenu,
+ // supMenuList: this.state.subMenulist,
+ // menu: null
+ // }
+ })
+ } else if (type === 'thaw') {
+ this.setState({
+ thawMvisible: true
+ })
+ Api.submitInterface({
+ func: 'sPC_Get_FrozenMenu',
+ ParentID: this.state.editMenu.MenuID,
+ TYPE: 30
+ }).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.editMenu.children))) {
+ 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)
+ }
}
}
@@ -451,22 +592,25 @@
<aside className={"side-menu ant-menu-dark" + (this.props.collapse ? ' side-menu-collapsed' : '') + (this.props.isiframe ? ' iframe' : '')}>
{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}>
+ {editShow && <li className="sup-menu"><Icon onClick={this.enterSubEdit} className="edit-check" type="edit" /></li>}
{this.state.subMenulist.map((item, index) => {
return (
<SubMenu
- key={item.ParentID}
+ key={item.MenuID}
title={
<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>{item.text}</span>
</span>
}
>
+ {editShow && <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}>
+ <Icon onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check" type="edit" />
+ </li>}
{item.children.map(cell => {
return (
<Menu.Item key={cell.MenuID}>
- <a href={cell.src} id={cell.MenuID} data-item={JSON.stringify(cell)} onClick={this.changemenu.bind(this)}>{cell.MenuName}</a>
+ <a href={cell.src} id={cell.MenuID} data-item={JSON.stringify(cell)} onClick={this.changemenu.bind(this)}>{cell.text}</a>
</Menu.Item>
)
})}
@@ -479,6 +623,29 @@
<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>
+ }
+ {this.props.editLevel === 'level3' && this.state.editMenu && !this.state.menuLoading &&
+ <div>
+ <div className="cus-submenu-title">
+ <Icon type={this.state.editMenu.PageParam.Icon} />
+ <span>{this.state.editMenu.text}</span>
+ </div>
+ <DndProvider className="header-drag-menu" backend={HTML5Backend}>
+ <DragElement
+ list={this.state.editMenu.children}
handlePreviewList={this.handlePreviewList}
handleMenu={this.handleMenu}
/>
@@ -520,39 +687,55 @@
{!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">
+ {this.props.editLevel === 'level3' && this.state.createThirdMenu && <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" />
+ <TabPane tab="鏂板缓鑿滃崟" key="1">
+ <Row>
+ <Col span={8}>
+ <Card
+ title={
+ '鍩虹琛ㄦ牸'
+ }>
+ <img src={nortable} alt=""/>
+ <div className="card-operation">
+ <Button type="primary">棰勮</Button>
+ <Button type="primary" onClick={() => {this.createThMenu()}}>浣跨敤妯℃澘</Button>
</div>
+ </Card>
+ </Col>
+ <Col span={8}>
+ <Card
+ title={
+ '鏁版嵁琛ㄦ牸'
+ }>
+ <img src={nortable} alt=""/>
+ <div className="card-operation">
+ <Button type="primary">棰勮</Button>
+ <Button type="primary" onClick={() => {this.createThMenu()}}>浣跨敤妯℃澘</Button>
+ </div>
+ </Card>
+ </Col>
+ </Row>
+ </TabPane>
+ {/* <TabPane tab="涓夌骇鑿滃崟" key="2">
+ <Card
+ // className="level2-left"
+ title={
+ <div>
+ <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 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>
+ }>
+ <img src={nortable} alt=""/>
</Card>
- </TabPane>
+ </TabPane> */}
</Tabs>
</div>
- </div>} */}
+ </div>}
</aside>
)
}
--
Gitblit v1.8.0