refactor: 添加联系人弹窗使用ModalForm重构

src/pages/Customer/Contact/components/AddContact/index.jsx

@@ -1,137 +1,75 @@
-import React, { useEffect } from 'react'
-import { Form, Input, Modal, Row, Col, Select } from 'antd'
+import React from 'react'
+import { Form, Row, Col, Button } from 'antd'
 import LazyCascader, { validCascaderRule } from '@/components/LazyCascader'
-import { useForm } from 'antd/lib/form/Form'
-import { formatValues } from '@/components/LazyCascader'
+import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
+import { IconPark } from '@/components/SvgIcon'
 
 const Addcontact = props => {
-  const [form] = useForm()
-  const { visible, onCancel, onConfirm, loading } = props
-  const { Option } = Select
+  const { onConfirm } = props
   const layout = {
+    layout: 'horizontal',
     labelCol: { flex: '100px' }
   }
-  function handleChange(value) {
-    console.log(`selected ${value}`)
-  }
 
-  useEffect(() => {
-    if (visible) {
-      form.resetFields()
-    }
-  }, [])
   return (
-    <div>
-      <Modal
-        title="添加联系人"
-        width={800}
-        onCancel={onCancel}
-        visible={visible}
-        confirmLoading={loading}
-        onOk={() => {
-          form.validateFields().then(values => {
-            const params = formatValues(values)
-            onConfirm(params)
-          })
-        }}>
-        <Form {...layout} form={form} name="basic">
-          <Row>
-            <Col span={24}>
-              <Form.Item
-                label="姓名"
-                name="clientName"
-                rules={[{ required: true, message: '请输入姓名' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            {/* <Col span={12} /> */}
-            <Col span={12}>
-              <Form.Item
-                label="联系人地区"
-                name="district"
-                rules={[
-                  { required: true, message: '请选择地区' },
-                  { validator: validCascaderRule }
-                ]}>
-                <LazyCascader />
-              </Form.Item>
-            </Col>
-            <Col span={12} />
-            <Col span={12}>
-              <Form.Item
-                label="性别"
-                name="gender"
-                rules={[{ required: true, message: '请选择性别' }]}>
-                <Select onChange={handleChange}>
-                  <Option key="男" value="男">
-                    男
-                  </Option>
-                  <Option key="女" value="女">
-                    女
-                  </Option>
-                </Select>
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="昵称" name="niceName">
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item
-                label="手机"
-                name="telephone"
-                rules={[{ required: true, message: '请输入手机号码' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="QQ" name="qq" rules={[{ required: true, message: '请输入QQ号码' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item
-                label="电话"
-                name="phone"
-                rules={[{ required: true, message: '请输入电话/座机号' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '邮箱' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="联系人地址" name="address" rules={[{ message: '联系人地址' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="联系人乘车" name="ride" rules={[{ message: '联系人乘车' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="联系人地标" name="landmarks" rules={[{ message: '联系人地标' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="联系人住宿" name="stay" rules={[{ message: '联系人住宿' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={24}>
-              <Form.Item label="备注" name="mark" rules={[{ message: '备注' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form>
-      </Modal>
-    </div>
+    <ModalForm
+      {...layout}
+      title="添加联系人"
+      trigger={
+        <Button key="button" type="primary">
+          <IconPark type="plus" />
+          联系人
+        </Button>
+      }
+      onFinish={async values => {
+        await onConfirm(values)
+        return true
+      }}>
+      <ProFormText
+        name="clientName"
+        label="姓名"
+        rules={[{ required: true, message: '请输入姓名' }]}
+      />
+      <Form.Item
+        label="联系人地区"
+        name="district"
+        rules={[{ required: true, message: '请选择地区' }, { validator: validCascaderRule }]}>
+        <LazyCascader />
+      </Form.Item>
+      <Row>
+        <Col span={12}>
+          <ProFormSelect
+            name="gender"
+            label="性别"
+            rules={[{ required: true, message: '请选择性别' }]}
+            options={[
+              { label: '男', value: '男' },
+              { label: '女', value: '女' }
+            ]}
+          />
+          <ProFormText
+            label="手机"
+            name="telephone"
+            rules={[{ required: true, message: '请输入手机号码' }]}
+          />
+          <ProFormText
+            label="电话"
+            name="phone"
+            rules={[{ required: true, message: '请输入电话/座机号' }]}
+          />
+          <ProFormText label="联系人地址" name="address" />
+          <ProFormText label="联系人地标" name="landmarks" />
+        </Col>
+        <Col span={12}>
+          <ProFormText label="昵称" name="niceName" />
+          <ProFormText label="QQ" name="qq" />
+          <ProFormText label="邮箱" name="email" />
+          <ProFormText label="联系人乘车" name="ride" />
+          <ProFormText label="联系人住宿" name="stay" />
+        </Col>
+      </Row>
+      <ProFormText label="备注" name="remakrs" />
+    </ModalForm>
   )
 }