import React, {Component} from 'react'
|
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 MKEmitter from '@/utils/events.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
import MkIcon from '@/components/mk-icon'
|
import DraggableTabs from './dragabletabs'
|
import { resetStyle } 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('../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 = {
|
tabs: null,
|
editab: null,
|
defaultActiveKey: ''
|
}
|
|
UNSAFE_componentWillMount () {
|
const { tabs } = this.props
|
|
if (tabs.isNew) {
|
let _tabs = {
|
uuid: tabs.uuid,
|
type: tabs.type,
|
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(), label: 'Tab 1', icon: '', components: [] },
|
{ uuid: Utils.getuuid(), label: 'Tab 2', icon: '', components: [] },
|
{ uuid: Utils.getuuid(), label: 'Tab 3', icon: '', components: [] }
|
]
|
}
|
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))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
changeStyle = () => {
|
const { tabs } = this.state
|
|
MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow', 'clear'], tabs.style, this.getStyle)
|
}
|
|
getStyle = (style) => {
|
let _card = {...this.state.tabs, style}
|
|
this.setState({
|
tabs: _card
|
})
|
|
this.props.updateConfig(_card)
|
}
|
|
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) => {
|
const { tabs } = this.state
|
|
if (!is(fromJS(tabs.setting), fromJS(component.setting)) || !is(fromJS(tabs.style), fromJS(component.style))) {
|
// 注册事件-标签变化，通知标签内元素
|
let ids = []
|
tabs.subtabs.forEach(tab => {
|
this.getSubIds(tab.components, ids)
|
})
|
MKEmitter.emit('tabsChange', ids.join(','))
|
}
|
|
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)
|
|
confirm({
|
title: '确定删除标签？',
|
content: '',
|
onOk() {
|
_this.setState({tabs})
|
_this.props.updateConfig(tabs)
|
},
|
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)
|
}
|
|
getTabForms = (tab) => {
|
if (!tab) {
|
tab = {
|
uuid: '',
|
label: '',
|
icon: '',
|
components: []
|
}
|
}
|
|
this.setState({
|
editab: tab
|
})
|
|
return getTabForm(tab)
|
}
|
|
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.hide = res.hide || 'false'
|
editab.backgroundColor = res.backgroundColor
|
// editab.controlVal = res.controlVal || ''
|
editab.selectVal = res.selectVal || ''
|
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, tabs.uuid, tabs.subtabs)
|
}
|
|
updateTabs = (res) => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
|
if (res.controlVals) {
|
let values = {}
|
res.controlVals.forEach(item => {
|
values[item.uuid] = item.value
|
})
|
tabs.subtabs.forEach(tab => {
|
tab.controlVal = values[tab.uuid]
|
})
|
|
delete res.controlVals
|
}
|
|
tabs.setting = res
|
|
this.updateComponent(tabs)
|
}
|
|
onChange = (key) => {
|
const { tabs } = this.state
|
window.GLOB.TabsMap.set(tabs.uuid, key)
|
}
|
|
render() {
|
const { tabs, defaultActiveKey } = 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}>
|
{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={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} />
|
</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}/>
|
<DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} />
|
</div>
|
} trigger="hover">
|
<ToolOutlined />
|
</Popover>
|
</div>
|
)
|
}
|
}
|
|
export default antvTabs
|
