fix: 对接送货计划协同

src/pages/order/components/CalendarModal/index.tsx

+/**
+ *  选择 日历 弹窗
+ * @author: Gavin
+ * @description: 
+ */
+import React, { useImperativeHandle, useState } from 'react'
+import moment from 'moment'
+import { Alert, Calendar, Modal } from 'antd'
+import { CalendarMode } from 'antd/lib/calendar/generateCalendar'
+
+
+interface CalendarModalProps {
+
+}
+
+const CalendarModal = React.forwardRef((props: CalendarModalProps, ref: React.Ref<unknown>) => {
+  const {} = props
+
+  const [visible, setVisible] = useState<boolean>(false)
+  const [dateValue, setDateValue] = useState<moment.Moment>(moment())
+
+  const onSelect = (date: moment.Moment) => {
+    setDateValue(date)
+  }
+
+  const onPanelChange = (date: moment.Moment, mode: CalendarMode) => {
+    setDateValue(date)
+  }
+
+  useImperativeHandle(ref, () => ({
+   test: () => {
+     console.log('恭喜您调用到我了 :>> ', )
+   }
+  }))
+
+  return (
+    <Modal
+      title={'选择日期'}
+      visible={visible}
+      width={1080}
+    >
+      <Alert message={`当前选择日期: ${dateValue.format('YYYY-MM-DD')}`} />
+      <Calendar value={dateValue} onSelect={onSelect} onPanelChange={onPanelChange} />
+    </Modal>
+  )
+})
+
+CalendarModal.defaultProps = {
+
+}
+
+export default CalendarModal
\ No newline at end of file

src/pages/order/deliveryPlanCollaboration/deliveryPlanQuery/details.tsx

@@ -3,21 +3,21 @@
  * @author: Gavin
  * @description: 
  */
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { history } from 'umi'
 import moment from 'moment'
 import _ from 'lodash'
 import AnchorPage, { AnchorsItem } from '@/components/AnchorPage'
-import { Button, Space, Spin, Steps, Table, Tag } from 'antd'
+import { Button, Modal, Space, Spin, Steps, Table, Tag } from 'antd'
 import { CheckCircleOutlined } from '@ant-design/icons'
 import BaseInfo from '@/components/BaseInfo/BaseInfo'
+import CalendarModal from '../../components/CalendarModal'
 import { BaseInfo as base_Info, Circulation, ConfirmDeliveryPlan, ExternalRoamRecord, ExternalState, PlanMaterial, PlanningCycle, PlanNumber, PlanSummary, Purchaser, Remarks, SubmitDeliveryPlan, Supplier, SupplyMember, SupplyMembersLabel, PlannedDelivery } from '../../constants'
 import { ExternalRoamRecordTableColumn } from '../../constants/page-table-column'
 import { BrandColumn, ClassColumn, CommodityNoColumn, ConsigneeNumColumn, DeliveredNumColumn, MaterialModelColumn, MaterialNameColumn, MaterialNoColumn, OrderCreatedAtColumn, OrderNoColumn, OrderNumColumn, OrderSummaryColumn, PlannedDeliveryNumColumn, TradeNameColumn, TransitNumColumn, UntilColumn } from '../../constants/table-column'
 import { getDayAll, godAtob, integrationArrToObj, integrationOjb, TagStatus } from '../../utils'
 import { getOrderDeliveryPlanDeliveryHistory, getOrderDeliveryPlanDetail, getOrderDeliveryPlanDetailProductPage } from '@/services/OrderNewV2Api'
 
-
 const columnB2B = [
   { ...CommodityNoColumn, dataIndex: 'skuId', width: 80, },
   { ...TradeNameColumn, dataIndex: 'productName', width: 192, },
@@ -47,12 +47,15 @@ const columnSRM = [
 const tagStatus = new TagStatus()
 const statusTxt = new Map([[1, '待提交'], [2, '待确认'], [3, '待修订'], [4, '已确认'], [5, '已删除']])
 
+const selectedTableItem = new Map()
 const DeliveryPlanCollaborationDetails: React.FC = () => {
   const { location: { query: { ty, i } } } = history
   // 1-B2B 2-SRM
   const deliveryPlanType = godAtob(ty as string)
   const id = godAtob(i as string)
 
+  const ref = useRef<any>()
+
   const [iAnchors, setIAnchors] = useState<AnchorsItem[]>([
     Circulation,
     base_Info,
@@ -80,8 +83,27 @@ const DeliveryPlanCollaborationDetails: React.FC = () => {
     { ...DeliveredNumColumn, dataIndex: 'leftCount', width: 96, },
     { ...PlannedDeliveryNumColumn, dataIndex: 'planCount', width: 128, },
   ])
+
+  const expandIconRowSelection = {
+    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
+      // TODO 挂坑 ---> rowKey由于数据返回可能不是唯一值, selectedRowKeys 后续可能出现重复
+      // console.log(`expandIconRowSelection -> selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+      const ids = selectedRows.map((item: any) => item.planOrderId)
+      selectedTableItem.set(selectedRowKeys[0], ids)
+    },
+  }
+
   const expandedRowRender = (record) => {
-    return <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" />
+    return (
+      <Table
+        rowKey={'orderProductId'}
+        columns={expandIconColumn}
+        dataSource={record.orders}
+        pagination={false}
+        tableLayout="fixed"
+        rowSelection={expandIconRowSelection}
+      />
+    )
   }
 
   //  计划周期 渲染日期
@@ -144,6 +166,7 @@ const DeliveryPlanCollaborationDetails: React.FC = () => {
   }
 
   // 生成通知单
+  
 
   // 生成送货单
 
@@ -161,7 +184,7 @@ const DeliveryPlanCollaborationDetails: React.FC = () => {
         extra={
           <Space>
             {/* 条件渲染 */}
-            <Button type='primary' icon={<CheckCircleOutlined />}>生成通知单</Button>
+            <Button type='primary' icon={<CheckCircleOutlined />} onClick={() => { console.log('ref --------:>> ', ref.current.test())  }}>生成通知单</Button>
             <Button type='primary' icon={<CheckCircleOutlined />}>生成送货单</Button>
           </Space>
         }
@@ -207,6 +230,9 @@ const DeliveryPlanCollaborationDetails: React.FC = () => {
           />
         </BaseInfo>
       </AnchorPage>
+      <CalendarModal 
+        ref={ref}
+      />
     </Spin>
   )
 }