From e9c48bd7356462ba9257540b130a47a65ad1861d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 26 八月 2021 17:17:11 +0800 Subject: [PATCH] 2021-08-26 --- src/mob/components/topbar/normal-navbar/index.jsx | 37 ++++++++++++++++++++++++++++--------- 1 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/mob/components/topbar/normal-navbar/index.jsx b/src/mob/components/topbar/normal-navbar/index.jsx index db75aed..f92afda 100644 --- a/src/mob/components/topbar/normal-navbar/index.jsx +++ b/src/mob/components/topbar/normal-navbar/index.jsx @@ -2,15 +2,16 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Icon, Popover } from 'antd' +import { ExpandOutlined, ReloadOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' - +import getWrapForm from './options' import MKEmitter from '@/utils/events.js' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' import './index.scss' -const WrapComponent = asyncIconComponent(() => import('./wrapsetting')) +const NormalForm = asyncIconComponent(() => import('@/components/normalform')) class NormalNavbar extends Component { static propTpyes = { @@ -36,7 +37,7 @@ width: 24, subtype: card.subtype, wrap: { type: 'navbar', height: 50, title: 'NavBar', back: 'true', search: 'false', logout: 'false' }, - style: {borderBottomColor: '#bcbcbc', borderBottomWidth: '1px', paddingLeft: '10px', paddingRight: '10px', lineHeight: '2.8', fontSize: '18px' }, + style: {boxShadow: '0 0 3px #D9D9D9', shadowColor: '#D9D9D9', shadowBlur: '3px', paddingLeft: '10px', paddingRight: '10px', lineHeight: '2.8', fontSize: '18px' }, } if (card.config) { @@ -155,19 +156,37 @@ MKEmitter.emit('changeSearch', card) } + getWrapForms = () => { + const { wrap } = this.state.card + + 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 + let right = null + if (card.wrap.logout === 'true') { + right = <Icon type="logout" /> + } + if (card.wrap.scan === 'true') { + right = !right ? <ExpandOutlined /> : <Icon type="ellipsis" /> + } + if (card.wrap.refresh === 'true') { + right = !right ? <ReloadOutlined /> : <Icon type="ellipsis" /> } return ( - <div className="normal-topbar-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}> + <div className="normal-topbar-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"> - <WrapComponent config={card} updateConfig={this.updateComponent} /> + <NormalForm title="瀵艰埅鏍忚缃�" width={750} update={this.updateWrap} getForms={this.getWrapForms}> + <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + </NormalForm> <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> </div> @@ -184,7 +203,7 @@ } <div className="am-navbar-right"> {card.wrap.search === 'true' ? <Icon type="search" onDoubleClick={this.setSearch}/> : null} - {card.wrap.logout === 'true' ? <Icon type="ellipsis" /> : null} + {right} </div> </div> </div> -- Gitblit v1.8.0