fix: 修改项目管理详情抽屉

src/pages/Project/Management/components/DetailModal.tsx

@@ -17,8 +17,8 @@ export enum ModalType {
 }
 
 type ProjectModalProps = ConnectProps & {
-  visibles: boolean
-  setVisible: (visibles: boolean) => void
+  visible: boolean
+  setVisible: (visible: boolean) => void
   readOnly: boolean
   readOnly: boolean
   type: ModalType
@@ -30,7 +30,7 @@ type ProjectModalProps = ConnectProps & {
   schema?: Record<string, any> | null
 }
 const DetailModal: React.FC<ProjectModalProps> = ({
-  visibles,
+  visible,
   setVisible,
   readOnly,
   dispatch,
@@ -69,7 +69,7 @@ const DetailModal: React.FC<ProjectModalProps> = ({
   })
 
   useEffect(() => {
-    if (visibles && !schema) {
+    if (visible && !schema) {
       dispatch({
         type: 'schemaBase/querySchema',
         payload: {
@@ -79,7 +79,7 @@ const DetailModal: React.FC<ProjectModalProps> = ({
     }
     tryAcountList()
     tryApprovalList()
-  }, [visibles])
+  }, [visible])
 
   const onMount = () => {
     form.setValues({ ...defaultFormData })
@@ -99,47 +99,77 @@ const DetailModal: React.FC<ProjectModalProps> = ({
     reloadTable()
   }
   return (
-    <Drawer
-      width="50vw"
-      visible={visibles}
-      onClose={() => {
-        // ref.current?.resetFields()
-        setVisible(false)
-      }}
-      title={defaultFormData?.name}>
-      <Tabs>
-        <TabPane tab="项目信息" key="1">
-          {schema && (
-            <FormRender form={form} schema={schema} onMount={onMount} readOnly={readOnly} />
-          )}
-        </TabPane>
-        <TabPane tab="审批流程" key="2">
-          <ProForm
-            formRef={ref}
-            submitter={{ resetButtonProps: { style: { display: 'none' } } }}
-            onFinish={onFinish}>
-            <ProFormSelect
-              name="accountID"
-              label={'上报人'}
-              placeholder="请选择上报人"
-              options={state.acountList.map(item => ({
-                label: item.name,
-                value: item.ID
-              }))}
-            />
-            <ProFormSelect
-              name="approvalID"
-              label={'审批流程'}
-              placeholder="请选择审批流程"
-              options={state.approvalList.map(item => ({
-                label: item.name,
-                value: item.ID
-              }))}
-            />
-          </ProForm>
-        </TabPane>
-      </Tabs>
-    </Drawer>
+    <Tabs>
+      <TabPane tab="项目信息" key="1">
+        {schema && <FormRender form={form} schema={schema} onMount={onMount} readOnly={readOnly} />}
+      </TabPane>
+      <TabPane tab="审批流程" key="2">
+        <ProForm
+          formRef={ref}
+          submitter={{ resetButtonProps: { style: { display: 'none' } } }}
+          onFinish={onFinish}>
+          <ProFormSelect
+            name="accountID"
+            label={'上报人'}
+            placeholder="请选择上报人"
+            options={state.acountList.map(item => ({
+              label: item.name,
+              value: item.ID
+            }))}
+          />
+          <ProFormSelect
+            name="approvalID"
+            label={'审批流程'}
+            placeholder="请选择审批流程"
+            options={state.approvalList.map(item => ({
+              label: item.name,
+              value: item.ID
+            }))}
+          />
+        </ProForm>
+      </TabPane>
+    </Tabs>
+    // <Drawer
+    //   width="50vw"
+    //   visible={visibles}
+    //   onClose={() => {
+    //     // ref.current?.resetFields()
+    //     setVisible(false)
+    //   }}
+    //   title={defaultFormData?.name}>
+    // <Tabs>
+    //   <TabPane tab="项目信息" key="1">
+    //     {schema && (
+    //       <FormRender form={form} schema={schema} onMount={onMount} readOnly={readOnly} />
+    //     )}
+    //   </TabPane>
+    //   <TabPane tab="审批流程" key="2">
+    //     <ProForm
+    //       formRef={ref}
+    //       submitter={{ resetButtonProps: { style: { display: 'none' } } }}
+    //       onFinish={onFinish}>
+    //       <ProFormSelect
+    //         name="accountID"
+    //         label={'上报人'}
+    //         placeholder="请选择上报人"
+    //         options={state.acountList.map(item => ({
+    //           label: item.name,
+    //           value: item.ID
+    //         }))}
+    //       />
+    //       <ProFormSelect
+    //         name="approvalID"
+    //         label={'审批流程'}
+    //         placeholder="请选择审批流程"
+    //         options={state.approvalList.map(item => ({
+    //           label: item.name,
+    //           value: item.ID
+    //         }))}
+    //       />
+    //     </ProForm>
+    //   </TabPane>
+    // </Tabs>
+    // </Drawer>
   )
 }
 

src/pages/Project/Management/components/ProjectModal.tsx

@@ -15,8 +15,8 @@ export enum ModalType {
 }
 
 type ProjectModalProps = ConnectProps & {
-  visible: boolean
-  setVisible: (visible: boolean) => void
+  visibles: boolean
+  setVisible: (visibles: boolean) => void
   readOnly: boolean
   type: ModalType
   defaultFormData?: {
@@ -29,7 +29,7 @@ type ProjectModalProps = ConnectProps & {
   schema?: Record<string, any> | null
 }
 const ProjectModal: React.FC<ProjectModalProps> = ({
-  visible,
+  visibles,
   setVisible,
   dispatch,
   schema,
@@ -40,7 +40,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
 }) => {
   const form = useForm()
   useEffect(() => {
-    if (visible && !schema) {
+    if (visibles && !schema) {
       dispatch({
         type: 'schemaBase/querySchema',
         payload: {
@@ -48,7 +48,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
         }
       })
     }
-  }, [visible])
+  }, [visibles])
 
   const { run: tryUpdateProject } = useRequest(updateProject, {
     manual: true,
@@ -93,7 +93,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
   return (
     <Drawer
       width="50vw"
-      visible={visible}
+      visible={visibles}
       onClose={() => {
         // ref.current?.resetFields()
         setVisible(false)

src/pages/Project/Management/index.tsx

@@ -15,6 +15,7 @@ import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
 import { generateColumns } from '@/utils/util'
 import DetailModal from './components/DetailModal'
+import AnimateContent from '@/components/AnimateContent'
 
 type ListProps = ConnectProps & {
   pTypeList: { label: string; value: string }[]
@@ -65,7 +66,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
           onClick={() => {
             setState({
               ...state,
-              visibles: true,
+              visible: true,
               readOnly: true,
               defaultFormData: {
                 ID: record.ID,
@@ -124,7 +125,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
             onClick={() => {
               setState({
                 ...state,
-                visible: true,
+                visibles: true,
                 currentModalType: ModalType.UPDATE,
                 defaultFormData: {
                   ID: record.ID,
@@ -176,7 +177,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
             <Button
               type="primary"
               onClick={() =>
-                setState({ ...state, visible: true, currentModalType: ModalType.ADD })
+                setState({ ...state, visibles: true, currentModalType: ModalType.ADD })
               }>
               新建项目
             </Button>
@@ -189,19 +190,30 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
         type={state.currentModalType}
         defaultFormData={state.defaultFormData}
         pTypeList={pTypeList}
-        visible={state.visible}
+        visibles={state.visibles}
         reloadTable={() => tRef.current?.reload()}
-        setVisible={(visible: boolean) => setState({ ...state, visible })}
+        setVisible={(visibles: boolean) => setState({ ...state, visibles })}
       />
 
-      <DetailModal
+      <AnimateContent
+        visible={state.visible}
+        onVisibleChange={visible => setState({ ...state, visible })}>
+        <DetailModal
+          defaultFormData={state.defaultFormData}
+          pTypeList={pTypeList}
+          readOnly={state.readOnly}
+          reloadTable={() => tRef.current?.reload()}
+        />
+      </AnimateContent>
+
+      {/* <DetailModal
         defaultFormData={state.defaultFormData}
         pTypeList={pTypeList}
         visibles={state.visibles}
         readOnly={state.readOnly}
         reloadTable={() => tRef.current?.reload()}
         setVisible={(visibles: boolean) => setState({ ...state, visibles })}
-      />
+      /> */}
     </PageContainer>
   )
 }