From 78893aac37ff8bdc2ef339d91f383e40aa530300 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 05 十一月 2019 17:36:54 +0800
Subject: [PATCH] update-header
---
src/components/header/index.jsx | 390 +++++--------------------------------------------------
1 files changed, 37 insertions(+), 353 deletions(-)
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index a3430d5..7ebbce4 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -3,15 +3,11 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-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 {Dropdown, Menu, Icon, Modal, message, Form, notification, Switch } from 'antd'
import md5 from 'md5'
+import asyncComponent from '@/utils/asyncComponent'
import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState, resetEditLevel} from '@/store/action'
import Resetpwd from '@/components/resetpwd'
-import TransferForm from '@/components/transferform'
-import MenuForm from './menuform'
-import DragElement from './dragelement'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
@@ -20,8 +16,8 @@
import avatar from '../../assets/img/avatar.jpg'
import './index.scss'
+const EditMenu = asyncComponent(() => import('./editmenu'))
const { confirm } = Modal
-let previewList = null
class Header extends Component {
static propTpyes = {
@@ -33,12 +29,7 @@
}
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')
@@ -167,123 +158,30 @@
this.props.modifyMainMenu(result.data[0])
}
- previewList = result.data.map((item, index) => {
- item.id = index
- item.text = item.MenuName
- if (item.PageParam) {
- try {
- item.PageParam = JSON.parse(item.PageParam)
- } catch (e) {
+ this.setState({
+ menulist: result.data.map((item, index) => {
+ item.id = index
+ item.text = item.MenuName
+ if (item.PageParam) {
+ try {
+ item.PageParam = JSON.parse(item.PageParam)
+ } catch (e) {
+ item.PageParam = {OpenType: 'menu', linkUrl: ''}
+ }
+ } else {
item.PageParam = {OpenType: 'menu', linkUrl: ''}
}
- } else {
- item.PageParam = {OpenType: 'menu', linkUrl: ''}
- }
- return item
- })
-
- this.setState({
- menulist: previewList
+ return item
+ })
})
}
}
- handlePreviewList = (List) => {
- // 鑿滃崟椤哄簭鏀瑰彉鏃讹紝淇濆瓨涓棿鐘舵��
- previewList = List
- }
-
- handleButton = (type) => {
- // 鑿滃崟缂栬緫锛氭坊鍔狅紝纭畾锛屽彇娑�
- 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))) {
- 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 {
- notification.warning({
- top: 92,
- message: res.message,
- duration: 10
- })
- }
- })
- },
- 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.setState({
- thawmenulist: res.data.map(menu => {
- return {
- key: menu.MenuID,
- title: menu.MenuName
- }
- })
- })
- } else {
- notification.warning({
- top: 92,
- message: res.message,
- duration: 10
- })
- }
- })
- } else {
- previewList = this.state.menulist
- this.props.resetEditLevel(false)
- }
- }
-
- handleMenu = (Menu) => {
- // 鑿滃崟缂栬緫锛氫慨鏀�
- 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 {
- this.setState({
- editMvisible: true,
- editMenu: menu.card
- })
- }
+ reload = () => {
+ this.setState({
+ menulist: null
+ })
+ this.loadmenu()
}
changeEditState = (state) => {
@@ -291,178 +189,23 @@
this.props.resetEditState(state)
}
- addMemuSubmit = () => {
- // 鏂板缓鑿滃崟锛氭彁浜�
- this.addMenuFormRef.handleConfirm().then(param => {
- param.func = 'sPC_MainMenu_Add'
- param.Sort = (this.state.menulist.length + 1) * 10
- this.setState({
- confirmLoading: true
- })
- Api.submitInterface(param).then(res => {
- if (res.status) {
- this.setState({
- confirmLoading: false,
- addMvisible: false,
- menulist: null
- })
- this.addMenuFormRef.handleReset('add')
- this.loadmenu()
- } else {
- this.setState({
- confirmLoading: false
- })
- notification.warning({
- top: 92,
- message: res.message,
- duration: 10
- })
- }
- })
- }, () => {})
- }
-
- addMemuCancel = () => {
- // 鏂板缓鑿滃崟锛氬彇娑�
- this.setState({
- confirmLoading: false,
- addMvisible: false
- })
- this.addMenuFormRef.handleReset('add')
- }
-
- editMemuSubmit = () => {
- // 缂栬緫鑿滃崟锛氭彁浜�
- this.editMenuFormRef.handleConfirm().then(param => {
- param.func = 'sPC_MainMenu_Upt'
- this.setState({
- confirmLoading: true
- })
- Api.submitInterface(param).then(res => {
- if (res.status) {
- this.setState({
- confirmLoading: false,
- editMvisible: false,
- editMenu: null,
- menulist: null
- })
- this.loadmenu()
- } else {
- this.setState({
- confirmLoading: false
- })
- notification.warning({
- top: 92,
- message: res.message,
- duration: 10
- })
- }
- })
- }, () => {})
- }
-
- editMemuCancel = () => {
- // 缂栬緫鑿滃崟锛氬彇娑�
- this.setState({
- confirmLoading: false,
- editMvisible: false,
- editMenu: null
- })
- }
-
- 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 {
- notification.warning({
- top: 92,
- message: res.message,
- duration: 10
- })
- }
- })
- },
- 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')
+ }
+
+ exitEdit = () => {
+ // 閫�鍑虹紪杈戠姸鎬�
+ this.props.resetEditLevel(false)
}
UNSAFE_componentWillMount () {
// 缁勪欢鍔犺浇鏃讹紝鑾峰彇鑿滃崟鏁版嵁
this.loadmenu()
+ }
+
+ UNSAFE_componentWillReceiveProps () {
+
}
shouldComponentUpdate (nextProps, nextState) {
@@ -488,29 +231,21 @@
<Icon type={this.props.collapse ? 'menu-unfold' : 'menu-fold'} />
</div>
{/* 姝ｅ父鑿滃崟 */}
- {this.props.editLevel !== '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' : ''}>
{item.MenuName}
</li>
)
- })
- }</ul>}
+ })}
+ </ul>}
{/* 杩涘叆缂栬緫鎸夐挳 */}
{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}
- handlePreviewList={this.handlePreviewList}
- handleMenu={this.handleMenu}
- handleButton={this.handleButton}
- />
- </DndProvider>}
- {/* 缂栬緫mask */}
- <div className={'mask ' + (this.props.editLevel === 'level1' ? 'active' : '')}></div>
+ {this.props.editLevel === 'level1' && <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/>}
+ {/* 澶村儚銆佺敤鎴峰悕 */}
<Dropdown className="header-setting" overlay={menu}>
<div>
<img src={avatar} alt=""/>
@@ -530,57 +265,6 @@
onCancel={this.handleCancel}
>
<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}
- >
- <MenuForm
- dict={this.state.dict}
- type="add"
- menu={null}
- 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}
- footer={null}
- onCancel={this.editMemuCancel}
- >
- <MenuForm
- dict={this.state.dict}
- 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>
)
--
Gitblit v1.8.0