import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Icon, Tooltip, Modal, notification } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.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 = {
|
type: PropTypes.string, // 菜单类型
|
tabs: PropTypes.array, // 标签组
|
config: PropTypes.object, // 页面配置
|
setSubConfig: PropTypes.func, // 子标签配置
|
updatetabs: PropTypes.func // 更新标签组设置
|
}
|
|
state = {
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
tabgroups: [], // 标签组
|
card: [], // 编辑标签
|
group: [], // 编辑组
|
visible: false // 模态框控制
|
}
|
|
/**
|
* @description 标签组初始化
|
*/
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
this.setState({
|
tabgroups: fromJS(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) => {
|
let tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
let menus = [
|
{value: '', text: '空'},
|
{value: 'mainTable', text: this.props.type === 'main' ? '主表' : '主数据'}
|
]
|
let equalTabs = []
|
let supMenu = card.supMenu || ''
|
let equalTab = card.equalTab || []
|
let isuptab = true
|
let equalTabIds = []
|
|
tabgroups.forEach((group, i) => {
|
if (group.uuid === _group.uuid) {
|
isuptab = false
|
group.sublist.forEach(tab => { // 可关联的同级标签
|
if (tab.uuid === card.uuid) return
|
|
equalTabIds.push(tab.uuid)
|
equalTabs.push(tab)
|
})
|
} else if (isuptab) {
|
group.sublist.forEach(tab => {
|
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))
|
}
|
|
this.setState({
|
visible: true,
|
card: card,
|
group: _group,
|
formlist: getTabForm(card, supMenu, menus, equalTab, equalTabs, this.props.type)
|
})
|
}
|
|
/**
|
* @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
|
})
|
|
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}>>吗？`,
|
okText: this.state.dict['model.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
tabgroups = tabgroups.map(_group => {
|
if (_group.uuid === group.uuid) {
|
_group.sublist = _group.sublist.filter(item => item.uuid !== card.uuid)
|
}
|
return _group
|
})
|
|
_this.setState({
|
tabgroups: tabgroups
|
})
|
_this.props.updatetabs({...config, tabgroups: tabgroups}, [card])
|
},
|
onCancel() {}
|
})
|
}
|
|
/**
|
* @description 增加标签页分组
|
*/
|
addTabGroup = () => {
|
const { config } = this.props
|
let _this = this
|
let _tabgroups = fromJS(this.state.tabgroups).toJS()
|
|
confirm({
|
content: `确定新建标签组吗？`,
|
okText: this.state.dict['model.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
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: `确定删除标签组吗？`,
|
okText: this.state.dict['model.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
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
|
})
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { tabgroups, visible, dict } = 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={dict['model.tooltip.tabs.guide']}>
|
<Icon type="question-circle" />
|
</Tooltip> : null}
|
{index !== (tabgroups.length - 1) ?
|
<Icon type="arrow-down" onClick={() => {this.handleGroup(index, 'down')}} /> : null
|
}
|
{index !== 0 ? <Icon type="arrow-up" onClick={() => {this.handleGroup(index, 'up')}} /> : null}
|
{index === 0 ? <Icon type="plus" onClick={this.addTabGroup} /> : null}
|
{index !== 0 ? <Icon type="delete" 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}
|
placeholder={this.state.dict['header.form.tab.placeholder']}
|
/>
|
</div>)
|
})}
|
{/* 标签编辑 */}
|
<Modal
|
title={this.state.dict['header.modal.tabs.edit']}
|
visible={visible}
|
width={750}
|
maskClosable={false}
|
onOk={this.handleSubmit}
|
onCancel={this.editModalCancel}
|
destroyOnClose
|
>
|
<TabForm
|
dict={this.state.dict}
|
card={this.state.card}
|
tabs={this.props.tabs}
|
formlist={this.state.formlist}
|
inputSubmit={this.handleSubmit}
|
wrappedComponentRef={(inst) => this.tabsFormRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default TablesComponent
|
