history search;add lodash

Author: xpioneer

package.json

@@ -27,6 +27,7 @@
     "axios": "^0.19.0",
     "date-fns": "^2.23.0",
     "echarts": "^4.2.0-rc.2",
+    "lodash": "^4.17.21",
     "mobx": "^5.15.0",
     "mobx-react": "^6.1.4",
     "quill": "^1.3.7",
@@ -43,6 +44,7 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@types/echarts": "^4.1.3",
+    "@types/lodash": "^4.14.172",
     "@types/quill": "^2.0.1",
     "@types/react": "^17.0.17",
     "@types/react-dom": "^17.0.9",

src/pages/stocks/history.tsx

@@ -5,6 +5,8 @@ import { historyColumns } from './util'
 import { stockHistoryPageList, StockQuery } from '../../services/stockHistory'
 import { data2PageData, pageData2Params } from '../../utils/tools'
 import { StockHistory } from '../../types/stockHistory'
+import { debounce } from 'lodash'
+import { stockPageList } from 'services/stock'
 
 const StockHistoryList: React.FC = () => {
 
@@ -13,37 +15,50 @@ const StockHistoryList: React.FC = () => {
   const [loading, setLoading] = useState(false)
   const [pageData, setPageData] = useState(data2PageData<StockHistory>({
     data: [],
-    meta: {page: 1, pageSize: 20, total: 0}
+    meta: {page: 1, pageSize: 10, total: 0}
   }))
+  const [stockOpts, setStockOpts] = useState<IOption<number>[]>([])
 
   const onQuery = (params = pageData2Params(pageData.meta)) => {
     const vals = form.getFieldsValue()
-    // if(!vals.code) {
-    //   return;
-    // }
+    if(!vals.id) {
+      return;
+    }
     setLoading(true)
     stockHistoryPageList({...params, ...vals, }).then(res => {
       const data = data2PageData(res)
       setPageData(data)
     }).finally(() => setLoading(false))
   }
 
+  const onSelectSearch = debounce((v: string) => {
+    if(!v.trim()) {
+      return;
+    }
+    stockPageList({
+      code: v,
+      name: v,
+      page: 1,
+      pageSize: 100,
+      noPage: true
+    }).then(res => {
+      const list = res.data.map<IOption<number>>(item => ({value: item.id, label: item.name}))
+      console.log(res, 'res===', list)
+      setStockOpts(list)
+    })
+  }, 500)
+
   useEffect(() => {
     onQuery()
   }, [])
 
 
   return <Spin spinning={loading}>
-    <Form form={form}>
+    <Form className="mgb16" form={form}>
       <Row gutter={16}>
         <Col span={6}>
-          <Form.Item name="code">
-            <Input allowClear placeholder="Stock Code"/>
-          </Form.Item>
-        </Col>
-        <Col span={6}>
-          <Form.Item name="name">
-            <Input allowClear placeholder="Stock Name"/>
+          <Form.Item name="id">
+            <Select allowClear showSearch filterOption={false} placeholder="Name/Code" options={stockOpts} onSearch={onSelectSearch}/>
           </Form.Item>
         </Col>
       </Row>
@@ -55,7 +70,7 @@ const StockHistoryList: React.FC = () => {
       size="small"
       columns={historyColumns()}
       dataSource={pageData.data}
-      key="code"
+      rowKey="id"
       scroll={{x: 2400}}
       pagination={{
         ...pageData.meta,

src/services/stock.ts

@@ -3,7 +3,7 @@ import { pageData2Params } from '@utils/tools'
 import { Stock } from 'types/stock'
 
 
-export type StockQuery = Omit<Stock & IPageParams, 'id' | 'amount'>
+export type StockQuery = Omit<Stock & IPageParams, 'id' | 'amount'> & { noPage: boolean }
 
 export const stockPageList = (params: Partial<StockQuery> = pageData2Params()) => {
   return $http.get<any, IPageData<Stock>>('/api/stocks', { params })

src/services/stockHistory.ts

@@ -4,7 +4,7 @@ import { Stock } from 'types/stock'
 import { StockHistory } from 'types/stockHistory'
 
 
-export type StockQuery = Omit<Stock & IPageParams, 'id' | 'amount'>
+export type StockQuery = Omit<Stock & IPageParams, 'amount'>
 
 export const stockHistoryPageList = (params: Partial<StockQuery> = pageData2Params()) => {
   return $http.get<any, IPageData<StockHistory>>('/api/stockhistory', { params })

yarn.lock

@@ -1166,6 +1166,11 @@
   resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.6.tgz?cache=0&sync_timestamp=1605053861867&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha1-9MfsQ+gbMZqYFRFQMXCfJph4kfA=
 
+"@types/lodash@^4.14.172":
+  version "4.14.172"
+  resolved "https://registry.nlark.com/@types/lodash/download/@types/lodash-4.14.172.tgz?cache=0&sync_timestamp=1629708300068&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
+  integrity sha1-qtd0wo57/Xpn3iVAjgPuWow9Aoo=
+
 "@types/mdast@^3.0.0":
   version "3.0.3"
   resolved "https://registry.npm.taobao.org/@types/mdast/download/@types/mdast-3.0.3.tgz?cache=0&sync_timestamp=1605055087131&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fmdast%2Fdownload%2F%40types%2Fmdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"