import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Tooltip, Modal, notification } from 'antd'
|
import { QuestionCircleOutlined, ArrowDownOutlined, ArrowUpOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import { getTabForm } from '@/templates/zshare/formconfig'
|
|
import TabForm from './tabform'
|
import TabDragElement from './tabdragelement'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class TablesComponent extends Component {
|
static propTpyes = {
|
tabs: PropTypes.array, // 标签组
|
config: PropTypes.object, // 页面配置
|
setSubConfig: PropTypes.func, // 子标签配置
|
updatetabs: PropTypes.func // 更新标签组设置
|
}
|
|
state = {
|
tabgroups: [], // 标签组
|
card: [], // 编辑标签
|
group: [], // 编辑组
|
levels: null, // 树形页面的标签级别关联
|
visible: false // 模态框控制
|
}
|
|
/**
|
* @description 标签组初始化
|
*/
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
this.setState({
|
tabgroups: fromJS(config.tabgroups).toJS()
|
})
|
}
|
|
/**
|
* @description 标签组变化时，更新标签
|
*/
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
const { tabgroups } = this.state
|
|
if (!is(fromJS(nextProps.config.tabgroups), fromJS(this.props.config.tabgroups)) && !is(fromJS(nextProps.config.tabgroups), fromJS(tabgroups))) {
|
this.setState({tabgroups: fromJS(nextProps.config.tabgroups).toJS()})
|
}
|
}
|
|
/**
|
* @description 元素添加或拖动时顺序变化
|
*/
|
handleList = (list, card, groupId) => {
|
const { config } = this.props
|
let _tabgroups = fromJS(this.state.tabgroups).toJS()
|
let _group = null
|
|
_tabgroups = _tabgroups.map(group => {
|
if (group.uuid === groupId) {
|
group.sublist = list
|
_group = fromJS(group).toJS()
|
}
|
return group
|
})
|
|
if (card) {
|
this.setState({tabgroups: _tabgroups})
|
this.handleTab(card, _group)
|
} else {
|
this.setState({tabgroups: _tabgroups}, () => {
|
this.props.updatetabs({...config, tabgroups: _tabgroups})
|
})
|
}
|
}
|
|
/**
|
* @description 标签编辑，筛选可选的下级标签与已关联的下级标签
|
*/
|
handleTab = (card, _group) => {
|
const { config } = this.props
|
let tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
let menus = [
|
{value: '', text: '空'},
|
{value: 'mainTable', text: '主表'}
|
]
|
let equalTabs = []
|
let supMenu = card.supMenu || ''
|
let equalTab = card.equalTab || []
|
let isuptab = true
|
let equalTabIds = []
|
let levels = {}
|
|
tabgroups.forEach(group => {
|
if (group.uuid === _group.uuid) {
|
isuptab = false
|
group.sublist.forEach(tab => { // 可关联的同级标签
|
if (tab.level || tab.level === 0) {
|
levels[tab.uuid] = tab.level
|
}
|
|
if (tab.uuid === card.uuid) return
|
|
equalTabIds.push(tab.uuid)
|
equalTabs.push(tab)
|
})
|
} else if (isuptab) {
|
group.sublist.forEach(tab => {
|
if (tab.level || tab.level === 0) {
|
levels[tab.uuid] = tab.level
|
}
|
|
menus.push({
|
value: tab.uuid,
|
text: tab.label
|
})
|
})
|
}
|
})
|
|
if (supMenu && menus.filter(menu => menu.value === supMenu).length === 0) {
|
supMenu = ''
|
}
|
|
if (equalTab.length > 0) {
|
equalTab = equalTab.filter(tabId => equalTabIds.includes(tabId))
|
}
|
|
if (config.Template !== 'TreePage') {
|
levels = null
|
}
|
|
this.setState({
|
visible: true,
|
card: card,
|
levels: levels,
|
group: _group,
|
formlist: getTabForm(card, supMenu, menus, equalTab, equalTabs, config.Template)
|
})
|
}
|
|
/**
|
* @description 标签修改后提交保存
|
*/
|
handleSubmit = () => {
|
const { config } = this.props
|
const { group, card } = this.state
|
let tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
this.tabsFormRef.handleConfirm().then(res => {
|
if (tabgroups.length === 1) {
|
tabgroups.forEach(_group => {
|
_group.sublist = _group.sublist.filter(item => !item.origin || item.uuid === card.uuid)
|
})
|
}
|
|
let tabnames = []
|
tabgroups.forEach(_group => {
|
_group.sublist.forEach(item => {
|
if (item.uuid !== card.uuid) {
|
tabnames.push(item.label)
|
}
|
})
|
})
|
|
if (tabnames.includes(res.label)) {
|
notification.warning({
|
top: 92,
|
message: '标签《' + res.label + '》已存在！',
|
duration: 5
|
})
|
return
|
}
|
|
tabgroups = tabgroups.map(_group => {
|
if (_group.uuid === group.uuid) {
|
_group.sublist = _group.sublist.map(item => {
|
if (item.uuid === card.uuid) {
|
return res
|
} else {
|
return item
|
}
|
})
|
}
|
return _group
|
})
|
|
// 更新与之关联的标签显示级别
|
if (config.Template === 'TreePage' && res.level !== card.level) {
|
tabgroups = tabgroups.map(_group => {
|
_group.sublist = _group.sublist.map(item => {
|
if (item.supMenu === res.uuid) {
|
item.level = res.level
|
}
|
|
return item
|
})
|
return _group
|
})
|
}
|
|
this.setState({
|
card: null,
|
group: null,
|
tabgroups: tabgroups,
|
visible: false
|
}, () => {
|
this.props.updatetabs({...config, tabgroups: tabgroups})
|
})
|
})
|
}
|
|
/**
|
* @description 删除标签
|
*/
|
deleteElement = (card, group) => {
|
const { config } = this.props
|
let _this = this
|
let tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
confirm({
|
content: `确定删除<<${card.label}>>吗？`,
|
onOk() {
|
tabgroups = tabgroups.map(_group => {
|
if (_group.uuid === group.uuid) {
|
_group.sublist = _group.sublist.filter(item => item.uuid !== card.uuid)
|
}
|
return _group
|
})
|
|
// 清除与之关联标签的上级标签设置
|
tabgroups = tabgroups.map(_group => {
|
_group.sublist = _group.sublist.map(item => {
|
if (item.supMenu === card.uuid) {
|
item.supMenu = ''
|
}
|
return item
|
})
|
return _group
|
})
|
|
_this.setState({
|
tabgroups: tabgroups
|
}, () => {
|
_this.props.updatetabs({...config, tabgroups: tabgroups})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
/**
|
* @description 增加标签页分组
|
*/
|
addTabGroup = () => {
|
const { config } = this.props
|
let _this = this
|
let _tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
confirm({
|
content: `确定新建标签组吗？`,
|
onOk() {
|
if (_tabgroups.length === 1) {
|
_tabgroups.forEach(group => {
|
group.sublist = group.sublist.filter(item => !item.origin)
|
})
|
}
|
|
_tabgroups.push({
|
uuid: Utils.getuuid(),
|
sublist:[]
|
})
|
|
_this.setState({
|
tabgroups: _tabgroups
|
}, () => {
|
_this.props.updatetabs({...config, tabgroups: _tabgroups})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
/**
|
* @description 删除标签页分组
|
*/
|
delTabGroup = (group) => {
|
const { config } = this.props
|
let _this = this
|
let _tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
confirm({
|
content: `确定删除标签组吗？`,
|
onOk() {
|
_tabgroups = _tabgroups.filter(_group => _group.uuid !== group.uuid)
|
|
_this.setState({
|
tabgroups: _tabgroups
|
}, () => {
|
_this.props.updatetabs({...config, tabgroups: _tabgroups}, group.sublist)
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
/**
|
* @description 标签组上下移动
|
*/
|
handleGroup = (index, type) => {
|
const { config } = this.props
|
let _tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
if (type === 'up') {
|
_tabgroups.splice(index, 0, _tabgroups.splice(index - 1, 1)[0])
|
} else {
|
_tabgroups.splice(index, 0, _tabgroups.splice(index + 1, 1)[0])
|
}
|
|
this.setState({
|
tabgroups: _tabgroups
|
}, () => {
|
this.props.updatetabs({...config, tabgroups: _tabgroups})
|
})
|
|
notification.success({
|
top: 92,
|
message: '调整成功',
|
duration: 2
|
})
|
}
|
|
|
/**
|
* @description 取消保存，如果元素为新添元素，则从序列中删除
|
*/
|
editModalCancel = () => {
|
const { config } = this.props
|
const { group, card } = this.state
|
let _tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
if (card && card.focus) {
|
_tabgroups = _tabgroups.map(_group => {
|
if (_group.uuid === group.uuid) {
|
_group.sublist = _group.sublist.filter(item => item.uuid !== card.uuid)
|
}
|
return _group
|
})
|
|
this.setState({
|
card: null,
|
group: null,
|
tabgroups: _tabgroups,
|
visible: false
|
}, () => {
|
this.props.updatetabs({...config, tabgroups: _tabgroups})
|
})
|
} else {
|
this.setState({
|
card: null,
|
group: null,
|
visible: false
|
})
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { tabgroups, visible } = this.state
|
|
return (
|
<div className="model-table-tab-list">
|
{tabgroups.map((group, index) => {
|
return (
|
<div key={index} className="tab-line-list">
|
{index === 0 ? <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《标签页》中，选择对应类型的标签页拖至此处添加。">
|
<QuestionCircleOutlined style={{color: '#c49f47', position: 'absolute', left: '5px', top: '20px'}} />
|
</Tooltip> : null}
|
{index !== (tabgroups.length - 1) ?
|
<ArrowDownOutlined onClick={() => {this.handleGroup(index, 'down')}} /> : null
|
}
|
{index !== 0 ? <ArrowUpOutlined onClick={() => {this.handleGroup(index, 'up')}} /> : null}
|
{index === 0 ? <PlusOutlined onClick={this.addTabGroup} /> : null}
|
{index !== 0 ? <DeleteOutlined onClick={() => {this.delTabGroup(group)}} /> : null}
|
<TabDragElement
|
list={group.sublist}
|
handleList={(list, newcard) => this.handleList(list, newcard, group.uuid)}
|
handleMenu={(card) => this.handleTab(card, group)}
|
deleteMenu={(card) => this.deleteElement(card, group)}
|
doubleClickCard={this.props.setSubConfig}
|
/>
|
</div>)
|
})}
|
{/* 标签编辑 */}
|
<Modal
|
title="标签-编辑"
|
visible={visible}
|
width={750}
|
maskClosable={false}
|
onOk={this.handleSubmit}
|
onCancel={this.editModalCancel}
|
destroyOnClose
|
>
|
<TabForm
|
card={this.state.card}
|
tabs={this.props.tabs}
|
levels={this.state.levels}
|
formlist={this.state.formlist}
|
inputSubmit={this.handleSubmit}
|
wrappedComponentRef={(inst) => this.tabsFormRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default TablesComponent
|
