feat: 代码优化

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

@@ -15,27 +15,23 @@ import type { ModalType } from '@/utils/enum'
 type ProjectModalProps = ConnectProps & {
   visible: boolean
   onVisibleChange: (visible: boolean) => void
-  readOnly: boolean
   type: ModalType
   defaultFormData?: {
     ID: string
     name: string
   }
-  reloadTable: () => void
+  reload: () => void
   schema?: Record<string, any> | null
 }
 const DetailModal: React.FC<ProjectModalProps> = ({
   visible,
   onVisibleChange,
-  readOnly,
   dispatch,
   schema,
   defaultFormData,
   pTypeList,
-  reloadTable
+  reload
 }) => {
-  // console.log(defaultFormData)
-
   const form = useForm()
   const ref = useRef<FormInstance>(null)
   const { TabPane } = Tabs
@@ -109,23 +105,27 @@ const DetailModal: React.FC<ProjectModalProps> = ({
     }
   }
 
-  const onFinish = async (formData, value, errors) => {
-    if (errors?.length) return
-    await trySetApproval({ ...formData, ...value, ID: defaultFormData.ID })
-    onVisibleChange(false)
-    reloadTable()
+  const onFinish = async formData => {
+    try {
+      await trySetApproval({ ...formData, ID: defaultFormData.ID })
+      onVisibleChange(false)
+      reload()
+      return true
+    } catch (error) {
+      console.log(error)
+      return false
+    }
   }
   return (
     <Tabs onChange={onChange}>
       <TabPane tab="项目信息" key="1">
-        {schema && <FormRender form={form} schema={schema} onMount={onMount} readOnly={readOnly} />}
+        {schema && <FormRender form={form} schema={schema} onMount={onMount} readOnly={true} />}
       </TabPane>
       <TabPane tab="审批流程" key="2">
         <ProForm
           formRef={ref}
           submitter={{ resetButtonProps: { style: { display: 'none' } } }}
-          onFinish={onFinish}
-        >
+          onFinish={onFinish}>
           <Form.Item label="上报人" name="accountID">
             <TreeNodeSelect />
             {/* <TreeSelect
@@ -147,47 +147,6 @@ const DetailModal: React.FC<ProjectModalProps> = ({
         </ProForm>
       </TabPane>
     </Tabs>
-    // <Drawer
-    //   width="50vw"
-    //   visible={visibles}
-    //   onClose={() => {
-    //     // ref.current?.resetFields()
-    //     setVisible(false)
-    //   }}
-    //   title={defaultFormData?.name}>
-    // <Tabs>
-    //   <TabPane tab="项目信息" key="1">
-    //     {schema && (
-    //       <FormRender form={form} schema={schema} onMount={onMount} readOnly={readOnly} />
-    //     )}
-    //   </TabPane>
-    //   <TabPane tab="审批流程" key="2">
-    //     <ProForm
-    //       formRef={ref}
-    //       submitter={{ resetButtonProps: { style: { display: 'none' } } }}
-    //       onFinish={onFinish}>
-    //       <ProFormSelect
-    //         name="accountID"
-    //         label={'上报人'}
-    //         placeholder="请选择上报人"
-    //         options={state.acountList.map(item => ({
-    //           label: item.name,
-    //           value: item.ID
-    //         }))}
-    //       />
-    //       <ProFormSelect
-    //         name="approvalID"
-    //         label={'审批流程'}
-    //         placeholder="请选择审批流程"
-    //         options={state.approvalList.map(item => ({
-    //           label: item.name,
-    //           value: item.ID
-    //         }))}
-    //       />
-    //     </ProForm>
-    //   </TabPane>
-    // </Tabs>
-    // </Drawer>
   )
 }
 

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

@@ -11,12 +11,13 @@ import type { ProjectModelState } from '../../model'
 
 export enum ModalType {
   ADD = 0,
-  UPDATE = 1
+  UPDATE = 1,
+  PREVIEW = 2
 }
 
 type ProjectModalProps = ConnectProps & {
-  visibles: boolean
-  setVisible: (visibles: boolean) => void
+  visible: boolean
+  setVisible: (visible: boolean) => void
   readOnly: boolean
   type: ModalType
   defaultFormData?: {
@@ -25,22 +26,22 @@ type ProjectModalProps = ConnectProps & {
     projectTypeID: string
   }
   pTypeList: API.ProjectTypeList
-  reloadTable: () => void
+  reload: () => void
   schema?: Record<string, any> | null
 }
 const ProjectModal: React.FC<ProjectModalProps> = ({
-  visibles,
+  visible,
   setVisible,
   dispatch,
   schema,
   type,
   defaultFormData,
   pTypeList,
-  reloadTable
+  reload
 }) => {
   const form = useForm()
   useEffect(() => {
-    if (visibles && !schema) {
+    if (visible && !schema) {
       dispatch({
         type: 'schemaBase/querySchema',
         payload: {
@@ -48,7 +49,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
         }
       })
     }
-  }, [visibles])
+  }, [visible])
 
   const { run: tryUpdateProject } = useRequest(updateProject, {
     manual: true,
@@ -86,7 +87,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
 
   const onFinish = async (formData, errors) => {
     if (errors?.length) return
-    console.log('formData:', formData, 'errors', errors)
     try {
       // 执行表单提交
       if (type === ModalType.ADD) {
@@ -95,7 +95,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
         await tryUpdateProject(formData)
       }
       setVisible(false)
-      reloadTable()
+      reload()
     } catch (error) {
       message.error(error)
     }
@@ -117,23 +117,6 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
         </div>
       </Form>
     </div>
-    // <Drawer
-    //   width="50vw"
-    //   visible={visibles}
-    //   onClose={() => {
-    //     // ref.current?.resetFields()
-    //     setVisible(false)
-    //   }}
-    //   title={type === ModalType.ADD ? '新增项目' : '编辑项目'}>
-    //   {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>
-    // </Drawer>
   )
 }
 

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

@@ -18,8 +18,6 @@ const TreeNodeSelect = ({ onChange, placeholder = '请选择', ...otherProps })
     tryAcountInstitutionList()
   }, [])
   const onNodeChange = (value, labelList) => {
-    console.log('labelList', labelList)
-
     onChange(value, { value, label: labelList[0] })
   }
   const renderTreeNodes = data =>
@@ -44,8 +42,7 @@ const TreeNodeSelect = ({ onChange, placeholder = '请选择', ...otherProps })
         treeNodeFilterProp="label"
         allowClear
         treeDefaultExpandAll
-        onChange={(value, labelList, extra) => onNodeChange(value, labelList, extra)}
-      >
+        onChange={(value, labelList, extra) => onNodeChange(value, labelList, extra)}>
         {renderTreeNodes(list)}
       </TreeSelect>
     )

src/pages/Project/Management/index.tsx

@@ -43,8 +43,6 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
       search: null
     },
     visible: false,
-    visibles: false,
-    readOnly: true,
     currentModalType: ModalType.ADD,
     defaultFormData: null
   })
@@ -67,7 +65,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
             setState({
               ...state,
               visible: true,
-              readOnly: true,
+              currentModalType: ModalType.PREVIEW,
               defaultFormData: {
                 ...record
                 // ID: record.ID,
@@ -77,8 +75,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
                 // approvalID: record.approval.ID
               }
             })
-          }}
-        >
+          }}>
           {text}
         </span>
       )
@@ -129,7 +126,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
             onClick={() => {
               setState({
                 ...state,
-                visibles: true,
+                visible: true,
                 currentModalType: ModalType.UPDATE,
                 defaultFormData: {
                   ...record
@@ -138,16 +135,14 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
                   // projectTypeID: record.projectType.ID
                 }
               })
-            }}
-          >
+            }}>
             编辑
           </div>
           <Popconfirm
             title="确认删除吗？"
             okText="确认"
             cancelText="取消"
-            onConfirm={() => tryDelProject({ ID: record.ID })}
-          >
+            onConfirm={() => tryDelProject({ ID: record.ID })}>
             <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
               <DeleteOutlined />
             </div>
@@ -157,6 +152,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
     }
   ]
 
+  const onAnimateChange = visible => setState({ ...state, visible })
   return (
     <PageContainer title={false}>
       <ProTable<API.ProjectListItem>
@@ -186,9 +182,8 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
             <Button
               type="primary"
               onClick={() =>
-                setState({ ...state, visibles: true, currentModalType: ModalType.ADD })
-              }
-            >
+                setState({ ...state, visible: true, currentModalType: ModalType.ADD })
+              }>
               新建项目
             </Button>
           ]
@@ -196,30 +191,24 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
         search={false}
       />
 
-      <AnimateContent
-        visible={state.visibles}
-        onVisibleChange={visibles => setState({ ...state, visibles })}
-      >
-        <ProjectModal
-          type={state.currentModalType}
-          defaultFormData={state.defaultFormData}
-          pTypeList={pTypeList}
-          visibles={state.visibles}
-          reloadTable={() => tRef.current?.reload()}
-          setVisible={(visibles: boolean) => setState({ ...state, visibles })}
-        />
-      </AnimateContent>
-
-      <AnimateContent
-        visible={state.visible}
-        onVisibleChange={visible => setState({ ...state, visible })}
-      >
-        <Detail
-          defaultFormData={state.defaultFormData}
-          pTypeList={pTypeList}
-          readOnly={state.readOnly}
-          reloadTable={() => tRef.current?.reload()}
-        />
+      <AnimateContent visible={state.visible} onVisibleChange={onAnimateChange}>
+        {state.currentModalType === ModalType.PREVIEW ? (
+          <Detail
+            defaultFormData={state.defaultFormData}
+            pTypeList={pTypeList}
+            reload={() => tRef.current?.reload()}
+            onVisibleChange={onAnimateChange}
+          />
+        ) : (
+          <ProjectModal
+            type={state.currentModalType}
+            defaultFormData={state.defaultFormData}
+            pTypeList={pTypeList}
+            visible={state.visible}
+            reload={() => tRef.current?.reload()}
+            setVisible={onAnimateChange}
+          />
+        )}
       </AnimateContent>
     </PageContainer>
   )