From 4aa0b23932bb7920d33b61d363f437bac703cf12 Mon Sep 17 00:00:00 2001
From: Jimmy Liow <lyj@hainatravel.com>
Date: Fri, 19 Jan 2024 15:17:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20postForm=E3=80=81=E5=88=86?=
 =?UTF-8?q?=E7=A6=BB=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/userFetch.js        |  33 +++++-
 src/main.jsx                  |   2 +-
 src/views/App.jsx             |  18 ++--
 src/views/OrderFollow.jsx     | 184 ++++++++++++++++++----------------
 src/views/SalesManagement.jsx |   4 +-
 5 files changed, 139 insertions(+), 102 deletions(-)

diff --git a/src/hooks/userFetch.js b/src/hooks/userFetch.js
index d1a195d..c58ae03 100644
--- a/src/hooks/userFetch.js
+++ b/src/hooks/userFetch.js
@@ -13,7 +13,7 @@ function checkStatus(response) {
   }
 }
 
-export function useJson(url) {
+export function useGetJson(url) {
   const [data, setData] = useState(null)
   useEffect(() => {
     if (url) {
@@ -26,9 +26,34 @@ export function useJson(url) {
             setData(json)
           }
         })
-      return () => {
-        ignore = true
-      }
+
+      return () => { ignore = true }
+    }
+  }, [url])
+
+  return data
+}
+
+export function usePostForm(url, formData) {
+  const [data, setData] = useState(null)
+  useEffect(() => {
+    if (url) {
+      let ignore = false
+      fetch(url, {
+        method: 'POST',
+        body: formData
+      }).then(checkStatus)
+        .then(response => response.json())
+        .then(json => {
+          if (!ignore) {
+            setData(json)
+          }
+        })
+        .catch(error => {
+          throw error
+        })
+
+      return () => { ignore = true }
     }
   }, [url])
 
diff --git a/src/main.jsx b/src/main.jsx
index d2d77af..24e43f8 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -60,7 +60,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   
   // <React.StrictMode>
   <ThemeContext.Provider value={{colorPrimary: '#1ba784', borderRadius: 4}}>
-    <AuthContext.Provider value={{loginUser: {userId: 1, openId: '123456789'}, permissionList: []}}>
+    <AuthContext.Provider value={{loginUser: {userId: 1, openId: '123456789'}, permissionList: ['view_chat', 'send_msg']}}>
       <RouterProvider
         router={router}
         fallbackElement={() => <div>Loading...</div>}
diff --git a/src/views/App.jsx b/src/views/App.jsx
index 1888cf9..827d5cc 100644
--- a/src/views/App.jsx
+++ b/src/views/App.jsx
@@ -1,7 +1,7 @@
 import { Outlet, Link, useHref, NavLink } from 'react-router-dom'
 import { useRef, useEffect, useState } from 'react'
 import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Dropdown, Space, Typography, Result, Select, App as AntApp } from 'antd'
-import { DownOutlined } from "@ant-design/icons";
+import { DownOutlined } from '@ant-design/icons';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import zhLocale from 'antd/locale/zh_CN';
 import { useThemeContext } from '@/stores/ThemeContext'
@@ -50,7 +50,7 @@ function App() {
       <Layout>
         <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 2, width: '100%', background: 'white' }}>
           <Row gutter={{ md: 24 }} align='middle'>
-            <Col flex="300px">
+            <Col flex='300px'>
               <NavLink to='/'>
                 <img src={AppLogo} className='logo' alt='App logo' />
               </NavLink>
@@ -70,26 +70,26 @@ function App() {
                 ]}
               />
             </Col>
-            <Col flex="auto" style={{ color: "white", marginBottom: "0", display: "flex", justifyContent: "end" }}>
+            <Col flex='auto' style={{ color: 'white', marginBottom: '0', display: 'flex', justifyContent: 'end' }}>
               <Dropdown
                 menu={{
                   items: [
                     {
-                      label: <Link to="/s/account/profile">个人资料</Link>,
-                      key: "1",
+                      label: <Link to='/s/account/profile'>个人资料</Link>,
+                      key: '1',
                     },
                     {
-                      type: "divider",
+                      type: 'divider',
                     },
                     {
-                      label: <Link to="/login?out">退出</Link>,
-                      key: "3",
+                      label: <Link to='/login?out'>退出</Link>,
+                      key: '3',
                     },
                   ]
                 }}
                 trigger={['click']}
               >
