2023-04-03

king

2023-04-03 e659867fb59ad88f121d446e56df53389d88960d

 src/menu/components/share/pasteforms/index.jsx

New file
@@ -0,0 +1,178 @@
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