chore: 更新tableList的antd&procomponent&umi的用法 (#10936)

* chore: 更新tableList的antd, procomponent,umi的用法

* chore: route component path   TableList -> table-list

config/routes.ts

@@ -142,7 +142,7 @@ export default [
         name: 'table-list',
         icon: 'smile',
         path: '/list/table-list',
-        component: './list/table-list',
+        component: './table-list',
       },
       {
         name: 'basic-list',

src/pages/table-list/components/CreateForm.tsx

@@ -0,0 +1,75 @@
+import { addRule } from '@/services/ant-design-pro/api';
+import { PlusOutlined } from '@ant-design/icons';
+import { ActionType, ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
+import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
+import { Button, message } from 'antd';
+import { FC } from 'react';
+
+interface CreateFormProps {
+  reload?: ActionType['reload'];
+}
+
+const CreateForm: FC<CreateFormProps> = (props) => {
+  const { reload } = props;
+
+  const [messageApi, contextHolder] = message.useMessage();
+  /**
+   * @en-US International configuration
+   * @zh-CN 国际化配置
+   * */
+  const intl = useIntl();
+
+  const { run, loading } = useRequest(addRule, {
+    manual: true,
+    onSuccess: () => {
+      messageApi.success('Added successfully');
+      reload?.();
+    },
+    onError: () => {
+      messageApi.error('Adding failed, please try again!');
+    },
+  });
+
+  return (
+    <>
+      {contextHolder}
+      <ModalForm
+        title={intl.formatMessage({
+          id: 'pages.searchTable.createForm.newRule',
+          defaultMessage: 'New rule',
+        })}
+        trigger={
+          <Button type="primary" icon={<PlusOutlined />}>
+            <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
+          </Button>
+        }
+        width="400px"
+        modalProps={{ okButtonProps: { loading } }}
+        onFinish={async (value) => {
+          await run({ data: value as API.RuleListItem });
+
+          return true;
+        }}
+      >
+        <ProFormText
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="pages.searchTable.ruleName"
+                  defaultMessage="Rule name is required"
+                />
+              ),
+            },
+          ]}
+          width="md"
+          name="name"
+        />
+        <ProFormTextArea width="md" name="desc" />
+      </ModalForm>
+    </>
+  );
+};
+
+export default CreateForm;

src/pages/table-list/components/UpdateForm.tsx

@@ -1,3 +1,4 @@
+import { updateRule } from '@/services/ant-design-pro/api';
 import {
   ProFormDateTimePicker,
   ProFormRadio,
@@ -6,9 +7,9 @@ import {
   ProFormTextArea,
   StepsForm,
 } from '@ant-design/pro-components';
-import { FormattedMessage, useIntl } from '@umijs/max';
+import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
-import { Modal } from 'antd';
+import { message, Modal } from 'antd';
-import React from 'react';
+import React, { cloneElement, useCallback, useState } from 'react';
 
 export type FormValueType = {
   target?: string;
@@ -19,15 +20,56 @@ export type FormValueType = {
 } & Partial<API.RuleListItem>;
 
 export type UpdateFormProps = {
-  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
+  trigger?: JSX.Element;
-  onSubmit: (values: FormValueType) => Promise<void>;
+  onOk?: () => void;
-  updateModalOpen: boolean;
   values: Partial<API.RuleListItem>;
 };
 
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const { onOk, values, trigger } = props;
+
   const intl = useIntl();
+
+  const [open, setOpen] = useState(false);
+
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const { run } = useRequest(updateRule, {
+    manual: true,
+    onSuccess: () => {
+      messageApi.success('Configuration is successful');
+      onOk?.();
+    },
+    onError: () => {
+      messageApi.error('Configuration failed, please try again!');
+    },
+  });
+
+  const onCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const onFinish = useCallback(
+    async (values?: any) => {
+      await run({ data: values });
+
+      onCancel();
+    },
+    [onCancel, run],
+  );
+
   return (
+    <>
+      {contextHolder}
+      {trigger
+        ? cloneElement(trigger, {
+            onClick: onOpen,
+          })
+        : null}
       <StepsForm
         stepsProps={{
           size: 'small',
@@ -42,23 +84,18 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
                 id: 'pages.searchTable.updateForm.ruleConfig',
                 defaultMessage: '规则配置',
               })}
-            open={props.updateModalOpen}
+              open={open}
               footer={submitter}
-            onCancel={() => {
+              onCancel={onCancel}
-              props.onCancel();
-            }}
             >
               {dom}
             </Modal>
           );
         }}
