table select 代码

src/pages/order/assets/mock/DeliveryGoodTableSelectMock.ts

-export default [{
-  "skuId": "demoData",
-  "productNo": "demoData",
-  "orderProductId": 1,
-  "productName": "demoData",
-  "spec": "demoData",
-  "category": "demoData",
-  "brand": "demoData",
-  "unit": "demoData",
-  "purchaseCount": 1,
-  "receiveCount": 1,
-  "transitCount": 1,
-  "leftCount": 1,
-  "planCount": 1,
-  "orders": [{
-    "orderNo": "demoData",
+export default [
+  {
+    "skuId": "demoData",
+    "productNo": "demoData",
     "orderProductId": 1,
-    "orderDigest": "demoData",
+    "productName": "demoData",
+    "spec": "demoData",
+    "category": "demoData",
+    "brand": "demoData",
+    "unit": "demoData",
     "purchaseCount": 1,
     "receiveCount": 1,
     "transitCount": 1,
     "leftCount": 1,
     "planCount": 1,
-    "consigneeId": 1,
-    "consignee": "demoData",
-    "provinceName": "demoData",
-    "cityName": "demoData",
-    "districtName": "demoData",
-    "streetName": "demoData",
-    "address": "demoData",
-    "phone": "demoData"
-  }]
-}]
\ No newline at end of file
+    "orders": [
+      {
+        "orderNo": "demoData1",
+        "orderProductId": 1,
+        "orderDigest": "demoData",
+        "purchaseCount": 1,
+        "receiveCount": 1,
+        "transitCount": 1,
+        "leftCount": 1,
+        "planCount": 1,
+        "consigneeId": 1,
+        "consignee": "demoData",
+        "provinceName": "demoData",
+        "cityName": "demoData",
+        "districtName": "demoData",
+        "streetName": "demoData",
+        "address": "demoData",
+        "phone": "demoData"
+      },
+      {
+        "orderNo": "demoData2",
+        "orderProductId": 2,
+        "orderDigest": "demoData",
+        "purchaseCount": 1,
+        "receiveCount": 1,
+        "transitCount": 1,
+        "leftCount": 1,
+        "planCount": 1,
+        "consigneeId": 1,
+        "consignee": "demoData",
+        "provinceName": "demoData",
+        "cityName": "demoData",
+        "districtName": "demoData",
+        "streetName": "demoData",
+        "address": "demoData",
+        "phone": "demoData"
+      },
+      {
+        "orderNo": "demoData3",
+        "orderProductId": 3,
+        "orderDigest": "demoData",
+        "purchaseCount": 1,
+        "receiveCount": 1,
+        "transitCount": 1,
+        "leftCount": 1,
+        "planCount": 1,
+        "consigneeId": 1,
+        "consignee": "demoData",
+        "provinceName": "demoData",
+        "cityName": "demoData",
+        "districtName": "demoData",
+        "streetName": "demoData",
+        "address": "demoData",
+        "phone": "demoData"
+      }
+    ]
+  },
+  {
+    "skuId": "demoData",
+    "productNo": "demoData",
+    "orderProductId": 2,
+    "productName": "demoData",
+    "spec": "demoData",
+    "category": "demoData",
+    "brand": "demoData",
+    "unit": "demoData",
+    "purchaseCount": 1,
+    "receiveCount": 1,
+    "transitCount": 1,
+    "leftCount": 1,
+    "planCount": 1,
+    "orders": [
+      {
+        "orderNo": "demoData4",
+        "orderProductId": 4,
+        "orderDigest": "demoData",
+        "purchaseCount": 1,
+        "receiveCount": 1,
+        "transitCount": 1,
+        "leftCount": 1,
+        "planCount": 1,
+        "consigneeId": 1,
+        "consignee": "demoData",
+        "provinceName": "demoData",
+        "cityName": "demoData",
+        "districtName": "demoData",
+        "streetName": "demoData",
+        "address": "demoData",
+        "phone": "demoData"
+      },
+      {
+        "orderNo": "demoData5",
+        "orderProductId": 5,
+        "orderDigest": "demoData",
+        "purchaseCount": 1,
+        "receiveCount": 1,
+        "transitCount": 1,
+        "leftCount": 1,
+        "planCount": 1,
+        "consigneeId": 1,
+        "consignee": "demoData",
+        "provinceName": "demoData",
+        "cityName": "demoData",
+        "districtName": "demoData",
+        "streetName": "demoData",
+        "address": "demoData",
+        "phone": "demoData"
+      },
+      {
+        "orderNo": "demoData6",
+        "orderProductId": 6,
+        "orderDigest": "demoData",
+        "purchaseCount": 1,
+        "receiveCount": 1,
+        "transitCount": 1,
+        "leftCount": 1,
+        "planCount": 1,
+        "consigneeId": 1,
+        "consignee": "demoData",
+        "provinceName": "demoData",
+        "cityName": "demoData",
+        "districtName": "demoData",
+        "streetName": "demoData",
+        "address": "demoData",
+        "phone": "demoData"
+      }
+    ]
+  }
+]
\ No newline at end of file

