feat: 完善查看关联请购单弹窗

src/pages/transaction/components/orderProductTable/index.tsx

@@ -4,7 +4,7 @@ import { OrderDetailContext } from '../../_public/order/context'
 import { EditOutlined } from '@ant-design/icons'
 import styled from 'styled-components'
 import MellowCard from '@/components/MellowCard'
-import RequisitionModalTable from '../../purchaseOrder/orderCollectSrm/components/requisitionModalTable'
+import RequisitionModalTable, { RequisitionModalTableRef } from '../../purchaseOrder/orderCollectSrm/components/requisitionModalTable'
 import { OrderKindType, OrderModalType } from '@/constants/order'
 import { AddressPop } from '../addressPop'
 import { getIntl } from 'umi'
@@ -183,7 +183,7 @@ const EditableCell: React.FC<EditableCellProps> = ({
 };
 
 const OrderProductTable:React.FC<OrderProductTableProps> = ({editable}) => {
-  const requisitionRef = useRef<any>({}) // 关联请购单
+  const requisitionRef = useRef<RequisitionModalTableRef | null>(null) // 关联请购单
   const { ctl, data, preview } = useContext(OrderDetailContext)
   const { product = [], orderMode, orderKind } = data || {}
   const creditsCommodity = (orderMode === 10 || orderMode === 25) // @todo 积分或渠道积分下单模式
@@ -436,17 +436,12 @@ const OrderProductTable:React.FC<OrderProductTableProps> = ({editable}) => {
         return orderMode === OrderModalType.PURCHASE_REQUISITION_CONTRACT_ORDER && <>
           <Button
             type="link"
-            onClick={ () => {
-              if (requisitionRef) {
-                requisitionRef.current.setCurrentMaterial(record)
-                requisitionRef.current.setVisible(true)
-              }
-            } }
+            onClick={() => requisitionRef.current?.show(record.requisitions || [])}
           >
             {/* 关联请购单 */}
             { intl.formatMessage({ id: 'transaction_components.guanlianqinggoudan' }) }
           </Button>
-          <RequisitionModalTable currentRef={requisitionRef}/>
+          <RequisitionModalTable ref={requisitionRef}/>
         </>
       },
       width: 152,

src/pages/transaction/purchaseOrder/orderCollectSrm/components/requisitionModalTable/index.tsx

-import React, { useEffect, useState } from 'react'
+import React, { useRef, useImperativeHandle } from 'react'
+import { useIntl } from 'umi'
 import ModalTable, { ModalTableProps } from '@/components/ModalTable'
-import { useModalTable } from '../../model/useModalTable'
 import { ISchemaFormActions, ISchemaFormAsyncActions } from '@formily/antd'
+import { getContractPurchaseRequisitionPageByProductIds, GetContractPurchaseRequisitionPageByProductIdsRequest } from '@/services/ContractV2Api'
 import { requisitionColumns } from '../../constant'
-import { getOrderBuyerFindRequisition } from '@/services/OrderNewV2Api'
-import { useIntl } from 'umi'
+import { useModalTable } from '../../model/useModalTable'
+
+type RequisitionType = {
+  /**
+   * 请购单id
+   */
+  requisitionId: number,
+  /**
+   * 下单数量
+   */
+  orderQuantity: number,
+}
 
-export interface ContractModalTableProps extends ModalTableProps {
+export interface RequisitionModalTableProps extends ModalTableProps {
   type?: 'radio' | 'checkbox',
   schemaAction?: ISchemaFormActions | ISchemaFormAsyncActions,
   currentRef?: any,
   confirmModal?()
 }
 
+export interface RequisitionModalTableRef {
+  show: (record: RequisitionType[]) => void,
+}
+
 // 关联请购单弹窗
-const RequisitionModalTable:React.FC<ContractModalTableProps> = (props) => {
+const RequisitionModalTable: React.ForwardRefRenderFunction<RequisitionModalTableRef, RequisitionModalTableProps> = (props, ref) => {
 
   const { type = 'radio', schemaAction, confirmModal, currentRef, ...restProps } = props
   const { visible, setVisible } = useModalTable({ type })
   const intl = useIntl()
 
-  const [currentMaterial, setCurrentMaterial] = useState<any>()
+  const requisitions = useRef<RequisitionType[]>([]);
 
   const fetchTableData = async (params) => {
-    if (currentMaterial) {
-      if (Array.isArray(currentMaterial.requisitionList)) {
-        // 参数有传列表数据进来，直接赋值给表格
-        return currentMaterial.requisitionList
-      } else {
-        // 参数没有传列表数据进来，则根据 商品id 请求 关联请购单
-        return (await getOrderBuyerFindRequisition({
-          ...params,
-          productId: currentMaterial.productId,
-        }, { useCache: true, ttl: 10 * 1000 })).data
+    const res = await getContractPurchaseRequisitionPageByProductIds({
+      prpIdsStr: requisitions.current.map((item) => item.requisitionId).join(','),
+    } as GetContractPurchaseRequisitionPageByProductIdsRequest)
+    if (res.code === 1000) {
+      const compountedData = res.data.data.map((item) => {
+        const currentEntity = requisitions.current.find((requisition) => requisition.requisitionId === item.prpId) || {}
+        return ({
+          ...item,
+          ...currentEntity,
+        })
+      })
+      return {
+        ...res.data,
+        data: compountedData,
       }
     }
+    return { data: [], totalCount: 0 }
   }
 
   /** 弹窗内 表格组件 参数 */
@@ -42,20 +62,19 @@ const RequisitionModalTable:React.FC<ContractModalTableProps> = (props) => {
     columns: requisitionColumns,
     fetchTableData,
     tableProps: {
-      rowKey: 'requisitionId',
+      rowKey: 'prpId',
       scroll: { x: 1200 },
     }
   }
 
-  useEffect(() => {
-    if (currentRef) {
-      currentRef.current = {
-        visible,
-        setVisible,
-        setCurrentMaterial,
-      }
-    }
-  }, [])
+  const handleShow = (records: RequisitionType[]) => {
+    requisitions.current = records;
+    setVisible(true);
+  };
+
+  useImperativeHandle(ref, () => ({
+    show: handleShow,
+  }))
 
   return (
     <ModalTable
@@ -76,6 +95,6 @@ const RequisitionModalTable:React.FC<ContractModalTableProps> = (props) => {
   )
 }
 
-RequisitionModalTable.defaultProps = {}
+const RequisitionModalTableForWard = React.forwardRef<RequisitionModalTableRef, RequisitionModalTableProps>(RequisitionModalTable);
 
-export default RequisitionModalTable
+export default RequisitionModalTableForWard

src/pages/transaction/purchaseOrder/orderCollectSrm/index.tsx

@@ -19,7 +19,7 @@ import { useMaterialTable } from './model/useMaterialTable'
 import { convertOrderMaterialData } from './utils';
 import ContractModalTable from './components/contractModalTable'
 import MaterialModalTable from './components/materialModalTable'
-import RequisitionModalTable from './components/requisitionModalTable'
+import RequisitionModalTable, { RequisitionModalTableRef } from './components/requisitionModalTable'
 import OrderMaterialsDrawer, { OrderMaterialsConfirmValue, OrderMaterialsDrawerRef } from './components/orderMaterialsDrawer'
 import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect'
 import { OrderModalType } from '@/constants/order'
@@ -99,7 +99,6 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
   const shopDataRef = useRef<any>({})
   const intl = useIntl()
   const contractOrderRef = useRef<any>({}) // 合同下单选采购合同
-  const requisitionRef = useRef<any>({}) // 关联请购单
   const [formLoading, setFormLoading] = useState(false)
   const [btnLoading, setBtnLoading] = useState(false)
   const update = useUpdate()
@@ -115,9 +114,10 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
     return resultState
   })
   const [visibleOrderMaterialsDrawer, setVisibleOrderMaterialsDrawer] = useState(false)
-
+  
   const { formContext } = useFormDetail()
-
+  
+  const requisitionRef = useRef<RequisitionModalTableRef | null>(null) // 关联请购单
   const orderMaterialsDrawerRef = useRef<OrderMaterialsDrawerRef | null>(null)
 
   const handleVisibleOrderMaterialsDrawer = (flag?: boolean) => {
@@ -439,7 +439,7 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
     {/* 选择采购物料 */}
     <MaterialModalTable currentRef={materialRef} schemaAction={addSchemaAction} sectionProps={surplusProps} />
     {/* 查看关联请购单 */}
-    <RequisitionModalTable currentRef={requisitionRef} schemaAction={addSchemaAction} />
+    <RequisitionModalTable ref={requisitionRef} schemaAction={addSchemaAction} />
 
     {/* 选择采购物料抽屉 */}
     <OrderMaterialsDrawer

src/pages/transaction/purchaseOrder/orderCollectSrm/model/useMaterialTable.tsx

@@ -7,6 +7,7 @@ import { useModalTable } from './useModalTable';
 import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
 import { useIntl } from 'umi';
 import { OrderModalType } from '@/constants/order';
+import { RequisitionModalTableRef } from '../components/requisitionModalTable';
 
 // 对象按key排序（运用于商城传过来的阶梯价格排序）
 export const sortByKey = (params) => {
@@ -29,7 +30,7 @@ export const getUnitPriceTotal = (record) => {
 export const useMaterialTable = (
   ctx: ISchemaFormActions | ISchemaFormAsyncActions,
   orderMode = ctx.getFieldValue('orderMode'),
-  requisitionRef?: React.MutableRefObject<any>,
+  requisitionRef?: React.MutableRefObject<RequisitionModalTableRef>,
   onClickAdd?: () => void,
   onDeleteRecord?: (record: any) => void,
 ) => {
@@ -69,12 +70,7 @@ export const useMaterialTable = (
         tempColumn[associatedIndex].render = (text, record) => (
           <Button
             type="link"
-            onClick={ () => {
-              if (requisitionRef) {
-                requisitionRef.current.setCurrentMaterial(record)
-                requisitionRef.current.setVisible(true)
-              }
-            } }
+            onClick={() => requisitionRef.current?.show(record.requisitions || [])}
           >
             关联请购单
           </Button>