fix: 详情代码去除Form

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

@@ -1,144 +0,0 @@
-import { useRequest } from 'umi'
-import { useRef, useEffect } from 'react'
-import ProForm, { ProFormText } from '@ant-design/pro-form'
-import { Col, message, Modal, Row } 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
-  reload: () => void
-}
-const CompanyModal: React.FC<CompanyModalProps> = ({
-  visible,
-  setVisible,
-  type,
-  defaultFormData,
-  // pTypeList,
-  reload
-}) => {
-  const layout = {
-    layout: 'horizontal',
-    labelCol: { flex: '100px' }
-  }
-  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)
-        reload()
-        ref.current?.resetFields()
-      } catch (error) {
-        message.error(error)
-      }
-    })
-  }
-  return (
-    <Modal
-      width="35vw"
-      visible={visible}
-      onCancel={() => {
-        ref.current?.resetFields()
-        setVisible(false)
-      }}
-      title={type === ModalType.ADD ? '新增企事业单位' : '编辑企事业单位'}
-      onOk={() => handleOnFinish()}>
-      <ProForm formRef={ref} submitter={{ render: false }} {...layout}>
-        {type === ModalType.UPDATE ? <ProFormText name="ID" hidden /> : null}
-        <ProFormText
-          name="name"
-          label="项目名称"
-          rules={[{ required: true, message: '请输入项目名称' }]}
-        />
-        <Row>
-          <Col span={12}>
-            <ProFormText
-              name="acronym"
-              label="简称"
-              rules={[{ required: true, message: '请输入简称' }]}
-            />
-            <ProFormText
-              name="organizationCode"
-              label="组织架构代码"
-              rules={[{ required: true, message: '请输入组织架构代码' }]}
-            />
-
-            <ProFormText
-              name="bank"
-              label="银行"
-              rules={[{ required: true, message: '请输入银行' }]}
-            />
-            <ProFormText
-              name="phone"
-              label="手机"
-              rules={[{ required: true, message: '请输入手机' }]}
-            />
-          </Col>
-          <Col span={12}>
-            <ProFormText
-              name="enterpriseCode"
-              label="企业代码"
-              rules={[{ required: true, message: '请输入企业代码' }]}
-            />
-            <ProFormText
-              name="idCard"
-              label="身份证号码"
-              rules={[{ required: true, message: '请输入身份证号码' }]}
-            />
-            <ProFormText
-              name="bankAccount"
-              label="银行账号"
-              rules={[{ required: true, message: '请输入银行账号' }]}
-            />
-            <ProFormText
-              name="legalPerson"
-              label="法人代表"
-              rules={[{ required: true, message: '请输入法人代表' }]}
-            />
-          </Col>
-        </Row>
-        <ProFormText name="fax" label="传真" rules={[{ required: true, message: '请输入传真' }]} />
-        <ProFormText
-          name="address"
-          label="地址"
-          rules={[{ required: true, message: '请输入地址' }]}
-        />
-      </ProForm>
-    </Modal>
-  )
-}
-
-export default CompanyModal

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

@@ -1,7 +1,7 @@
 import { connect, useRequest } from 'umi'
 import { useEffect } from 'react'
 import FormRender, { useForm } from 'form-render'
-import { Form, message, Button } from 'antd'
+import { message, Button } from 'antd'
 import { addInstitution, updateInstitution } from '@/services/api/institution'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
 import { ModalType } from '@/utils/enum'
@@ -84,14 +84,20 @@ const CompanyDrawer: React.FC<CompanyModalProps> = ({
         {type === ModalType.ADD ? '新增企事业单位' : null}
         {type === ModalType.UPDATE ? '编辑企事业单位' : null}
       </div>
-      <Form>
+      {schema && <FormRender form={form} schema={schema} onFinish={onFinish} onMount={onMount} />}
+      <div className="ml-120px">
+        <Button type="primary" onClick={form.submit}>
+          提交
+        </Button>
+      </div>
+      {/* <Form>
         {schema && <FormRender form={form} schema={schema} onFinish={onFinish} onMount={onMount} />}
         <div className="ml-120px">
           <Button type="primary" onClick={form.submit}>
             提交
           </Button>
         </div>
-      </Form>
+      </Form> */}
     </div>
   )
 }

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

@@ -10,7 +10,7 @@ import {
   queryOrganizationalStructureList
 } from '@/services/api/institution'
 import DebounceSelect from './DebounceSelect'
-import { delay } from '@/utils/util'
+// 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'
@@ -223,7 +223,29 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
         {type === ModalType.UPDATE ? '编辑账号' : null}
         {type === ModalType.PREVIEW ? '员工详情' : null}
       </div>
-      <Form>
+      {schema && (
+        <FormRender
+          form={form}
+          schema={schema}
+          onFinish={onFinish}
+          onMount={onMount}
+          readOnly={type === ModalType.PREVIEW ? true : false}
+          widgets={{ site: SiteInput }}
+          watch={watch}
+        />
+      )}
+      <div className="ml-120px">
+        {type !== ModalType.PREVIEW && (
+          <Button
+            type="primary"
+            onClick={() => {
+              form.submit()
+            }}>
+            提交
+          </Button>
+        )}
+      </div>
+      {/* <Form>
         {schema && (
           <FormRender
             form={form}
@@ -246,7 +268,7 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
             </Button>
           )}
         </div>
-      </Form>
+      </Form> */}
     </div>
   )
 }

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

@@ -8,7 +8,7 @@ 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 ProForm, { ProFormSelect } from '@ant-design/pro-form'
+import ProForm from '@ant-design/pro-form'
 import TreeNodeSelect from './TreeNodeSelect'
 import { ModalType } from '@/utils/enum'
 import consts from '@/utils/consts'

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

@@ -1,6 +1,6 @@
 import { connect, useRequest } from 'umi'
 import { useEffect } from 'react'
-import { Button, Form, message } from 'antd'
+import { Button, message } from 'antd'
 import { addProject, updateProject } from '@/services/api/project'
 import { delay } from '@/utils/util'
 import FormRender, { useForm } from 'form-render'
@@ -106,16 +106,24 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
         {type === ModalType.ADD ? '新增项目' : null}
         {type === ModalType.UPDATE ? '编辑项目' : null}
       </div>
-      <Form>
+      {schema && <FormRender form={form} schema={schema} onFinish={onFinish} onMount={onMount} />}
+      <div className="ml-120px">
+        {/* * 重置会导致下拉框的options丢失
+          <Button onClick={() => form.setValues({})}>重置</Button> */}
+        <Button type="primary" onClick={form.submit}>
+          提交
+        </Button>
+      </div>
+      {/* <Form>
         {schema && <FormRender form={form} schema={schema} onFinish={onFinish} onMount={onMount} />}
         <div className="ml-120px">
-          {/** 重置会导致下拉框的options丢失 */}
-          {/* <Button onClick={() => form.setValues({})}>重置</Button> */}
+          * 重置会导致下拉框的options丢失
+          <Button onClick={() => form.setValues({})}>重置</Button>
           <Button type="primary" onClick={form.submit}>
             提交
           </Button>
         </div>
-      </Form>
+      </Form> */}
     </div>
   )
 }