fix: 111

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

@@ -1,39 +1,57 @@
-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 React, { useEffect } from 'react'
+import { message, Button, Drawer } from 'antd'
+import { connect, 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'
+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'
 
 export enum ModalType {
   ADD = 0,
   UPDATE = 1
 }
 
-type StaffModalProps = {
+type StaffModalProps = ConnectProps & {
   visible: boolean
   setVisible: (visible: boolean) => void
   type: ModalType
   defaultFormData?: API.AccountListItem
   accountType: API.AccountType
   reloadTable: () => void
+  schema?: Record<string, any> | null
 }
 
 const StaffDrawer: React.FC<StaffModalProps> = ({
   visible,
   setVisible,
+  schema,
+  dispatch,
   type,
   defaultFormData,
   accountType,
   // pTypeList,
   reloadTable
 }) => {
-  const ref = useRef<FormInstance>(null)
+  const form = useForm()
   useEffect(() => {
-    defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
-  }, [defaultFormData])
+    if (visible && !schema) {
+      dispatch({
+        type: 'schemaBase/querySchema',
+        payload: {
+          columnType: BaseMenuEnum.PROJECT
+        }
+      })
+    }
+  }, [visible])
+  // useEffect(() => {
+  //   defaultFormData && ref.current?.setFieldsValue({ ...defaultFormData })
+  // }, [defaultFormData])
 
   const { run: tryUpdateAccount } = useRequest(updateAccount, {
     manual: true,
@@ -49,23 +67,48 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
     }
   })
 
-  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 onMount = () => {
+    form.setValues({ ...defaultFormData })
+    delay().then(() => {
+      form.setSchemaByPath('projectTypeID', {
+        enum: pTypeList.map(item => item.value),
+        enumNames: pTypeList.map(item => item.label)
+      })
     })
   }
+
+  // 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 onFinish = async (formData, errors) => {
+    console.log('formData:', formData, 'errors', errors)
+    try {
+      // 执行表单提交
+      if (type === ModalType.ADD) {
+        await tryAddAccount(formData)
+      } else {
+        await tryUpdateAccount(formData)
+      }
+      setVisible(false)
+      reloadTable()
+    } catch (error) {
+      message.error(error)
+    }
+  }
   const queryInstitutionOptions = async search => {
     const { code = -1, data = {} } = await queryInstitutionList({
       search,
@@ -79,71 +122,27 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
   }
   const { institution } = defaultFormData || {}
   return (
-    <DrawerForm
-      width="60vw"
-      formRef={ref}
+    <Drawer
+      width="50vw"
       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>
+      onClose={() => {
+        // ref.current?.resetFields()
+        setVisible(false)
+      }}
+      title={type === ModalType.ADD ? '新增账号' : '编辑账号'}>
+      {schema && (
+        <FormRender form={form} schema={JSON.parse(schema)} onFinish={onFinish} onMount={onMount} />
+      )}
+      <div>
+        <Button onClick={form.submit}>提交</Button>
+      </div>
+    </Drawer>
   )
 }
 
-export default StaffDrawer
+export default connect(
+  ({ project, schemaBase }: { project: ProjectModelState; schemaBase: SchemaBaseModelState }) => ({
+    pTypeList: project.projectTypeList.map(item => ({ label: item.name, value: item.ID })),
+    schema: schemaBase.base[BaseMenuEnum.PROJECT]?.schema
+  })
+)(StaffDrawer)

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

@@ -37,6 +37,8 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
   pTypeList,
   reloadTable
 }) => {
+  console.log(pTypeList)
+
   const form = useForm()
   useEffect(() => {
     if (visible && !schema) {