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 zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import './index.scss'
|
|
const SettingComponent = asyncIconComponent(() => import('@/menu/components/tabs/tabsetting'))
|
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
|
const PasteController = asyncIconComponent(() => import('@/menu/pastecontroller'))
|
const TabLabelComponent = asyncComponent(() => import('@/menu/components/tabs/tablabelform'))
|
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 = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
appType: sessionStorage.getItem('appType'),
|
tabs: null,
|
editab: null,
|
labelvisible: false
|
}
|
|
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({
|
tabs: _tabs
|
})
|
this.props.updateConfig(_tabs)
|
} else {
|
this.setState({
|
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)
|
}
|
|
getStyle = (comIds, style) => {
|
const { tabs } = this.state
|
|
if (comIds.length !== 1 || comIds[0] !== tabs.uuid) return
|
|
let _card = {...tabs, 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)
|
}
|
|
tabAdd = (e) => {
|
const { tabs } = this.state
|
|
e.stopPropagation()
|
|
this.setState({
|
editab: {
|
uuid: '',
|
parentId: tabs.uuid,
|
floor: tabs.floor,
|
label: '',
|
icon: '',
|
components: []
|
},
|
labelvisible: true
|
})
|
}
|
|
editTab = (tab) => {
|
this.setState({
|
editab: tab,
|
labelvisible: true
|
})
|
}
|
|
tabLabelSubmit = () => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
let editab = fromJS(this.state.editab).toJS()
|
|
this.tabLabelRef.handleConfirm().then(res => {
|
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,
|
labelvisible: false,
|
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)
|
}
|
|
clickComponent = (e) => {
|
if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
|
e.stopPropagation()
|
MKEmitter.emit('clickComponent', this.state.tabs)
|
}
|
}
|
|
render() {
|
const { tabs, dict, labelvisible, editab, appType } = this.state
|
let _style = resetStyle(tabs.style)
|
|
return (
|
<div className={'mob-tabs-edit-box ' + tabs.setting.display} style={_style} onClick={this.clickComponent} id={tabs.uuid}>
|
<DraggableTabs tabPosition={tabs.setting.position} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch}>
|
{tabs.subtabs.map(tab => (
|
<TabPane tab={
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<Icon className="edit" title="edit" type="edit" onClick={() => this.editTab(tab)} />
|
<PasteController type="tab" Tab={tab} insert={this.insert} />
|
<Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} />
|
</div>
|
} trigger="hover">
|
<span>{tab.icon ? <Icon 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}
|
<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">
|
<Icon className="plus" title="添加标签" type="plus" onClick={this.tabAdd} />
|
<SettingComponent config={tabs} updateConfig={this.updateComponent} />
|
<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>
|
<Modal
|
wrapClassName="popview-modal"
|
title={'标签编辑'}
|
visible={labelvisible}
|
width={600}
|
maskClosable={false}
|
okText={dict['model.submit']}
|
onOk={this.tabLabelSubmit}
|
onCancel={() => { this.setState({ labelvisible: false }) }}
|
destroyOnClose
|
>
|
<TabLabelComponent
|
dict={dict}
|
tab={editab}
|
setting={tabs.setting}
|
inputSubmit={this.tabLabelSubmit}
|
wrappedComponentRef={(inst) => this.tabLabelRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default antvTabs
|
