feat: 添加新客户弹窗

src/components/Modal/src/BasicDrawer.jsx

@@ -21,7 +21,7 @@ const BasicDrawer = props => {
 
   return (
     <Fragment>
-      <Drawer visible={visible} {...resetProps} width={clientWidth}>
+      <Drawer visible={visible} {...resetProps} width={clientWidth} getContainer={false}>
         {children}
       </Drawer>
     </Fragment>

src/components/Modal/src/BasicModal.jsx

@@ -10,7 +10,7 @@ const BasicModal = props => {
 
   return (
     <Fragment>
-      <Modal visible={visible} {...resetProps}>
+      <Modal visible={visible} {...resetProps} getContainer={false}>
         {children}
       </Modal>
     </Fragment>

src/components/Modal/src/components/addCustomerModal/index.jsx

@@ -1,70 +1,79 @@
-import React from 'react'
-import { Modal, Form, Input, Checkbox, Row, Col } from 'antd'
+import React, { useState, useRef } from 'react'
+import { Form, Row, Col, Button } from 'antd'
 import { validCascaderRule } from '@/components/LazyCascader'
 import { customerTypeOptions } from '@/consts/customer'
 import LazyCascader from '@/components/LazyCascader'
+import { ModalForm, ProFormText, ProFormCheckbox } from '@ant-design/pro-form'
+import { PlusOutlined } from '@ant-design/icons'
 
-const AddCustomerModal = props => {
-  const { form } = Form.useForm()
+const AddCustomerModal = ({ clientId = '331233', ...restProps }) => {
+  const formRef = useRef()
+  const [modalVisible, setModalVisible] = useState(false)
+  const layout = {
+    layout: 'horizontal',
+    labelCol: { flex: '100px' }
+  }
+  const [showContactItem, setShowContactItem] = useState(false)
   return (
-    <Modal {...props}>
-      <Form form={form}>
-        <Form.Item
-          name="companyName"
-          label="客户全称"
-          rules={[{ required: true, message: '请输入客户全称' }]}>
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="district"
-          label="客户地区"
-          rules={[{ required: true, message: '请选择客户地区' }, { validator: validCascaderRule }]}>
-          <LazyCascader />
-        </Form.Item>
-        <Form.Item name="nature" label="客户性质">
-          <Checkbox.Group options={customerTypeOptions} />
-        </Form.Item>
-        <Form.Item name="address" label="客户地址">
-          <Input />
-        </Form.Item>
-        <Row>
-          <Col span={12}>
-            <Form.Item label="客户传真">
-              <Input />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="网址">
-              <Input />
-            </Form.Item>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={12}>
-            <Form.Item label="乘车路线">
-              <Input />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="地标建筑">
-              <Input />
-            </Form.Item>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={12}>
-            <Form.Item label="参考住宿">
-              <Input />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="备注">
-              <Input />
-            </Form.Item>
-          </Col>
-        </Row>
-      </Form>
-    </Modal>
+    <ModalForm
+      formRef={formRef}
+      title="添加新客户"
+      {...layout}
+      visible={modalVisible}
+      onVisibleChange={setModalVisible}
+      submitter={{
+        render: ({ submit }, defaultDoms) => [
+          ...defaultDoms,
+          <Button
+            type="primary"
+            key="2"
+            onClick={() => {
+              setShowContactItem(true)
+              formRef.current && formRef.current.setFieldsValue({ clientId })
+              submit()
+            }}>
+            添加并关联
+          </Button>
+        ]
+      }}
+      trigger={
+        <Button prefix={<PlusOutlined />} onClick={() => setModalVisible(true)} type="primary">
+          添加新客户
+        </Button>
+      }
+      onFinish={async values => {
+        // await waitTime(2000);
+        console.log(values)
+      }}>
+      <ProFormText
+        name="companyName"
+        label="客户名称"
+        placeholder="请输入客户全称"
+        rules={[{ required: true, message: '请输入客户全称' }]}
+      />
+      {showContactItem ? <ProFormText name="clientId" hidden /> : null}
+      <Form.Item
+        name="district"
+        label="客户地区"
+        required={true}
+        rules={[{ validator: validCascaderRule }]}>
+        <LazyCascader />
+      </Form.Item>
+      <ProFormCheckbox.Group name="nature" label="客户性质" options={customerTypeOptions} />
+      <ProFormText name="address" label="客户地址" placeholder="" />
+      <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>
   )
 }
 

src/components/Modal/src/components/customerModal/index.jsx

@@ -66,21 +66,8 @@ const SearchModal = ({ data, total, dispatch }) => {
         <span>11</span>
       </div>
       <div className={styles.modalFooter}>
-        <Button prefix={<PlusOutlined />} type="primary" onClick={() => setVisible(true)}>
-          添加新客户
-        </Button>
+        <AddCustomerModal />
       </div>
-      <AddCustomerModal
-        visible={visible}
-        title="添加新客户"
-        onCancel={() => setVisible(false)}
-        onOk={() => {
-          form.validateFields().then(values => {
-            form.resetFields()
-            addConfirm(values)
-          })
-        }}
-      />
     </div>
   )
 }