fix: 人员管理抽屉内容修改

src/pages/Institutions/Company/Detail/components/Staff.tsx

@@ -6,12 +6,13 @@ import consts from '@/utils/consts'
 import { connect } from 'umi'
 import dayjs from 'dayjs'
 import { queryAcountList } from '@/services/api/institution'
-import StaffDrawer, { ModalType } from '@/pages/Institutions/Staff/components/StaffDrawer'
+import StaffDetail, { ModalType } from '@/pages/Institutions/Staff/components/StaffDetail'
 import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
 import type { InstitutionsModelState } from '@/pages/Institutions/model'
 import { generateColumns } from '@/utils/util'
 import { genderEum } from '@/pages/Institutions/Staff'
+import AnimateContent from '@/components/AnimateContent'
 
 type ListProps = ConnectProps & {
   accountType: API.AccountType[]
@@ -175,14 +176,18 @@ const Staff: React.FC<ListProps> = ({ schema, dataID, dispatch, accountTypeList
           ]
         }}
       />
-      <StaffDrawer
+      <AnimateContent
         visible={state.visible}
-        setVisible={(visible: boolean) => setState({ ...state, visible })}
-        type={state.currentModalType}
-        defaultFormData={{ ...state.defaultFormData, dataID }}
-        accountTypeList={accountTypeList}
-        reload={() => tRef.current?.reload()}
-      />
+        onVisibleChange={visible => setState({ ...state, visible })}>
+        <StaffDetail
+          visible={state.visible}
+          setVisible={(visible: boolean) => setState({ ...state, visible })}
+          type={state.currentModalType}
+          defaultFormData={{ ...state.defaultFormData, dataID }}
+          accountTypeList={accountTypeList}
+          reload={() => tRef.current?.reload()}
+        />
+      </AnimateContent>
     </div>
   )
 }

src/pages/Institutions/Company/Detail/components/StaffDetailModal.tsx

@@ -1,34 +0,0 @@
-import { Col, Drawer, Row } from 'antd'
-import React from 'react'
-import type { ConnectProps } from 'umi'
-
-type StaffDetailModalProps = ConnectProps & {
-  visibles: boolean
-  setVisible: (visibles: boolean) => void
-  staffDetail?: API.AccountListItem[]
-}
-const StaffDetailModal: React.FC<StaffDetailModalProps> = ({
-  visibles,
-  setVisible,
-  staffDetail
-}) => {
-  return (
-    <Drawer
-      title={'人员详情'}
-      width="50vw"
-      visible={visibles}
-      onClose={() => {
-        setVisible(false)
-      }}>
-      <Row gutter={[16, 16]}>
-        {/* <Col span={24}>所属企事业单位：{staffDetail.institution.name}</Col> */}
-        <Col span={12}>账号：{staffDetail.account}</Col>
-        {/* <Col span={12}>组织架构：{staffDetail.institution.name}</Col> */}
-        <Col span={12}>姓名：{staffDetail.name}</Col>
-        <Col span={12}>手机：{staffDetail.phone}</Col>
-      </Row>
-    </Drawer>
-  )
-}
-
-export default StaffDetailModal

src/pages/Institutions/Company/List/index.tsx

