import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Tabs, Icon, Popover, Modal } from 'antd'
|
|
import MKEmitter from '@/utils/events.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
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'
|
|
const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
|
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
|
const PasteComponent = asyncIconComponent(() => import('@/menu/components/tabs/paste'))
|
const TabComponents = asyncComponent(() => import('../tabcomponents'))
|
|
const { TabPane } = Tabs
|
const { confirm } = Modal
|
|
class antvTabs extends Component {
|
static propTpyes = {
|
tabs: PropTypes.object,
|
deletecomponent: PropTypes.func,
|
updateConfig: PropTypes.func,
|
}
|
|
state = {
|
appType: sessionStorage.getItem('appType'),
|
tabs: null,
|
editab: null,
|
defaultActiveKey: ''
|
}
|
|
UNSAFE_componentWillMount () {
|
const { tabs } = this.props
|
|
if (tabs.isNew) {
|
let _tabs = {
|
uuid: tabs.uuid,
|
type: tabs.type,
|
floor: tabs.floor,
|
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, 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: [] }
|
]
|
}
|
|
if (this.state.appType === 'mob') {
|
_tabs.setting.display = 'flex'
|
}
|
|
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()
|
})
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
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更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
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)
|
}
|
|
changeTabStyle = () => {
|
const { tabs } = this.state
|
|
MKEmitter.emit('changeStyle', [tabs.uuid, 'tab'], ['font', 'padding'], tabs.tabStyle || {})
|
}
|
|
getStyle = (comIds, style) => {
|
const { tabs } = this.state
|
|
if (comIds[0] !== tabs.uuid) return
|
|
if (comIds.length === 1) {
|
let _card = {...tabs, style}
|
|
this.setState({
|
tabs: _card
|
})
|
|
this.props.updateConfig(_card)
|
} else if (comIds[1] === 'tab') {
|
let _card = {...tabs, tabStyle: style}
|
|
this.setState({
|
tabs: _card
|
})
|
|
this.props.updateConfig(_card)
|
}
|
}
|
|
handleTabsChange = (parentId) => {
|
const { tabs } = this.state
|
|
if (parentId === tabs.parentId) {
|
MKEmitter.emit('tabsChange', tabs.uuid)
|
}
|
}
|
|
updateComponent = (component) => {
|
const { tabs } = this.state
|
|
if (!is(fromJS(tabs.setting), fromJS(component.setting)) || !is(fromJS(tabs.style), fromJS(component.style))) {
|
// 注册事件-标签变化，通知标签内元素
|
MKEmitter.emit('tabsChange', tabs.uuid)
|
}
|
|
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) => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
const _this = this
|
|
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() {}
|
})
|
}
|
|
moveSwitch = (order) => {
|
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()
|
|
tabs.subtabs.forEach(stab => {
|
if (stab.uuid === tab.uuid) {
|
stab.components.push(item)
|
}
|
})
|
|
this.setState({tabs})
|
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)
|
}
|
|
getTabForms = (tab) => {
|
const { tabs } = this.state
|
|
if (!tab) {
|
tab = {
|
uuid: '',
|
parentId: tabs.uuid,
|
floor: tabs.floor,
|
label: '',
|
icon: '',
|
components: []
|
}
|
}
|
|
this.setState({
|
editab: tab
|
})
|
|
return getTabForm(tab, tabs.setting)
|
}
|
|
updateTab = (res) => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
let editab = fromJS(this.state.editab).toJS()
|
|
editab.label = res.label
|
editab.icon = res.icon
|
// editab.hasSearch = res.hasSearch || ''
|
editab.blacklist = res.blacklist
|
|
if (editab.uuid) {
|
tabs.subtabs = tabs.subtabs.map(t => {
|
if (t.uuid === editab.uuid) {
|
return editab
|
} else {
|
return t
|
}
|
})
|
} else {
|
editab.uuid = Utils.getuuid()
|
tabs.subtabs.push(editab)
|
}
|
|
this.setState({
|
editab: null,
|
tabs
|
})
|
|
this.props.updateConfig(tabs)
|
}
|
|
getTabsForms = () => {
|
const { tabs } = this.state
|
|
return getTabsSetForm(tabs.setting)
|
}
|
|
updateTabs = (res) => {
|
this.updateComponent({...this.state.tabs, setting: res})
|
}
|
|
onChange = (key) => {
|
const { tabs } = this.state
|
window.GLOB.TabsMap.set(tabs.uuid, key)
|
}
|
|
clickComponent = (e) => {
|
if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
|
e.stopPropagation()
|
MKEmitter.emit('clickComponent', this.state.tabs)
|
}
|
}
|
|
render() {
|
const { tabs, defaultActiveKey } = this.state
|
let _style = resetStyle(tabs.style)
|
let _tabStyle = resetStyle(tabs.tabStyle)
|
|
return (
|
<div className={'mob-tabs-edit-box ' + tabs.setting.display} style={_style} onClick={this.clickComponent} id={tabs.uuid}>
|
<DraggableTabs defaultActiveKey={defaultActiveKey} tabPosition={'top'} 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>
|
<PasteComponent Tab={tab} insert={this.insert} />
|
<Icon className="style" title="调整样式" onClick={this.changeTabStyle} type="font-colors" />
|
<Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} />
|
</div>
|
} trigger="hover">
|
<span style={_tabStyle}>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span>
|
</Popover>
|
} key={tab.uuid}>
|
{/* {appType === 'mob' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ?
|
<Icon className="search-icon" onDoubleClick={() => this.setSearch(tab)} type="search" /> : 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>
|
<NormalForm title="标签页设置" width={700} update={this.updateTabs} getForms={this.getTabsForms}>
|
<Icon type="edit" 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)} />
|
</div>
|
} trigger="hover">
|
<Icon type="tool" />
|
</Popover>
|
</div>
|
)
|
}
|
}
|
|
export default antvTabs
|
