refactor: 将AddRecord使用ModalForm重构，减小代码体积

src/pages/Customer/Business/components/BusinessDetail/TabList.jsx

@@ -1,7 +1,6 @@
-import { message, Tabs, Button } from 'antd'
+import { message, Tabs } from 'antd'
 import React, { useEffect, useState, useRef } from 'react'
 import consts from '@/consts'
-import SvgIcon from '@/components/SvgIcon'
 import { apiAddService } from '@/services/customer'
 import AddRecord from './Record'
 import { useDispatch } from 'dva'
@@ -16,20 +15,25 @@ const ContanctTabList = ({ clientId, software }) => {
   const tRef = useRef()
   const columns = [
     {
-      title: '锁号',
-      dataIndex: 'keyNum'
+      dataIndex: 'index',
+      valueType: 'indexBorder',
+      width: 48
     },
     {
-      title: '产品',
-      dataIndex: 'product'
+      title: '姓名',
+      dataIndex: 'name'
     },
     {
-      title: '状态',
-      dataIndex: 'statusT'
+      title: '昵称',
+      dataIndex: 'nickname'
     },
     {
-      title: '责任人',
-      dataIndex: 'client'
+      title: '手机',
+      dataIndex: 'mobile'
+    },
+    {
+      title: 'QQ',
+      dataIndex: 'qq'
     }
   ]
   const [addService, setAddService] = useState({
@@ -71,7 +75,7 @@ const ContanctTabList = ({ clientId, software }) => {
           <TabPane tab="大司空云计价" key="大司空云计价">
             <div className="sheet-right-panel">大司空云计价</div>
           </TabPane> */}
-          <TabPane tab="软件锁" key="软件锁">
+          <TabPane tab="联系人" key="1">
             <div className="sheet-right-panel">
               <ProTable
                 columns={columns}
@@ -85,29 +89,17 @@ const ContanctTabList = ({ clientId, software }) => {
               />
             </div>
           </TabPane>
-          {/* <TabPane tab="通行账号" key="通行账号">
+          <TabPane tab="发票" key="2">
             <div className="sheet-right-panel">通行账号</div>
-          </TabPane> */}
+          </TabPane>
         </Tabs>
       </div>
       <div className="sheet-btns zh-pd-left-15 zh-pd-top-15">
         {/* <Button type="primary" ghost>
           <SvgIcon type="icon-link" /> 绑定加密锁
         </Button> */}
-        <Button
-          type="primary"
-          ghost
-          size="small"
-          onClick={() => setAddService({ ...setAddService, visible: true })}>
-          <SvgIcon type="icon-plus" /> 添加服务记录
-        </Button>
+        <AddRecord onConfirm={handleAddService} />
       </div>
-      <AddRecord
-        onConfirm={handleAddService}
-        loading={addService.loading}
-        visible={addService.visible}
-        onCancel={() => setAddService({ ...addService, visible: false })}
-      />
     </div>
   )
 }

src/pages/Customer/Contact/components/ContactDetail/AddRecord.jsx

@@ -1,66 +1,69 @@
-import React, { useState } from 'react'
-import { Modal, Form, Input, Radio, DatePicker, Switch } from 'antd'
-import { useForm } from 'antd/lib/form/Form'
+import React, { useRef, useState } from 'react'
+import { Form, Button, Input, Radio, DatePicker, Switch } from 'antd'
 import { dayjsFormat } from '@/utils/utils'
+import { ModalForm } from '@ant-design/pro-form'
+import { Plus } from '@icon-park/react'
 
 const AddRecord = props => {
-  const [form] = useForm()
+  const formRef = useRef(null)
   const { TextArea } = Input
-  const { visible, onCancel, onConfirm, loading } = props
+  const { onConfirm } = props
   const [showExtraItem, setShowExtraItem] = useState(false)
   const onChange = value => {
-    // const { value = '' } = e.currentTarget || e.target
     setShowExtraItem(value)
   }
   return (
-    <div>
-      <Modal
-        title="添加服务记录"
-        visible={visible}
-        confirmLoading={loading}
-        onOk={() => {
-          form.validateFields().then(values => {
-            form.resetFields()
-            if (values.date) {
-              values.date = dayjsFormat(values.date, 'YYYY-MM-DD')
-            }
-            onConfirm(values)
-          })
-        }}
-        onCancel={onCancel}
-        width={500}>
-        <Form form={form} layout="vertical">
-          <Form.Item name="status" rules={[{ required: true, message: '请选择类型' }]}>
-            <Radio.Group>
-              <Radio value={1}>上门服务</Radio>
-              <Radio value={2}>电话拜访</Radio>
-              <Radio value={3}>其他事项</Radio>
-              <Radio value={4}>在线服务</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item name="date" label="时间">
+    <ModalForm
+      layout="vertical"
+      title="添加服务记录"
+      formRef={formRef}
+      trigger={
+        <Button type="primary" ghost size="small">
+          <Plus className="mr-1" /> 添加服务记录
+        </Button>
+      }
+      onFinish={async values => {
+        try {
+          const newVal = { ...values }
+          formRef.current?.resetFields()
+          if (values.date) {
+            newVal.date = dayjsFormat(values.date, 'YYYY-MM-DD')
+          }
+          await onConfirm(newVal)
+          return true
+        } catch (error) {
+          return false
+        }
+      }}>
+      <Form.Item name="status" rules={[{ required: true, message: '请选择类型' }]}>
+        <Radio.Group>
+          <Radio value={1}>上门服务</Radio>
+          <Radio value={2}>电话拜访</Radio>
+          <Radio value={3}>其他事项</Radio>
+          <Radio value={4}>在线服务</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item name="date" label="时间">
+        <DatePicker style={{ width: '100%' }} />
+      </Form.Item>
+      <Form.Item name="mark" label="内容">
+        <TextArea rows={3} />
+      </Form.Item>
+      <div className="zh-pd-bottom-20">
+        <Switch onChange={onChange} />
+        <span className="zh-mg-left-3">添加提醒</span>
+      </div>
+      {showExtraItem ? (
+        <>
+          <Form.Item name="deadline" label="提醒限期">
             <DatePicker style={{ width: '100%' }} />
           </Form.Item>
-          <Form.Item name="mark" label="内容">
-            <TextArea rows={3} />
+          <Form.Item name="remark" label="备注">
+            <TextArea rows={2} />
           </Form.Item>
-          <div className="zh-pd-bottom-20">
-            <Switch onChange={onChange} />
-            <span className="zh-mg-left-3">添加提醒</span>
-          </div>
-          {showExtraItem ? (
-            <>
-              <Form.Item name="deadline" label="提醒限期">
-                <DatePicker style={{ width: '100%' }} />
-              </Form.Item>
-              <Form.Item name="remark" label="备注">
-                <TextArea rows={2} />
-              </Form.Item>
-            </>
-          ) : null}
-        </Form>
-      </Modal>
-    </div>
+        </>
+      ) : null}
+    </ModalForm>
   )
 }
 

src/pages/Customer/Contact/components/ContactDetail/ContanctTabList.jsx

@@ -1,7 +1,6 @@
-import { message, Tabs, Button } from 'antd'
+import { message, Tabs } from 'antd'
 import React, { useEffect, useState, useRef } from 'react'
 import consts from '@/consts'
-import { Plus } from '@icon-park/react'
 import { apiAddService } from '@/services/customer'
 import AddRecord from './AddRecord'
 import { useDispatch } from 'dva'
@@ -91,21 +90,9 @@ const ContanctTabList = ({ clientId, software }) => {
           </TabPane> */}
         </Tabs>
       </div>
-      <div className="sheet-btns zh-pd-left-15 zh-pd-top-15">
-        <Button
-          type="primary"
-          ghost
-          size="small"
-          onClick={() => setAddService({ ...setAddService, visible: true })}>
-          <Plus className="mr-1" /> 添加服务记录
-        </Button>
+      <div className="sheet-btns pl-15px pt-15px">
+        <AddRecord onConfirm={handleAddService} />
       </div>
-      <AddRecord
-        onConfirm={handleAddService}
-        loading={addService.loading}
-        visible={addService.visible}
-        onCancel={() => setAddService({ ...addService, visible: false })}
-      />
     </div>
   )
 }