Bläddra i källkod

feat: 项目编辑弹窗数据也修改为由接口获取

lanjianrong 3 år sedan
förälder
incheckning
93c8963dd1

+ 7 - 0
src/components/AnimateContent/index.less

@@ -1,2 +1,9 @@
 .pageContainer {
+  :global(.ant-drawer-header-title) {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+  :global(.ant-page-header) {
+    padding: 0;
+  }
 }

+ 6 - 6
src/components/AnimateContent/index.tsx

@@ -1,4 +1,4 @@
-import { Drawer } from 'antd'
+import { Drawer, PageHeader } from 'antd'
 import type { DrawerProps } from 'antd'
 import type { PropsWithChildren, FC } from 'react'
 import styles from './index.less'
@@ -11,26 +11,26 @@ type AnimateContentProps = {
 const AnimateContent: FC<PropsWithChildren<AnimateContentProps>> = ({
   visible,
   onVisibleChange,
-  disableBreadcrumb = false,
   children,
+  title,
   ...others
 }) => {
-  const headerHeight = document.querySelector('.ant-page-header-heading')?.clientHeight + 8 || 0
-  const breadcrumbHeight = disableBreadcrumb ? 0 : 50
+  const wrapHeight = document.querySelector('.ant-pro-page-container-warp')?.clientHeight || 0
 
   return (
     <div className={styles.pageContainer}>
       <Drawer
         {...others}
+        title={<PageHeader title={title} onBack={() => onVisibleChange(false)} />}
         getContainer={false}
         visible={visible}
         push={false}
         onClose={() => onVisibleChange(false)}
         mask={false}
         width="calc(100vw - 256px)"
-        style={{ right: '24px', top: `${72 + headerHeight + breadcrumbHeight}px` }}
+        style={{ right: '24px', top: `${72 + wrapHeight}px` }}
         contentWrapperStyle={{
-          height: `calc(100vh - 96px - ${headerHeight + breadcrumbHeight}px)`
+          height: `calc(100vh - 96px - ${wrapHeight}px)`
         }}
         // closeIcon={<Button onClick={() => onVisibleChange(false)}>返回</Button>}>
       >

+ 6 - 0
src/pages/Institutions/Company/Detail/components/Staff.tsx

@@ -180,6 +180,12 @@ const Staff: React.FC<ListProps> = ({ schema, dataID, dispatch, accountTypeList
         }}
       />
       <AnimateContent
+        title={
+          <>
+            {state.currentModalType === ModalType.ADD ? '新增账号' : null}
+            {state.currentModalType === ModalType.UPDATE ? '编辑账号' : null}
+          </>
+        }
         visible={state.visible}
         onVisibleChange={visible => setState({ ...state, visible })}>
         <StaffDetail

+ 0 - 5
src/pages/Institutions/Staff/components/StaffDetail.tsx

@@ -218,11 +218,6 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
   }
   return (
     <div>
-      <div className="text-xl mb-6">
-        {type === ModalType.ADD ? '新增账号' : null}
-        {type === ModalType.UPDATE ? '编辑账号' : null}
-        {type === ModalType.PREVIEW ? '员工详情' : null}
-      </div>
       {schema && (
         <FormRender
           form={form}

+ 7 - 0
src/pages/Institutions/Staff/index.tsx

@@ -221,6 +221,13 @@ const CompanyList: React.FC<ListProps> = ({ schema, dispatch, accountTypeList })
         search={false}
       />
       <AnimateContent
+        title={
+          <>
+            {state.currentModalType === ModalType.ADD ? '新增账号' : null}
+            {state.currentModalType === ModalType.UPDATE ? '编辑账号' : null}
+            {state.currentModalType === ModalType.PREVIEW ? '员工详情' : null}
+          </>
+        }
         visible={state.visible}
         onVisibleChange={visible => setState({ ...state, visible })}>
         <StaffDetail

+ 23 - 25
src/pages/Project/Management/components/ProjectModal.tsx

@@ -1,13 +1,14 @@
 import { connect, useRequest } from 'umi'
 import { useEffect } from 'react'
 import { Button, message } from 'antd'
-import { addProject, updateProject } from '@/services/api/project'
+import { addProject, getProject, updateProject } from '@/services/api/project'
 import { delay } from '@/utils/util'
 import FormRender, { useForm } from 'form-render'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
 import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
 import type { ConnectProps } from 'umi'
 import type { ProjectModelState } from '../../model'
+import consts from '@/utils/consts'
 
 export enum ModalType {
   ADD = 0,
@@ -21,9 +22,7 @@ type ProjectModalProps = ConnectProps & {
   readOnly: boolean
   type: ModalType
   defaultFormData?: {
-    ID: string
-    name: string
-    projectTypeID: string
+    dataID: string
   }
   pTypeList: API.ProjectTypeList
   reload: () => void
@@ -64,25 +63,28 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
     }
   })
 
-  const onMount = () => {
-    const currentFormData = { ...defaultFormData }
-    const keys = Object.keys(currentFormData)
-    keys.forEach(key => {
-      if (currentFormData[key] instanceof Object) {
-        const targetMap = currentFormData[key]
-        delete currentFormData[key]
-        currentFormData[`${key}ID`] = targetMap.ID
-      }
-    })
-    form.setValues(type === ModalType.ADD ? {} : { ...currentFormData })
-    delay(80).then(() => {
-      // console.log(pTypeList)
+  const onMount = async () => {
+    const { code = -1, data = {} } = await getProject({ ID: defaultFormData.dataID })
+    if (code === consts.RET_CODE.SUCCESS) {
+      const currentFormData = { ...data }
+      const keys = Object.keys(currentFormData)
+      keys.forEach(key => {
+        if (currentFormData[key] instanceof Object) {
+          const targetMap = currentFormData[key]
+          delete currentFormData[key]
+          currentFormData[`${key}ID`] = targetMap.ID
+        }
+      })
+      form.setValues(type === ModalType.ADD ? {} : { ...currentFormData })
+      delay(80).then(() => {
+        // console.log(pTypeList)
 
-      form.setSchemaByPath('projectTypeID', {
-        enum: pTypeList.map(item => item.value),
-        enumNames: pTypeList.map(item => item.label)
+        form.setSchemaByPath('projectTypeID', {
+          enum: pTypeList.map(item => item.value),
+          enumNames: pTypeList.map(item => item.label)
+        })
       })
-    })
+    }
   }
 
   const onFinish = async (formData, errors) => {
@@ -102,10 +104,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
   }
   return (
     <div>
-      <div className="text-xl mb-6">
-        {type === ModalType.ADD ? '新增项目' : null}
-        {type === ModalType.UPDATE ? '编辑项目' : null}
-      </div>
       {schema && <FormRender form={form} schema={schema} onFinish={onFinish} onMount={onMount} />}
       <div className="ml-120px">
         {/* * 重置会导致下拉框的options丢失

+ 17 - 6
src/pages/Project/Management/index.tsx

@@ -42,6 +42,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
     params: {
       search: null
     },
+    title: '',
     visible: false,
     currentModalType: ModalType.ADD,
     defaultFormData: null
@@ -66,6 +67,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
               ...state,
               visible: true,
               currentModalType: ModalType.PREVIEW,
+              title: record.name,
               defaultFormData: {
                 dataID: record.ID
               }
@@ -123,10 +125,10 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
                 ...state,
                 visible: true,
                 currentModalType: ModalType.UPDATE,
-                defaultFormData: record
-                // defaultFormData: {
-                //   dataID: record.ID
-                // }
+                title: record.name,
+                defaultFormData: {
+                  dataID: record.ID
+                }
               })
             }}>
             编辑
@@ -175,7 +177,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
             <Button
               type="primary"
               onClick={() =>
-                setState({ ...state, visible: true, currentModalType: ModalType.ADD })
+                setState({ ...state, visible: true, currentModalType: ModalType.ADD, title: '' })
               }>
               新建项目
             </Button>
@@ -184,7 +186,16 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
         search={false}
       />
 
-      <AnimateContent visible={state.visible} onVisibleChange={onAnimateChange}>
+      <AnimateContent
+        title={
+          <>
+            {state.currentModalType === ModalType.ADD ? '新增项目' : null}
+            {state.currentModalType === ModalType.UPDATE ? '编辑-' : null}
+            {state.title}
+          </>
+        }
+        visible={state.visible}
+        onVisibleChange={onAnimateChange}>
         {state.currentModalType === ModalType.PREVIEW ? (
           <Detail
             defaultFormData={state.defaultFormData}