feat: 增加signal

packages/app/src/apis/dictionary.ts

@@ -14,15 +14,18 @@ import {request} from './request';
 const BASE_URL = '/dictionary';
 
 /** 获取字典列表 */
+// eslint-disable-next-line max-params
 export function getDictionaryOptions(
   type: DictionaryParamsType,
   name?: string,
   code?: string,
+  signal?: AbortSignal,
 ): BaseResult<DictionaryData[]> {
   return request({
     method: 'GET',
     data: {type, name, code},
     url: `${BASE_URL}/getDictionary`,
+    signal,
   });
 }
 

packages/app/src/apis/materialBind.ts

@@ -59,9 +59,10 @@ export function delMaterialBind(id: string): BaseResult {
 }
 
 /** 查询所有用户信息 */
-export function getAllUser(): BaseResult<UserListData[]> {
+export function getAllUser(signal?: AbortSignal): BaseResult<UserListData[]> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/getUser`,
+    signal,
   });
 }

packages/app/src/apis/menu.ts

@@ -50,22 +50,24 @@ export function deleteMenu(id: string): BaseResult {
 }
 
 /** 获取树形结构菜单 */
-export function getTreeMenu(): BaseResult<TreeMenuListData[]> {
+export function getTreeMenu(signal?: AbortSignal): BaseResult<TreeMenuListData[]> {
   return request({
     method: 'GET',
     data: {pId: '0'},
     url: `${BASE_URL}/getMenu`,
+    signal,
   });
 }
 
 /** 根据角色信息获取菜单列表 */
-export function getRoleMenu(): BaseResult<TreeRoleMenuData[]> {
+export function getRoleMenu(signal?: AbortSignal): BaseResult<TreeRoleMenuData[]> {
   const uid = userStore.getState().id;
 
   return request({
     method: 'GET',
     data: {userId: uid},
     url: `${BASE_URL}/getUserMenu`,
+    signal,
   });
 }
 
@@ -103,10 +105,11 @@ export function getMenuInfo(
 }
 
 /** 获取所有pda菜单 */
-export function getAllPDAMenu(): BaseListResult<MenuListData> {
+export function getAllPDAMenu(signal?: AbortSignal): BaseListResult<MenuListData> {
   return request({
     method: 'GET',
     data: {page: '1', limit: '10000', type: 'PDA'},
     url: `${BASE_URL}/getPage`,
+    signal,
   });
 }

packages/app/src/apis/request.ts

@@ -34,8 +34,9 @@ export async function request<T, R extends BaseResultContent<any>>(options: {
   data?: T;
   skipError?: boolean;
   useBody?: boolean;
+  signal?: AbortSignal;
 }) {
-  const {data, skipError, method, url, useBody} = options;
+  const {data, skipError, method, url, useBody, signal} = options;
 
   let res: BaseResultContent<any>;
   const useData = useBody ? useBody : method !== 'GET' && method !== 'DELETE';
@@ -46,15 +47,16 @@ export async function request<T, R extends BaseResultContent<any>>(options: {
       url,
       data: useData ? data : void 0,
       params: !useData ? data : void 0,
+      signal,
     });
 
     res = result.data;
 
     if (res.msg !== '200' && !skipError) message.error(res.errMsg);
-  } catch (error) {
+  } catch (error: any) {
     res = {msg: '510', errMsg: NETWORK_ERROR_TIPS};
 
-    if (!skipError) message.error(res.errMsg);
+    if (!skipError && error.code !== 'ERR_CANCELED') message.error(res.errMsg);
   }
 
   return res;
@@ -77,7 +79,7 @@ GSHttp.interceptors.request.use(function (config) {
   return config;
 });
 
-export async function gsRequest<T>(url: string, data: T) {
+export async function gsRequest<T>(url: string, data: T, signal?: AbortSignal) {
   let res: GSBaseResult;
 
   try {
@@ -85,6 +87,7 @@ export async function gsRequest<T>(url: string, data: T) {
       method: 'POST',
       url,
       data,
+      signal,
     });
 
     res = result.data;

packages/app/src/apis/role.ts

@@ -13,11 +13,15 @@ import {request} from './request';
 const BASE_URL = '/role';
 
 /** 获取角色列表 */
-export function getRoleList(params: GetRoleListParams): BaseListResult<RoleListData> {
+export function getRoleList(
+  params: GetRoleListParams,
+  signal?: AbortSignal,
+): BaseListResult<RoleListData> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/getRole`,
     data: params,
+    signal,
   });
 }
 
@@ -77,19 +81,21 @@ export function editRolePDAMenu(params: EditPDAMenuParams): BaseResult {
 }
 
 /** 查询所有角色 */
