feat: 添加服务记录示例

src/components/PopContent/Contacts/AddRecord.jsx

@@ -1,18 +1,17 @@
-import React from 'react'
-import { Modal, Form, Input, Select, Radio, DatePicker, Switch } from 'antd'
+import React, { useState } from 'react'
+import { Modal, Form, Input, Radio, DatePicker, Switch } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
 
 const AddRecord = props => {
   const [form] = useForm()
-  const { Option, OptGroup } = Select
+  // const { Option, OptGroup } = Select
   const { TextArea } = Input
   const { visible, onCancel, onConfirm, loading } = props
-  const [value, setValue] = React.useState(1)
-  const onChange = e => {
-    console.log('radio checked', e.target.value)
-    setValue(e.target.value)
+  const [showExtraItem, setShowExtraItem] = useState(false)
+  const onChange = value => {
+    // const { value = '' } = e.currentTarget || e.target
+    setShowExtraItem(value)
   }
-
   return (
     <div>
       <Modal
@@ -26,14 +25,10 @@ const AddRecord = props => {
           })
         }}
         onCancel={onCancel}
-        width={500}
-      >
-        <Form
-          form={form}
-          layout="vertical"
-        >
-          <Form.Item>
-            <Radio.Group onChange={onChange} value={value}>
+        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>
@@ -41,20 +36,24 @@ const AddRecord = props => {
             </Radio.Group>
           </Form.Item>
           <Form.Item name="time" label="时间">
-            <DatePicker style={{ width: '100%' }}/>
+            <DatePicker style={{ width: '100%' }} />
           </Form.Item>
           <Form.Item name="con" label="内容">
-            <TextArea rows={3}/>
-          </Form.Item>
-          <Form.Item name="con1" label="">
-            <Switch/> <span>添加提醒</span>
-          </Form.Item>
-          <Form.Item name="deadline" label="提醒限期">
-            <DatePicker style={{ width: '100%' }}/>
-          </Form.Item>
-          <Form.Item name="remark" label="备注">
-            <TextArea rows={2}/>
+            <TextArea rows={3} />
           </Form.Item>
+          <div className="zh-align-center">
+            <Switch onChange={onChange} /> <span>添加提醒</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>