import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, Button, notification } from 'antd'
|
import { SnippetsOutlined } from '@ant-design/icons'
|
import md5 from 'md5'
|
|
import Utils from '@/utils/utils.js'
|
import MenuUtils from '@/utils/utils-custom.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
// import './index.scss'
|
|
const { confirm } = Modal
|
|
const PasteForm = asyncComponent(() => import('@/templates/zshare/pasteform'))
|
|
class PasteController extends Component {
|
static propTpyes = {
|
insert: PropTypes.func
|
}
|
|
state = {
|
visible: false
|
}
|
|
resetconfig = (item, appType, commonId) => {
|
if (item.type === 'tabs') {
|
item.uuid = md5(commonId + item.uuid)
|
item.setting.name = (item.setting.name || '') + MenuUtils.getSignName()
|
item.name = item.setting.name
|
|
item.subtabs.forEach(tab => {
|
tab.uuid = md5(commonId + tab.uuid)
|
|
if (appType !== 'mob') {
|
tab.components = tab.components.filter(cell => cell.type !== 'menubar')
|
}
|
|
tab.components = tab.components.map(cell => {
|
cell = this.resetconfig(cell, appType, commonId)
|
return cell
|
})
|
})
|
} else if (item.type === 'group') {
|
item.uuid = md5(commonId + item.uuid)
|
item.setting.name = (item.setting.name || '') + MenuUtils.getSignName()
|
item.name = item.setting.name
|
|
item.components = item.components.map(cell => {
|
cell.uuid = md5(commonId + cell.uuid)
|
|
cell = MenuUtils.resetComponentConfig(cell, appType, commonId)
|
return cell
|
})
|
} else {
|
item.uuid = md5(commonId + item.uuid)
|
|
item = MenuUtils.resetComponentConfig(item, appType, commonId)
|
}
|
|
return item
|
}
|
|
resetlink = (item, commonId) => {
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
tab.components.forEach(cell => {
|
this.resetlink(cell, commonId)
|
})
|
})
|
} else if (item.type === 'group') {
|
item.components.forEach(cell => {
|
this.resetlink(cell, commonId)
|
})
|
} else {
|
if (['card', 'carousel', 'timeline'].includes(item.type)) {
|
item.subcards.forEach(card => {
|
card.elements && card.elements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
this.resetBtn(cell, commonId)
|
}
|
})
|
card.backElements && card.backElements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
this.resetBtn(cell, commonId)
|
}
|
})
|
})
|
} else if (item.type === 'balcony') {
|
item.elements && item.elements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
this.resetBtn(cell, commonId)
|
}
|
})
|
} else if (item.type === 'table' && item.cols) {
|
let loopCol = (cols) => {
|
cols.forEach(col => {
|
if (col.type === 'colspan' && col.subcols) {
|
loopCol(col.subcols)
|
} else if (col.type === 'custom' && col.elements) {
|
col.elements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
this.resetBtn(cell, commonId)
|
}
|
})
|
}
|
})
|
}
|
|
loopCol(item.cols)
|
} else if (item.type === 'form') {
|
item.subcards.forEach(cell => {
|
if (cell.subButton) {
|
this.resetBtn(cell.subButton, commonId)
|
}
|
})
|
}
|
|
item.action && item.action.forEach(cell => {
|
this.resetBtn(cell, commonId)
|
})
|
|
if (item.wrap && item.wrap.supType === 'multi') {
|
if (item.setting && item.setting.supModule) {
|
item.setting.supModule = ''
|
}
|
|
if (item.supNodes) {
|
item.supNodes = item.supNodes.map(cell => {
|
let id = cell.nodes[cell.nodes.length - 1]
|
let _id = md5(commonId + id)
|
|
if (this.modules[id] || this.modules[_id]) {
|
cell.nodes = this.modules[id] || this.modules[_id]
|
cell.componentId = cell.nodes[cell.nodes.length - 1]
|
|
return cell
|
}
|
|
return null
|
})
|
|
item.supNodes = item.supNodes.filter(Boolean)
|
}
|
|
if (!item.supNodes || item.supNodes.length === 0) {
|
item.wrap.supType = 'single'
|
delete item.supNodes
|
}
|
}
|
if (item.setting && item.setting.supModule && item.setting.supModule[0] !== 'empty') {
|
let id = item.setting.supModule[item.setting.supModule.length - 1]
|
let _id = md5(commonId + id)
|
|
item.setting.supModule = this.modules[id] || this.modules[_id] || ''
|
}
|
|
if (item.wrap && item.wrap.supModule && item.wrap.supModule[0]) {
|
let id = item.wrap.supModule[item.wrap.supModule.length - 1]
|
let _id = md5(commonId + id)
|
|
item.wrap.supModule = this.modules[id] || this.modules[_id] || ''
|
}
|
}
|
}
|
|
resetBtn (btn, commonId) {
|
if (btn.switchTab && btn.switchTab.length > 0) {
|
let id = btn.switchTab[btn.switchTab.length - 1]
|
let _id = md5(commonId + id)
|
|
btn.switchTab = this.modules[id] || this.modules[_id] || null
|
}
|
if (btn.anchors && btn.anchors.length > 0) {
|
let id = btn.anchors[btn.anchors.length - 1]
|
let _id = md5(commonId + id)
|
|
btn.anchors = this.modules[id] || this.modules[_id] || null
|
}
|
if (btn.syncComponent && btn.syncComponent[0] === 'multiComponent' && btn.syncComponents) {
|
if (btn.syncComponents[0] && Array.isArray(btn.syncComponents[0])) { // 兼容问题数据
|
btn.syncComponents = btn.syncComponents.map((item, i) => {
|
return {
|
syncComId: item,
|
label: '',
|
uuid: 'fixed' + i
|
}
|
})
|
}
|
|
btn.syncComponents = btn.syncComponents.map(m => {
|
let id = m.syncComId[m.syncComId.length - 1]
|
let _id = md5(commonId + id)
|
|
m.syncComId = this.modules[id] || this.modules[_id] || null
|
|
return m.syncComId ? m : null
|
})
|
btn.syncComponents = btn.syncComponents.filter(Boolean)
|
|
if (btn.syncComponents.length === 0) {
|
btn.syncComponent = null
|
btn.syncComponents = null
|
}
|
} else if (btn.syncComponent && btn.syncComponent.length > 0) {
|
let id = btn.syncComponent[btn.syncComponent.length - 1]
|
let _id = md5(commonId + id)
|
|
btn.syncComponent = this.modules[id] || this.modules[_id] || null
|
}
|
}
|
|
resetmenu = (components, componentId, res) => {
|
components.forEach(item => {
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
if (tab.uuid === componentId) {
|
tab.components.push(res)
|
} else {
|
this.resetmenu(tab.components, componentId, res)
|
}
|
})
|
} else if (item.type === 'group' && item.uuid === componentId) {
|
item.components.push(res)
|
}
|
})
|
}
|
|
getModules = (components, interfaces, sups = []) => {
|
components.forEach(item => {
|
this.modules[item.uuid] = [...sups, item.uuid]
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(f_tab => {
|
this.getModules(f_tab.components, null, [...sups, item.uuid, f_tab.uuid])
|
})
|
} else if (item.type === 'group') {
|
item.components.forEach(cell => {
|
this.modules[cell.uuid] = [...sups, item.uuid, cell.uuid]
|
})
|
}
|
})
|
|
if (interfaces && interfaces.length > 0) {
|
interfaces.forEach(item => {
|
this.modules[item.uuid] = [item.uuid]
|
})
|
}
|
}
|
|
pasteSubmit = () => {
|
const { type, tab } = this.props
|
|
let appType = sessionStorage.getItem('appType')
|
// ['calendar', 'balcony', 'datacard', 'doublecard', 'propcard', 'tablecard', 'cardatacard', 'carpropcard', 'line', 'dashboard', 'antvG6', 'pie', 'scatter', 'antvX6', 'chart', 'sandbox', 'editor', 'simpleform', 'stepform', 'tabform', 'group', 'iframe', 'mainsearch', 'basetable', 'editable', 'normaltable', 'tabs', 'timeline', 'tree', 'menubar', 'singleSearch', 'topbar']
|
let options = []
|
|
let types = {
|
topbar: '导航栏',
|
singleSearch: '搜索',
|
iframe: 'iframe',
|
tabs: '标签页',
|
group: '分组',
|
menubar: '菜单栏',
|
mainsearch: '搜索'
|
}
|
|
if (!type) {
|
options = ['tabs', 'timeline', 'datacard', 'doublecard', 'propcard', 'cardatacard', 'carpropcard', 'simpleform', 'stepform', 'tabform', 'balcony', 'group', 'normaltable', 'tablecard', 'line', 'editor', 'pie', 'scatter', 'iframe', 'sandbox']
|
|
if (appType === 'mob') {
|
options.push('menubar', 'singleSearch', 'mobnavbar')
|
if (sessionStorage.getItem('editMenuType') !== 'popview') {
|
options.push('topbar')
|
}
|
} else {
|
options.push('editable', 'mainsearch', 'antvG6', 'antvX6', 'calendar', 'tree', 'dashboard', 'chart')
|
if (appType !== 'pc') {
|
options.push('account')
|
}
|
}
|
} else {
|
if (appType === 'mob') {
|
options = ['balcony', 'datacard', 'doublecard', 'propcard', 'tablecard', 'cardatacard', 'carpropcard', 'line', 'pie', 'scatter', 'sandbox', 'editor', 'simpleform', 'stepform', 'tabform', 'normaltable', 'timeline']
|
|
if (type === 'tabs') {
|
options.push('tabs', 'group', 'menubar')
|
}
|
} else {
|
options = ['calendar', 'balcony', 'datacard', 'doublecard', 'propcard', 'tablecard', 'cardatacard', 'carpropcard', 'line', 'dashboard', 'antvG6', 'pie', 'scatter', 'antvX6', 'chart', 'sandbox', 'editor', 'simpleform', 'stepform', 'tabform', 'editable', 'normaltable', 'timeline', 'tree']
|
|
if (type === 'tabs') {
|
options.push('tabs', 'group', 'mainsearch')
|
}
|
}
|
}
|
|
this.pasteFormRef.handleConfirm().then(res => {
|
if (!res.copyType || (res.copyType === 'components' && this.props.vType !== res.type)) {
|
notification.warning({
|
top: 92,
|
message: '配置信息格式错误！',
|
duration: 5
|
})
|
return
|
}
|
|
if (res.copyType === 'basetable') {
|
res.copyType = 'normaltable'
|
res.subtype = 'normaltable'
|
}
|
|
let menu = fromJS(window.GLOB.customMenu).toJS()
|
|
if (res.copyType === 'components') {
|
let commonId = Utils.getuuid()
|
|
res.interfaces = res.interfaces.map(inter => {
|
inter.uuid = md5(commonId + inter.uuid)
|
return inter
|
})
|
|
res.components = MenuUtils.resetConfig(res.components, commonId, true)
|
|
if (menu.components.length) {
|
if (
|
menu.components.findIndex(m => m.type === 'search' || (m.type === 'topbar' && m.wrap.type !== 'navbar')) > -1 &&
|
res.components.findIndex(m => m.type === 'search' || (m.type === 'topbar' && m.wrap.type !== 'navbar')) > -1
|
) {
|
notification.warning({
|
top: 92,
|
message: '搜索条件不可重复添加！',
|
duration: 5
|
})
|
return
|
}
|
if (
|
menu.components.findIndex(m => m.type === 'topbar') > -1 &&
|
res.components.findIndex(m => m.type === 'topbar') > -1
|
) {
|
notification.warning({
|
top: 92,
|
message: '导航栏不可重复添加！',
|
duration: 5
|
})
|
return
|
}
|
}
|
|
this.setState({visible: false})
|
|
this.props.insert(res)
|
|
notification.success({
|
top: 92,
|
message: '粘贴成功！',
|
duration: 2
|
})
|
|
return
|
}
|
|
if (!options.includes(res.copyType)) {
|
if (type && types[res.copyType]) {
|
notification.warning({
|
top: 92,
|
message: (type === 'group' ? '分组中' : '标签页中') + '不可添加《' + types[res.copyType] + '》组件！',
|
duration: 5
|
})
|
return
|
} else {
|
notification.warning({
|
top: 92,
|
message: '配置信息格式错误！',
|
duration: 5
|
})
|
}
|
return
|
} else if (appType === 'mob') {
|
if (res.type === 'search') {
|
if (menu.components.filter(card => card.type === 'topbar' && card.wrap.type !== 'navbar').length > 0) {
|
notification.warning({
|
top: 92,
|
message: '导航栏使用了搜索，不可添加搜索组件！',
|
duration: 5
|
})
|
return
|
}
|
if (menu.components.filter(card => card.type === 'search').length > 0) {
|
notification.warning({
|
top: 92,
|
message: '搜索条件不可重复添加！',
|
duration: 5
|
})
|
return
|
}
|
} else if (res.type === 'topbar') {
|
if (menu.components.findIndex(m => m.type === 'topbar') > -1) {
|
notification.warning({
|
top: 92,
|
message: '导航栏不可重复添加！',
|
duration: 5
|
})
|
return
|
}
|
} else if (res.type === 'navbar') {
|
if (menu.components.findIndex(m => m.type === 'navbar') > -1) {
|
notification.warning({
|
top: 92,
|
message: '菜单栏不可重复添加！',
|
duration: 5
|
})
|
return
|
}
|
}
|
} else if (res.type === 'search') {
|
if (tab) {
|
if (tab.components.findIndex(card => card.type === 'search') > -1) {
|
notification.warning({
|
top: 92,
|
message: '搜索条件不可重复添加！',
|
duration: 5
|
})
|
return
|
}
|
} else {
|
if (menu.components.findIndex(m => m.type === 'search') > -1) {
|
notification.warning({
|
top: 92,
|
message: '搜索条件不可重复添加！',
|
duration: 5
|
})
|
return
|
}
|
}
|
}
|
delete res.copyType
|
|
let commonId = MenuUtils.getuuid()
|
|
res = this.resetconfig(res, appType, commonId)
|
|
if (tab) {
|
this.resetmenu(menu.components, tab.uuid, res)
|
} else {
|
menu.components.push(res)
|
}
|
|
this.modules = {}
|
|
this.getModules(menu.components, menu.interfaces)
|
|
this.resetlink(res, commonId)
|
|
this.setState({visible: false})
|
|
let skip = true
|
if (appType === 'mob' && res.type === 'navbar') {
|
let appMenus = sessionStorage.getItem('appViewList')
|
if (appMenus) {
|
try {
|
appMenus = JSON.parse(appMenus)
|
appMenus = appMenus.filter(item => item.keys_type === 'navbar')
|
} catch (e) {
|
appMenus = []
|
}
|
} else {
|
appMenus = []
|
}
|
|
if (appMenus.length) {
|
const that = this
|
skip = false
|
|
confirm({
|
title: '如需使用当前应用中已有的菜单栏，请点击右侧关联菜单栏，如需添加请点确定。',
|
onOk() {
|
that.props.insert(res)
|
},
|
onCancel() {}
|
})
|
}
|
}
|
|
if (skip) {
|
this.props.insert(res)
|
|
notification.success({
|
top: 92,
|
message: '粘贴成功！',
|
duration: 2
|
})
|
}
|
})
|
}
|
|
render() {
|
const { type } = this.props
|
const { visible } = this.state
|
|
return (
|
<>
|
{type ? <SnippetsOutlined style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> :
|
<Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} onClick={() => {this.setState({visible: true})}}><SnippetsOutlined />粘贴</Button>}
|
<Modal
|
title="粘贴"
|
visible={visible}
|
width={600}
|
maskClosable={false}
|
onOk={this.pasteSubmit}
|
onCancel={() => {this.setState({visible: false})}}
|
destroyOnClose
|
>
|
<PasteForm wrappedComponentRef={(inst) => this.pasteFormRef = inst} inputSubmit={this.pasteSubmit}/>
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default PasteController
|
