fix: modal改成Drawer

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

@@ -0,0 +1,157 @@
+import { useRequest } from 'umi'
+import { useRef, useEffect } from 'react'
+import ProForm, { DrawerForm, ProFormText } from '@ant-design/pro-form'
+import { message } from 'antd'
+import type { FormInstance } from 'antd'
+import { addInstitution, updateInstitution } from '@/services/api/institution'
+
+export enum ModalType {
+  ADD = 0,
+  UPDATE = 1
+}
+
+type CompanyModalProps = {
+  visible: boolean
+  setVisible: (visible: boolean) => void
+  type: ModalType
+  defaultFormData?: API.InstitutionListItem
+  pTypeList: API.ProjectTypeList
+  reloadTable: () => void
+}
+
+const CompanyDrawer: React.FC<CompanyModalProps> = ({
+  visible,
+  setVisible,
+  type,
+  defaultFormData,
+  // pTypeList,
+  reloadTable
+}) => {
+  const ref = useRef<FormInstance>(null)
+  useEffect(() => {
+    defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
+  }, [defaultFormData])
+  const { run: tryUpdateInstitution } = useRequest(updateInstitution, {
+    manual: true,
+    onSuccess: () => {
+      message.success('更新成功')
+    }
+  })
+  const { run: tryAddInstitution } = useRequest(addInstitution, {
+    manual: true,
+    onSuccess: () => {
+      message.success('创建成功')
+    }
+  })
+
+  const handleOnFinish = () => {
+    ref.current?.validateFields().then(async values => {
+      try {
+        // 执行表单提交
+        if (type === ModalType.ADD) {
+          console.log('111')
+
+          await tryAddInstitution(values)
+        } else {
+          await tryUpdateInstitution(values)
+        }
+        setVisible(false)
+        reloadTable()
+        ref.current?.resetFields()
+      } catch (error) {
+        message.error(error)
+      }
+    })
+  }
+  return (
+    <DrawerForm
+      width="60vw"
+      formRef={ref}
+      visible={visible}
+      title={type === ModalType.ADD ? '新增企事业单位' : '编辑企事业单位'}
+      onVisibleChange={setVisible}
+      onFinish={() => handleOnFinish()}>
+      <ProForm.Group>
+        {type === ModalType.UPDATE ? <ProFormText width="md" name="ID" hidden /> : null}
+        <ProFormText
+          width="md"
+          name="name"
+          label="项目名称"
+          rules={[{ required: true, message: '请输入项目名称' }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="acronym"
+          label="简称"
+          rules={[{ required: true, message: '请输入简称' }]}
+        />
+        <ProFormText
+          width="md"
+          name="organizationCode"
+          label="组织架构代码"
+          rules={[{ required: true, message: '请输入组织架构代码' }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="bank"
+          label="银行"
+          rules={[{ required: true, message: '请输入银行' }]}
+        />
+        <ProFormText
+          width="md"
+          name="phone"
+          label="手机"
+          rules={[{ required: true, message: '请输入手机' }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="enterpriseCode"
+          label="企业代码"
+          rules={[{ required: true, message: '请输入企业代码' }]}
+        />
+        <ProFormText
+          width="md"
+          name="idCard"
+          label="身份证号码"
+          rules={[{ required: true, message: '请输入身份证号码' }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="bankAccount"
+          label="银行账号"
+          rules={[{ required: true, message: '请输入银行账号' }]}
+        />
+        <ProFormText
+          width="md"
+          name="legalPerson"
+          label="法人代表"
+          rules={[{ required: true, message: '请输入法人代表' }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="fax"
+          label="传真"
+          rules={[{ required: true, message: '请输入传真' }]}
+        />
+        <ProFormText
+          width="md"
+          name="address"
+          label="地址"
+          rules={[{ required: true, message: '请输入地址' }]}
+        />
+      </ProForm.Group>
+    </DrawerForm>
+  )
+}
+
+export default CompanyDrawer

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

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import ProTable from '@ant-design/pro-table'
 import consts from '@/utils/consts'
-import CompanyModal, { ModalType } from '../Detail/components/CompanyModal'
+// import CompanyModal, { ModalType } from '../Detail/components/CompanyModal'
 import { Button } from 'antd'
 import { useRef, useState, useEffect } from 'react'
 import { connect, history } from 'umi'
@@ -12,6 +12,7 @@ import type { ProjectModelState } from '../../model'
 import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
 import { PageContainer } from '@ant-design/pro-layout'
+import CompanyDrawer, { ModalType } from '../Detail/components/CompanyDrawer'
 // import CompanyName from './CompanyName'
 
 type ListProps = ConnectProps & {
@@ -178,8 +179,8 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
           actions: [
             <Button
               onClick={
-                () => history.push('/institutions/company/add', {})
-                // setState({ ...state, visible: true, currentModalType: ModalType.ADD })
+                () => setState({ ...state, visible: true, currentModalType: ModalType.ADD })
+                // history.push('/institutions/company/add', {})
               }>
               新建企事业单位
             </Button>
@@ -187,6 +188,14 @@ const CompanyList: React.FC<ListProps> = ({ base, dispatch, pTypeList }) => {
         }}
         search={false}
       />
+      <CompanyDrawer
+        type={state.currentModalType}
+        defaultFormData={state.defaultFormData}
+        pTypeList={pTypeList}
+        visible={state.visible}
+        reloadTable={() => tRef.current?.reload()}
+        setVisible={(visible: boolean) => setState({ ...state, visible })}
+      />
       {/* <CompanyModal
         type={state.currentModalType}
         defaultFormData={state.defaultFormData}

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

@@ -20,7 +20,7 @@ function DebounceSelect<
   defaultOptions,
   ...props
 }: DebounceSelectProps) {
-  console.log(val)
+  // console.log(val)
 
   const [state, setState] = useState<{ val?: string; fetching: boolean; options: ValueType[] }>({
     val,
@@ -54,7 +54,7 @@ function DebounceSelect<
       onChange(v)
     }
   }
-  console.log(state)
+  // console.log(state)
 
   return (
     <Select<ValueType>

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

@@ -0,0 +1,149 @@
+import ProForm, { DrawerForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
+import React, { useRef, useEffect } from 'react'
+import { message, Form } from 'antd'
+import { useRequest } from 'umi'
+import consts from '@/utils/consts'
+import type { FormInstance } from 'antd'
+import { addAccount, queryInstitutionList, updateAccount } from '@/services/api/institution'
+import DebounceSelect from './DebounceSelect'
+
+export enum ModalType {
+  ADD = 0,
+  UPDATE = 1
+}
+
+type StaffModalProps = {
+  visible: boolean
+  setVisible: (visible: boolean) => void
+  type: ModalType
+  defaultFormData?: API.AccountListItem
+  accountType: API.AccountType
+  reloadTable: () => void
+}
+
+const StaffDrawer: React.FC<StaffModalProps> = ({
+  visible,
+  setVisible,
+  type,
+  defaultFormData,
+  accountType,
+  // pTypeList,
+  reloadTable
+}) => {
+  const ref = useRef<FormInstance>(null)
+  useEffect(() => {
+    defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
+  }, [defaultFormData])
+
+  const { run: tryUpdateAccount } = useRequest(updateAccount, {
+    manual: true,
+    onSuccess: () => {
+      message.success('更新成功')
+    }
+  })
+
+  const { run: tryAddAccount } = useRequest(addAccount, {
+    manual: true,
+    onSuccess: () => {
+      message.success('创建成功')
+    }
+  })
+
+  const handleOnFinish = () => {
+    ref.current?.validateFields().then(async values => {
+      try {
+        // 执行表单提交
+        if (type === ModalType.ADD) {
+          await tryAddAccount(values)
+        } else {
+          await tryUpdateAccount(values)
+        }
+        setVisible(false)
+        reloadTable()
+        ref.current?.resetFields()
+      } catch (error) {
+        message.error(error)
+      }
+    })
+  }
+  const queryInstitutionOptions = async search => {
+    const { code = -1, data = {} } = await queryInstitutionList({
+      search,
+      current: 1,
+      pageSize: 100
+    })
+    if (code === consts.RET_CODE.SUCCESS) {
+      return data.items.map(item => ({ label: item.name, value: item.ID }))
+    }
+    return []
+  }
+  const { institution } = defaultFormData || {}
+  return (
+    <DrawerForm
+      width="60vw"
+      formRef={ref}
+      visible={visible}
+      title={type === ModalType.ADD ? '新增账号' : '编辑账号'}
+      onVisibleChange={setVisible}
+      onFinish={() => handleOnFinish()}>
+      <ProForm.Group>
+        <Form.Item
+          name="institutionID"
+          label="所属企事业单位"
+          rules={[{ required: true, message: '请选择企事业单位' }]}>
+          <DebounceSelect
+            fetchOptions={queryInstitutionOptions}
+            showSearch
+            defaultOptions={institution && [{ label: institution.name, value: institution.ID }]}
+          />
+        </Form.Item>
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="account"
+          label="账号"
+          rules={[{ required: true, message: '请输入账号' }]}
+        />
+        <ProFormText
+          width="md"
+          name="name"
+          label="姓名"
+          rules={[{ required: true, message: '请输入名称' }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText width="md" name="phone" label="手机号" />
+        <ProFormSelect
+          width="md"
+          name="accountType"
+          label="账号类型"
+          options={accountType.map(item => ({ label: item.name, value: item.value }))}
+          rules={[{ required: true, message: '请选择账号类型' }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        {type === ModalType.ADD && (
+          <ProFormText
+            width="md"
+            name="password"
+            label="密码"
+            rules={[{ required: true, message: '请输入密码' }]}
+          />
+        )}
+        <ProFormSelect
+          width="md"
+          name="gender"
+          label="性别"
+          options={[
+            { label: '男', value: 0 },
+            { label: '女', value: 1 }
+          ]}
+          rules={[{ required: true, message: '请选择性别' }]}
+        />
+      </ProForm.Group>
+    </DrawerForm>
+  )
+}
+
+export default StaffDrawer

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

@@ -106,12 +106,6 @@ const StaffModal: React.FC<StaffModalProps> = ({
             defaultOptions={institution && [{ label: institution.name, value: institution.ID }]}
           />
         </Form.Item>
-        {/* <ProFormSelect
-          labelCol={{ flex: '150px' }}
-          name="institutionID"
-          label="所属企事业单位"
-          rules={[{ required: true, message: '请选择企事业单位' }]}
-        /> */}
         <Row>
           <Col span={12}>
             <ProFormText

src/pages/Institutions/Staff/index.tsx

@@ -6,9 +6,10 @@ import { useRef, useState, useEffect } from 'react'
 import { connect } from 'umi'
 import type { ConnectProps } from 'umi'
 import type { InstitutionsModelState } from '../model'
-import StaffModal, { ModalType } from './components/StaffModal'
+// import StaffModal, { ModalType } from './components/StaffModal'
 import { queryAcountList } from '@/services/api/institution'
 import dayjs from 'dayjs'
+import StaffDrawer, { ModalType } from './components/StaffDrawer'
 
 type ListProps = ConnectProps & {
   accountType: API.AccountType[]
@@ -98,7 +99,7 @@ const CompanyList: React.FC<ListProps> = ({ dispatch, accountType }) => {
                 ...state,
                 visible: true,
                 currentModalType: ModalType.UPDATE,
-                defaultFormData: { ...record, institutionID: record.institution.ID }
+                defaultFormData: { ...record, institutionID: record.ID }
               })
             }}>
             编辑
@@ -151,7 +152,7 @@ const CompanyList: React.FC<ListProps> = ({ dispatch, accountType }) => {
         }}
         search={false}
       />
-      <StaffModal
+      <StaffDrawer
         type={state.currentModalType}
         defaultFormData={state.defaultFormData}
         visible={state.visible}
@@ -159,6 +160,14 @@ const CompanyList: React.FC<ListProps> = ({ dispatch, accountType }) => {
         reloadTable={() => tRef.current?.reload()}
         setVisible={(visible: boolean) => setState({ ...state, visible })}
       />
+      {/* <StaffModal
+        type={state.currentModalType}
+        defaultFormData={state.defaultFormData}
+        visible={state.visible}
+        accountType={accountType}
+        reloadTable={() => tRef.current?.reload()}
+        setVisible={(visible: boolean) => setState({ ...state, visible })}
+      /> */}
     </div>
   )
 }