feat(OrderList): 为 InvoicingDrawerForm 组件添加表格组件并实现行选择功能

- 在 InvoicingDrawerForm 组件中引入并使用 Table 组件 - 添加行选择功能，包括全选、反选和自定义选择项 - 实现表格警报渲染，显示已选行数、容器数量和调用量 - 添加表格警报选项，提供批量删除和导出数据功能

feat(OrderList): 为 InvoicingDrawerForm 组件添加表格组件并实现行选择功能
- 在 InvoicingDrawerForm 组件中引入并使用 Table 组件 - 添加行选择功能，包括全选、反选和自定义选择项 - 实现表格警报渲染，显示已选行数、容器数量和调用量 - 添加表格警报选项，提供批量删除和导出数据功能
曾国涛
1 parent c7c19fe2
Showing 1 changed file with 39 additions and 1 deletions
src/pages/Order/OrderList/InvoicingDrawerForm.tsx
@@ -31,7 +31,7 @@ import {
   ProFormText,
   ProFormTextArea,
 } from '@ant-design/pro-components';
-import { Button, Divider, Form, Space, Tooltip, message } from 'antd';
+import { Button, Divider, Form, Space, Table, Tooltip, message } from 'antd';
 import { useEffect, useRef, useState } from 'react';
  
 export default ({
@@ -141,6 +141,44 @@ export default ({
       drawerProps={{
         destroyOnClose: true,
       }}
+      rowSelection={{
+        // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
+        // 注释该行则默认不显示下拉选项
+        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+      }}
+      tableAlertRender={({
+        selectedRowKeys,
+        selectedRows,
+        onCleanSelected,
+      }) => {
+        console.log(selectedRowKeys, selectedRows);
+        return (
+          <Space size={24}>
+            <span>
+              已选 {selectedRowKeys.length} 项
+              <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+                取消选择
+              </a>
+            </span>
+            <span>{`容器数量: ${selectedRows.reduce(
+              (pre, item) => pre + item.containers,
+              0,
+            )} 个`}</span>
+            <span>{`调用量: ${selectedRows.reduce(
+              (pre, item) => pre + item.callNumber,
+              0,
+            )} 次`}</span>
+          </Space>
+        );
+      }}
+      tableAlertOptionRender={() => {
+        return (
+          <Space size={16}>
+            <a>批量删除</a>
+            <a>导出数据</a>
+          </Space>
+        );
+      }}
       submitter={{
         render: (props, defaultDoms) => {
           return [