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, // 瑙i櫎鍐荤粨妯℃�佹 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> {/* 姝e父鑿滃崟 */} - {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> - {/* 瑙i櫎鍐荤粨鑿滃崟妯℃�佹 */} - <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