feat: 添加服务记录弹窗确认按钮增加loading效果，防止多次点击

src/pages/Customer/Client/components/ClientDetail/AddRecord.jsx

@@ -7,10 +7,13 @@ import { ProFormTextArea } from '@ant-design/pro-form'
 const AddRecord = props => {
   const [formRef] = Form.useForm()
   const { onConfirm, ...resetModalProps } = props
-  const [showExtraItem, setShowExtraItem] = useState(false)
+  const [state, setState] = useState({
+    showExtraItem: false,
+    loading: false
+  })
 
   const onChange = value => {
-    setShowExtraItem(value)
+    setState({ ...state, showExtraItem: value })
   }
 
   const disabledDate = current => {
@@ -23,6 +26,7 @@ const AddRecord = props => {
       title="添加服务记录"
       getContainer={() => document.getElementById('root')}
       onOk={() => {
+        setState({ ...state, loading: true })
         formRef?.validateFields().then(async values => {
           const newVal = { ...values }
           formRef.current?.resetFields()
@@ -34,8 +38,11 @@ const AddRecord = props => {
           }
           const isSuccess = await onConfirm(newVal)
           isSuccess && resetModalProps.onCancel()
+          setState({ ...state, loading: false })
         })
-      }}>
+      }}
+      confirmLoading={state.loading}
+    >
       <Form layout="vertical" form={formRef}>
         <Form.Item name="status" label="服务类型" rules={[{ required: true, message: '请选择类型' }]}>
           <Radio.Group>
@@ -49,18 +56,23 @@ const AddRecord = props => {
           name="date"
           label="服务日期"
           initialValue={dayjs(new Date())}
-          rules={[{ required: true, message: '请选择服务日期' }]}>
+          rules={[{ required: true, message: '请选择服务日期' }]}
+        >
           <DatePicker style={{ width: '100%' }} />
         </Form.Item>
         <ProFormTextArea name="mark" label="内容" rules={[{ required: true, message: '请输入服务内容' }]} />
 
         <div className="pb-5">
-          <Switch onChange={onChange} checked={showExtraItem} />
+          <Switch onChange={onChange} checked={state.showExtraItem} />
           <span className="ml-2">添加备忘录</span>
         </div>
-        {showExtraItem ? (
+        {state.showExtraItem ? (
           <>
-            <Form.Item name="remindTime" label="备忘日期" rules={[{ required: true, message: '请选择备忘日期' }]}>
+            <Form.Item
+              name="remindTime"
+              label="备忘日期"
+              rules={[{ required: true, message: '请选择备忘日期' }]}
+            >
               <DatePicker style={{ width: '100%' }} disabledDate={disabledDate} />
             </Form.Item>
             <ProFormTextArea name="remarks" label="备忘内容" />