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