feat: 部门和物料增加同步功能

packages/app/src/apis/menu.ts

@@ -83,11 +83,10 @@ export function getTreeMenu(
 export function getMenuInfo(
   pId: string,
   id: string,
-  type: 'PC' | 'PDA',
 ): BaseListResult<MenuListData> {
   return request({
     method: 'GET',
-    data: {page: '1', limit: '1', id, pId, type},
+    data: {page: '1', limit: '1', id, pId},
     url: `${BASE_URL}/getPage`,
   });
 }

packages/app/src/components/filter-selector-modal/index.tsx

@@ -37,7 +37,7 @@ const FilterSelectorModal: FC<Props> = function({
       width="580px"
       onSubmit={onSubmit}
       icon={icon}
-      testId="filter_select_modal"
+      data-testid="filter_select_modal"
     >
       <div className="flex-center">
         <Transfer

packages/app/src/components/loading/index.tsx

@@ -3,7 +3,7 @@ import {Spin} from 'antd';
 import {FC} from 'react';
 
 type Props = {
-  tip: string;
+  tip?: string;
   width?: string;
   height?: string;
 };
@@ -12,7 +12,7 @@ const Loading: FC<Props> = function({tip, width, height}) {
   return (
     <section className="ld-loading" style={{width, height}}>
       <Spin />
-      <p className="ld-loading-tip">{tip}</p>
+      <p className="ld-loading-tip">{tip ?? '正在加载中'}</p>
     </section>
   );
 };

packages/app/src/components/modal/Modal.tsx

@@ -15,26 +15,27 @@ type Props = {
   isLoading?: boolean;
   onSubmit?: FormEventHandler<HTMLFormElement>;
   children?: ReactNode;
-  testId?: string;
+  'data-testid'?: string;
   height?: string;
   width?: string;
   icon?: string;
   btnText?: string;
 };
 
-const Modal: FC<Props> = function({
-  visible,
-  title,
-  onClose,
-  isLoading,
-  onSubmit,
-  children,
-  testId,
-  height,
-  width,
-  icon,
-  btnText,
-}) {
+const Modal: FC<Props> = function(props) {
+  const {
+    visible,
+    title,
+    onClose,
+    isLoading,
+    onSubmit,
+    children,
+    height,
+    width,
+    icon,
+    btnText,
+  } = props;
+
   const styles: ReactModalStyle = {
     content: {
       width: width ?? '680px',
@@ -64,7 +65,7 @@ const Modal: FC<Props> = function({
       shouldCloseOnOverlayClick
       onRequestClose={onClose}
     >
-      <section className="ld-dialog" data-testid={testId}>
+      <section className="ld-dialog" data-testid={props['data-testid']}>
         <div className="ld-dialog-title">
           <h3>{title}</h3>
         </div>

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

@@ -15,7 +15,7 @@ import {
 import {useQuery} from '@tanstack/react-query';
 import {shallowEqual} from '@utils';
 import {useLatest} from 'ahooks';
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useLayoutEffect, useRef, useState} from 'react';
 
 type UseQueryListResult<
   D extends BaseListResult,
@@ -65,6 +65,11 @@ export function useQueryTableList<
   const prevParams = useRef(params);
   const formatResultFn = useLatest(formatResult);
 
+  // 页码变化之后重新到第一页
+  useLayoutEffect(function() {
+    setPage(1);
+  }, [pageSize, setPage]);
+
   const {
     data = [] as unknown as T,
     isFetching,

packages/app/src/mock.ts

@@ -43,5 +43,12 @@ export function generateMock() {
       },
     },
   );
+
+  mock(
+    /\/adjustment\/addTableAdjustment.*/,
+    {
+      msg: '200',
+    },
+  );
 }
 

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

@@ -16,7 +16,7 @@ const PassModal: FC<Props> = function({visible, onClose}) {
       title="修改密码"
       onSubmit={onSubmit}
       onClose={onClose}
-      testId="edit_password_modal"
+      data-testid="edit_password_modal"
       height="500px"
       isLoading={isLoading}
     >

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

@@ -0,0 +1,21 @@
+import {FC} from 'react';
+import {FormState, useWatchId} from './hooks';
+import {useFormContext} from 'react-hook-form';
+import {LDModalInput} from '@components';
+
+type Props = {id: string};
+
+const ModalInfo: FC<Props> = function({id}) {
+  useWatchId(id);
+  const {control} = useFormContext<FormState>();
+
+  return (
+    <>
+      <LDModalInput name="menuName" control={control} label="菜单名称" />
+      <LDModalInput name="menuUrl" control={control} label="菜单路径" />
+      <LDModalInput name="menuIcon" control={control} label="菜单图标" />
+    </>
+  );
+};
+
+export default ModalInfo;

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

@@ -0,0 +1,82 @@
+import {addMenu, editMenu, getMenuInfo} from '@apis';
+import {usePutData, useQueryDataInfo} from '@hooks';
+import {AddMenuParams} from '@models';
+import {useEffect} from 'react';
+import {useForm, useFormContext} from 'react-hook-form';
+
+export type FormState = {
+  /** 菜单名称 */
+  menuName: string,
+  /** 菜单排序 */
+  menuOrderBy: number,
+  /** 图标 */
+  menuIcon: string,
+  /** 地址 */
+  menuUrl: string,
+
+};
+
+export function useFormState(
+  id: string,
+  visible: boolean,
+  options: {onFetch: () => void, onClose: () => void},
+) {
+  const formContext = useForm<FormState>({
+    defaultValues: {
+      menuName: '',
+      menuOrderBy: 0,
+      menuIcon: '',
+      menuUrl: '',
+    },
+  });
+
+  const {clearErrors, handleSubmit} = formContext;
+
+  useEffect(function() {
+    visible && clearErrors();
+  }, [clearErrors, visible]);
+
+  const [isLoading, {addMutate, editMutate}] = usePutData({
+    addFn: addMenu,
+    editFn: editMenu,
+    ...options,
+  });
+
+  const onSubmit = handleSubmit(function({
+    menuIcon,
+    menuName,
+    menuOrderBy,
+    menuUrl,
+  }) {
+    const params: AddMenuParams = {
+      name: menuName,
+      img: menuIcon,
+      orderBy: String(menuOrderBy),
+      url: menuUrl,
+      pId: '0',
+    };
+
+    id.length > 0
+      ? editMutate({id, ...params})
+      : addMutate(params);
+  });
+
+  return [{formContext, isLoading}, onSubmit] as const;
+}
+
+export function useWatchId(id: string) {
+  const {setValue} = useFormContext<FormState>();
+
+  const data = useQueryDataInfo({
+    queryFn: getMenuInfo,
+    params: ['0', id],
+    enabled: id.length > 0,
+  });
+
+  useEffect(function() {
+    setValue('menuIcon', data?.img ?? '');
+    setValue('menuName', data?.name ?? '');
+    setValue('menuOrderBy', Number(data?.orderBy ?? '0'));
+    setValue('menuUrl', data?.url ?? '');
+  }, [data, setValue]);
+}

packages/app/src/pages/menu/table/modal/index.tsx

@@ -0,0 +1,37 @@
+import {FC, Suspense} from 'react';
+import {useFormState} from './hooks';
+import {LDErrorBoundary, LDLoading, LDModal} from '@components';
+import {FormProvider} from 'react-hook-form';
+
+type Props = {
+  id: string,
+  visible: boolean,
+  onFetch: () => void,
+  onClose: () => void,
+};
+
+const Modal: FC<Props> = function({id, visible, onFetch, onClose}) {
+  const [
+    {formContext, isLoading},
+    onSubmit,
+  ] = useFormState(id, visible, {onFetch, onClose});
+
+  return (
+    <LDModal
+      visible={visible}
+      title={id.length > 0 ? '修改菜单' : '新增菜单'}
+      onClose={onClose}
+      data-test="menu_modal"
+      onSubmit={onSubmit}
+      isLoading={isLoading}
+    >
+      <FormProvider {...formContext}>
+        <LDErrorBoundary>
+          <Suspense fallback={<LDLoading tip="正在获取菜单" />} />
+        </LDErrorBoundary>
+      </FormProvider>
+    </LDModal>
+  );
+};
+
+export default Modal;