From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 09 十二月 2022 15:53:32 +0800 Subject: [PATCH] 2022-12-09 --- src/menu/components/tabs/antv-tabs/index.jsx | 147 ++++++++---------------------------------------- 1 files changed, 25 insertions(+), 122 deletions(-) diff --git a/src/menu/components/tabs/antv-tabs/index.jsx b/src/menu/components/tabs/antv-tabs/index.jsx index a6feb86..523c8b2 100644 --- a/src/menu/components/tabs/antv-tabs/index.jsx +++ b/src/menu/components/tabs/antv-tabs/index.jsx @@ -10,7 +10,6 @@ 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 './index.scss' @@ -31,7 +30,6 @@ } state = { - appType: sessionStorage.getItem('appType'), tabs: null, editab: null, defaultActiveKey: '' @@ -44,17 +42,15 @@ let _tabs = { uuid: tabs.uuid, type: tabs.type, - tabId: tabs.tabId || '', - parentId: tabs.parentId || '', subtype: tabs.subtype, width: 24, name: tabs.name, 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, 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: [] } + { uuid: Utils.getuuid(), label: 'Tab 1', icon: '', components: [] }, + { uuid: Utils.getuuid(), label: 'Tab 2', icon: '', components: [] }, + { uuid: Utils.getuuid(), label: 'Tab 3', icon: '', components: [] } ] } this.setState({ @@ -74,13 +70,6 @@ return !is(fromJS(this.state), fromJS(nextState)) } - componentDidMount () { - MKEmitter.addListener('submitStyle', this.getStyle) - MKEmitter.addListener('submitSearch', this.getSearch) - MKEmitter.addListener('tabsChange', this.handleTabsChange) - MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) - } - /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 */ @@ -88,57 +77,16 @@ this.setState = () => { return } - MKEmitter.removeListener('submitStyle', this.getStyle) - MKEmitter.removeListener('submitSearch', this.getSearch) - MKEmitter.removeListener('tabsChange', this.handleTabsChange) - MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) - } - - updateComponentStyle = (parentId, keys, style) => { - const { tabs } = this.state - - if (tabs.subtabs.findIndex(tab => tab.uuid === parentId) === -1) return - - let _tabs = fromJS(tabs).toJS() - let _tabs_ = fromJS(tabs).toJS() - - let components = [] - _tabs.subtabs.forEach(tab => { - if (tab.uuid === parentId) { - components = tab.components.map(item => { - if (keys.includes(item.uuid)) { - item.style = {...item.style, ...style} - } - return item - }) - tab.components = [] - } - }) - - _tabs_.subtabs = _tabs_.subtabs.map(tab => { - if (tab.uuid === parentId) { - tab.components = components - } - return tab - }) - - this.setState({tabs: _tabs}, () => { - this.updateComponent(_tabs_) - }) } changeStyle = () => { const { tabs } = this.state - MKEmitter.emit('changeStyle', [tabs.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], tabs.style) + MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow', 'clear'], tabs.style, this.getStyle) } - getStyle = (comIds, style) => { - const { tabs } = this.state - - if (comIds.length !== 1 || comIds[0] !== tabs.uuid) return - - let _card = {...tabs, style} + getStyle = (style) => { + let _card = {...this.state.tabs, style} this.setState({ tabs: _card @@ -147,12 +95,18 @@ this.props.updateConfig(_card) } - handleTabsChange = (parentId) => { - const { tabs } = this.state - - if (parentId === tabs.parentId) { - MKEmitter.emit('tabsChange', tabs.uuid) - } + getSubIds = (components, ids) => { + components.forEach(item => { + if (item.type === 'tabs') { + item.subtabs.forEach(tab => { + this.getSubIds(tab.components, ids) + }) + } else if (item.type === 'group') { + this.getSubIds(item.components, ids) + } else { + ids.push(item.uuid) + } + }) } updateComponent = (component) => { @@ -160,7 +114,11 @@ if (!is(fromJS(tabs.setting), fromJS(component.setting)) || !is(fromJS(tabs.style), fromJS(component.style))) { // 娉ㄥ唽浜嬩欢-鏍囩鍙樺寲锛岄�氱煡鏍囩鍐呭厓绱� - MKEmitter.emit('tabsChange', tabs.uuid) + let ids = [] + tabs.subtabs.forEach(tab => { + this.getSubIds(tab.components, ids) + }) + MKEmitter.emit('tabsChange', ids.join(',')) } component.width = component.setting.width @@ -193,18 +151,12 @@ tabs.subtabs = tabs.subtabs.filter(t => t.uuid !== tab.uuid) - let uuids = MenuUtils.getDelButtonIds({...tab, type: 'group'}) - confirm({ title: '纭畾鍒犻櫎鏍囩锛�', content: '', onOk() { _this.setState({tabs}) _this.props.updateConfig(tabs) - - if (uuids.length === 0) return - - MKEmitter.emit('delButtons', uuids) }, onCancel() {} }) @@ -242,59 +194,12 @@ this.props.updateConfig(tabs) } - getSearch = (config) => { - const { tabs } = this.state - - if (tabs.uuid !== config.uuid) return - - let _tabs = fromJS(tabs).toJS() - - _tabs.subtabs = _tabs.subtabs.map(t => { - if (t.uuid === config.tabId) { - t.search = config.search - } - return t - }) - - this.setState({ - tabs: _tabs - }) - this.props.updateConfig(_tabs) - } - - setSearch = (tab) => { - const { tabs } = this.state - let card = { - uuid: tabs.uuid, - tabId: tab.uuid, - search: tab.search - } - - if (!card.search) { - card.search = { - floor: 1, - setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' }, - groups: [], - fields: [] - } - } - MKEmitter.emit('changeSearch', card) - } - - clickComponent = (e) => { - if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { - e.stopPropagation() - MKEmitter.emit('clickComponent', this.state.tabs) - } - } - getTabForms = (tab) => { const { tabs } = this.state if (!tab) { tab = { uuid: '', - parentId: tabs.uuid, label: '', icon: '', components: [] @@ -314,10 +219,10 @@ editab.label = res.label editab.icon = res.icon - // 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) { @@ -361,7 +266,7 @@ let _style = resetStyle(tabs.style) return ( - <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} onClick={this.clickComponent} id={tabs.uuid}> + <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} 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={ @@ -377,8 +282,6 @@ <span style={{textDecoration: tab.hide === 'true' ? 'line-through' : 'none'}}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> </Popover> } 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> ))} -- Gitblit v1.8.0