使用 Form 搜索数据

src/views/OrderFollow.jsx

@@ -1,13 +1,15 @@
 import { useNavigate } from 'react-router-dom'
-import { useRef, useEffect, useState } from 'react'
+import { useMemo, useCallback, useEffect, useState } from 'react'
 import {
   Row, Col, Divider, Table, Card, Button, Input,
-  Space, Segmented, Radio, Select, AutoComplete, Spin, Typography, Switch, DatePicker, List, Avatar
+  Space, Segmented, Radio, Select, AutoComplete, Spin, Form, Switch, DatePicker, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
 } from '@ant-design/icons'
 import { Conditional } from '@/components/Conditional'
+import { useFormInput } from '@/hooks/useFormInput'
+import { useGetJson } from '@/hooks/userFetch'
 
 const { RangePicker } = DatePicker;
 
@@ -182,8 +184,16 @@ const columns = [
 
 function OrderFollow() {
 
-  const [taskCategory, setTaskCategory] = useState('today')
   const [advanceChecked, toggleAdvance] = useState(false)
+  const [searchCriteria, setSearchCriteria] = useState({
+    type: 'today',
+    orderStatus: '新状态',
+    orderNumber: '订单号',
+    orderLabel: '订单标签',
+    startDate: '走团时间'
+  })
+
+  const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])
 
   useEffect(() => {
   }, [])
@@ -202,21 +212,33 @@ function OrderFollow() {
                 { label: '走团中', value: 'ing' },
                 { label: '走团后一月', value: 'lastMonth' }
               ]}
-              value={taskCategory}
+              value={searchCriteria.type}
               onChange={({ target: { value } }) => {
-                setTaskCategory(value)
+                setSearchCriteria({
+                  ...searchCriteria,
+                  type: value
+                })
               }}
               optionType='button'
               buttonStyle='solid'
+              disabled={advanceChecked}
             />
           </Col>
           <Col span={4}>
-            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询' 
-              defaultChecked={false} 
-              onChange={() => {toggleAdvance(!advanceChecked)}} />
+            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
+              defaultChecked={false}
+              onChange={() => { toggleAdvance(!advanceChecked) }} />
           </Col>
         </Row>
-        <Conditional condition={advanceChecked} whenTrue={<AdvanceCriteria />} />
+        <Conditional condition={advanceChecked} whenTrue={<AdvanceSearch onSubmit={(criteria) => {
+          console.info('onSubmit.searchCriteria: ')
+          console.info(criteria)
+          setSearchCriteria({
+            ...criteria,
+            type: 'advance'
+          })
+        }} />}
+        />
       </Space>
       <Divider plain orientation='left'></Divider>
       <Space
@@ -226,13 +248,17 @@ function OrderFollow() {
           display: 'flex',
         }}
       >
-        <OrderList taskCategory={taskCategory} />
+        {orderListMemo}
       </Space>
     </Spin>
   )
 
-  function OrderList({ taskCategory }) {
-    console.info('taskCategory: ' + taskCategory)
+  function OrderList({ searchCriteria }) {
+
+    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
+    console.info(countryList)
+    console.info('OrderList.searchCriteria: ')
+    console.info(searchCriteria)
     return (
       <>
         <Table dataSource={dataSource} columns={columns} />
@@ -240,80 +266,87 @@ function OrderFollow() {
     )
   }
 
-  function AdvanceCriteria() {
+  function AdvanceSearch({ onSubmit }) {
+    const [form] = Form.useForm()
+    console.info('AdvanceSearch: ')
+    function handleSubmit(values) {
+      onSubmit(values);
+    }
     return (
-      <Space direction='vertical' style={{ width: '100%' }}>
-        <Row gutter={[16, 16]} justify='start' align='middle'>
-
-          <Col span={2}>
-            <Select
-              defaultValue='全部'
-              style={{
-                width: 100,
-              }}
-              options={[
-                {
-                  value: '潜力',
-                  label: '潜力',
-                },
-                {
-                  value: '重点',
-                  label: '重点',
-                },
-                {
-                  value: '休眠',
-                  label: '休眠',
-                }
-              ]}
-            />
-          </Col>
-          <Col span={2}>
-            <Select
-              defaultValue='全部'
-              style={{
-                width: 100,
-              }}
-              options={[
-                {
-                  value: '新订单',
-                  label: '新订单',
-                },
-                {
-                  value: '报价中',
-                  label: '报价中',
-                },
-                {
-                  value: '丢失',
-                  label: '丢失',
-                },
-                {
-                  value: '一催',
-                  label: '一催',
-                },
-                {
-                  value: '二催',
-                  label: '二催',
-                },
-                {
-                  value: '三催',
-                  label: '三催',
-                },
-              ]}
-            />
-          </Col>
-          <Col span={6}>
-            <Input placeholder='订单号' allowClear />
-          </Col>
-          <Col span={4}>
-            <RangePicker />
-          </Col>
-          <Col span={2}>
-            <Button icon={<SearchOutlined />} onClick={() => {
-              search()
-            }}>搜索</Button>
-          </Col>
-        </Row>
-      </Space>
+      <Form
+        layout={'inline'}
+        form={form}
+        onFinish={handleSubmit}
+        style={{
+          maxWidth: 'none',
+        }}
+      >
+        <Form.Item label='标签' name='orderLabel'>
+          <Select
+            defaultValue='全部'
+            style={{
+              width: 100,
+            }}
+            options={[
+              {
+                value: '潜力',
+                label: '潜力',
+              },
+              {
+                value: '重点',
+                label: '重点',
+              },
+              {
+                value: '休眠',
+                label: '休眠',
+              }
+            ]}
+          />
+        </Form.Item>
+        <Form.Item label='状态' name='orderStatus'>
+          <Select
+            defaultValue='全部'
+            style={{
+              width: 100,
+            }}
+            options={[
+              {
+                value: '新订单',
+                label: '新订单',
+              },
+              {
+                value: '报价中',
+                label: '报价中',
+              },
+              {
+                value: '丢失',
+                label: '丢失',
+              },
+              {
+                value: '一催',
+                label: '一催',
+              },
+              {
+                value: '二催',
+                label: '二催',
+              },
+              {
+                value: '三催',
+                label: '三催',
+              },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item label='订单号' name='orderNumber'>
+          <Input placeholder='订单号' allowClear />
+        </Form.Item>
+        <Form.Item label='出发日期' name='startDate'>
+          <RangePicker />
+        </Form.Item>
+        <Form.Item >
+          <Button type='primary' htmlType='submit'>搜索</Button>
+        </Form.Item>
+      </Form>
     )
   }
 }