From e1281cc04b886678a5d0561af556a312ef2b9394 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 11 十一月 2019 18:12:28 +0800
Subject: [PATCH] 2019-11-11
---
src/components/sidemenu/index.jsx | 668 ++++++-------------------------------------------------
1 files changed, 76 insertions(+), 592 deletions(-)
diff --git a/src/components/sidemenu/index.jsx b/src/components/sidemenu/index.jsx
index 505c024..fef3101 100644
--- a/src/components/sidemenu/index.jsx
+++ b/src/components/sidemenu/index.jsx
@@ -3,25 +3,17 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-// import { Menu, Icon, Button, notification, Modal, Spin, Tabs, Card, Row, Col} from 'antd'
-import { Menu, Icon, Button, notification, Modal, Spin, Tabs} from 'antd'
-import HTML5Backend from 'react-dnd-html5-backend'
-import { DndProvider } from 'react-dnd'
+import { Menu, Icon } from 'antd'
+import asyncComponent from '@/utils/asyncComponent'
import {modifyTabview, resetEditLevel} from '@/store/action'
-import TransferForm from '@/components/transferform'
-import Preview from '@/components/preview'
-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'
-// import nortable from '@/assets/img/normaltable.jpg'
+const EditSecMenu = asyncComponent(() => import('./editsecmenu'))
+const EditThdMenu = asyncComponent(() => import('./editthdmenu'))
const { SubMenu } = Menu
-const { confirm } = Modal
-const { TabPane } = Tabs
-let previewList = null
class Sidemenu extends Component {
static propTypes = {
@@ -37,17 +29,6 @@
subMenulist: null, // 浜岀骇鑿滃崟
editMenu: null, // 缂栬緫涓夌骇鑿滃崟鏃惰缃�
rootSubmenuKeys: null,
- modalOptions: {
- visible: false,
- title: '',
- level: 'slevel',
- type: 'add',
- menu: null
- },
- confirmLoading: false,
- menuLoading: false,
- thawMvisible: false,
- thawmenulist: null,
createThirdMenu: false,
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
openKeys: null,
@@ -55,8 +36,7 @@
}
async loadsubmenu (menu) {
- this.setState({menuLoading: true})
- let result = await Api.getSubMenuData(menu.MenuID)
+ let result = await Api.getSystemConfig({func: 'sPC_Get_FunMenu', ParentID: menu.MenuID})
if (result.status) {
let param = sessionStorage.getItem('view_param') // 鏄惁涓烘墦寮�鏂伴〉闈�
let msg = sessionStorage.getItem('UserID') + '&' + sessionStorage.getItem('SessionUid') + '&' + sessionStorage.getItem('LoginUID')
@@ -70,49 +50,52 @@
}
let parentID = result.data[submenuindex] ? result.data[submenuindex].ParentID : '' // 灞曞紑浜岀骇鑿滃崟ID
+ let menulist = result.data.map((item, i) => {
+ let _smenu = {}
+ _smenu.id = i
+ _smenu.MenuID = item.ParentID
+ _smenu.text = item.MenuNameP
+ try {
+ _smenu.PageParam = JSON.parse(item.PageParamP)
+ } catch (e) {
+ _smenu.PageParam = {Icon: 'folder'}
+ }
+ if (item.FunMenu) {
+ _smenu.children = item.FunMenu.map((child, n) => {
+ let _tmenu = {}
+ let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 寰呭畬鍠�
+ _tmenu.src = '#/main/' + _msg
+ if (child.LinkUrl === 'CommonTable') {
+ _tmenu.type = 'CommonTable'
+ } else if (child.LinkUrl === 'DataManage') {
+ _tmenu.type = 'DataManage'
+ } else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
+ _tmenu.type = 'RoleManage'
+ } else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
+ _tmenu.type = 'iframe'
+ }
+ 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
+ _tmenu.type = _tmenu.PageParam.Template || _tmenu.type
+ return _tmenu
+ })
+ }
+ return _smenu
+ })
+
this.setState({
- menuLoading: false,
- subMenulist: result.data.map((item, i) => {
- let _smenu = {}
- _smenu.id = i
- _smenu.MenuID = item.ParentID
- _smenu.text = item.MenuNameP
- try {
- _smenu.PageParam = JSON.parse(item.PageParamP)
- } catch (e) {
- _smenu.PageParam = {Icon: 'folder'}
- }
- if (item.FunMenu) {
- _smenu.children = item.FunMenu.map((child, n) => {
- let _tmenu = {}
- let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 寰呭畬鍠�
- _tmenu.src = '#/main/' + _msg
- if (child.LinkUrl === 'CommonTable') {
- _tmenu.type = 'CommonTable'
- } else if (child.LinkUrl === 'DataManage') {
- _tmenu.type = 'DataManage'
- } else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
- _tmenu.type = 'RoleManage'
- } else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
- _tmenu.type = 'iframe'
- }
- 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 _smenu
- }),
+ subMenulist: menulist,
rootSubmenuKeys: result.data.map(item => item.ParentID),
- openKeys: (this.props.collapse || !parentID) ? [] : [parentID]
+ openKeys: (this.props.collapse || !parentID) ? [] : [parentID],
+ editMenu: this.props.editLevel === 'level3' && menulist.filter(menu => menu.MenuID === this.state.editMenu.MenuID)[0]
})
if (tabindex !== null) {
@@ -120,6 +103,7 @@
opentab.selected = true
this.props.modifyTabview([opentab])
}
+
// this.props.modifyTabview([{
// Action: 'Index',
// Icon: 'Content/icons/L32X32/RoleM.png',
@@ -193,9 +177,9 @@
enterSubEdit = (e) => {
// 缂栬緫浜岀骇鑿滃崟
e.stopPropagation()
- previewList = null
this.props.resetEditLevel('level2')
- Api.getMainMenuData().then(res => {
+ // 鑾峰彇涓�绾ц彍鍗曞垪琛�
+ Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
this.setState({
mainMenuList: res.data.map(item => {
return {
@@ -210,402 +194,26 @@
enterThrEdit = (e, menu) => {
// 缂栬緫涓夌骇鑿滃崟
e.stopPropagation()
- previewList = null
this.props.resetEditLevel('level3')
this.setState({editMenu: menu})
}
- handlePreviewList = (List) => {
- // 鑿滃崟椤哄簭鏀瑰彉鏃讹紝淇濆瓨涓棿鐘舵��
- previewList = List
+ reload = () => {
+ this.loadsubmenu(this.props.mainMenu)
}
- 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.MenuID
- }
- 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.props.editLevel === 'level2') {
- 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
- }
- })
- } 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
- }
- })
+ exitEdit = () => {
+ if (this.props.editLevel === 'level3') {
+ this.setState({editMenu: null})
}
- }
-
- 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 (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 {
- 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)
- }
- }
- }
-
- 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
- })
- }
-
- previewPicture = (url) => {
- this.setState({
- preview: url
- })
- }
-
- cancelPrePicture = () => {
- this.setState({
- preview: null
- })
+ this.props.resetEditLevel(false)
}
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.props.editLevel || this.props.editLevel === 'level1') &&
+ {this.state.subMenulist && !(this.props.editLevel === 'level2' || this.props.editLevel === 'level3') &&
<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) => {
@@ -633,148 +241,24 @@
)
})}
</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>
- }
- {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}
- />
- </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}
+ {this.props.editLevel === 'level2' &&
+ <EditSecMenu
+ menulist={this.state.subMenulist}
+ supMenuList={this.state.mainMenuList}
+ supMenu={this.props.mainMenu}
+ reload={this.reload}
+ exitEdit={this.exitEdit}
/>
- </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 === 'level3' && this.state.createThirdMenu &&
- <div className="editboard">
- <div className="workplace">
- <Tabs defaultActiveKey="1" onChange={this.callback}>
- <TabPane tab="绯荤粺妯℃澘" key="1">
- <Row>
- <Col span={8}>
- <Card
- title={
- '鍩虹琛ㄦ牸'
- }>
- <img src={nortable} alt=""/>
- <div className="card-operation">
- <Button type="primary" onClick={() => {this.previewPicture(nortable)}}>棰勮</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" onClick={() => {this.previewPicture(nortable)}}>棰勮</Button>
- <Button type="primary" onClick={() => {this.createThMenu()}}>浣跨敤妯℃澘</Button>
- </div>
- </Card>
- </Col>
- </Row>
- </TabPane>
- <TabPane tab="鑷畾涔夋ā鏉�" key="2">
- <Row>
- <Col span={8}>
- <Card
- title={
- '鍩虹琛ㄦ牸'
- }>
- <img src={nortable} alt=""/>
- <div className="card-operation">
- <Button type="primary" onClick={() => {this.previewPicture(nortable)}}>棰勮</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" onClick={() => {this.previewPicture(nortable)}}>棰勮</Button>
- <Button type="primary" onClick={() => {this.createThMenu()}}>浣跨敤妯℃澘</Button>
- </div>
- </Card>
- </Col>
- </Row>
- </TabPane>
- </Tabs>
- </div>
- </div>} */}
- {<div className="editboard">
- <div className="workplace">
- <Tabs defaultActiveKey="1">
- <TabPane tab="缂栬緫妯℃澘" key="1">
-
- </TabPane>
- </Tabs>
- </div>
- </div>}
- <Preview cancel={this.cancelPrePicture} preview={this.state.preview}/>
+ }
+ {this.props.editLevel === 'level3' && this.state.subMenulist &&
+ <EditThdMenu
+ menulist={this.state.editMenu.children}
+ supMenuList={this.state.subMenulist}
+ supMenu={this.state.editMenu}
+ reload={this.reload}
+ exitEdit={this.exitEdit}
+ />
+ }
</aside>
)
}
--
Gitblit v1.8.0