| | |
| | | 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 MenuUtils from '@/utils/utils-custom.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | |
| | | visible: false |
| | | } |
| | | |
| | | resetconfig = (item, appType) => { |
| | | resetconfig = (item, appType, commonId) => { |
| | | if (item.type === 'tabs') { |
| | | item.uuid = MenuUtils.getuuid() |
| | | 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 = MenuUtils.getuuid() |
| | | 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) |
| | | cell = this.resetconfig(cell, appType, commonId) |
| | | return cell |
| | | }) |
| | | }) |
| | | } else if (item.type === 'group') { |
| | | item.uuid = MenuUtils.getuuid() |
| | | 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 = MenuUtils.resetComponentConfig(cell, appType) |
| | | cell.uuid = md5(commonId + cell.uuid) |
| | | |
| | | cell = MenuUtils.resetComponentConfig(cell, appType, commonId) |
| | | return cell |
| | | }) |
| | | } else { |
| | | item = MenuUtils.resetComponentConfig(item, appType) |
| | | 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) { |
| | | btn.syncComponents = btn.syncComponents.map(m => { |
| | | let id = m.syncComId[m.syncComId.length - 1] |
| | | let _id = md5(commonId + id) |
| | | |
| | | return this.modules[id] || this.modules[_id] || 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 = ['tabs', 'timeline', 'datacard', 'doublecard', 'propcard', 'cardatacard', 'carpropcard', 'simpleform', 'stepform', 'tabform', 'balcony', 'group', 'normaltable', 'tablecard', 'line', 'editor', 'pie', 'scatter', 'iframe', 'sandbox'] |
| | | let options = [] |
| | | |
| | | if (appType === 'mob') { |
| | | options.push('menubar', 'singleSearch') |
| | | if (sessionStorage.getItem('editMenuType') !== 'popview') { |
| | | options.push('topbar') |
| | | 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') |
| | | if (sessionStorage.getItem('editMenuType') !== 'popview') { |
| | | options.push('topbar') |
| | | } |
| | | } else { |
| | | options.push('editable', 'mainsearch', 'antvG6', 'antvX6', 'calendar', 'tree', 'dashboard', 'chart') |
| | | } |
| | | } else { |
| | | options.push('editable', 'mainsearch', 'antvG6', 'antvX6', 'calendar', 'tree', 'dashboard', 'chart') |
| | | 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 === 'basetable') { |
| | | res.copyType = 'normaltable' |
| | | res.subtype = 'normaltable' |
| | | } |
| | | if (!options.includes(res.copyType)) { |
| | | if (!res.copyType) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '配置信息格式错误!', |
| | |
| | | return |
| | | } |
| | | |
| | | res = this.resetconfig(res, appType) |
| | | if (res.copyType === 'basetable') { |
| | | res.copyType = 'normaltable' |
| | | res.subtype = 'normaltable' |
| | | } |
| | | |
| | | // delete res.copyType |
| | | let menu = fromJS(window.GLOB.customMenu).toJS() |
| | | |
| | | 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 === '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.props.insert(res) |
| | | |
| | | this.setState({visible: false}) |
| | | |
| | | notification.success({ |
| | | top: 92, |
| | | message: '粘贴成功!', |
| | | duration: 2 |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | render() { |
| | | const { type } = this.props |
| | | const { visible } = this.state |
| | | |
| | | return ( |
| | | <> |
| | | <Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} onClick={() => {this.setState({visible: true})}}><SnippetsOutlined />粘贴</Button> |
| | | {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} |