From d7ec8fbd65cd7225ce8d405a0ee0a1f166f44d7b Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 16 九月 2021 17:23:54 +0800 Subject: [PATCH] 2021-09-16 --- src/pc/components/navbar/normal-navbar/index.jsx | 83 +++++++++++++++++++++-------------------- 1 files changed, 43 insertions(+), 40 deletions(-) diff --git a/src/pc/components/navbar/normal-navbar/index.jsx b/src/pc/components/navbar/normal-navbar/index.jsx index 35ef413..6e1d078 100644 --- a/src/pc/components/navbar/normal-navbar/index.jsx +++ b/src/pc/components/navbar/normal-navbar/index.jsx @@ -1,23 +1,20 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Menu } from 'antd' +import { Icon, Popover, Menu, Button } from 'antd' import asyncIconComponent from '@/utils/asyncIconComponent' import MKEmitter from '@/utils/events.js' -// import Utils from '@/utils/utils.js' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' +import getWrapForm from './options' import './index.scss' -const WrapComponent = asyncIconComponent(() => import('./wrapsetting')) +const NormalForm = asyncIconComponent(() => import('@/components/normalform')) const MenuComponent = asyncIconComponent(() => import('./menusetting')) -// const CardComponent = asyncComponent(() => import('../cardcomponent')) -const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) -const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) +const LinkComponent = asyncIconComponent(() => import('./linksetting')) -// const { confirm } = Modal const { SubMenu } = Menu class NormalNavbar extends Component { @@ -42,10 +39,9 @@ type: card.type, floor: card.floor, dataName: card.dataName || '', - width: card.width || 24, name: card.name, subtype: card.subtype, - wrap: { name: card.name, width: card.width || 1200 }, + wrap: { name: card.name, width: card.width || 1200, height: 50 }, logoStyle: { width: '100px' }, style: { }, links: [], @@ -97,26 +93,9 @@ card: component }) - component.width = component.wrap.width component.name = component.wrap.name this.props.updateConfig(component) - } - - /** - * @description 鍗曚釜鍗$墖淇℃伅鏇存柊 - */ - updateCard = (cell) => { - let card = fromJS(this.state.card).toJS() - - card.subcards = card.subcards.map(item => { - if (item.uuid === cell.uuid) return cell - return item - }) - - this.setState({card}) - - this.props.updateConfig(card) } getStyle = (comIds, style) => { @@ -158,34 +137,54 @@ } changeMenu = (menu) => { - MKEmitter.emit('changeEditMenu', menu) + if (menu.property === 'link') { + window.open(menu.link) + return + } + MKEmitter.emit('changeEditMenu', { + MenuID: menu.property === 'linkmenu' ? menu.linkMenuId : menu.MenuID, + copyMenuId: menu.property === 'menu' ? menu.copyMenuId : '', + MenuNo: menu.MenuNo, + MenuName: menu.name, + }) } changeLogoMenu = () => { const { card } = this.state + + if (card.wrap.property === 'linkmenu') { + MKEmitter.emit('changeEditMenu', { + MenuID: card.wrap.linkmenu, + copyMenuId: '', + MenuNo: '', + MenuName: '' + }) + } + } - if (!card.wrap.logolink) return + getWrapForms = () => { + const { wrap } = this.state.card - MKEmitter.emit('changeEditMenu', {MenuID: card.wrap.logolink}) + return getWrapForm(wrap) + } + + updateWrap = (res) => { + this.updateComponent({...this.state.card, wrap: res}) } render() { const { card } = this.state - let _style = {...card.style} - if (_style.shadow) { - _style.boxShadow = '0 0 4px ' + _style.shadow - } - return ( - <div className="normal-navbar-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}> + <div className="normal-navbar-edit-box" style={card.style} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <MenuComponent config={card} updateConfig={this.updateComponent} /> - <WrapComponent config={card} updateConfig={this.updateComponent} /> - <CopyComponent type="normalnarbar" card={card}/> + <LinkComponent config={card} updateConfig={this.updateComponent} /> + <NormalForm title="瀵艰埅鏍忚缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> + <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + </NormalForm> <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <UserComponent config={card}/> <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> </div> } trigger="hover"> @@ -230,7 +229,7 @@ ) } else { return ( - <Menu.Item key={fst.MenuID} onClick={(e) => e.stopPropagation()}> + <Menu.Item key={fst.MenuID}> <span onClick={(e) => e.stopPropagation()} onDoubleClick={() => this.changeMenu(fst)}>{fst.name}</span> </Menu.Item> ) @@ -238,7 +237,11 @@ })} </Menu> </div> - <div className="link">asdfds</div> + <div className="link"> + {card.links.map(link => { + return <Button type="link" key={link.MenuID} onDoubleClick={() => this.changeMenu(link)}>{link.name}</Button> + })} + </div> </div> </div> ) -- Gitblit v1.8.0