import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, notification, Button } from 'antd'
|
import { SnippetsOutlined, QuestionCircleOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const PasteForm = asyncComponent(() => import('@/templates/zshare/pasteform'))
|
|
class PasteForms extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 组件配置
|
update: PropTypes.func
|
}
|
|
state = {
|
visible: false,
|
choVisible: false,
|
result: null
|
}
|
|
pasteSubmit = () => {
|
const { config } = this.props
|
|
this.pasteFormRef.handleConfirm().then(res => {
|
if (res.copyType === 'search' && ['text', 'select', 'multiselect', 'link', 'checkcard', 'date', 'datemonth'].includes(res.type)) {
|
res.copyType = 'form'
|
}
|
|
if (!['form', 'forms', 'formgroup', 'simpleform'].includes(res.copyType)) {
|
notification.warning({ top: 92, message: '配置信息格式错误！', duration: 5 })
|
return
|
}
|
|
if (res.copyType === 'form') {
|
delete res.copyType
|
res = {fields: [res]}
|
}
|
|
res.fields = res.fields || []
|
res.fields = res.fields.map(item => {
|
item.uuid = Utils.getuuid()
|
return item
|
})
|
|
let fields = res.fields.map(item => item.field ? item.field.toLowerCase() : '')
|
|
let repeat = false
|
let forms = []
|
if (config.fields) {
|
forms = fromJS(config.fields).toJS()
|
forms.forEach(item => {
|
if (item.field && fields.includes(item.field.toLowerCase())) {
|
repeat = true
|
}
|
})
|
}
|
|
if (repeat) {
|
this.setState({result: res, choVisible: true, visible: false})
|
return
|
} else {
|
forms.push(...res.fields)
|
}
|
|
this.props.update(forms, res)
|
|
this.setState({visible: false})
|
|
notification.success({
|
top: 92,
|
message: '粘贴成功！',
|
duration: 2
|
})
|
})
|
}
|
|
replaceForms = () => {
|
const { config } = this.props
|
const { result } = this.state
|
|
let forms = fromJS(config.fields).toJS()
|
let fields = fromJS(result.fields).toJS()
|
let repeats = []
|
|
forms = forms.map(item => {
|
if (!item.field) return item
|
|
let cell = fields.filter(m => m.field && m.field.toLowerCase() === item.field.toLowerCase())[0]
|
if (cell) {
|
repeats.push(cell.field)
|
return cell
|
}
|
|
return item
|
})
|
|
fields = fields.filter(m => !m.field || !repeats.includes(m.field))
|
|
forms.push(...fields)
|
|
this.props.update(forms, result)
|
|
this.setState({choVisible: false})
|
}
|
|
jumpForms = () => {
|
const { config } = this.props
|
const { result } = this.state
|
|
let forms = fromJS(config.fields).toJS()
|
let fields = fromJS(result.fields).toJS()
|
let repeats = []
|
|
forms = forms.map(item => {
|
if (!item.field) return item
|
|
let cell = fields.filter(m => m.field && m.field.toLowerCase() === item.field.toLowerCase())[0]
|
if (cell) {
|
repeats.push(cell.field)
|
}
|
|
return item
|
})
|
|
fields = fields.filter(m => !m.field || !repeats.includes(m.field))
|
|
forms.push(...fields)
|
|
this.props.update(forms, result)
|
|
this.setState({choVisible: false})
|
}
|
|
render() {
|
const { type } = this.props
|
const { visible, choVisible } = this.state
|
|
return (
|
<div style={{display: 'inline-block'}}>
|
{type === 'toolbar' ? <Button icon="snippets" style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} >粘贴</Button> :
|
<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>
|
<Modal
|
title=""
|
visible={choVisible}
|
width={450}
|
closable={false}
|
maskClosable={false}
|
onCancel={() => {this.setState({choVisible: false, result: null})}}
|
footer={[
|
<Button key="cancel" onClick={() => this.setState({choVisible: false, result: null})}>取消</Button>,
|
<Button key="replace" className="mk-border-purple" style={{color: 'purple'}} onClick={this.replaceForms}>替换</Button>,
|
<Button key="confirm" type="primary" onClick={this.jumpForms}>跳过</Button>
|
]}
|
destroyOnClose
|
>
|
<QuestionCircleOutlined style={{color: 'orange', fontSize: '24px', margin: '15px 10px', position: 'relative', top: '2px'}}/>存在重复表单，请选择处理方式。
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default PasteForms
|