-                <a onClick={(e) => e.preventDefault()}>
+                <a onClick={(e) => e.preventDefault()} style={{color: colorPrimary}}>
                   <Space>
                     廖一军
                     <DownOutlined />
diff --git a/src/views/OrderFollow.jsx b/src/views/OrderFollow.jsx
index 5794dac..152ac03 100644
--- a/src/views/OrderFollow.jsx
+++ b/src/views/OrderFollow.jsx
@@ -1,9 +1,8 @@
 import { useNavigate } from 'react-router-dom'
 import { useRef, useEffect, useState } from 'react'
-import { observer } from 'mobx-react'
 import {
   Row, Col, Divider, Table, Card, Button, Input,
-  Space, Segmented, Radio, Select, AutoComplete, Spin, Typography, Flex, DatePicker, List, Avatar
+  Space, Segmented, Radio, Select, AutoComplete, Spin, Typography, Switch, DatePicker, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
@@ -184,93 +183,16 @@ const columns = [
 function OrderFollow() {
 
   const [taskCategory, setTaskCategory] = useState('today')
+  const [advanceChecked, toggleAdvance] = useState(false)
 
   useEffect(() => {
   }, [])
 
-  function AdvanceCriteria() {
-    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>
-    )
-  }
-
   return (
     <Spin spinning={false} delay={500}>
       <Space direction='vertical' style={{ width: '100%' }}>
         <Row gutter={[16, 16]} justify='start' align='middle'>
-          <Col span={24}>
+          <Col span={10}>
             <Radio.Group
               options={[
                 { label: '今日任务', value: 'today' },
@@ -278,8 +200,7 @@ function OrderFollow() {
                 { label: '重点订单', value: 'important' },
                 { label: '成行', value: 'myfavorites' },
                 { label: '走团中', value: 'ing' },
-                { label: '走团后一月', value: 'lastMonth' },
-                { label: '高级查询', value: 'advance' }
+                { label: '走团后一月', value: 'lastMonth' }
               ]}
               value={taskCategory}
               onChange={({ target: { value } }) => {
@@ -289,8 +210,13 @@ function OrderFollow() {
               buttonStyle='solid'
             />
           </Col>
+          <Col span={4}>
+            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询' 
+              defaultChecked={false} 
+              onChange={() => {toggleAdvance(!advanceChecked)}} />
+          </Col>
         </Row>
-        <Conditional condition={taskCategory==='advance'} whenTrue={<AdvanceCriteria />} />
+        <Conditional condition={advanceChecked} whenTrue={<AdvanceCriteria />} />
       </Space>
       <Divider plain orientation='left'></Divider>
       <Space
@@ -300,10 +226,96 @@ function OrderFollow() {
           display: 'flex',
         }}
       >
-        <Table dataSource={dataSource} columns={columns} />
+        <OrderList taskCategory={taskCategory} />
       </Space>
     </Spin>
   )
+
+  function OrderList({ taskCategory }) {
+    console.info('taskCategory: ' + taskCategory)
+    return (
+      <>
+        <Table dataSource={dataSource} columns={columns} />
+      </>
+    )
+  }
+
+  function AdvanceCriteria() {
+    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>
+    )
+  }
 }
 
-export default observer(OrderFollow)
+export default OrderFollow
diff --git a/src/views/SalesManagement.jsx b/src/views/SalesManagement.jsx
index 5f8d186..28f585e 100644
--- a/src/views/SalesManagement.jsx
+++ b/src/views/SalesManagement.jsx
@@ -9,7 +9,7 @@ import {
 } from '@ant-design/icons'
 
 import {useFormInput} from '@/hooks/useFormInput'
-import {useJson} from '@/hooks/userFetch'
+import {useGetJson} from '@/hooks/userFetch'
 
 const { Search } = Input;
 const { RangePicker } = DatePicker;
@@ -104,7 +104,7 @@ const columns = [
 function SalesManagement() {
 
   const keywordProps = useFormInput('')
-  const countryList = useJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
+  const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
   console.info(countryList)
 
   useEffect(() => {