格式化modal按钮组

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

@@ -15,7 +15,7 @@ const ModalBtnGroup: FC<Props> = function({isLoading, onClose}) {
         type='primary'
         htmlType='submit'
       >
-        {isLoading ? '正在提交' : '确定'}
+        确定
       </Button>
       <Button
         disabled={isLoading}

packages/app/src/components/operation-field/index.module.css

@@ -1,6 +1,6 @@
 .error-tips {
   height: 14px;
-  margin-top: 4px;
+  margin: 4px 0 8px;
   font-size: 14px;
   color: var(--error-color);
 }

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

@@ -1,29 +1,23 @@
-import {ModalBtnGroup, ModalField} from '@components';
+import {ModalField} from '@components';
 import {FC} from 'react';
 import {useField, useFormValues} from './hooks';
-import {Space} from 'antd';
 
 type Props = {
   id: string,
-  isLoading?: boolean,
-  onClose: () => void,
 };
 
-const Info: FC<Props> = function({onClose, isLoading, id}) {
+const Info: FC<Props> = function({id}) {
   const [{control}] = useField();
   useFormValues(id);
 
   return (
-    <Space direction='vertical'>
-      <ModalField
-        name='departmentName'
-        width='300px'
-        label='部门名称'
-        control={control}
-      />
+    <ModalField
+      name='departmentName'
+      width='300px'
+      label='部门名称'
+      control={control}
+    />
 
-      <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
-    </Space>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import {FC, Suspense} from 'react';
-import {Modal as ModalComponent, ErrorBoundary, Loading} from '@components';
+import {Modal as ModalComponent, ErrorBoundary, Loading, ModalBtnGroup} from '@components';
 import ReacatModal from 'react-modal';
 import {useFormState} from './hooks';
 import Info from './Info';
@@ -34,7 +34,8 @@ const Modal: FC<Props> = function({visible, onClose, onFetch, id}) {
       <FormProvider {...formInstance}>
         <ErrorBoundary>
           <Suspense fallback={<Loading tip='正在获取部门信息' />}>
-            <Info onClose={onClose} isLoading={isLoading} id={id} />
+            <Info id={id} />
+            <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
           </Suspense>
         </ErrorBoundary>
       </FormProvider>

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

@@ -1,21 +1,18 @@
-import {ModalBtnGroup, ModalField, ModalSelect} from '@components';
-import {Space} from 'antd';
+import {ModalField, ModalSelect} from '@components';
 import {FC} from 'react';
 import {useField, useFormValues, useOptions} from './hooks';
 
 type Props = {
   id: string,
-  isLoading?: boolean,
-  onClose: () => void,
 };
 
-const GoodsModalInfo: FC<Props> = function({id, isLoading, onClose}) {
+const GoodsModalInfo: FC<Props> = function({id}) {
   const [{control}] = useField();
   const {storageOptions, departmentOptions} = useOptions();
   useFormValues(id);
 
   return (
-    <Space direction='vertical'>
+    <>
       <ModalField
         name='goodsItemNumber'
         label='品号'
@@ -98,9 +95,7 @@ const GoodsModalInfo: FC<Props> = function({id, isLoading, onClose}) {
         label='单位'
         control={control}
       />
-
-      <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
-    </Space>
+    </>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import {ErrorBoundary, Loading, Modal} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
 import {FC, Suspense} from 'react';
 import GoodsModalInfo from './Info';
 import ReactModal from 'react-modal';
@@ -32,13 +32,14 @@ const GoodsModal: FC<Props> = function({id, visible, onClose, onFetch}) {
       onSubmit={onSubmit}
       testId='goods_modal'
     >
-      <ErrorBoundary>
-        <Suspense fallback={<Loading tip='正在获取货品信息' />}>
-          <FormProvider {...formInstance}>
-            <GoodsModalInfo id={id} onClose={onClose} isLoading={isLoading} />
-          </FormProvider>
-        </Suspense>
-      </ErrorBoundary>
+      <FormProvider {...formInstance}>
+        <ErrorBoundary>
+          <Suspense fallback={<Loading tip='正在获取货品信息' />}>
+            <GoodsModalInfo id={id} />
+            <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
+          </Suspense>
+        </ErrorBoundary>
+      </FormProvider>
     </Modal>
   );
 };

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

@@ -1,20 +1,17 @@
-import {ModalBtnGroup, ModalField} from '@components';
-import {Space} from 'antd';
+import {ModalField} from '@components';
 import {FC} from 'react';
 import {useField, useFormValues} from './hooks';
 
 type Props = {
   id: string,
-  isLoading?: boolean,
-  onClose: () => void,
 };
 
-const Info: FC<Props> = function({id, isLoading, onClose}) {
+const Info: FC<Props> = function({id}) {
   const {control} = useField();
   useFormValues(id);
 
   return (
-    <Space direction='vertical'>
+    <>
       <ModalField
         name='menuName'
         width='300px'
@@ -35,8 +32,7 @@ const Info: FC<Props> = function({id, isLoading, onClose}) {
         type='number'
       />
 
-      <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
-    </Space>
+    </>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import {FC, Suspense} from 'react';
-import {ErrorBoundary, Loading, Modal} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
 import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
@@ -42,7 +42,8 @@ const MenuModal: FC<Props> = function({visible, onClose, id, onFetch}) {
       <FormProvider {...formInstance}>
         <ErrorBoundary>
           <Suspense fallback={<Loading tip='正在获取菜单信息' />}>
-            <Info onClose={onClose} isLoading={isLoading} id={id} />
+            <Info id={id} />
+            <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
           </Suspense>
         </ErrorBoundary>
       </FormProvider>

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

@@ -1,20 +1,18 @@
-import {ModalBtnGroup, ModalField} from '@components';
-import {Space} from 'antd';
+import {ModalField} from '@components';
 import {FC} from 'react';
 import {useField, useFormValues} from './hooks';
 
 type Props = {
   id: string,
-  isLoading?: boolean,
-  onClose: () => void,
+
 };
 
-const Info: FC<Props> = function({id, isLoading, onClose}) {
+const Info: FC<Props> = function({id}) {
   const {control} = useField();
   useFormValues(id);
 
   return (
-    <Space direction='vertical'>
+    <>
       <ModalField
         name='menuName'
         width='300px'
@@ -35,8 +33,7 @@ const Info: FC<Props> = function({id, isLoading, onClose}) {
         type='number'
       />
 
-      <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
-    </Space>
+    </>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import {FC, Suspense} from 'react';
-import {ErrorBoundary, Loading, Modal} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
 import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
@@ -42,7 +42,8 @@ const MenuModal: FC<Props> = function({visible, onClose, id, onFetch}) {
       <FormProvider {...formInstance}>
         <ErrorBoundary>
           <Suspense fallback={<Loading tip='正在获取菜单信息' />}>
-            <Info onClose={onClose} isLoading={isLoading} id={id} />
+            <Info id={id} />
+            <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
           </Suspense>
         </ErrorBoundary>
       </FormProvider>

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

@@ -1,20 +1,17 @@
-import {ModalBtnGroup, ModalField} from '@components';
-import {Space} from 'antd';
+import {ModalField} from '@components';
 import {FC} from 'react';
 import {useField, useFormValues} from './hooks';
 
 type Props = {
   id: string,
-  isLoading?: boolean,
-  onClose: () => void,
 };
 
-const Info: FC<Props> = function({id, isLoading, onClose}) {
+const Info: FC<Props> = function({id}) {
   const [{control}] = useField();
   useFormValues(id);
 
   return (
-    <Space direction='vertical'>
+    <>
       <ModalField
         name='menuID'
         width='300px'
@@ -35,8 +32,7 @@ const Info: FC<Props> = function({id, isLoading, onClose}) {
         type='number'
       />
 
-      <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
-    </Space>
+    </>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import {FC, Suspense} from 'react';
-import {ErrorBoundary, Loading, Modal} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
 import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
 import Info from './Info';
@@ -42,7 +42,8 @@ const MenuModal: FC<Props> = function({visible, onClose, id, onFetch}) {
       <FormProvider {...formInstance}>
         <ErrorBoundary>
           <Suspense fallback={<Loading tip='正在获取菜单信息' />}>
-            <Info id={id} isLoading={isLoading} onClose={onClose} />
+            <Info id={id} />
+            <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
           </Suspense>
         </ErrorBoundary>
       </FormProvider>

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

@@ -1,19 +1,16 @@
-import {ModalBtnGroup, ModalField, ModalTextArea} from '@components';
-import {Space} from 'antd';
+import {ModalField, ModalTextArea} from '@components';
 import {FC} from 'react';
 import {useField, useFormValues} from './hooks';
 
 type Props = {
   id: string,
-  isLoading?: boolean,
-  onClose: () => void,
 };
-const Info: FC<Props> = function({id, isLoading, onClose}) {
+const Info: FC<Props> = function({id}) {
   const {control} = useField();
   useFormValues(id);
 
   return (
-    <Space direction='vertical'>
+    <>
       <ModalField
         name='roleName'
         width='300px'
@@ -27,9 +24,7 @@ const Info: FC<Props> = function({id, isLoading, onClose}) {
         label='备注'
         control={control}
       />
-
-      <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
-    </Space>
+    </>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import {ErrorBoundary, Loading, Modal} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
 import {FC, Suspense} from 'react';
 import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
@@ -33,7 +33,8 @@ const RoleModal: FC<Props> = function({visible, onClose, onFetch, id}) {
       <FormProvider {...formInstance}>
         <ErrorBoundary>
           <Suspense fallback={<Loading tip='正在获取角色信息' />}>
-            <Info id={id} isLoading={isLoading} onClose={onClose} />
+            <Info id={id} />
+            <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
           </Suspense>
         </ErrorBoundary>
       </FormProvider>

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

@@ -1,5 +1,4 @@
-import {ModalBtnGroup, ModalField, ModalSelect} from '@components';
-import {Space} from 'antd';
+import {ModalField, ModalSelect} from '@components';
 import {FC} from 'react';
 import {useFormInfoValue, useFormInstance} from './hooks';
 
@@ -10,16 +9,14 @@ const stateOptions = [
 
 type Props = {
   id: string;
-  isLoading?: boolean;
-  onClose: () => void;
 };
 
-const StoreModalInfo: FC<Props> = function({id, isLoading, onClose}) {
+const StoreModalInfo: FC<Props> = function({id}) {
   const control = useFormInstance();
   useFormInfoValue(id);
 
   return (
-    <Space direction='vertical'>
+    <>
       <ModalField
         name='storageLocationCode'
         width='300px'
@@ -58,8 +55,7 @@ const StoreModalInfo: FC<Props> = function({id, isLoading, onClose}) {
         control={control}
         data={stateOptions}
       />
-      <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
-    </Space>
+    </>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import {ErrorBoundary, Loading, Modal} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
 import {FC, Suspense} from 'react';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
@@ -35,7 +35,8 @@ const StorageModal: FC<Props> = function({visible, id, onClose, onFetch}) {
       <FormProvider {...formInstance}>
         <ErrorBoundary>
           <Suspense fallback={<Loading tip='正在获取库位信息' />}>
-            <StoreModalInfo id={id} onClose={onClose} isLoading={isLoading} />
+            <StoreModalInfo id={id} />
+            <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
           </Suspense>
         </ErrorBoundary>
       </FormProvider>

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

@@ -1,24 +1,20 @@
 import {FC} from 'react';
-import {Control} from 'react-hook-form';
-import {FormState, useFetchUserInfo, useOptions} from './hooks';
-import {ModalBtnGroup, ModalField, ModalSelect} from '@components';
-import {Space} from 'antd';
+import {useFetchUserInfo, useField, useOptions} from './hooks';
+import {ModalField, ModalSelect} from '@components';
 
 type Props = {
-  control: Control<FormState>,
-  isLoading: boolean,
   id: string;
-  onClose: () => void,
 };
 
 const width = '350px';
 
-const UserModalInfo: FC<Props> = function({control, onClose, isLoading, id}) {
+const UserModalInfo: FC<Props> = function({id}) {
   const {roleOptions, departmentOptions} = useOptions();
+  const {control} = useField();
   useFetchUserInfo(id);
 
   return (
-    <Space direction='vertical'>
+    <>
       <ModalField
         control={control}
         name='userName'
@@ -75,8 +71,7 @@ const UserModalInfo: FC<Props> = function({control, onClose, isLoading, id}) {
         width={width}
       />
 
-      <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
-    </Space>
+    </>
   );
 };
 

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

@@ -77,7 +77,7 @@ export function useFormState(
     },
     resolver: yupResolver(validate),
   });
-  const {control, handleSubmit, clearErrors} = formInstance;
+  const {handleSubmit, clearErrors} = formInstance;
 
   useEffect(function() {
     visible && clearErrors();
@@ -112,7 +112,7 @@ export function useFormState(
       : addMutate({...params, password: userPassword});
   });
 
-  return [{control, isLoading, formInstance}, {onSubmit}] as const;
+  return [{isLoading, formInstance}, {onSubmit}] as const;
 }
 
 export function useOptions() {
@@ -151,6 +151,10 @@ export function useOptions() {
   return {roleOptions, departmentOptions};
 }
 
+export function useField() {
+  return useFormContext<FormState>();
+}
+
 export function useFetchUserInfo(id: string) {
   const {data} = useQuery(
     [id, getUserInfo.name],

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

@@ -1,4 +1,4 @@
-import {ErrorBoundary, Loading, Modal} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
 import {FC, Suspense} from 'react';
 import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
@@ -20,7 +20,7 @@ type Props = {
 };
 
 const UserModal: FC<Props> = function({visible, onClose, onFetch, id}) {
-  const [{control, isLoading, formInstance}, {onSubmit}] = useFormState({
+  const [{isLoading, formInstance}, {onSubmit}] = useFormState({
     onClose, onFetch, id, visible,
   });
 
@@ -37,12 +37,8 @@ const UserModal: FC<Props> = function({visible, onClose, onFetch, id}) {
       <FormProvider {...formInstance}>
         <ErrorBoundary>
           <Suspense fallback={<Loading tip='正在获取用户信息' />}>
-            <UserModalInfo
-              id={id}
-              onClose={onClose}
-              control={control}
-              isLoading={isLoading}
-            />
+            <UserModalInfo id={id} />
+            <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
           </Suspense>
         </ErrorBoundary>
       </FormProvider>