@@ -160,6 +160,7 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
           },
           actions: [
             <Button
+              type="primary"
               onClick={() =>
                 setState({ ...state, visible: true, currentModalType: ModalType.ADD })
               }>

src/pages/Institutions/Staff/components/StaffDrawer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { message, Button, Drawer } from 'antd'
+import { message, Button, Form } from 'antd'
 import { connect, useRequest } from 'umi'
 import consts from '@/utils/consts'
 import {
@@ -24,7 +24,7 @@ export enum ModalType {
 
 type StaffModalProps = ConnectProps & {
   visible: boolean
-  setVisible: (visible: boolean) => void
+  onVisibleChange: (visible: boolean) => void
   type: ModalType
   defaultFormData?: {
     ID: string
@@ -40,7 +40,7 @@ type StaffModalProps = ConnectProps & {
 
 const StaffDrawer: React.FC<StaffModalProps> = ({
   visible,
-  setVisible,
+  onVisibleChange,
   schema,
   dispatch,
   type,
@@ -211,37 +211,37 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
       } else {
         await tryUpdateAccount(formData)
       }
-      setVisible(false)
+      onVisibleChange(false)
       reload()
     } catch (error) {
       message.error(error)
     }
   }
   return (
-    <Drawer
-      width="50vw"
-      visible={visible}
-      onClose={() => {
-        // ref.current?.resetFields()
-        setVisible(false)
-      }}
-      title={type === ModalType.ADD ? '新增账号' : '编辑账号'}>
-      {schema && (
-        <FormRender
-          form={form}
-          schema={schema}
-          onFinish={onFinish}
-          onMount={onMount}
-          widgets={{ site: SiteInput }}
-          watch={watch}
-        />
-      )}
-      <div className="ml-120px">
-        <Button type="primary" onClick={form.submit}>
-          提交
-        </Button>
+    <div>
+      <div className="text-xl mb-6">
+        {type === ModalType.ADD ? '新增账号' : null}
+        {type === ModalType.UPDATE ? '编辑账号' : null}
+        {type === ModalType.DETAIL ? '员工详情' : null}
       </div>
-    </Drawer>
+      <Form width="50vw">
+        {schema && (
+          <FormRender
+            form={form}
+            schema={schema}
+            onFinish={onFinish}
+            onMount={onMount}
+            widgets={{ site: SiteInput }}
+            watch={watch}
+          />
+        )}
+        <div className="ml-120px">
+          <Button type="primary" onClick={form.submit}>
+            提交
+          </Button>
+        </div>
+      </Form>
+    </div>
   )
 }
 

src/pages/Institutions/Staff/index.tsx

@@ -1,5 +1,6 @@
 import ProTable from '@ant-design/pro-table'
 import type { ProColumnType, ActionType } from '@ant-design/pro-table'
+import { PageContainer } from '@ant-design/pro-layout'
 import { Button } from 'antd'
 import consts from '@/utils/consts'
 import { useRef, useState, useEffect } from 'react'
@@ -9,11 +10,11 @@ import type { InstitutionsModelState } from '../model'
 // import StaffModal, { ModalType } from './components/StaffModal'
 import { queryAcountList } from '@/services/api/institution'
 import dayjs from 'dayjs'
-import StaffDrawer, { ModalType } from './components/StaffDrawer'
+import StaffDetail, { ModalType } from './components/StaffDetail'
 import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
-import StaffDetailModal from '../Company/Detail/components/StaffDetailModal'
 import { generateColumns } from '@/utils/util'
+import AnimateContent from '@/components/AnimateContent'
 
 type ListProps = ConnectProps & {
   accountTypeList: { label: string; value: string }[]
@@ -47,7 +48,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
       search: null
     },
     visible: false,
-    visibles: false,
+    readOnly: true,
     staffDetail: [],
     ID: '',
     currentModalType: ModalType.ADD,
@@ -74,7 +75,22 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
         <div
           className="text-primary cursor-pointer hover:text-hex-967bbd"
           onClick={() => {
-            setState({ ...state, visibles: true, staffDetail: record })
+            setState({
+              ...state,
+              visible: true,
+              readOnly: true,
+              currentModalType: ModalType.DETAIL,
+              defaultFormData: {
+                // ...record,
+                institution: null,
+                ID: record.ID,
+                account: record.account,
+                name: record.name,
+                gender: record.gender,
+                institutionID: record.institution.ID,
+                accountType: record.accountType
+              }
+            })
           }}>
           {name}
         </div>
@@ -176,7 +192,7 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
   ]
 
   return (
-    <div>
+    <PageContainer title={false}>
       <ProTable<API.AccountListItem>
         rowKey="ID"
         params={state.params}
@@ -210,19 +226,18 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
         }}
         search={false}
       />
-      <StaffDrawer
-        type={state.currentModalType}
-        defaultFormData={state.defaultFormData}
+      <AnimateContent
         visible={state.visible}
-        reload={() => tRef.current?.reload()}
-        setVisible={(visible: boolean) => setState({ ...state, visible })}
-      />
-      <StaffDetailModal
-        visibles={state.visibles}
-        setVisible={(visibles: boolean) => setState({ ...state, visibles })}
-        staffDetail={state.staffDetail}
-      />
-    </div>
+        onVisibleChange={visible => setState({ ...state, visible })}>
+        <StaffDetail
+          type={state.currentModalType}
+          defaultFormData={state.defaultFormData}
+          visible={state.visible}
+          reload={() => tRef.current?.reload()}
+          onVisibleChange={(visible: boolean) => setState({ ...state, visible })}
+        />
+      </AnimateContent>
+    </PageContainer>
   )
 }
 

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

@@ -20,7 +20,6 @@ type ProjectModalProps = ConnectProps & {
   visible: boolean
   onVisibleChange: (visible: boolean) => void
   readOnly: boolean
-  readOnly: boolean
   type: ModalType
   defaultFormData?: {
     ID: string
@@ -39,8 +38,6 @@ const DetailModal: React.FC<ProjectModalProps> = ({
   pTypeList,
   reloadTable
 }) => {
-  console.log('defaultFormData', defaultFormData)
-
   const form = useForm()
   const ref = useRef<FormInstance>(null)
   const { TabPane } = Tabs