From 176c6e1da22e96a1110fa91f8fc8eb8ad2881e08 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 08 八月 2022 18:13:37 +0800 Subject: [PATCH] 2022-08-08 --- src/menu/components/tabs/antv-tabs/index.jsx | 61 +++++++++++++++--------------- 1 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/menu/components/tabs/antv-tabs/index.jsx b/src/menu/components/tabs/antv-tabs/index.jsx index 31c2f9c..fbcfe24 100644 --- a/src/menu/components/tabs/antv-tabs/index.jsx +++ b/src/menu/components/tabs/antv-tabs/index.jsx @@ -1,23 +1,23 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Tabs, Icon, Popover, Modal } from 'antd' +import { Tabs, Popover, Modal } from 'antd' +import { PlusOutlined, CloseOutlined, EditOutlined, DeleteOutlined, FontColorsOutlined, ToolOutlined } from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' +import MkIcon from '@/components/mk-icon' import DraggableTabs from './dragabletabs' import { resetStyle } from '@/utils/utils-custom.js' import MenuUtils from '@/utils/utils-custom.js' import Utils from '@/utils/utils.js' import { getTabForm, getTabsSetForm } from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) -const PasteController = asyncIconComponent(() => import('@/menu/pastecontroller')) +const PasteComponent = asyncIconComponent(() => import('../paste')) const TabComponents = asyncComponent(() => import('../tabcomponents')) const { TabPane } = Tabs @@ -31,7 +31,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), tabs: null, editab: null, @@ -45,7 +44,6 @@ let _tabs = { uuid: tabs.uuid, type: tabs.type, - floor: tabs.floor, tabId: tabs.tabId || '', parentId: tabs.parentId || '', subtype: tabs.subtype, @@ -54,9 +52,9 @@ setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name}, style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, subtabs: [ - { uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 1', icon: '', components: [] }, - { uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 2', icon: '', components: [] }, - { uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 3', icon: '', components: [] } + { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 1', icon: '', components: [] }, + { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 2', icon: '', components: [] }, + { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 3', icon: '', components: [] } ] } this.setState({ @@ -297,7 +295,6 @@ tab = { uuid: '', parentId: tabs.uuid, - floor: tabs.floor, label: '', icon: '', components: [] @@ -317,7 +314,11 @@ editab.label = res.label editab.icon = res.icon - editab.hasSearch = res.hasSearch || '' + // editab.hasSearch = res.hasSearch || '' + editab.hide = res.hide || 'false' + editab.backgroundColor = res.backgroundColor + editab.controlVal = res.controlVal || '' + editab.selectVal = res.selectVal || '' editab.blacklist = res.blacklist if (editab.uuid) { @@ -344,7 +345,7 @@ getTabsForms = () => { const { tabs } = this.state - return getTabsSetForm(tabs.setting) + return getTabsSetForm(tabs.setting, tabs.uuid) } updateTabs = (res) => { @@ -357,46 +358,46 @@ } render() { - const { tabs, appType, defaultActiveKey } = this.state + const { tabs, defaultActiveKey } = this.state let _style = resetStyle(tabs.style) return ( - <div className={'menu-tabs-edit-box ' + tabs.setting.display} style={_style} onClick={this.clickComponent} id={tabs.uuid}> - <DraggableTabs defaultActiveKey={defaultActiveKey} tabPosition={tabs.setting.position} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch} onChange={this.onChange}> + <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} onClick={this.clickComponent} id={tabs.uuid}> + <DraggableTabs defaultActiveKey={defaultActiveKey} tabBarStyle={{background: tabs.setting.backgroundColor || 'transparent'}} tabPosition={tabs.setting.position} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch} onChange={this.onChange}> {tabs.subtabs.map(tab => ( <TabPane tab={ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <NormalForm title="鏍囩缂栬緫" width={600} update={this.updateTab} getForms={() => this.getTabForms(tab)}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <NormalForm title="鏍囩缂栬緫" width={800} update={this.updateTab} getForms={() => this.getTabForms(tab)}> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> - <PasteController type="tab" Tab={tab} insert={this.insert} /> - <Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} /> + <PasteComponent Tab={tab} insert={this.insert} /> + <CloseOutlined className="close" onClick={() => this.delTab(tab)} /> </div> } trigger="hover"> - <span>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span> + <span style={{textDecoration: tab.hide === 'true' ? 'line-through' : 'none'}}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> </Popover> - } key={tab.uuid}> - {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? - <Icon className="search-icon" onDoubleClick={() => this.setSearch(tab)} type="search" /> : null} + } key={tab.uuid} style={{backgroundColor: tab.backgroundColor || 'transparent'}}> + {/* {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? + <SearchOutlined className="search-icon" onDoubleClick={() => this.setSearch(tab)}/> : null} */} <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> </TabPane> ))} </DraggableTabs> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <NormalForm title="娣诲姞鏍囩" width={600} update={this.updateTab} getForms={() => this.getTabForms()}> - <Icon type="plus" className="plus" title="娣诲姞鏍囩"/> + <NormalForm title="娣诲姞鏍囩" width={800} update={this.updateTab} getForms={() => this.getTabForms()}> + <PlusOutlined className="plus" title="娣诲姞鏍囩"/> </NormalForm> - <NormalForm title="鏍囩椤佃缃�" width={700} update={this.updateTabs} getForms={this.getTabsForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <NormalForm title="鏍囩椤佃缃�" width={800} update={this.updateTabs} getForms={this.getTabsForms}> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="tabs" card={tabs}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(tabs.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> </div> ) -- Gitblit v1.8.0