物料列表增加库位展示

packages/app/src/apis/dictionary.ts

@@ -2,6 +2,7 @@ import {
   BaseListResult,
   BaseResult,
   DictionaryData,
+  DictionaryListResult,
   DictionaryParamsType,
   EditDictionaryParams,
   GetDictionaryListParams,
@@ -20,12 +21,12 @@ export function getDictionaryOptions(type: DictionaryParamsType): BaseResult<Dic
 }
 
 /** 获取字典分页列表 */
-export function getDictionaryList(data: GetDictionaryListParams): BaseListResult<DictionaryData> {
+export function getDictionaryList(data: GetDictionaryListParams): DictionaryListResult {
   return request({
     method: 'GET',
     data,
     url: `${BASE_URL}/getDictionaryPage`,
-  });
+  }) as any;
 }
 
 /** 获取字典详情内容 */

packages/app/src/models/response/dictionary.ts

@@ -1,3 +1,5 @@
+import {BaseListData} from '.';
+
 export type DictionaryData = {
   /** 编号 */
   code: string;
@@ -22,3 +24,11 @@ export type DictionaryData = {
   /** 物料类别 */
   partType: string;
 };
+
+export type BaseResultContent<T> = {msg: '200'; data: T; amount: Record<string, number>}
+| {msg: '510'; errMsg: string};
+
+export type BaseResult<T = any> = Promise<BaseResultContent<T>>;
+export type BaseListResult<T = any> = BaseResult<BaseListData<T>>;
+
+export type DictionaryListResult = BaseListResult<DictionaryData>;

packages/app/src/pages/goods/table/hooks.tsx

@@ -1,12 +1,15 @@
-import {useContextSection, useQueryTableList} from '@hooks';
+import {useContextSection, usePage, useTableSearchState} from '@hooks';
 import {context, pageContext, searchContext} from '../context';
-
 import {getDictionaryList} from '@apis';
 import {DictionaryData, DictionaryParamsType} from '@models';
 import {Button} from 'antd';
 import {ColumnsType} from 'antd/es/table';
-import {useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {useBoolean} from 'ahooks';
+import {shallowEqual} from '@utils';
+import {useQuery} from '@tanstack/react-query';
+
+type MaterialType = DictionaryData & {count: number};
 
 export function useList() {
   const params = useContextSection(
@@ -16,12 +19,73 @@ export function useList() {
     },
   );
 
-  return useQueryTableList({
-    queryFn: getDictionaryList,
-    params,
-    pageContext,
-    searchContext,
-  });
+  const [count, setCount] = useState(0);
+  const [{page, pageSize}, {onCurrentPageChange}] = usePage(pageContext);
+  const prevData = useRef<MaterialType[]>([]);
+  const prevParams = useRef(params);
+
+  const {data = [], isFetching, refetch} = useQuery<MaterialType[]>(
+    [getDictionaryList.name, page, pageSize, ...Object.values(params)],
+    async function() {
+      /**
+       * 当参数发生改变说明请求内容发生变化
+       * 如果当前页码不为1需要跳转到第1页查询
+       */
+      if (page !== 1 && !shallowEqual(prevParams.current, params)) {
+        prevParams.current = params;
+        onCurrentPageChange(1);
+        return prevData.current;
+      }
+
+      /**
+       * 有可能参数发生变化但是页码为1 第一步不会拦截
+       * 这里确保参数是最新的参数
+       */
+      prevParams.current = params;
+
+      const data = await getDictionaryList({
+        ...params,
+        page: page.toString(),
+        limit: pageSize.toString(),
+      });
+
+      if (data.msg === '200') {
+        const {data: {total, list}, amount} = data;
+
+        /**
+         * 当页面只有一个数据的时候 删除了页码改为前一个 但是数据请求还是当前页码
+         * 需要判断当前是否无数据并且页码大于1 满足时跳转到前一个页面
+         */
+        page > 1 && list.length === 0 && onCurrentPageChange(page - 1);
+
+        setCount(total);
+
+        const arr = list.map<MaterialType>(function(val) {
+          return {
+            ...val,
+            count: amount[val.tldId] ?? 0,
+          };
+        });
+
+        return (prevData.current = arr);
+      }
+
+      return [];
+    },
+    {
+      placeholderData: [],
+      keepPreviousData: true,
+    },
+  );
+
+  const [, searchChange] = useTableSearchState(searchContext);
+
+  // 保持更新搜索表格的查询状态
+  useEffect(function() {
+    searchChange(isFetching);
+  }, [isFetching, searchChange]);
+
+  return [{data, count}, {refetch}] as const;
 }
 
 export function useEdit() {
@@ -41,9 +105,10 @@ export function useEdit() {
 export function useHandle() {
   const [{visible, editId}, {onClose, onEdit}] = useEdit();
 
-  const columns: ColumnsType<DictionaryData> = [
+  const columns: ColumnsType<MaterialType> = [
     {title: '物料名称', dataIndex: 'name', key: 'name'},
     {title: '物料编号', dataIndex: 'code', key: 'code'},
+    {title: '物料库存', dataIndex: 'count', key: 'count'},
     {title: '物料类别', dataIndex: 'partType', key: 'partType'},
     {title: '物料类型', dataIndex: 'materialType', key: 'materialType'},
     {title: '存储容量', dataIndex: 'size', key: 'size'},