-export function getAllRoleList(): BaseResult<RoleListData[]> {
+export function getAllRoleList(signal?: AbortSignal): BaseResult<RoleListData[]> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/roleBefore`,
     skipError: true,
+    signal,
   });
 }
 
 /** 获取角色详情 */
-export function getRoleInfo(id: string): BaseListResult<RoleListData> {
+export function getRoleInfo(id: string, signal?: AbortSignal): BaseListResult<RoleListData> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/getRole`,
     data: {id, page: '1', limit: '1'},
+    signal,
   });
 }

packages/app/src/apis/storage.ts

@@ -69,10 +69,14 @@ export function exportStorage(data: GetStorageListParams): any {
 }
 
 /** 获取所有库位 */
-export function getAllStorage(warehouseId?: string): BaseResult<StorageListData[]> {
+export function getAllStorage(
+  warehouseId: string,
+  signal?: AbortSignal,
+): BaseResult<StorageListData[]> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/getStorageAll`,
     data: {warehouseWhere: warehouseId},
+    signal,
   });
 }

packages/app/src/apis/user.ts

@@ -22,20 +22,25 @@ export function userLogin(userName: string, password: string): BaseResult<UserLo
 }
 
 /** 获取用户列表 */
-export function getUserList(data: GetUserListParams): BaseListResult<UserListData> {
+export function getUserList(
+  data: GetUserListParams,
+  signal?: AbortSignal,
+): BaseListResult<UserListData> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/getAllUser`,
     data,
+    signal,
   });
 }
 
 /** 获取指定用户信息 */
