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, ToolOutlined } from '@ant-design/icons'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
import MkIcon from '@/components/mk-icon'
|
import DraggableTabs from './dragabletabs'
|
import Utils from '@/utils/utils.js'
|
import { getTabForm } from './options'
|
import './index.scss'
|
|
const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
|
const PasteBaseTable = asyncIconComponent(() => import('@/menu/components/share/pastebasetable'))
|
const BaseTable = asyncComponent(() => import('@/menu/components/table/base-table'))
|
|
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,
|
sign: 1
|
}
|
|
UNSAFE_componentWillMount () {
|
const { tabs } = this.props
|
|
if (tabs.isNew) {
|
let _tabs = {
|
uuid: tabs.uuid,
|
type: tabs.type,
|
subtype: 'tabletabs',
|
width: 24,
|
setting: {},
|
style: {},
|
subtabs: [
|
{ uuid: Utils.getuuid(), label: '子表1', icon: '', components: [{uuid: Utils.getuuid(), name: '子表1', type: 'table', subtype: 'basetable', isNew: true}] },
|
]
|
}
|
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))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
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)
|
}
|
|
dropTable = (hoverKey, dragKey) => {
|
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}]}
|
|
const hoverIndex = tabs.subtabs.findIndex(item => item.uuid === hoverKey)
|
|
if (hoverIndex === -1) {
|
tabs.subtabs.push(tab)
|
} else {
|
tabs.subtabs.splice(hoverIndex + 1, 0, tab)
|
}
|
|
this.setState({tabs}, () => {
|
setTimeout(() => {
|
let node = document.getElementById(tab.uuid)
|
node && node.click()
|
}, 200)
|
})
|
this.props.updateConfig(tabs)
|
}
|
}
|
|
plusTable = () => {
|
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.push(tab)
|
|
this.setState({tabs}, () => {
|
setTimeout(() => {
|
let node = document.getElementById(tab.uuid)
|
node && node.click()
|
}, 200)
|
})
|
this.props.updateConfig(tabs)
|
}
|
|
insert = (item) => {
|
let tabs = fromJS(this.state.tabs).toJS()
|
|
let name = item.name || ('子表' + (tabs.subtabs.length + 1))
|
let tab = { uuid: Utils.getuuid(), label: name, icon: '', components: [item]}
|
|
tabs.subtabs.push(tab)
|
|
this.setState({tabs}, () => {
|
setTimeout(() => {
|
let node = document.getElementById(tab.uuid)
|
node && node.click()
|
}, 200)
|
})
|
this.props.updateConfig(tabs)
|
}
|
|
getTabForms = (tab) => {
|
const { tabs } = this.state
|
|
if (!tab) {
|
tab = {
|
uuid: '',
|
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.hide = res.hide || 'false'
|
editab.permission = res.permission || 'false'
|
editab.components[0].name = res.label
|
|
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)
|
}
|
|
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
|
|
return (
|
<div className="table-tabs-edit-box" style={tabs.style} id={tabs.uuid}>
|
<DraggableTabs tabsMove={this.moveSwitch} tabsDrop={this.dropTable}>
|
{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">
|
<NormalForm title="标签编辑" width={800} update={this.updateTab} getForms={() => this.getTabForms(tab)}>
|
<EditOutlined style={{color: '#1890ff'}} title="编辑"/>
|
</NormalForm>
|
<CloseOutlined className="close" onClick={() => this.delTab(tab)} />
|
</div>
|
} trigger="hover">
|
<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={(tb) => this.updateConfig(tb, i)} />
|
</TabPane>
|
))}
|
</DraggableTabs>
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<PlusOutlined className="plus" title="添加子表" onClick={this.plusTable}/>
|
<PasteBaseTable insert={this.insert} />
|
<DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} />
|
</div>
|
} trigger="hover">
|
<ToolOutlined />
|
</Popover>
|
</div>
|
)
|
}
|
}
|
|
export default antvTabs
|
