| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Tabs, Popover, Modal } from 'antd' |
| | | import { PlusOutlined, CloseOutlined, EditOutlined, DeleteOutlined, FontColorsOutlined, ToolOutlined } from '@ant-design/icons' |
| | | import { PlusOutlined, CloseOutlined, EditOutlined, DeleteOutlined, ToolOutlined } from '@ant-design/icons' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | |
| | | 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 { getTabForm } from './options' |
| | | import './index.scss' |
| | | |
| | | const NormalForm = asyncIconComponent(() => import('@/components/normalform')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | // const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('../paste')) |
| | | const TabComponents = asyncComponent(() => import('../tabcomponents')) |
| | | const BaseTable = asyncComponent(() => import('@/menu/components/table/base-table')) |
| | | |
| | | const { TabPane } = Tabs |
| | | const { confirm } = Modal |
| | |
| | | |
| | | state = { |
| | | tabs: null, |
| | | editab: null, |
| | | defaultActiveKey: '' |
| | | editab: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | subtype: tabs.subtype, |
| | | width: 24, |
| | | name: tabs.name, |
| | | setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name}, |
| | | setting: {}, |
| | | style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, |
| | | subtabs: [ |
| | | { uuid: Utils.getuuid(), label: 'Tab 1', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), label: '子表1', icon: '', components: [{uuid: Utils.getuuid(), type: 'table', subtype: 'basetable', isNew: true}] }, |
| | | ] |
| | | } |
| | | this.setState({ |
| | | defaultActiveKey: _tabs.subtabs[0].uuid, |
| | | tabs: _tabs |
| | | }) |
| | | this.props.updateConfig(_tabs) |
| | | } else { |
| | | this.setState({ |
| | | defaultActiveKey: window.GLOB.TabsMap.get(tabs.uuid) || '', |
| | | tabs: fromJS(tabs).toJS() |
| | | }) |
| | | } |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | dropTable = (hoverKey, dragKey) => { |
| | | // let tabs = fromJS(this.state.tabs).toJS() |
| | | // let subtab = {} |
| | | // tabs.subtabs.forEach(item => { |
| | | // subtab[item.uuid] = item |
| | | // }) |
| | | |
| | | // tabs.subtabs = [] |
| | | |
| | | // order.forEach(item => { |
| | | // if (subtab[item]) { |
| | | // tabs.subtabs.push(subtab[item]) |
| | | // } |
| | | // }) |
| | | |
| | | // this.setState({tabs}) |
| | | // this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | insert = (item, tab) => { |
| | | let tabs = fromJS(this.state.tabs).toJS() |
| | | |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | getTabsForms = () => { |
| | | const { tabs } = this.state |
| | | updateConfig = () => { |
| | | |
| | | return getTabsSetForm(tabs.setting, tabs.uuid) |
| | | } |
| | | |
| | | updateTabs = (res) => { |
| | | this.updateComponent({...this.state.tabs, setting: res}) |
| | | } |
| | | |
| | | onChange = (key) => { |
| | | const { tabs } = this.state |
| | | window.GLOB.TabsMap.set(tabs.uuid, key) |
| | | } |
| | | |
| | | render() { |
| | | const { tabs, defaultActiveKey } = this.state |
| | | const { tabs } = this.state |
| | | let _style = resetStyle(tabs.style) |
| | | |
| | | return ( |
| | | <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}> |
| | | <DraggableTabs tabsMove={this.moveSwitch} tabsDrop={this.dropTable}> |
| | | {tabs.subtabs.map(tab => ( |
| | | <TabPane tab={ |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | |
| | | <NormalForm title="标签编辑" width={800} update={this.updateTab} getForms={() => this.getTabForms(tab)}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <PasteComponent Tab={tab} insert={this.insert} /> |
| | | <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> |
| | | </Popover> |
| | | } key={tab.uuid} style={{backgroundColor: tab.backgroundColor || 'transparent'}}> |
| | | <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> |
| | | } key={tab.uuid}> |
| | | <BaseTable card={tab.components[0]} updateConfig={this.updateConfig} /> |
| | | </TabPane> |
| | | ))} |
| | | </DraggableTabs> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <NormalForm title="添加标签" width={800} update={this.updateTab} getForms={() => this.getTabForms()}> |
| | | <PlusOutlined className="plus" title="添加标签"/> |
| | | </NormalForm> |
| | | <NormalForm title="标签页设置" width={800} update={this.updateTabs} getForms={this.getTabsForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="tabs" card={tabs}/> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | <PlusOutlined className="plus" title="添加子表"/> |
| | | <PasteComponent insert={this.insert} /> |
| | | <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} /> |
| | | </div> |
| | | } trigger="hover"> |