src/pages/order/components/DeliveryGoodTableSelect/DeliveryGoodTableSelect.tsx

@@ -3,6 +3,7 @@ import { isNull } from "lodash";
 import { useCallback, useEffect, useLayoutEffect, useState } from "react";
 import DeliveryNoticeOrderFactory from "../../assets/handles/DeliveryNoticeOrder";
 import { PlannedDeliveryMaterialExpandableTableColumn, PlannedDeliveryMaterialTableColumn } from "../../constants/page-table-column";
+import ExpandedRowTableRender from "./ExpandedRowTableRender";
 
 function DeliveryGoodTableModal() {
 
@@ -10,10 +11,21 @@ function DeliveryGoodTableModal() {
     const service = DeliveryNoticeOrderFactory.getInstance()
     const [tableData, setTableData] = useState([])
 
+    const selectedRowKeys = new Map()
+
     const handleVisible = useCallback(() => {
         setVisible(true)
     }, [visible])
 
+    const handleSubmit = useCallback(() => {
+        let result = []
+        for (const v of selectedRowKeys) {
+            result.push(...v[1])
+        }
+        console.log(result);
+        // setVisible(false)
+    }, [visible])
+
     useEffect(() => {
         service.getOrderDeliveryPlanProduct().then(res => {
             if (isNull(res)) return;
@@ -22,14 +34,18 @@ function DeliveryGoodTableModal() {
         })
     }, [])
 
-    const expandedRowRender = () => {
+    const expandedRowRender = (record, index) => {
         return (
-            <Table columns={PlannedDeliveryMaterialExpandableTableColumn} />
+            <ExpandedRowTableRender
+                row={index}
+                dataSource={record.orders}
+                onChange={(keys, index) => {
+                    selectedRowKeys.set(index, keys);
+                }}
+            />
         );
     }
 
-
-
     return (
         <>
             <div className='mt-16'>
@@ -41,10 +57,16 @@ function DeliveryGoodTableModal() {
                 visible={visible}
                 width="90vw"
                 onClose={() => { setVisible(false) }}
+                footer={
+                    <Button.Group>
+                        <Button type="primary" onClick={handleSubmit}>确认</Button>
+                    </Button.Group>
+                }
             >
 
                 <Table
                     columns={PlannedDeliveryMaterialTableColumn}
+                    rowKey={row=>row.orderProductId}
                     dataSource={tableData}
                     expandedRowRender={expandedRowRender}
                 />

src/pages/order/components/DeliveryGoodTableSelect/ExpandedRowTableRender.tsx

+import { Table } from "antd";
+import { useState } from "react";
+import { PlannedDeliveryMaterialExpandableTableColumn } from "../../constants/page-table-column";
+
+/**
+ * 子table渲染
+ * @param dataSource 
+ * @param row 下标index
+ * @param selectedRowKeys 勾选的值 callback func
+ */
+interface ExpandedRowTableRenderProps {
+  dataSource: any[],
+  row?: number,
+  onChange?: (selectedRowKeys, index?: number) => void
+}
+
+function ExpandedRowTableRender(props: ExpandedRowTableRenderProps) {
+
+  const { row = 0, onChange } = props;
+
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+
+  const onSelectChange = (selectedRowKeys: any[]) => {
+    setSelectedRowKeys(selectedRowKeys)
+    let result = props.dataSource.filter(v => selectedRowKeys.includes(v.orderProductId));
+    onChange(result, row)
+  };
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+
+  return (
+    <Table
+      rowSelection={rowSelection}
+      dataSource={props.dataSource}
+      rowKey={record => record.orderNo}
+      columns={PlannedDeliveryMaterialExpandableTableColumn}
+      pagination={false}
+    />
+  );
+
+}
+
+export default ExpandedRowTableRender
\ No newline at end of file

src/pages/order/constants/page-table-column.tsx

@@ -51,29 +51,29 @@ export const DeliveryNoticeTableColumn: any = [
 
 // 计划送货物料表格
 export const PlannedDeliveryMaterialTableColumn: any = [
-  { dataIndex: 'name1', width: 80, ...MaterialNoColumn, },
-  { dataIndex: 'name2', width: 192, ...MaterialNameColumn, },
-  { dataIndex: 'name3', width: 128, ...MaterialModelColumn, },
-  { dataIndex: 'name4', width: 96, ...ClassColumn, },
-  { dataIndex: 'name5', width: 96, ...BrandColumn, },
-  { dataIndex: 'name6', width: 64, ...UntilColumn, },
-  { dataIndex: 'name7', width: 96, ...OredrNumColumn, },
-  { dataIndex: 'name8', width: 96, ...ConsigneeNumColumn, },
-  { dataIndex: 'name9', width: 96, ...TransitNumColumn, },
-  { dataIndex: 'name10', width: 96, ...DeliveredNumColumn, },
-  { dataIndex: 'name11', width: 128, ...PlannedDeliveryNumColumn, },
+  { dataIndex: 'skuId', width: 80, ...MaterialNoColumn, },
+  { dataIndex: 'productName', width: 192, ...MaterialNameColumn, },
+  { dataIndex: 'spec', width: 128, ...MaterialModelColumn, },
+  { dataIndex: 'category', width: 96, ...ClassColumn, },
+  { dataIndex: 'brand', width: 96, ...BrandColumn, },
+  { dataIndex: 'unit', width: 64, ...UntilColumn, },
+  { dataIndex: 'purchaseCount', width: 96, ...OredrNumColumn, },
+  { dataIndex: 'receiveCount', width: 96, ...ConsigneeNumColumn, },
+  { dataIndex: 'transitCount', width: 96, ...TransitNumColumn, },
+  { dataIndex: 'leftCount', width: 96, ...DeliveredNumColumn, },
+  { dataIndex: 'planCount', width: 128, ...PlannedDeliveryNumColumn, },
 ];
 
 // 计划送货物料子表格
 export const PlannedDeliveryMaterialExpandableTableColumn: any = [
-  { dataIndex: 'name1', ...OrderNoColumn, },
-  { dataIndex: 'name2', ...OrderSummaryColumn, },
-  { dataIndex: 'name3', ...OrderCreatedAtColumn, },
-  { dataIndex: 'name4', ...OredrNumColumn, },
-  { dataIndex: 'name5', ...ConsigneeNumColumn, },
-  { dataIndex: 'name6', ...TransitNumColumn, },
-  { dataIndex: 'name7', ...DeliveredNumColumn, },
-  { dataIndex: 'name8', ...PlannedDeliveryNumColumn, },
+  { dataIndex: 'orderNo', ...OrderNoColumn, },
+  { dataIndex: 'orderDigest', ...OrderSummaryColumn, },
+  { dataIndex: 'createTime', ...OrderCreatedAtColumn, },
+  { dataIndex: 'purchaseCount', ...OredrNumColumn, },
+  { dataIndex: 'receiveCount', ...ConsigneeNumColumn, },
+  { dataIndex: 'transitCount', ...TransitNumColumn, },
+  { dataIndex: 'leftCount', ...DeliveredNumColumn, },
+  { dataIndex: 'planCount', ...PlannedDeliveryNumColumn, },
 ];
 
 //   // 外部单据流转记录

src/pages/order/deliveryNotice/manageSRM/index.tsx

@@ -19,6 +19,7 @@ import { deliveryNoticeManageSRMSchema } from './schema'
 import NoteFactoryService from '../../assets/handles/DeliveryNoteService'
 import dayjs from 'dayjs'
 import { TagStatus, TagStatusFactory } from '../../utils'
+import { Link } from 'umi'
 
 const DeliveryNoticeManageSRM: React.FC = () => {
   const ref = useRef<any>({})
@@ -28,9 +29,15 @@ const DeliveryNoticeManageSRM: React.FC = () => {
 
   const statusTxt = new Map([[1, '已提交'], [2, '已收货'], [3, '已作废']]);
 
-  const controllerBtns = (<Space>
-    <Button type='primary' icon={<PlusOutlined />} href="/memberCenter/order/deliveryNotice/manageSRM/add">新增</Button>
-  </Space>)
+  const controllerBtns = (
+    <Space>
+      <Link to="/memberCenter/order/deliveryNotice/manageSRM/add">
+        <Button type='primary' icon={<PlusOutlined />}>
+          新增
+        </Button>
+      </Link>
+    </Space>
+  )
   const renderOptionButton = (record: any) => {
     const btnAuthOfOperationTextMap = {
       '修改': 'DevTest',