cldV2react/src/pages/Customer/Contact/components/AddCustomerModal/index.jsx

import React, { useState, useRef, useEffect } from 'react'
import { Form, Row, Col, Button } from 'antd'
import { validCascaderRule } from '@/components/LazyCascader'
import LazyCascader from '@/components/LazyCascader'
import { ModalForm, ProFormText, ProFormCheckbox } from '@ant-design/pro-form'
import { PlusOutlined } from '@ant-design/icons'
import { connect } from 'dva'
import { ChangeCompMap } from '../ChangeCompany'

const AddCustomerModal = ({ dataId, dataType, onConfirm, dispatch, natures }) => {
  const formRef = useRef()
  const [modalVisible, setModalVisible] = useState(false)
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '100px' }
  }
  useEffect(() => {
    const getNatures = () => {
      dispatch({
        type: 'customer/fetch'
      })
    }
    !natures.length && getNatures()
  }, [])
  const [showDataItem, setShowDataItem] = useState(false)
  return (
    <ModalForm
      formRef={formRef}
      title="添加新客户"
      {...layout}
      visible={modalVisible}
      onVisibleChange={setModalVisible}
      submitter={{
        render: ({ submit }, defaultDoms) => [
          ...defaultDoms,
          <Button
            type="primary"
            key="2"
            onClick={() => {
              setShowDataItem(true)
              const values = {}
              if (dataType === ChangeCompMap.CLIENT.key) {
                values.clientId = dataId
              }
              if (dataType === ChangeCompMap.BUSINESS.key) {
                values.businessId = dataId
              }
              formRef.current && formRef.current.setFieldsValue(values)
              submit()
            }}>
            添加并关联
          </Button>
        ]
      }}
      trigger={
        <Button prefix={<PlusOutlined />} onClick={() => setModalVisible(true)} type="primary">
          添加新客户
        </Button>
      }
      onFinish={async values => {
        await onConfirm(values)
        return true
      }}>
      <ProFormText
        name="companyName"
        label="客户名称"
        placeholder="请输入客户全称"
        rules={[{ required: true, message: '请输入客户全称' }]}
      />
      {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
      <Form.Item
        name="district"
        label="客户地区"
        required={true}
        rules={[{ validator: validCascaderRule }]}>
        <LazyCascader />
      </Form.Item>
      <ProFormCheckbox.Group name="natureIds" label="客户性质" options={natures} />
      <ProFormText name="address" label="客户地址" placeholder="" rules={[{ required: true }]} />
      <Row>
        <Col span={12}>
          <ProFormText name="fax" label="客户传真" placeholder="" />
          <ProFormText name="ride" label="乘车路线" placeholder="" />
          <ProFormText name="stay" label="参考住宿" placeholder="" />
        </Col>
        <Col span={12}>
          <ProFormText name="webservice" label="网址" placeholder="" />
          <ProFormText name="landmarks" label="地标建筑" placeholder="" />
          <ProFormText name="remarks" label="备注" placeholder="" />
        </Col>
      </Row>
    </ModalForm>
  )
}

export default connect(({ customer }) => ({
  natures: customer.natures
}))(AddCustomerModal)