-export function getUserInfo(id: string): BaseListResult<UserListData> {
+export function getUserInfo(id: string, signal?: AbortSignal): BaseListResult<UserListData> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/getAllUser`,
     data: {id, page: '1', limit: '1'},
+    signal,
   });
 }
 

packages/app/src/hooks/use-data-info/index.ts

@@ -9,6 +9,7 @@ type UseQueryDataInfoOptions<R, P extends unknown[]> = {
   label?: string;
 };
 
+// 获取详情不加signal 不然可能导致取消后重新进入报错
 export function useQueryDataInfo<R, P extends unknown[]>({
   queryFn,
   params,

packages/app/src/hooks/use-options/index.ts

@@ -5,20 +5,23 @@ import {useLatest} from 'ahooks';
 import {useMemo, useState} from 'react';
 import {debounce} from 'lodash-es';
 
-function useQueryOptions<T extends {id: number | string}>(options: {
-  fn: () => BaseResult<T[]>;
+function useQueryOptions<T extends {id: number | string}, P extends unknown[]>(options: {
+  fn: (...args: P) => BaseResult<T[]>;
   findName: (state: T) => string;
   addAll: boolean;
   findValue?: (state: T) => string;
+  params: P;
 }) {
-  const {findValue, fn, findName, addAll} = options ?? {};
+  const {findValue, fn, findName, addAll, params} = options ?? {};
 
   const findValueFn = useLatest(findValue);
 
-  const {data} = useQuery(
-    [fn.name, addAll, findValueFn],
-    async function () {
-      const data = await fn();
+  const {data} = useQuery({
+    queryKey: [fn.name, addAll, findValueFn, ...Object.values(params)],
+    async queryFn({signal}) {
+      params.push(signal);
+
+      const data = await fn(...params);
 
       if (data.msg === '200') {
         const list = data.data.map(function (value) {
@@ -35,51 +38,33 @@ function useQueryOptions<T extends {id: number | string}>(options: {
 
       return [];
     },
-    {initialData: [], cacheTime: 1000 * 60 * 10},
-  );
+    initialData: [],
+    cacheTime: 1000 * 60 * 10,
+  });
 
   return data;
 }
 
-export function useStorageOptions(addAll = false, findValue?: (state: StorageListData) => string) {
+export function useStorageOptions(
+  addAll = false,
+  findValue?: (state: StorageListData) => string,
+  options: {id?: string} = {},
+) {
   return useQueryOptions({
     fn: getAllStorage,
     findName: state => state.storageLocationName,
     addAll,
     findValue,
+    params: [options.id ?? ''],
   });
 }
 
-export function useStorageOptionsWithWarehouse(warehouseId: string) {
-  const {data} = useQuery(
-    [getAllStorage.name, 'withWarehouse', warehouseId],
-    async function () {
-      const data = await getAllStorage(warehouseId);
-
-      if (data.msg === '200') {
-        const list = data.data.map(function (value) {
-          return {
-            label: value.storageLocationName,
-            value: value.storageLocationCode,
-          };
-        });
-
-        return list;
-      }
-
-      return [];
-    },
-    {enabled: Boolean(warehouseId), initialData: []},
-  );
-
-  return data;
-}
-
 export function useRoleOptions(addAll = false) {
   return useQueryOptions({
     fn: getAllRoleList,
     findName: state => state.roleName,
     addAll,
+    params: [],
   });
 }
 
@@ -88,10 +73,10 @@ export function useDictionaryOptions(
   addAll = false,
   findValue: (state: DictionaryData) => string = state => state.tldId,
 ) {
-  const {data} = useQuery(
-    [getDictionaryOptions.name, type, addAll],
-    async function () {
-      const data = await getDictionaryOptions(type);
+  const {data} = useQuery({
+    queryKey: [getDictionaryOptions.name, type, addAll],
+    async queryFn({signal}) {
+      const data = await getDictionaryOptions(type, '', '', signal);
 
       if (data.msg === '200') {
         const list = data.data.map(function (value) {
@@ -105,17 +90,18 @@ export function useDictionaryOptions(
 
       return [];
     },
-    {initialData: [], cacheTime: 1000 * 60 * 10},
-  );
+    initialData: [],
+    cacheTime: 1000 * 60 * 10,
+  });
 
   return data;
 }
 
 export function useUserOptions(addAll = false) {
-  const {data} = useQuery(
-    [getAllUser.name, addAll],
-    async function () {
-      const data = await getAllUser();
+  const {data} = useQuery({
+    queryKey: [getAllUser.name, addAll],
+    async queryFn({signal}) {
+      const data = await getAllUser(signal);
 
       if (data.msg === '200') {
         const list = data.data.map(function (value) {
@@ -129,8 +115,9 @@ export function useUserOptions(addAll = false) {
 
       return [];
     },
-    {initialData: [], cacheTime: 1000 * 60 * 10},
-  );
+    initialData: [],
+    cacheTime: 1000 * 60 * 10,
+  });
 
   return data;
 }
@@ -147,29 +134,23 @@ export function useDictionaryWidthCode(
 ) {
   const [code, setCode] = useState('');
 
-  const {data, isFetching} = useQuery(
-    [getDictionaryOptions.name, type, addAll, 'useDictionaryWidthCode', code],
-    async function () {
-      const data = await getDictionaryOptions(type, '', code);
-
+  const {data, isFetching} = useQuery({
+    queryKey: [getDictionaryOptions.name, type, addAll, 'useDictionaryWidthCode', code],
+    async queryFn({signal}) {
+      const data = await getDictionaryOptions(type, '', code, signal);
       if (data.msg === '200') {
         const list = data.data.map(function (value) {
           return {label: value.name, value: findValue(value)};
         });
-
         if (addAll) list.unshift({label: '全部', value: ''});
-
         return list;
       }
-
       return [];
     },
-    {
-      initialData: [],
-      cacheTime: 1000 * 60 * 10,
-      enabled: Boolean(code),
-    },
-  );
+    initialData: [],
+    cacheTime: 1000 * 60 * 10,
+    enabled: Boolean(code),
+  });
 
   const onSearch = useMemo(function () {
     function onSearchValue(value: string) {

packages/app/src/hooks/use-put-data/index.ts

@@ -17,7 +17,8 @@ function useQuery<P>(options: {
 }) {
   const {fn, isAdd, onFetch, onClose} = options;
 
-  return useMutation(fn, {
+  return useMutation({
+    mutationFn: fn,
     onSuccess({msg}) {
       if (msg === '200') {
         message.success(`${isAdd ? '新增' : '修改'}成功`);

packages/app/src/hooks/use-query-list/index.ts

@@ -25,7 +25,7 @@ type UseQueryListOptions<
   R extends BaseListResult,
   T extends Array<unknown> = GetBaseListType<R>[],
 > = {
-  queryFn: (params: P) => R;
+  queryFn: (params: P, signal?: AbortSignal) => R;
   params: OriginalListParams<P>;
   pageContext: ReturnType<typeof createPageContext>;
   searchContext: ReturnType<typeof createSearchContext>;
@@ -53,9 +53,9 @@ export function useQueryTableList<
     data = [] as unknown as T,
     isFetching,
     refetch,
-  } = useQuery<T>(
-    [queryFn.name, page, pageSize, formatResultFn, ...Object.values(params)],
-    async function () {
+  } = useQuery<T>({
+    queryKey: [queryFn.name, page, pageSize, formatResultFn, ...Object.values(params)],
+    async queryFn({signal}) {
       /**
        * 当参数发生改变说明请求内容发生变化
        * 如果当前页码不为1需要跳转到第1页查询
@@ -74,11 +74,14 @@ export function useQueryTableList<
        */
       prevParams.current = params;
 
-      const data = await queryFn({
-        ...params,
-        page: page.toString(),
-        limit: pageSize.toString(),
-      } as P);
+      const data = await queryFn(
+        {
+          ...params,
+          page: page.toString(),
+          limit: pageSize.toString(),
+        } as P,
+        signal,
+      );
 
       if (data.msg === '200') {
         const {total, list} = data.data;
@@ -100,11 +103,9 @@ export function useQueryTableList<
 
       return (prevData.current = res);
     },
-    {
-      placeholderData: [] as unknown as T,
-      keepPreviousData: true,
-    },
-  );
+    placeholderData: [] as unknown as T,
+    keepPreviousData: true,
+  });
 
   const [, searchChange] = useTableSearchState(searchContext);
 

packages/app/src/pages/home/menu/hooks.tsx

@@ -11,9 +11,9 @@ import {useStore} from 'zustand';
 export function useMenu() {
   const setMenus = useStore(menuStore, state => state.setMenu);
 
-  const {data} = useQuery(
-    [getRoleMenu.name],
-    async function () {
+  const {data} = useQuery({
+    queryKey: [getRoleMenu.name],
+    async queryFn() {
       const data = await getRoleMenu();
 
       if (data.msg === '200') {
@@ -37,10 +37,8 @@ export function useMenu() {
 
       throw new Error(data.errMsg);
     },
-    {
-      suspense: true,
-    },
-  );
+    suspense: true,
+  });
 
   return data!;
 }

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

@@ -1,7 +1,7 @@
 import {ModalSelect} from '@components';
 import {FC} from 'react';
 import {useFormContextState, useWatchId} from './hooks';
-import {useDictionaryOptions, useDictionaryWidthCode, useStorageOptionsWithWarehouse} from '@hooks';
+import {useDictionaryOptions, useDictionaryWidthCode, useStorageOptions} from '@hooks';
 
 type Props = {id: string};
 
@@ -16,7 +16,9 @@ const Info: FC<Props> = function ({id}) {
   useWatchId(id, onMaterialSearch);
   const warehouseOptions = useDictionaryOptions('仓库');
   const warehouseId = watch('warehouseId');
-  const storageOtions = useStorageOptionsWithWarehouse(warehouseId);
+  const storageOtions = useStorageOptions(false, state => state.storageLocationCode, {
+    id: warehouseId,
+  });
 
   return (
     <>

packages/app/src/pages/product-draw/table/modal/hooks.ts

@@ -26,7 +26,7 @@ function useInfoData(id: string) {
   };
 }
 
-function useQuery(onClose: () => void, onFetch: () => void) {
+function useMutationEvent(onClose: () => void, onFetch: () => void) {
   return useMutation({
     mutationFn: semiManufacturesOut,
     onSuccess({msg}) {
@@ -67,7 +67,7 @@ export function useFormState({
   );
 
   const getInfo = useInfoData(id);
-  const {isLoading, mutate} = useQuery(onClose, onFetch);
+  const {isLoading, mutate} = useMutationEvent(onClose, onFetch);
   const userId = useStore(userStore, state => String(state.id));
 
   const onSubmit = handleSubmit(function ({semiDrawNum}) {

packages/app/src/pages/role/table/pda-modal/hooks.ts

@@ -7,9 +7,9 @@ import {message} from 'antd';
 import {FormEvent, useEffect, useState} from 'react';
 
 export function useMenuList() {
-  const {data} = useQuery(
-    [getAllPDAMenu.name],
-    async function () {
+  const {data} = useQuery({
+    queryKey: [getAllPDAMenu.name],
+    async queryFn() {
       const data = await getAllPDAMenu();
 
       if (data.msg === '200') {
@@ -20,8 +20,8 @@ export function useMenuList() {
 
       throw new Error(data.errMsg);
     },
-    {suspense: true},
-  );
+    suspense: true,
+  });
 
   return data;
 }

packages/app/src/pages/role/table/tree-modal/info/hooks.ts

@@ -4,19 +4,17 @@ import {useQuery} from '@tanstack/react-query';
 import {context} from '../context';
 
 export function useMenuTree() {
-  const {data} = useQuery(
-    [getTreeMenu.name],
-    async function () {
+  const {data} = useQuery({
+    queryKey: [getTreeMenu.name],
+    async queryFn() {
       const data = await getTreeMenu();
 
       if (data.msg === '200') return data.data;
 
       throw new Error(data.errMsg);
     },
-    {
-      suspense: true,
-    },
-  );
+    suspense: true,
+  });
 
   return data;
 }