chore: 抽取公共选项hook

packages/app/src/hooks/useOptions/index.ts

@@ -1,15 +1,20 @@
-import {getAllDepartment} from '@apis';
+import {getAllDepartment, getAllRoleList, getAllStorage} from '@apis';
+import {BaseResult} from '@models';
 import {useQuery} from '@tanstack/react-query';
 
-export function useDepartmentOptions(addAll = false) {
+function useQueryOptions<T extends {id: number | string}>(
+  fn: () => BaseResult<T[]>,
+  findName: (state: T) => string,
+  addAll: boolean,
+) {
   const {data} = useQuery(
-    [getAllDepartment.name],
+    [fn.name],
     async function() {
-      const data = await getAllDepartment();
+      const data = await fn();
 
       if (data.msg === '200') {
-        const list = data.data.map(function({id, departmentName}) {
-          return {label: departmentName, value: String(id)};
+        const list = data.data.map(function(value) {
+          return {label: findName(value), value: String(value.id)};
         });
 
         if (addAll)
@@ -25,3 +30,27 @@ export function useDepartmentOptions(addAll = false) {
 
   return data;
 }
+
+export function useDepartmentOptions(addAll = false) {
+  return useQueryOptions(
+    getAllDepartment,
+    state => state.departmentName,
+    addAll,
+  );
+}
+
+export function useStorageOptions(addAll = false) {
+  return useQueryOptions(
+    getAllStorage,
+    state => state.storageLocationName,
+    addAll,
+  );
+}
+
+export function useRoleOptions(addAll = false) {
+  return useQueryOptions(
+    getAllRoleList,
+    state => state.roleName,
+    addAll,
+  );
+}

packages/app/src/pages/container/filter/hooks.ts

@@ -1,6 +1,5 @@
-import {exportContainer, getAllDepartment} from '@apis';
+import {exportContainer} from '@apis';
 import {useContextSection, useExportFile, usePage} from '@hooks';
-import {useQuery} from '@tanstack/react-query';
 import {useState} from 'react';
 import {context, pageContext} from '../context';
 
@@ -20,31 +19,6 @@ export function useField() {
   return [field, onChange] as const;
 }
 
-export function useOptions() {
-  const {data} = useQuery(
-    [getAllDepartment.name],
-    async function() {
-      const data = await getAllDepartment();
-
-      if (data.msg === '200') {
-        const list = data.data.map(
-          ({departmentName, id}) => ({label: departmentName, value: id}),
-        );
-        list.unshift({label: '全部', value: ''});
-
-        return list;
-      }
-
-      return [];
-    },
-    {
-      initialData: [],
-    },
-  );
-
-  return data;
-}
-
 export function useSearch(
   {name, type, department}: {name: string, type: string, department: string},
 ) {

packages/app/src/pages/container/filter/index.tsx

@@ -1,13 +1,13 @@
 import {FilterButtonGroup, FilterField, FilterSelect} from '@components';
 import {Card, Row} from 'antd';
 import {FC} from 'react';
-import {useExport, useField, useOptions, useSearch} from './hooks';
-import {useTableSearch} from '@hooks';
+import {useExport, useField, useSearch} from './hooks';
+import {useDepartmentOptions, useTableSearch} from '@hooks';
 import {searchContext} from '../context';
 
 const Filter: FC = function() {
   const [{name, department, type}, onChange] = useField();
-  const options = useOptions();
+  const options = useDepartmentOptions(true);
   const onSearch = useSearch({name, department, type});
   const [isSearching] = useTableSearch(searchContext);
   const [isExporting, onExport] = useExport();

packages/app/src/pages/goods/table/modal/Info.tsx

@@ -1,6 +1,7 @@
 import {ModalField, ModalSelect} from '@components';
 import {FC} from 'react';
-import {useField, useFormValues, useOptions} from './hooks';
+import {useField, useFormValues} from './hooks';
+import {useDepartmentOptions, useStorageOptions} from '@hooks';
 
 type Props = {
   id: string,
@@ -8,7 +9,8 @@ type Props = {
 
 const GoodsModalInfo: FC<Props> = function({id}) {
   const [{control}] = useField();
-  const {storageOptions, departmentOptions} = useOptions();
+  const departmentOptions = useDepartmentOptions();
+  const storageOptions = useStorageOptions();
   useFormValues(id);
 
   return (

packages/app/src/pages/goods/table/modal/hooks.ts

@@ -1,4 +1,4 @@
-import {addGoods, editGoods, getAllDepartment, getAllStorage, getGoodsInfo} from '@apis';
+import {addGoods, editGoods, getGoodsInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
 import {AddGoodsParams} from '@models';
 import {useMutation, useQuery} from '@tanstack/react-query';
@@ -187,46 +187,6 @@ export function useField() {
   return [{control}] as const;
 }
 
-export function useOptions() {
-  const {data: departmentOptions} = useQuery(
-    [getAllDepartment.name],
-    async function() {
-      const data = await getAllDepartment();
-
-      if (data.msg === '200')
-        return data.data.map(function({id, departmentName}) {
-          return {
-            value: String(id),
-            label: departmentName,
-          };
-        });
-
-      return [];
-    },
-    {initialData: []},
-  );
-
-  const {data: storageOptions} = useQuery(
-    [getAllStorage.name],
-    async function() {
-      const data = await getAllStorage();
-
-      if (data.msg === '200')
-        return data.data.map(function({id, storageLocationName}) {
-          return {
-            value: String(id),
-            label: storageLocationName,
-          };
-        });
-
-      return [];
-    },
-    {initialData: []},
-  );
-
-  return {departmentOptions, storageOptions};
-}
-
 export function useFormValues(id: string) {
   const {setValue} = useFormContext<FormState>();
 

packages/app/src/pages/home/index.tsx

@@ -29,8 +29,8 @@ const Home: FC = function() {
             <Jurisdiction>
               <Outlet />
             </Jurisdiction>
+            <Footer color='#666' />
           </Suspense>
-          <Footer color='#666' />
         </Layout.Content>
       </Layout>
     </Layout>

packages/app/src/pages/user/table/modal/Info.tsx

@@ -1,6 +1,7 @@
 import {FC} from 'react';
-import {useFetchUserInfo, useField, useOptions} from './hooks';
+import {useFetchUserInfo, useField} from './hooks';
 import {ModalField, ModalSelect} from '@components';
+import {useDepartmentOptions, useRoleOptions} from '@hooks';
 
 type Props = {
   id: string;
@@ -9,7 +10,8 @@ type Props = {
 const width = '350px';
 
 const UserModalInfo: FC<Props> = function({id}) {
-  const {roleOptions, departmentOptions} = useOptions();
+  const roleOptions = useRoleOptions();
+  const departmentOptions = useDepartmentOptions();
   const {control} = useField();
   useFetchUserInfo(id);
 

packages/app/src/pages/user/table/modal/hooks.ts

@@ -1,4 +1,4 @@
-import {addUser, editUser, getAllDepartment, getAllRoleList, getUserInfo} from '@apis';
+import {addUser, editUser, getUserInfo} from '@apis';
 import {yupResolver} from '@hookform/resolvers/yup';
 import {AddUserParams} from '@models';
 import {useMutation, useQuery} from '@tanstack/react-query';
@@ -115,42 +115,6 @@ export function useFormState(
   return [{isLoading, formInstance}, {onSubmit}] as const;
 }
 
-export function useOptions() {
-  const {data: roleOptions} = useQuery(
-    [getAllRoleList.name],
-    async function() {
-      const data = await getAllRoleList();
-
-      if (data.msg === '200')
-        return data.data.map(({id, roleName}) => ({value: String(id), label: roleName}));
-
-      return [];
-    }
-    ,
-    {initialData: [], retry: 3},
-  );
-
-  const {data: departmentOptions} = useQuery(
-    [getAllDepartment.name],
-    async function() {
-      const data = await getAllDepartment();
-
-      if (data.msg === '200')
-        return data.data.map(
-          ({id, departmentName}) => ({
-            value: String(id), label: departmentName,
-          }),
-        );
-
-      return [];
-    }
-    ,
-    {initialData: [], retry: 3},
-  );
-
-  return {roleOptions, departmentOptions};
-}
-
 export function useField() {
   return useFormContext<FormState>();
 }