使用 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='高级查询' 
+            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
-              defaultChecked={false} 
+              defaultChecked={false}
-              onChange={() => {toggleAdvance(!advanceChecked)}} />
+              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 }) {
+  function OrderList({ searchCriteria }) {
-    console.info('taskCategory: ' + taskCategory)
+
+    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%' }}>
+      <Form
-        <Row gutter={[16, 16]} justify='start' align='middle'>
+        layout={'inline'}
-
+        form={form}
-          <Col span={2}>
+        onFinish={handleSubmit}
-            <Select
+        style={{
-              defaultValue='全部'
+          maxWidth: 'none',
-              style={{
+        }}
-                width: 100,
+      >
-              }}
+        <Form.Item label='标签' name='orderLabel'>
-              options={[
+          <Select
-                {
+            defaultValue='全部'
-                  value: '潜力',
+            style={{
-                  label: '潜力',
+              width: 100,
-                },
+            }}
-                {
+            options={[
-                  value: '重点',
+              {
-                  label: '重点',
+                value: '潜力',
-                },
+                label: '潜力',
-                {
+              },
-                  value: '休眠',
+              {
-                  label: '休眠',
+                value: '重点',
-                }
+                label: '重点',
-              ]}
+              },
-            />
+              {
-          </Col>
+                value: '休眠',
-          <Col span={2}>
+                label: '休眠',
-            <Select
+              }
-              defaultValue='全部'
+            ]}
-              style={{
+          />
-                width: 100,
+        </Form.Item>
-              }}
+        <Form.Item label='状态' name='orderStatus'>
-              options={[
+          <Select
-                {
+            defaultValue='全部'
-                  value: '新订单',
+            style={{
-                  label: '新订单',
+              width: 100,
-                },
+            }}
-                {
+            options={[
-                  value: '报价中',
+              {
-                  label: '报价中',
+                value: '新订单',
-                },
+                label: '新订单',
-                {
+              },
-                  value: '丢失',
+              {
-                  label: '丢失',
+                value: '报价中',
-                },
+                label: '报价中',
-                {
+              },
-                  value: '一催',
+              {
-                  label: '一催',
+                value: '丢失',
-                },
+                label: '丢失',
-                {
+              },
-                  value: '二催',
+              {
-                  label: '二催',
+                value: '一催',
-                },
+                label: '一催',
-                {
+              },
-                  value: '三催',
+              {
-                  label: '三催',
+                value: '二催',
-                },
+                label: '二催',
-              ]}
+              },
-            />
+              {
-          </Col>
+                value: '三催',
-          <Col span={6}>
+                label: '三催',
-            <Input placeholder='订单号' allowClear />
+              },
-          </Col>
+            ]}
-          <Col span={4}>
+          />
-            <RangePicker />
+        </Form.Item>
-          </Col>
+        <Form.Item label='订单号' name='orderNumber'>
-          <Col span={2}>
+          <Input placeholder='订单号' allowClear />
-            <Button icon={<SearchOutlined />} onClick={() => {
+        </Form.Item>
-              search()
+        <Form.Item label='出发日期' name='startDate'>
-            }}>搜索</Button>
+          <RangePicker />
-          </Col>
+        </Form.Item>
-        </Row>
+        <Form.Item >
-      </Space>
+          <Button type='primary' htmlType='submit'>搜索</Button>
+        </Form.Item>
+      </Form>
     )
   }
 }