feat: course10

src/pages/BasicList/builder/ActionBuilder.tsx

@@ -4,8 +4,8 @@ import type { ButtonType } from 'antd/lib/button';
 const ActionBuilder = (
   actions: BasicListApi.Action[] | undefined,
   actionHandler: BasicListApi.ActionHandler,
-  loading: boolean,
-  record: any,
+  loading = false,
+  record = {},
 ) => {
   return (actions || []).map((action) => {
     if (action.component === 'button') {

src/pages/BasicList/component/Modal.tsx

@@ -12,7 +12,7 @@ const Modal = ({
   modalUri,
 }: {
   modalVisible: boolean;
-  hideModal: () => void;
+  hideModal: (reload?: boolean) => void;
   modalUri: string;
 }) => {
   const [form] = Form.useForm();
@@ -46,7 +46,7 @@ const Modal = ({
           content: data.message,
           key: 'process',
         });
-        hideModal();
+        hideModal(true);
       },
       formatResult: (res: any) => {
         return res;
@@ -73,7 +73,6 @@ const Modal = ({
   };
 
   const onFinish = (values: any) => {
-    console.log(values);
     request.run(values);
   };
 
@@ -83,6 +82,12 @@ const Modal = ({
         form.setFieldsValue({ uri: action.uri, method: action.method });
         form.submit();
         break;
+      case 'cancel':
+        hideModal();
+        break;
+      case 'reset':
+        form.resetFields();
+        break;
 
       default:
         break;
@@ -94,7 +99,9 @@ const Modal = ({
       <AntdModal
         title={init?.data?.page?.title}
         visible={modalVisible}
-        onCancel={hideModal}
+        onCancel={() => {
+          hideModal();
+        }}
         footer={ActionBuilder(init?.data?.layout?.actions[0]?.data, actionHandler, request.loading)}
         maskClosable={false}
       >

src/pages/BasicList/index.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Row, Col, Card, Pagination, Space } from 'antd';
+import { Table, Row, Col, Card, Pagination, Space, Modal as AntdModal, message } from 'antd';
 import { useRequest } from 'umi';
-import { PageContainer } from '@ant-design/pro-layout';
+import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import ColumnBuilder from './builder/ColumnBuilder';
 import ActionBuilder from './builder/ActionBuilder';
 import Modal from './component/Modal';
@@ -13,33 +14,112 @@ const Index = () => {
   const [sortQuery, setSortQuery] = useState('');
   const [modalVisible, setModalVisible] = useState(false);
   const [modalUri, setModalUri] = useState('');
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [tableColumns, setTableColumns] = useState<BasicListApi.Field[]>([]);
+  const { confirm } = AntdModal;
+
   const init = useRequest<{ data: BasicListApi.ListData }>(
     `https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY=antd&page=${page}&per_page=${per_page}${sortQuery}`,
   );
 
+  const request = useRequest(
+    (values: any) => {
+      message.loading({ content: 'Processing...', key: 'process', duration: 0 });
+      const { uri, method, ...formValues } = values;
+      return {
+        url: `https://public-api-v2.aspirantzhang.com${uri}`,
+        method,
+        data: {
+          ...formValues,
+          'X-API-KEY': 'antd',
+        },
+      };
+    },
+    {
+      manual: true,
+      onSuccess: (data) => {
+        message.success({
+          content: data.message,
+          key: 'process',
+        });
+      },
+      formatResult: (res: any) => {
+        return res;
+      },
+    },
+  );
+
   useEffect(() => {
     init.run();
   }, [page, per_page, sortQuery]);
 
+  useEffect(() => {
+    if (init?.data?.layout?.tableColumn) {
+      setTableColumns(ColumnBuilder(init?.data?.layout?.tableColumn, actionHandler));
+    }
+  }, [init?.data?.layout?.tableColumn]);
+
   const searchLayout = () => {};
-  const actionHandler = (action: BasicListApi.Action) => {
+
+  const batchOverview = () => {
+    return (
+      <Table
+        size="small"
+        rowKey="id"
+        columns={[tableColumns[0] || {}, tableColumns[1] || {}]}
+        dataSource={selectedRows}
+        pagination={false}
+      />
+    );
+  };
+
+  function actionHandler(action: BasicListApi.Action, record: any) {
     switch (action.action) {
       case 'modal':
-        setModalUri(action.uri as string);
+        setModalUri(
+          action.uri?.replace(/:\w+/g, (field) => {
+            return record[field.replace(':', '')];
+          }) as string,
+        );
         setModalVisible(true);
         break;
+      case 'reload':
+        init.run();
+        break;
+      case 'delete':
+        confirm({
+          title: 'Are you sure delete this task?',
+          icon: <ExclamationCircleOutlined />,
+          content: batchOverview(),
+          okText: 'Sure to Delete!!!',
+          okType: 'danger',
+          cancelText: 'Cancel',
+          onOk() {
+            return request.run({
+              uri: action.uri,
+              method: action.method,
+              type: 'delete',
+              ids: selectedRowKeys,
+            });
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
+        break;
       default:
         break;
     }
-  };
+  }
   const beforeTableLayout = () => {
     return (
       <Row>
         <Col xs={24} sm={12}>
           ...
         </Col>
         <Col xs={24} sm={12} className={styles.tableToolbar}>
-          <Space>{ActionBuilder(init?.data?.layout?.tableToolBar, actionHandler, false)}</Space>
+          <Space>{ActionBuilder(init?.data?.layout?.tableToolBar, actionHandler)}</Space>
         </Col>
       </Row>
     );
@@ -80,6 +160,29 @@ const Index = () => {
     );
   };
 
+  const hideModal = (reload = false) => {
+    setModalVisible(false);
+    if (reload) {
+      init.run();
+    }
+  };
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (_selectedRowKeys: any, _selectedRows: any) => {
+      setSelectedRowKeys(_selectedRowKeys);
+      setSelectedRows(_selectedRows);
+    },
+  };
+
+  const batchToolbar = () => {
+    return (
+      selectedRowKeys.length > 0 && (
+        <Space>{ActionBuilder(init?.data?.layout?.batchToolBar, actionHandler)}</Space>
+      )
+    );
+  };
+
   return (
     <PageContainer>
       {searchLayout()}
@@ -88,20 +191,16 @@ const Index = () => {
         <Table
           rowKey="id"
           dataSource={init?.data?.dataSource}
-          columns={ColumnBuilder(init?.data?.layout?.tableColumn, actionHandler)}
+          columns={tableColumns}
           pagination={false}
           loading={init.loading}
           onChange={tableChangeHandler}
+          rowSelection={rowSelection}
         />
         {afterTableLayout()}
       </Card>
-      <Modal
-        modalVisible={modalVisible}
-        hideModal={() => {
-          setModalVisible(false);
-        }}
-        modalUri={modalUri}
-      />
+      <Modal modalVisible={modalVisible} hideModal={hideModal} modalUri={modalUri} />
+      <FooterToolbar extra={batchToolbar()} />
     </PageContainer>
   );
 };