From f2768df484b2c6c699a5bfb9179e0efcf96be9b3 Mon Sep 17 00:00:00 2001
From: Jimmy Liow <lyj@hainatravel.com>
Date: Mon, 22 Jan 2024 15:46:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=20Flex=20=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=20Row=20=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/OrderFollow.jsx | 79 ++++++++++++++++-----------------------
 1 file changed, 33 insertions(+), 46 deletions(-)

diff --git a/src/views/OrderFollow.jsx b/src/views/OrderFollow.jsx
index 6d87816..624cf9d 100644
--- a/src/views/OrderFollow.jsx
+++ b/src/views/OrderFollow.jsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'
 import { memo, useMemo, useCallback, useEffect, useState } from 'react'
 import {
   Row, Col, Divider, Table, Card, Button, Input,
-  Space, Segmented, Radio, Select, AutoComplete, Spin, Form, Switch, DatePicker, List, Avatar
+  Space, Segmented, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
@@ -191,7 +191,7 @@ const AdvanceSearchForm = memo(function AdvanceSearch({ onSubmit }) {
     <Form
       layout={'inline'}
       form={form}
-      initialValues={{orderLabel: '全部'}}
+      initialValues={{ orderLabel: '全部' }}
       onFinish={handleSubmit}
       style={{
         maxWidth: 'none',
@@ -290,51 +290,40 @@ function OrderFollow() {
   }, [])
 
   return (
-    <Spin spinning={false} delay={500}>
-      <Space direction='vertical' style={{ width: '100%' }}>
-        <Row gutter={[16, 16]} justify='start' align='middle'>
-          <Col span={10}>
-            <Radio.Group
-              options={[
-                { label: '今日任务', value: 'today' },
-                { label: '潜力客户', value: 'star' },
-                { label: '重点订单', value: 'important' },
-                { label: '成行', value: 'myfavorites' },
-                { label: '走团中', value: 'ing' },
-                { label: '走团后一月', value: 'lastMonth' }
-              ]}
-              value={searchCriteria.type}
-              onChange={({ target: { value } }) => {
-                setSearchCriteria({
-                  ...searchCriteria,
-                  type: value
-                })
-              }}
-              optionType='button'
-              buttonStyle='solid'
-              disabled={advanceChecked}
-            />
-          </Col>
-          <Col span={4}>
-            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
-              defaultChecked={false}
-              onChange={() => { toggleAdvance(!advanceChecked) }} />
-          </Col>
-        </Row>
+    <>
+      <Space direction='vertical' size='large' style={{ width: '100%' }}>
+        <Flex gap='large' justify='start' align='center' horizontal>
+          <Radio.Group
+            options={[
+              { label: '今日任务', value: 'today' },
+              { label: '潜力客户', value: 'star' },
+              { label: '重点订单', value: 'important' },
+              { label: '成行', value: 'myfavorites' },
+              { label: '走团中', value: 'ing' },
+              { label: '走团后一月', value: 'lastMonth' }
+            ]}
+            value={searchCriteria.type}
+            onChange={({ target: { value } }) => {
+              setSearchCriteria({
+                ...searchCriteria,
+                type: value
+              })
+            }}
+            optionType='button'
+            buttonStyle='solid'
+            disabled={advanceChecked}
+          />
+
+          <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
+            defaultChecked={false}
+            onChange={() => { toggleAdvance(!advanceChecked) }} />
+        </Flex>
         <Conditional condition={advanceChecked} whenTrue={<AdvanceSearchForm onSubmit={handleSubmit} />}
         />
       </Space>
       <Divider plain orientation='left'></Divider>
-      <Space
-        direction='vertical'
-        size='middle'
-        style={{
-          display: 'flex',
-        }}
-      >
-        {orderListMemo}
-      </Space>
-    </Spin>
+      {orderListMemo}
+    </>
   )
 
   function OrderList({ searchCriteria }) {
@@ -344,9 +333,7 @@ function OrderFollow() {
     console.info('OrderList.searchCriteria: ')
     console.info(searchCriteria)
     return (
-      <>
-        <Table dataSource={dataSource} columns={columns} />
-      </>
+      <Table loading={countryList === null} dataSource={dataSource} columns={columns} />
     )
   }
 }