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.scss | 31
src/components/preview/index.jsx | 57 +++
src/components/preview/index.scss | 25 +
src/components/header/editmenu/index.scss | 10
src/components/header/dragelement/index.scss | 9
src/components/header/index.jsx | 390 ++--------------------
src/components/sidemenu/index.scss | 23
package.json | 2
src/components/sidemenu/index.jsx | 83 +++-
src/components/header/dragelement/index.jsx | 12
src/components/header/editmenu/index.jsx | 373 +++++++++++++++++++++
11 files changed, 608 insertions(+), 407 deletions(-)
diff --git a/package.json b/package.json
index 6dabde0..53dddf9 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
"workbox-webpack-plugin": "4.3.1"
},
"scripts": {
- "dev": "set PORT=3001 && node scripts/start.js --host 192.168.8.106",
+ "dev": "set PORT=3001 && node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
diff --git a/src/components/header/dragelement/index.jsx b/src/components/header/dragelement/index.jsx
index 4af0471..2a9205e 100644
--- a/src/components/header/dragelement/index.jsx
+++ b/src/components/header/dragelement/index.jsx
@@ -61,12 +61,14 @@
findCard={findCard}
/>
))}
- <div className="card-add" onClick={add}>
- <Icon type="plus" />
+ <div className="btn-group">
+ <div className="card-add" onClick={add}>
+ <Icon type="plus" />
+ </div>
+ <Button type="primary" onClick={thawmenu}>{dict['header.thawmenu']}</Button>
+ <Button type="primary" onClick={confirm}>{dict['header.confirm']}</Button>
+ <Button onClick={cancel}>{dict['header.close']}</Button>
</div>
- <Button type="primary" onClick={thawmenu}>{dict['header.thawmenu']}</Button>
- <Button type="primary" onClick={confirm}>{dict['header.confirm']}</Button>
- <Button onClick={cancel}>{dict['header.close']}</Button>
</div>
)
}
diff --git a/src/components/header/dragelement/index.scss b/src/components/header/dragelement/index.scss
index dbf749f..19aad3e 100644
--- a/src/components/header/dragelement/index.scss
+++ b/src/components/header/dragelement/index.scss
@@ -21,6 +21,9 @@
padding: 0 10px;
height: 26px;
}
+ .btn-group {
+ display: inline-block;
+ }
}
.card {
position: relative;
@@ -47,6 +50,7 @@
}
}
.edit {
+ display: none;
position: absolute;
right: 0;
bottom: 0;
@@ -56,3 +60,8 @@
}
}
}
+.card:hover {
+ .edit {
+ display: inline-block;
+ }
+}
diff --git a/src/components/header/editmenu/index.jsx b/src/components/header/editmenu/index.jsx
new file mode 100644
index 0000000..1a4c061
--- /dev/null
+++ b/src/components/header/editmenu/index.jsx
@@ -0,0 +1,373 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { DndProvider } from 'react-dnd'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { notification, Modal, Button, Spin } from 'antd'
+import TransferForm from '@/components/transferform'
+import DragElement from '../dragelement'
+import MenuForm from '../menuform'
+import Api from '@/api'
+import zhCN from '@/locales/zh-CN/header.js'
+import enUS from '@/locales/en-US/header.js'
+import './index.scss'
+
+const { confirm } = Modal
+let previewList = null
+
+class EditMenu extends Component {
+ static propTpyes = {
+ menulist: PropTypes.any,
+ reload: PropTypes.func,
+ exitEdit: PropTypes.func
+ }
+
+ state = {
+ thawmenulist: null, // 宸插喕缁撶殑涓�绾ц彍鍗�
+ addMvisible: null,
+ editMenu: null, // 缂栬緫鑿滃崟
+ editMvisible: false, // 缂栬緫鑿滃崟妯℃�佹
+ thawMvisible: false, // 瑙ｉ櫎鍐荤粨妯℃�佹
+ confirmLoading: false, // 鎻愪氦涓�傘�傘��
+ dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
+ }
+
+ handlePreviewList = (List) => {
+ // 鑿滃崟椤哄簭鏀瑰彉鏃讹紝淇濆瓨涓棿鐘舵��
+ previewList = List
+ }
+
+ editMenuModal = (Menu) => {
+ // 鑿滃崟缂栬緫锛氫慨鏀�
+ const menu = fromJS(Menu).toJS()
+ if (previewList && !is(fromJS(previewList), fromJS(this.props.menulist))) {
+ notification.warning({
+ top: 92,
+ message: this.state.dict['header.menu.presave'],
+ duration: 10
+ })
+ } else {
+ this.setState({
+ editMvisible: true,
+ editMenu: menu.card
+ })
+ }
+ }
+
+ 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
+ })
+ this.props.reload()
+ } else {
+ this.setState({
+ confirmLoading: false
+ })
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 10
+ })
+ }
+ })
+ }, () => {})
+ }
+
+ editMemuCancel = () => {
+ // 缂栬緫鑿滃崟锛氬彇娑�
+ this.setState({
+ confirmLoading: false,
+ editMvisible: false,
+ editMenu: null
+ })
+ }
+
+ 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.props.reload()
+ } 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')
+ }
+
+ 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.props.reload()
+ } 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
+ })
+ this.props.reload()
+ }
+ })
+ }
+ }
+
+ thawMemuCancel = () => {
+ this.setState({
+ thawMvisible: false,
+ thawmenulist: null
+ })
+ }
+
+
+ handleButton = (type) => {
+ // 鑿滃崟缂栬緫锛氭坊鍔狅紝纭畾锛屽彇娑�
+ let _menuchange = previewList && !is(fromJS(previewList), fromJS(this.props.menulist))
+ if ((type === 'add' || type === 'thawmenu') && _menuchange) {
+ 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' && _menuchange) {
+ 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.props.reload()
+ } 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 {
+ this.props.exitEdit()
+ }
+ }
+
+ UNSAFE_componentWillMount () {
+ previewList = null
+ }
+
+ UNSAFE_componentWillReceiveProps (nextProps) {
+ if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
+ previewList = null
+ }
+ }
+
+ render () {
+ return (
+ <div className="header-edit-box">
+ <div className="mask"></div>
+ {this.props.menulist && <DndProvider backend={HTML5Backend}>
+ <DragElement
+ dict={this.state.dict}
+ list={this.props.menulist}
+ handlePreviewList={this.handlePreviewList}
+ handleMenu={this.editMenuModal}
+ handleButton={this.handleButton}
+ />
+ </DndProvider>}
+ {/* 鏂板缓鑿滃崟妯℃�佹 */}
+ <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.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>
+ {/* 缂栬緫鑿滃崟妯℃�佹 */}
+ <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>
+ </div>
+ )
+ }
+}
+
+export default EditMenu
\ No newline at end of file
diff --git a/src/components/header/editmenu/index.scss b/src/components/header/editmenu/index.scss
new file mode 100644
index 0000000..aea2ae9
--- /dev/null
+++ b/src/components/header/editmenu/index.scss
@@ -0,0 +1,10 @@
+.header-edit-box {
+ .mask {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ background-color: rgba(0, 0, 0, 0.25);
+ }
+}
\ No newline at end of file
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>
)
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
index 79bb28b..3107a3a 100644
--- a/src/components/header/index.scss
+++ b/src/components/header/index.scss
@@ -85,27 +85,28 @@
}
}
}
- .header-drag-menu {
- float: left;
- }
+ // .header-drag-menu {
+ // float: left;
+ // }
.edit-check {
font-size: 18px;
margin-top: 14px;
margin-left: 10px;
cursor: pointer;
}
- .mask {
- position: fixed;
- top: 48px;
- left: 0px;
- right: 0px;
- bottom: calc(100vh - 48px);
- transition: bottom 0.1s;
- }
- .mask.active {
- bottom: 0px;
- background-color: rgba(0, 0, 0, 0.15);
- }
+ // .mask {
+ // position: fixed;
+ // top: 48px;
+ // left: 0px;
+ // right: 0px;
+ // bottom: calc(100vh - 48px);
+ // background-color: rgba(0, 0, 0, 0);
+ // transition: background-color 0.5s;
+ // }
+ // .mask.active {
+ // bottom: 0px;
+ // background-color: rgba(0, 0, 0, 0.25);
+ // }
}
.header-dropdown {
li {
diff --git a/src/components/preview/index.jsx b/src/components/preview/index.jsx
new file mode 100644
index 0000000..0e12ebc
--- /dev/null
+++ b/src/components/preview/index.jsx
@@ -0,0 +1,57 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { Button} from 'antd'
+import './index.scss'
+
+class Preview extends Component {
+ static propTpyes = {
+ preview: PropTypes.any,
+ cancel: PropTypes.func
+ }
+
+ state = {
+ show: false,
+ url: ''
+ }
+
+ UNSAFE_componentWillReceiveProps (nextProps) {
+ if (nextProps.preview) {
+ this.setState({
+ url: nextProps.preview
+ })
+ setTimeout(() => {
+ this.setState({
+ show: true
+ })
+ }, 10)
+ } else {
+ this.setState({
+ show: false
+ })
+ setTimeout(() => {
+ this.setState({
+ url: ''
+ })
+ }, 500)
+ }
+ }
+
+ close = () => {
+ this.props.cancel()
+ }
+
+ render () {
+ return (
+ <div>
+ {this.state.url &&
+ <div className={'preview-box ' + (this.state.show ? 'active' : '')} onClick={this.close}>
+ <Button shape="circle" icon="close" />
+ {this.state.url && <img src={this.state.url} alt=""/>}
+ </div>
+ }
+ </div>
+ )
+ }
+}
+
+export default Preview
\ No newline at end of file
diff --git a/src/components/preview/index.scss b/src/components/preview/index.scss
new file mode 100644
index 0000000..fadcb88
--- /dev/null
+++ b/src/components/preview/index.scss
@@ -0,0 +1,25 @@
+.preview-box {
+ position: fixed;
+ z-index: 1100;
+ left: 0;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
+ background: rgba($color: #000000, $alpha: 0.6);
+ line-height: 100vh;
+ text-align: center;
+ opacity: 0;
+ transition: opacity 0.5s;
+ img {
+ max-width: 80vw;
+ max-height: 90vh;
+ }
+ button {
+ position: absolute;
+ top: 4vh;
+ right: 4vw;
+ }
+}
+.active {
+ opacity: 1;
+}
\ No newline at end of file
diff --git a/src/components/sidemenu/index.jsx b/src/components/sidemenu/index.jsx
index 138a695..505c024 100644
--- a/src/components/sidemenu/index.jsx
+++ b/src/components/sidemenu/index.jsx
@@ -3,18 +3,20 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-import { Menu, Icon, Button, notification, Modal, Spin, Tabs, Radio, Card, Row, Col} from 'antd'
+// 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 {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'
+// import nortable from '@/assets/img/normaltable.jpg'
const { SubMenu } = Menu
const { confirm } = Modal
@@ -48,7 +50,8 @@
thawmenulist: null,
createThirdMenu: false,
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
- openKeys: null
+ openKeys: null,
+ preview: null
}
async loadsubmenu (menu) {
@@ -586,6 +589,18 @@
})
}
+ previewPicture = (url) => {
+ this.setState({
+ preview: url
+ })
+ }
+
+ cancelPrePicture = () => {
+ this.setState({
+ preview: null
+ })
+ }
+
render () {
const editShow = (this.props.editState && !this.props.editLevel) || false
return (
@@ -687,10 +702,11 @@
{!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">
+ {/* {this.props.editLevel === 'level3' && this.state.createThirdMenu &&
+ <div className="editboard">
<div className="workplace">
<Tabs defaultActiveKey="1" onChange={this.callback}>
- <TabPane tab="鏂板缓鑿滃崟" key="1">
+ <TabPane tab="绯荤粺妯℃澘" key="1">
<Row>
<Col span={8}>
<Card
@@ -699,7 +715,7 @@
}>
<img src={nortable} alt=""/>
<div className="card-operation">
- <Button type="primary">棰勮</Button>
+ <Button type="primary" onClick={() => {this.previewPicture(nortable)}}>棰勮</Button>
<Button type="primary" onClick={() => {this.createThMenu()}}>浣跨敤妯℃澘</Button>
</div>
</Card>
@@ -711,31 +727,54 @@
}>
<img src={nortable} alt=""/>
<div className="card-operation">
- <Button type="primary">棰勮</Button>
+ <Button type="primary" onClick={() => {this.previewPicture(nortable)}}>棰勮</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>
- }>
- <img src={nortable} alt=""/>
- </Card>
- </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}/>
</aside>
)
}
diff --git a/src/components/sidemenu/index.scss b/src/components/sidemenu/index.scss
index e3396d2..ec7e69f 100644
--- a/src/components/sidemenu/index.scss
+++ b/src/components/sidemenu/index.scss
@@ -88,6 +88,9 @@
.ant-col {
padding: 10px;
}
+ .ant-card-head-title {
+ text-align: center;
+ }
.ant-card-body {
padding: 2px;
position: relative;
@@ -95,25 +98,23 @@
overflow: hidden;
.card-operation {
position: absolute;
- left: 0px;
right: 0px;
- bottom: 0px;
- top: 100%;
- background: rgba(0, 0, 0, 0.35);
- padding-top: 0;
- transition: top 0.3s, padding-top 0.3s;
- button:first-child {
- margin-right: 10px;
- }
+ top: 0;
+ height: 0px;
+ overflow: hidden;
+ transition: height 0.3s;
button {
+ height: 30px;
+ padding: 0 10px;
+ margin-top: 5px;
+ margin-right: 10px;
display: none;
}
}
}
.ant-card-body:hover {
.card-operation {
- top: 0;
- padding-top: 24%;
+ height: 40px;
button {
display: inline-block;
}
--
Gitblit v1.8.0