-      onFinish={props.onSubmit}
+        onFinish={onFinish}
       >
         <StepsForm.StepForm
-        initialValues={{
+          initialValues={values}
-          name: props.values.name,
-          desc: props.values.desc,
-        }}
           title={intl.formatMessage({
             id: 'pages.searchTable.updateForm.basicConfig',
             defaultMessage: '基本信息',
@@ -203,6 +240,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
           />
         </StepsForm.StepForm>
       </StepsForm>
+    </>
   );
 };
 

src/pages/table-list/index.tsx

@@ -1,103 +1,21 @@
-import { addRule, removeRule, rule, updateRule } from '@/services/ant-design-pro/api';
+import { removeRule, rule } from '@/services/ant-design-pro/api';
-import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
 import {
   FooterToolbar,
-  ModalForm,
   PageContainer,
   ProDescriptions,
-  ProFormText,
-  ProFormTextArea,
   ProTable,
 } from '@ant-design/pro-components';
-import { FormattedMessage, useIntl } from '@umijs/max';
+import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
 import { Button, Drawer, Input, message } from 'antd';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
-import type { FormValueType } from './components/UpdateForm';
+import CreateForm from './components/CreateForm';
 import UpdateForm from './components/UpdateForm';
 
-/**
- * @en-US Add node
- * @zh-CN 添加节点
- * @param fields
- */
-const handleAdd = async (fields: API.RuleListItem) => {
-  const hide = message.loading('正在添加');
-  try {
-    await addRule({ ...fields });
-    hide();
-    message.success('Added successfully');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('Adding failed, please try again!');
-    return false;
-  }
-};
-
-/**
- * @en-US Update node
- * @zh-CN 更新节点
- *
- * @param fields
- */
-const handleUpdate = async (fields: FormValueType) => {
-  const hide = message.loading('Configuring');
-  try {
-    await updateRule({
-      name: fields.name,
-      desc: fields.desc,
-      key: fields.key,
-    });
-    hide();
-
-    message.success('Configuration is successful');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('Configuration failed, please try again!');
-    return false;
-  }
-};
-
-/**
- *  Delete node
- * @zh-CN 删除节点
- *
- * @param selectedRows
- */
-const handleRemove = async (selectedRows: API.RuleListItem[]) => {
-  const hide = message.loading('正在删除');
-  if (!selectedRows) return true;
-  try {
-    await removeRule({
-      key: selectedRows.map((row) => row.key),
-    });
-    hide();
-    message.success('Deleted successfully and will refresh soon');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('Delete failed, please try again');
-    return false;
-  }
-};
-
 const TableList: React.FC = () => {
-  /**
+  const actionRef = useRef<ActionType>();
-   * @en-US Pop-up window of new window
-   * @zh-CN 新建窗口的弹窗
-   *  */
-  const [createModalOpen, handleModalOpen] = useState<boolean>(false);
-  /**
-   * @en-US The pop-up window of the distribution update window
-   * @zh-CN 分布更新窗口的弹窗
-   * */
-  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
 
   const [showDetail, setShowDetail] = useState<boolean>(false);
-
-  const actionRef = useRef<ActionType>();
   const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
   const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
 
@@ -107,6 +25,21 @@ const TableList: React.FC = () => {
    * */
   const intl = useIntl();
 
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const { run: delRun, loading } = useRequest(removeRule, {
+    manual: true,
+    onSuccess: () => {
+      setSelectedRows([]);
+      actionRef.current?.reloadAndRest?.();
+
+      messageApi.success('Deleted successfully and will refresh soon');
+    },
+    onError: () => {
+      messageApi.error('Delete failed, please try again');
+    },
+  });
+
   const columns: ProColumns<API.RuleListItem>[] = [
     {
       title: (
@@ -222,15 +155,16 @@ const TableList: React.FC = () => {
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
-        <a
+        <UpdateForm
-          key="config"
+          trigger={
-          onClick={() => {
+            <a>
-            handleUpdateModalOpen(true);
-            setCurrentRow(record);
-          }}
-        >
               <FormattedMessage id="pages.searchTable.config" defaultMessage="Configuration" />
-        </a>,
+            </a>
+          }
+          key="config"
+          onOk={actionRef.current?.reload}
+          values={record}
+        />,
         <a key="subscribeAlert" href="https://procomponents.ant.design/">
           <FormattedMessage
             id="pages.searchTable.subscribeAlert"
@@ -241,8 +175,32 @@ const TableList: React.FC = () => {
     },
   ];
 
+  /**
+   *  Delete node
+   * @zh-CN 删除节点
+   *
+   * @param selectedRows
+   */
+  const handleRemove = useCallback(
+    async (selectedRows: API.RuleListItem[]) => {
+      if (!selectedRows?.length) {
+        messageApi.warning('请选择删除项');
+
+        return;
+      }
+
+      await delRun({
+        data: {
+          key: selectedRows.map((row) => row.key),
+        },
+      });
+    },
+    [delRun],
+  );
+
   return (
     <PageContainer>
+      {contextHolder}
       <ProTable<API.RuleListItem, API.PageParams>
         headerTitle={intl.formatMessage({
           id: 'pages.searchTable.title',
@@ -253,17 +211,7 @@ const TableList: React.FC = () => {
         search={{
           labelWidth: 120,
         }}
-        toolBarRender={() => [
+        toolBarRender={() => [<CreateForm key="create" reload={actionRef.current?.reload} />]}
-          <Button
-            type="primary"
-            key="primary"
-            onClick={() => {
-              handleModalOpen(true);
-            }}
-          >
-            <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
-          </Button>,
-        ]}
         request={rule}
         columns={columns}
         rowSelection={{
@@ -292,10 +240,9 @@ const TableList: React.FC = () => {
           }
         >
           <Button
-            onClick={async () => {
+            loading={loading}
-              await handleRemove(selectedRowsState);
+            onClick={() => {
-              setSelectedRows([]);
+              handleRemove(selectedRowsState);
-              actionRef.current?.reloadAndRest?.();
             }}
           >
             <FormattedMessage
@@ -311,61 +258,6 @@ const TableList: React.FC = () => {
           </Button>
         </FooterToolbar>
       )}
-      <ModalForm
-        title={intl.formatMessage({
-          id: 'pages.searchTable.createForm.newRule',
-          defaultMessage: 'New rule',
-        })}
-        width="400px"
-        open={createModalOpen}
-        onOpenChange={handleModalOpen}
-        onFinish={async (value) => {
-          const success = await handleAdd(value as API.RuleListItem);
-          if (success) {
-            handleModalOpen(false);
-            if (actionRef.current) {
-              actionRef.current.reload();
-            }
-          }
-        }}
-      >
-        <ProFormText
-          rules={[
-            {
-              required: true,
-              message: (
-                <FormattedMessage
-                  id="pages.searchTable.ruleName"
-                  defaultMessage="Rule name is required"
-                />
-              ),
-            },
-          ]}
-          width="md"
-          name="name"
-        />
-        <ProFormTextArea width="md" name="desc" />
-      </ModalForm>
-      <UpdateForm
-        onSubmit={async (value) => {
-          const success = await handleUpdate(value);
-          if (success) {
-            handleUpdateModalOpen(false);
-            setCurrentRow(undefined);
-            if (actionRef.current) {
-              actionRef.current.reload();
-            }
-          }
-        }}
-        onCancel={() => {
-          handleUpdateModalOpen(false);
-          if (!showDetail) {
-            setCurrentRow(undefined);
-          }
-        }}
-        updateModalOpen={updateModalOpen}
-        values={currentRow || {}}
-      />
 
       <Drawer
         width={600}