开发聊天历史搜索栏

src/views/ChatHistory.jsx

@@ -1,14 +1,14 @@
 import { useNavigate } from 'react-router-dom'
-import { useRef, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Row, Col, Divider, Table , Card, Button, Input, 
-  Space, Empty, Radio, AutoComplete, DatePicker, Spin, List, Avatar
+  Space, Empty, Radio, Select, DatePicker, Form, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined
 } from '@ant-design/icons'
 
-const { Search } = Input;
-const { RangePicker } = DatePicker;
+const { Search } = Input
+const { RangePicker } = DatePicker
 
 const data = [
   {
@@ -27,67 +27,86 @@ const data = [
     title: 'Hailey',
     content: 'Disregard my first email- I was using Siri and didn\'t realize all the typos. '
   },
-];
+]
+
+const SearchForm = memo(function ({ onSubmit }) {
+  console.info('SearchForm')
+  const [form] = Form.useForm()
+  function handleSubmit(values) {
+    onSubmit?.(values)
+  }
+  return (
+    <Form
+      layout={'inline'}
+      form={form}
+      initialValues={{ orderLabel: '全部' }}
+      onFinish={handleSubmit}
+      style={{
+        maxWidth: 'none',
+      }}
+    >
+      <Form.Item label='客人' name='orderLabel' style={{width: '200px'}}>
+      <Select
+        showSearch
+        placeholder='Select a person'
+        optionFilterProp='children'
+        filterOption={(input, option) =>
+          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
+        options={[
+          {
+            value: 'jack',
+            label: 'Jack',
+          },
+          {
+            value: 'lucy',
+            label: 'Lucy',
+          },
+          {
+            value: 'tom',
+            label: 'Tom',
+          },
+        ]}
+      />
+      </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>
+  )
+})
 
 function ChatHistory() {
   
-  useEffect(() => {
+  const [formValues, setFormValues] = useState({})
+
+  const handleSubmit = useCallback((values) => {
+    setFormValues({...values})
   }, [])
   
   return (
-    <Spin spinning={false} delay={500}>
-      <Space direction='vertical' style={{ width: '100%' }}>
-        <Row gutter={[16, 16]} justify='start' align='middle'>
-          
-          <Col span={5}>
-            <AutoComplete
-              style={{ width: '100%' }}
-              placeholder='客人'
-              onChange={(value) => {
-                setKeyword(value)
-              }}
-              filterOption={(inputValue, option) =>
-                option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
-              }
-            />
-          </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>
+    <>
+      <SearchForm onSubmit={handleSubmit} />
       <Divider plain orientation='left'></Divider>
-      <Space
-        direction='vertical'
-        size='middle'
-        style={{
-          display: 'flex',
-        }}
-      >
-        <List
-          itemLayout="horizontal"
-          dataSource={data}
-          renderItem={(item, index) => (
-            <List.Item>
-              <List.Item.Meta
-                avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
-                title={<a href="https://ant.design">{item.title}</a>}
-                description={item.content}
-              />
-            </List.Item>
-          )}
-        />
-      </Space>
-    </Spin>
+      <List
+        itemLayout='horizontal'
+        dataSource={data}
+        renderItem={(item, index) => (
+          <List.Item>
+            <List.Item.Meta
+              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
+              title={<a href='https://ant.design'>{item.title}</a>}
+              description={item.content}
+            />
+          </List.Item>
+        )}
+      />
+    </>
   )
 }
 

src/views/OrderFollow.jsx

@@ -114,7 +114,7 @@ function OrderList({ formValues }) {
         if (record.buytime > 0) regularText = '(R' + record.buytime + ')'
         return (
           <Space>
-            <NavLink to={`/order/chat/${record.COLI_ID}`}>{text + regularText}</NavLink>
+            <NavLink to={`/order/chat/${record.COLI_SN}`}>{text + regularText}</NavLink>
             <Badge
               count={record.unread_msg}
               style={{

src/views/SalesManagement.jsx

@@ -62,8 +62,7 @@ const dataSource = [
   },
 ];
 
-const AdvanceSearchForm = memo(function ({ onSubmit }) {
-  console.info('AdvanceSearchForm')
+const SearchForm = memo(function ({ onSubmit }) {
   const [form] = Form.useForm()
   function handleSubmit(values) {
     onSubmit?.(values)
@@ -146,22 +145,18 @@ const AdvanceSearchForm = memo(function ({ onSubmit }) {
 })
 
 const SalesTable = function({formValues}) {
-  console.info('SalesTable')
-  console.info(formValues)
-
-  const isMounted = useRef(false)
-  
+  const isMounted = useRef(false)  
   const [salesData, setSalesData] = useState([])
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
-    console.info('SalesTable.useEffect')
-    console.info(isMounted)
     setLoading(true)
-    // setSalesData([]) // 可改为设置加载状态
     setTimeout(() => {
       const randomData = dataSource.map(data => {
+        data.travelAdvisor = 'Albee' + Math.floor(Math.random() * (100 - 2 + 1) + 2)
         data.important = Math.floor(Math.random() * (100 - 2 + 1) + 2)
+        data.star = Math.floor(Math.random() * (100 - 2 + 1) + 2)
+        data.ing = Math.floor(Math.random() * (100 - 2 + 1) + 2)
         return data
       })
       setSalesData([...randomData])
@@ -207,7 +202,7 @@ function SalesManagement() {
     
   return (
     <>
-      <AdvanceSearchForm onSubmit={handleSubmit} />
+      <SearchForm onSubmit={handleSubmit} />
       <Divider plain orientation='left'></Divider>
       <SalesTable formValues={formValues} />
     </>