From 8d66ff34fae5b048a6b7923cc75d34f13a08be9d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 02 八月 2022 11:42:43 +0800 Subject: [PATCH] Merge branch 'develop' --- src/mob/components/menubar/normal-menubar/index.jsx | 143 ++++++++++++++++++++++++++++++++++------------- 1 files changed, 102 insertions(+), 41 deletions(-) diff --git a/src/mob/components/menubar/normal-menubar/index.jsx b/src/mob/components/menubar/normal-menubar/index.jsx index e2e9dc2..53d4e1f 100644 --- a/src/mob/components/menubar/normal-menubar/index.jsx +++ b/src/mob/components/menubar/normal-menubar/index.jsx @@ -1,23 +1,24 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal } from 'antd' +import { Popover, Modal } from 'antd' +import { ToolOutlined, PlusOutlined, SettingOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' import { resetStyle } from '@/utils/utils-custom.js' 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 = asyncComponent(() => import('./menucomponent')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) +const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) const { confirm } = Modal @@ -29,7 +30,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -41,14 +41,17 @@ let _card = { uuid: card.uuid, type: card.type, - floor: card.floor, tabId: '', parentId: '', + format: 'object', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡 + pageable: false, // 缁勪欢灞炴�� - 鏄惁鍙垎椤� + switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹� dataName: card.dataName || '', width: card.width || 24, name: card.name, subtype: card.subtype, - wrap: { name: card.name, width: card.width || 24, title: '' }, + setting: { interType: 'system' }, + wrap: { name: card.name, width: card.width || 24, title: '', permission: 'true' }, style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' }, headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, subMenus: [{ @@ -125,6 +128,11 @@ card.subMenus = card.subMenus.map(item => { if (item.uuid === cell.uuid) return cell + if (cell.oriuuid && item.uuid === cell.oriuuid) { + delete cell.oriuuid + + return cell + } return item }) @@ -136,26 +144,33 @@ /** * @description 鍗曚釜鍗$墖淇℃伅鏇存柊 */ - deleteCard = (cell) => { + deleteCard = (cell, type) => { let card = fromJS(this.state.card).toJS() let _this = this - confirm({ - content: '纭畾鍒犻櫎鍗$墖鍚楋紵', - onOk() { - card.subMenus = card.subMenus.filter(item => item.uuid !== cell.uuid) - - _this.setState({card}) - _this.props.updateConfig(card) - }, - onCancel() {} - }) + if (type !== 'direct') { + confirm({ + content: '纭畾鍒犻櫎鍗$墖鍚楋紵', + onOk() { + card.subMenus = card.subMenus.filter(item => item.uuid !== cell.uuid) + + _this.setState({card}) + _this.props.updateConfig(card) + }, + onCancel() {} + }) + } else { + card.subMenus = card.subMenus.filter(item => item.uuid !== cell.uuid) + + this.setState({card}) + this.props.updateConfig(card) + } } changeStyle = () => { const { card } = this.state - MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style) + MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style) } getStyle = (comIds, style) => { @@ -177,7 +192,7 @@ let newcard = { uuid: Utils.getuuid(), - setting: { type: 'menu', width: 6, sign: 'icon', icon: 'user', name: '瀹㈡埛', url: '', color: '#ffffff', iconFont: 20, padding: 12, background: '#1890ff', imgWidth: '' }, + setting: { type: 'menu', width: 6, sign: 'icon', icon: '', name: '', url: '', color: '#ffffff', iconFont: 20, padding: 12, background: '#1890ff', imgWidth: '' }, style: { paddingTop: '15px', paddingBottom: '15px' } @@ -186,12 +201,44 @@ if (card.subMenus.length > 0) { newcard = fromJS(card.subMenus.slice(-1)[0]).toJS() newcard.uuid = Utils.getuuid() + + newcard.setting.clearMenu = 'true' + newcard.setting.icon = '' + newcard.setting.name = '' + newcard.setting.MenuNo = '' + newcard.setting.type = 'menu' + newcard.setting.copyMenuId = '' + newcard.setting.linkMenuId = '' + newcard.setting.linkurl = '' + newcard.setting.tip = '' + newcard.setting.url = '' } card.subMenus.push(newcard) this.setState({card}) this.props.updateConfig(card) + + setTimeout(() => { + let node = document.getElementById(newcard.uuid) + node && node.click() + }, 200) + } + + filterComponent = (config) => { + let item = null + config.subMenus.forEach(menu => { + if (menu.setting.type === 'linkmenu' && menu.setting.linkMenuId === '') { + item = menu + } + }) + + this.updateComponent(config) + + setTimeout(() => { + let node = document.getElementById(item.uuid) + node && node.click() + }, 200) } move = (item, direction) => { @@ -214,6 +261,25 @@ this.props.updateConfig(card) } + getWrapForms = () => { + const { card } = this.state + + return getWrapForm(card.wrap) + } + + updateWrap = (res) => { + let card = {...this.state.card, wrap: res} + if (res.datatype === 'dynamic' && !card.format) { + card.format = 'object' + card.pageable = false + card.switchable = false + card.setting = { interType: 'system' } + card.columns = [] + card.scripts = [] + } + this.updateComponent(card) + } + clickComponent = (e) => { if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { e.stopPropagation() @@ -224,37 +290,32 @@ render() { const { card } = this.state - let offset = 0 - if (card.wrap.cardFloat && card.wrap.cardFloat !== 'left') { - let _width = 0 - card.subMenus.forEach(card => { - _width += card.setting.width - }) - offset = _width < 24 ? 24 - _width : 0 - if (card.wrap.cardFloat === 'center') { - offset = Math.floor(offset / 2) - } - } - let _style = resetStyle(card.style) return ( <div className="menu-menubar-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}> - <NormalHeader config={card} updateComponent={this.updateComponent}/> + {card.wrap.title ? <NormalHeader config={card} updateComponent={this.updateComponent}/> : null} <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鑿滃崟" onClick={this.addMenu} type="plus" /> - <WrapComponent config={card} updateConfig={this.updateComponent} /> - <CopyComponent type="normalmenu" card={card}/> - <PasteComponent config={card} options={['menucell']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <PlusOutlined className="plus" title="娣诲姞鑿滃崟" onClick={this.addMenu}/> + <NormalForm title="鑿滃崟璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> + </NormalForm> + <CopyComponent type="menubar" card={card}/> + <PasteComponent config={card} options={['menucell']} updateConfig={this.filterComponent} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} /> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> + {card.wrap.datatype === 'dynamic' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} + {card.wrap.datatype !== 'dynamic' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> - {card.subMenus.map((menu, index) => (<MenuComponent key={menu.uuid} offset={!index ? offset : 0} cards={card} card={menu} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} + <div className={(card.wrap.layout || 'grid') + '-layout'}> + {card.subMenus.map((menu, index) => (<MenuComponent key={menu.uuid} cards={card} card={menu} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} + </div> + <div className="component-name"><div className="center">{card.name}</div></div> </div> ) } -- Gitblit v1.8.0