import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, notification } from 'antd'
|
import { SnippetsOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import MKEmitter from '@/utils/events.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
// import './index.scss'
|
|
const PasteForm = asyncComponent(() => import('@/templates/zshare/pasteform'))
|
|
class PasteController extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 组件配置
|
updateConfig: PropTypes.func
|
}
|
|
state = {
|
visible: false
|
}
|
|
resetconfig = (item, config) => {
|
let _uuid = Utils.getuuid()
|
|
if (item.uuid) {
|
item.uuid = _uuid
|
}
|
|
if (item.copyType === 'cardcell' && config.subtype === 'datacard') {
|
item.setting = item.setting || {}
|
item.$cardType = 'extendCard'
|
item.setting.width = item.setting.width || 6
|
|
if (item.elements) {
|
item.elements = item.elements.map(cell => {
|
if (cell.datatype === 'dynamic') {
|
cell.datatype = 'static'
|
}
|
cell.uuid = Utils.getuuid()
|
return cell
|
})
|
}
|
if (item.backElements) {
|
item.backElements = item.backElements.map(cell => {
|
if (cell.datatype === 'dynamic') {
|
cell.datatype = 'static'
|
}
|
cell.uuid = Utils.getuuid()
|
return cell
|
})
|
}
|
} else if (item.copyType === 'cardcell') {
|
item.setting = item.setting || {}
|
item.setting.width = item.setting.width || 6
|
delete item.$cardType
|
|
if (config.type === 'carousel') {
|
delete item.setting.linkbtn
|
delete item.backElements
|
}
|
|
if (item.elements) {
|
item.elements = item.elements.map(cell => {
|
cell.uuid = Utils.getuuid()
|
return cell
|
})
|
}
|
if (item.backElements) {
|
item.backElements = item.backElements.map(cell => {
|
cell.uuid = Utils.getuuid()
|
return cell
|
})
|
}
|
} else if (item.copyType === 'cols') {
|
let loopCol = (cols) => {
|
return cols.map(col => {
|
col.uuid = Utils.getuuid()
|
|
if (col.type === 'action') {
|
col.type = 'custom'
|
}
|
|
if (col.type === 'colspan' && col.subcols) {
|
col.subcols = loopCol(col.subcols)
|
} else if (col.type === 'custom' && col.elements) {
|
col.elements = col.elements.map(cell => {
|
cell.uuid = Utils.getuuid()
|
return cell
|
})
|
}
|
return col
|
})
|
}
|
|
item.cols = loopCol(item.cols)
|
}
|
|
return item
|
}
|
|
pasteSubmit = () => {
|
const { options } = this.props
|
this.pasteFormRef.handleConfirm().then(res => {
|
if (!options.includes(res.copyType)) {
|
notification.warning({ top: 92, message: '配置信息格式错误！', duration: 5 })
|
return
|
}
|
|
if (!this.props.config) {
|
this.props.updateConfig(res)
|
this.setState({visible: false})
|
return
|
}
|
|
let type = res.copyType
|
let config = fromJS(this.props.config).toJS()
|
|
res = this.resetconfig(res, config)
|
delete res.copyType
|
|
if (config.type === 'form') {
|
this.props.updateConfig(res)
|
this.setState({visible: false})
|
return
|
} else if (type === 'action') {
|
if (res.style) {
|
delete res.style.width
|
delete res.style.float
|
}
|
if (['line', 'bar', 'scatter'].includes(config.type) && !['excelOut', 'excelIn'].includes(res.OpenType)) {
|
notification.warning({ top: 92, message: '图表中不支持此类按钮！', duration: 5 })
|
return
|
}
|
MKEmitter.emit('addButton', config.uuid, res)
|
} else if (type === 'search' || type === 'form') {
|
let keys = config.search.map(item => item.field ? item.field.toLowerCase() : '')
|
|
if (type === 'form') {
|
if (['number', 'switch', 'textarea', 'fileupload', 'hint', 'color', 'funcvar'].includes(res.type)) {
|
res.type = 'text'
|
} else if (res.type === 'radio') {
|
res.type = 'select'
|
} else if (res.type === 'checkbox') {
|
res.type = 'multiselect'
|
} else if (res.type === 'datetime') {
|
res.type = 'date'
|
}
|
}
|
|
if (res.field && keys.includes(res.field.toLowerCase())) {
|
notification.warning({
|
top: 92,
|
message: '搜索字段已存在！',
|
duration: 5
|
})
|
return
|
}
|
|
MKEmitter.emit('plusSearch', config.uuid, res, 'simple')
|
this.setState({visible: false})
|
return
|
} else if (type === 'cardcell') {
|
config.subcards.push(res)
|
} else if (type === 'menucell') {
|
config.subMenus.push(res)
|
} else if (type === 'cols') {
|
config.cols = config.cols.filter(col => !col.origin)
|
|
let keys = config.cols.map(col => (col.field || '$empty'))
|
|
res.cols.forEach(col => {
|
if (!keys.includes(col.field)) {
|
config.cols.push(col)
|
}
|
})
|
}
|
|
this.props.updateConfig(config, type)
|
this.setState({visible: false})
|
|
notification.success({
|
top: 92,
|
message: '粘贴成功！',
|
duration: 2
|
})
|
})
|
}
|
|
render() {
|
const { visible } = this.state
|
|
return (
|
<div style={{display: 'inline-block'}}>
|
<SnippetsOutlined style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} />
|
<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>
|
</div>
|
)
|
}
|
}
|
|
export default PasteController
|
