feat: 1

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

@@ -0,0 +1,136 @@
+import { connect, useRequest } from 'umi'
+import { useEffect } from 'react'
+import { Button, message } from 'antd'
+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,
+  UPDATE = 1,
+  PREVIEW = 2
+}
+
+type ProjectModalProps = ConnectProps & {
+  visible: boolean
+  setVisible: (visible: boolean) => void
+  readOnly: boolean
+  type: ModalType
+  defaultFormData?: {
+    dataID: string
+  }
+  pTypeList: API.ProjectTypeList
+  reload: () => void
+  schema?: Record<string, any> | null
+}
+const ProjectModal: React.FC<ProjectModalProps> = ({
+  visible,
+  setVisible,
+  dispatch,
+  schema,
+  type,
+  defaultFormData,
+  pTypeList,
+  reload
+}) => {
+  const form = useForm()
+  useEffect(() => {
+    if (visible && !schema) {
+      dispatch({
+        type: 'schemaBase/querySchema',
+        payload: {
+          columnType: BaseMenuEnum.PROJECT
+        }
+      })
+    }
+  }, [visible])
+
+  const { run: tryUpdateProject } = useRequest(updateProject, {
+    manual: true,
+    onSuccess: () => {
+      message.success('更新成功')
+    }
+  })
+  const { run: tryAddProject } = useRequest(addProject, {
+    manual: true,
+    onSuccess: () => {
+      message.success('创建成功')
+    }
+  })
+
+  const onMount = async () => {
+    if (defaultFormData?.dataID) {
+      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)
+          })
+        })
+      }
+    }
+  }
+
+  const onFinish = async (formData, errors) => {
+    if (errors?.length) return
+    try {
+      // 执行表单提交
+      if (type === ModalType.ADD) {
+        await tryAddProject(formData)
+      } else {
+        await tryUpdateProject(formData)
+      }
+      setVisible(false)
+      reload()
+    } catch (error) {
+      message.error(error)
+    }
+  }
+  return (
+    <div className="mt-6">
+      {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>
+          <Button type="primary" onClick={form.submit}>
+            提交
+          </Button>
+        </div>
+      </Form> */}
+    </div>
+  )
+}
+
+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
+  })
+)(ProjectModal)