From 03a22ec6f9ad7303d10b4c65bb5bc6fa5cbd448a Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 22 十月 2022 23:21:42 +0800 Subject: [PATCH] 2022-10-22 --- src/menu/components/tabs/table-tabs/index.jsx | 114 +++++++++++++++++++++----------------------------------- 1 files changed, 43 insertions(+), 71 deletions(-) diff --git a/src/menu/components/tabs/table-tabs/index.jsx b/src/menu/components/tabs/table-tabs/index.jsx index d5cfa87..5356b0f 100644 --- a/src/menu/components/tabs/table-tabs/index.jsx +++ b/src/menu/components/tabs/table-tabs/index.jsx @@ -9,7 +9,6 @@ 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 } from './options' @@ -32,7 +31,8 @@ state = { tabs: null, - editab: null + editab: null, + sign: 1 } UNSAFE_componentWillMount () { @@ -42,13 +42,12 @@ let _tabs = { uuid: tabs.uuid, type: tabs.type, - subtype: tabs.subtype, + subtype: 'tabletabs', width: 24, - name: tabs.name, setting: {}, - style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, + style: {}, subtabs: [ - { uuid: Utils.getuuid(), label: '瀛愯〃1', icon: '', components: [{uuid: Utils.getuuid(), type: 'table', subtype: 'basetable', isNew: true}] }, + { uuid: Utils.getuuid(), label: '瀛愯〃1', icon: '', components: [{uuid: Utils.getuuid(), name: '瀛愯〃1', type: 'table', subtype: 'basetable', isNew: true}] }, ] } this.setState({ @@ -66,8 +65,6 @@ return !is(fromJS(this.state), fromJS(nextState)) } - componentDidMount () {} - /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 */ @@ -75,47 +72,6 @@ this.setState = () => { return } - } - - changeStyle = () => { - const { tabs } = this.state - - MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow'], tabs.style, this.getStyle) - } - - getStyle = (style) => { - let _card = {...this.state.tabs, style} - - this.setState({ - tabs: _card - }) - - this.props.updateConfig(_card) - } - - updateComponent = (component) => { - component.width = component.setting.width - component.name = component.setting.name - - this.setState({ - tabs: component - }) - this.props.updateConfig(component) - } - - updateTabComponent = (tab) => { - let tabs = fromJS(this.state.tabs).toJS() - - tabs.subtabs = tabs.subtabs.map(t => { - if (t.uuid === tab.uuid) { - return tab - } else { - return t - } - }) - - this.setState({tabs}) - this.props.updateConfig(tabs) } delTab = (tab) => { @@ -161,22 +117,36 @@ } dropTable = (hoverKey, dragKey) => { - // let tabs = fromJS(this.state.tabs).toJS() - // let subtab = {} - // tabs.subtabs.forEach(item => { - // subtab[item.uuid] = item - // }) + if (dragKey) { + this.props.switchConfig(dragKey, hoverKey, () => { + this.setState({sign: this.state.sign + 1}, () => { + setTimeout(() => { + let node = document.getElementById(dragKey) + node && node.click() + }, 200) + }) + }) + } else { + let tabs = fromJS(this.state.tabs).toJS() + let name = '瀛愯〃' + (tabs.subtabs.length + 1) + let tab = { uuid: Utils.getuuid(), label: name, icon: '', components: [{uuid: Utils.getuuid(), type: 'table', name: name, subtype: 'basetable', isNew: true}]} - // tabs.subtabs = [] + const hoverIndex = tabs.subtabs.findIndex(item => item.uuid === hoverKey) - // order.forEach(item => { - // if (subtab[item]) { - // tabs.subtabs.push(subtab[item]) - // } - // }) + if (hoverIndex === -1) { + tabs.subtabs.push(tab) + } else { + tabs.subtabs.splice(hoverIndex + 1, 0, tab) + } - // this.setState({tabs}) - // this.props.updateConfig(tabs) + this.setState({tabs}, () => { + setTimeout(() => { + let node = document.getElementById(tab.uuid) + node && node.click() + }, 200) + }) + this.props.updateConfig(tabs) + } } insert = (item, tab) => { @@ -218,10 +188,8 @@ editab.label = res.label editab.icon = res.icon editab.hide = res.hide || 'false' - editab.backgroundColor = res.backgroundColor - editab.controlVal = res.controlVal || '' - editab.selectVal = res.selectVal || '' editab.blacklist = res.blacklist + editab.components[0].name = res.label if (editab.uuid) { tabs.subtabs = tabs.subtabs.map(t => { @@ -244,18 +212,22 @@ this.props.updateConfig(tabs) } - updateConfig = () => { + updateConfig = (tb, i) => { + let tabs = fromJS(this.state.tabs).toJS() + tabs.subtabs[i].components = [tb] + this.setState({ tabs }) + + this.props.updateConfig(tabs) } render() { const { tabs } = this.state - let _style = resetStyle(tabs.style) return ( - <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} id={tabs.uuid}> + <div className="menu-tabs-edit-box" style={tabs.style} id={tabs.uuid}> <DraggableTabs tabsMove={this.moveSwitch} tabsDrop={this.dropTable}> - {tabs.subtabs.map(tab => ( + {tabs.subtabs.map((tab, i) => ( <TabPane tab={ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> @@ -265,10 +237,10 @@ <CloseOutlined className="close" onClick={() => this.delTab(tab)} /> </div> } trigger="hover"> - <span style={{textDecoration: tab.hide === 'true' ? 'line-through' : 'none'}}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> + <span id={tab.uuid} style={{textDecoration: tab.hide === 'true' ? 'line-through' : 'none'}}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> </Popover> } key={tab.uuid}> - <BaseTable card={tab.components[0]} updateConfig={this.updateConfig} /> + <BaseTable card={tab.components[0]} updateConfig={(tb) => this.updateConfig(tb, i)} /> </TabPane> ))} </DraggableTabs> -- Gitblit v1.8.0