feat: 完善编辑与新建项目

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

@@ -1,7 +1,7 @@
 import { useRequest } from 'umi'
 import { useRef, useEffect } from 'react'
-import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
-import { Button, message } from 'antd'
+import ProForm, { ProFormSelect, ProFormText } from '@ant-design/pro-form'
+import { message, Modal } from 'antd'
 import { addProject, updateProject } from '@/services/api/project'
 import type { FormInstance } from 'antd'
 
@@ -10,9 +10,9 @@ export enum ModalType {
   UPDATE = 1
 }
 
-type AddProjectProps = {
+type ProjectModalProps = {
   visible: boolean
-  onVisibleChange: (visible: boolean) => void
+  setVisible: (visible: boolean) => void
   type: ModalType
   defaultFormData?: {
     id: string
@@ -20,18 +20,18 @@ type AddProjectProps = {
     project_type_id: string
   }
   pTypeList: API.ProjectTypeList
+  reloadTable: () => void
 }
-const AddProject: React.FC<AddProjectProps> = ({
+const ProjectModal: React.FC<ProjectModalProps> = ({
   visible,
-  onVisibleChange,
+  setVisible,
   type,
   defaultFormData,
-  pTypeList
+  pTypeList,
+  reloadTable
 }) => {
   const ref = useRef<FormInstance>(null)
   useEffect(() => {
-    console.log('defaultFormData', defaultFormData)
-
     defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
   }, [defaultFormData])
   const { run: tryUpdateProject } = useRequest(updateProject, {
@@ -46,28 +46,36 @@ const AddProject: React.FC<AddProjectProps> = ({
       message.success('创建成功')
     }
   })
+
+  const handleOnFinish = () => {
+    ref.current?.validateFields().then(async values => {
+      try {
+        // 执行表单提交
+        if (type === ModalType.ADD) {
+          await tryAddProject(values)
+        } else {
+          await tryUpdateProject(values)
+        }
+        setVisible(false)
+        reloadTable()
+        ref.current?.resetFields()
+      } catch (error) {
+        message.error(error)
+      }
+    })
+  }
   return (
-    <div>
-      <ModalForm
-        visible={visible}
-        onVisibleChange={onVisibleChange}
-        title={type === ModalType.ADD ? '新增项目' : '编辑项目'}
-        formRef={ref}
-        trigger={<Button>新增项目</Button>}
-        onFinish={async values => {
-          try {
-            // 执行表单提交
-            if (type === ModalType.ADD) {
-              await tryAddProject(values)
-            } else {
-              await tryUpdateProject(values)
-            }
-            return true
-          } catch (error) {
-            return false
-          }
-        }}
-      >
+    <Modal
+      width="30vw"
+      visible={visible}
+      onCancel={() => {
+        ref.current?.resetFields()
+        setVisible(false)
+      }}
+      title={type === ModalType.ADD ? '新增项目' : '编辑项目'}
+      onOk={() => handleOnFinish()}
+    >
+      <ProForm formRef={ref} submitter={{ render: false }}>
         {type === ModalType.UPDATE ? <ProFormText name="id" hidden /> : null}
         <ProFormText
           name="name"
@@ -80,9 +88,9 @@ const AddProject: React.FC<AddProjectProps> = ({
           rules={[{ required: true, message: '请选择项目类型' }]}
           options={pTypeList}
         />
-      </ModalForm>
-    </div>
+      </ProForm>
+    </Modal>
   )
 }
 
-export default AddProject
+export default ProjectModal

src/pages/Project/Management/index.tsx

@@ -1,14 +1,14 @@
 import { delProject, getProjectList } from '@/services/api/project'
 import ProTable from '@ant-design/pro-table'
 import type { ProColumnType, ActionType } from '@ant-design/pro-table'
-import { Popconfirm } from 'antd'
+import { Button, Popconfirm } from 'antd'
 import consts from '@/utils/consts'
 import { useRef, useState, useEffect } from 'react'
 import { connect, useRequest } from 'umi'
 import type { ConnectProps } from 'umi'
 import type { ProjectModelState } from '../model'
 import { DeleteOutlined } from '@ant-design/icons'
-import AddProject, { ModalType } from './components/AddProject'
+import ProjectModal, { ModalType } from './components/ProjectModal'
 
 type ListProps = ConnectProps & {
   pTypeList: { label: string; value: string }[]
@@ -49,7 +49,7 @@ const List: React.FC<ListProps> = ({ dispatch, pTypeList }) => {
       title: '项目类型',
       filters: true,
       filterMultiple: false,
-      render: (_, record) => <div>{record.name}</div>,
+      render: (_, record) => <div>{record.project_type.name}</div>,
       valueEnum: pTypeList.reduce((prev, curr) => {
         const items = { ...prev }
         items[curr.value] = {
@@ -99,39 +99,47 @@ const List: React.FC<ListProps> = ({ dispatch, pTypeList }) => {
     }
   ]
   return (
-    <ProTable<API.ProjectListItem>
-      rowKey="id"
-      params={state.params}
-      actionRef={tRef}
-      columns={columns}
-      request={async (params, filter, sorter) => {
-        const { code = -1, data: { items = [], totle = 0 } = {} } = await getProjectList({
-          ...params,
-          ...filter,
-          ...sorter
-        })
-        return {
-          data: items,
-          success: code === consts.RET_CODE.SUCCESS,
-          totle
-        }
-      }}
-      toolbar={{
-        search: {
-          onSearch: val => setState({ ...state, params: { ...state.params, search: val } })
-        },
-        actions: [
-          <AddProject
-            type={state.currentModalType}
-            defaultFormData={state.defaultFormData}
-            pTypeList={pTypeList}
-            visible={state.visible}
-            onVisibleChange={(visible: boolean) => setState({ ...state, visible })}
-          />
-        ]
-      }}
-      search={false}
-    />
+    <div>
+      <ProTable<API.ProjectListItem>
+        rowKey="id"
+        params={state.params}
+        actionRef={tRef}
+        columns={columns}
+        request={async (params, filter, sorter) => {
+          const { code = -1, data: { items = [], totle = 0 } = {} } = await getProjectList({
+            ...params,
+            ...filter,
+            ...sorter
+          })
+          return {
+            data: items,
+            success: code === consts.RET_CODE.SUCCESS,
+            totle
+          }
+        }}
+        toolbar={{
+          search: {
+            onSearch: val => setState({ ...state, params: { ...state.params, search: val } })
+          },
+          actions: [
+            <Button
+              onClick={() => setState({ ...state, visible: true, currentModalType: ModalType.ADD })}
+            >
+              新建项目
+            </Button>
+          ]
+        }}
+        search={false}
+      />
+      <ProjectModal
+        type={state.currentModalType}
+        defaultFormData={state.defaultFormData}
+        pTypeList={pTypeList}
+        visible={state.visible}
+        reloadTable={() => tRef.current?.reload()}
+        setVisible={(visible: boolean) => setState({ ...state, visible })}
+      />
+    </div>
   )
 }
 

src/services/api/index.ts

@@ -3,6 +3,8 @@
 // API 更新时间：
 // API 唯一标识：
 import * as project from './project'
+import * as institution from './institution'
 export default {
-  project
+  project,
+  institution
 }

src/services/api/institution.ts

@@ -0,0 +1,23 @@
+import { request } from 'umi'
+
+/** 企事业单位列表 */
+export async function queryInstitutionList(params: API.InstitutionListParams) {
+  return request('/Institution/list', {
+    method: 'POST',
+    data: params
+  })
+}
+/** 编辑企事业单位 */
+export async function updateInstitutionList(params: API.InstitutionUpdateParams) {
+  return request('/Institution/update', {
+    method: 'POST',
+    data: params
+  })
+}
+/** 新增企事业单位 */
+export async function addInstitution(params: API.InstitutionAddParams) {
+  return request('/Institution/update', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/api/typings.d.ts

@@ -50,4 +50,36 @@ declare namespace API {
     update_time?: string
     create_time?: string
   }
+
+  /** 事业单位列表 */
+  type InstitutionList = BasicFetchResult<InstitutionListItem>
+
+  type InstitutionListItem = {
+    name?: string
+    /** @name 简称 */
+    acronym?: string
+    /** @name 企业代码 */
+    enterprise_code?: string
+    /** @name 组织结构代码 */
+    organization_code?: string
+    bank?: string
+    bank_account?: string
+    phone?: string
+    address?: string
+    fax?: string
+    legal_person?: string
+    id_card?: string
+    create_time?: string
+    update_time?: string
+    id?: string
+  }
+
+  type InstitutionListParams = BasicPageParams & {
+    search?: string
+    institution_type_id?: string
+  }
+
+  type InstitutionAddParams = Omit<InstitutionListItem, 'create_time' | 'update_time' | 'id'>
+
+  type InstitutionUpdateParams = Omit<InstitutionListItem, 'create_time' | 'update_time'>
 }