feat: 修改查看物流

src/pages/orderManage/pendingDeliveryOrder/index.jsx

@@ -64,15 +64,15 @@ const TableList = props => {
   const multiLogisticsModalRef = useRef();
   const actionRef = useRef();
   const ref = useRef(FormInstance);
-  const handleCom = async (record, skuItem) => {
+  const handleCom = async (skuInfo, expressInfo) => {
     const tempObj = {
-      expressCompanyCode: skuItem?.expressCompanyCode ?? '',
-      expressCompanyName: skuItem.expressCompanyName ?? '',
-      deliveryNo: skuItem?.deliveryNo ?? '',
+      expressCompanyCode: expressInfo?.expressCompanyCode ?? '',
+      expressCompanyName: expressInfo.expressCompanyName ?? '',
+      deliveryNo: expressInfo?.expressNo ?? '',
       detailList: [],
       key: Date.now(),
     };
-    const data = await getJDLogisticsInfo(skuItem.orderSkuId);
+    const data = await getJDLogisticsInfo(skuInfo.orderSkuId);
     if (!data) {
       notification.info({ message: '暂无物流信息' });
       return;
@@ -114,14 +114,51 @@ const TableList = props => {
   const renderContent = (record, key) => {
     if (record.mchOrderSkuVoList) {
       return record?.mchOrderSkuVoList.map((item, index) => (
-        <p
+        <div
           className={[
             'tableContent',
             index < record?.mchOrderSkuVoList?.length - 1 ? 'border' : null,
           ].join(' ')}
+          // style={{ height: `${(item.expressList?.length || 1) * 60}px` }}
           key={item.orderSkuId}
         >
           {key === 'skuName' ? <PopoverDom name={item[key]} url={item.imageUrl} /> : ''}
+          {key === 'expressCompanyName' ? (
+            <div className="expressList">
+              {item.expressList?.map((info, idx) => (
+                <span
+                  className={[
+                    'subContent',
+                    idx < item.expressList?.length - 1 ? 'border' : null,
+                  ].join(' ')}
+                >
+                  {info.expressCompanyName}
+                </span>
+              ))}
+            </div>
+          ) : (
+            ''
+          )}
+
+          {key === 'deliveryNo' ? (
+            <div className="expressList">
+              {item.expressList?.map((info, idx) => (
+                <a
+                  onClick={() => {
+                    handleCom(item, info);
+                  }}
+                  className={[
+                    'subContent',
+                    idx < item.expressList?.length - 1 ? 'border' : null,
+                  ].join(' ')}
+                >
+                  {info.expressNo}
+                </a>
+              ))}
+            </div>
+          ) : (
+            ''
+          )}
           {key === 'action' && props.type === 2 ? (
             <Button
               size="small"
@@ -130,12 +167,12 @@ const TableList = props => {
                 handleCom(record, item);
               }}
             >
-              查看物流
+              查看物流1
             </Button>
           ) : (
             item[key]
           )}
-        </p>
+        </div>
       ));
     }
     return '';
@@ -340,15 +377,15 @@ const TableList = props => {
       hideInSearch: true,
       render: (_, record) => renderContent(record, 'deliveryNo'),
     },
-    {
-      title: '物流信息',
-      dataIndex: 'action',
-      key: 'action',
-      width: 150,
-      hideInSearch: true,
-      className: 'colStyle',
-      render: (_, record) => renderContent(record, 'action'),
-    },
+    // {
+    //   title: '物流信息',
+    //   dataIndex: 'action',
+    //   key: 'action',
+    //   width: 150,
+    //   hideInSearch: true,
+    //   className: 'colStyle',
+    //   render: (_, record) => renderContent(record, 'action'),
+    // },
     {
       title: '订单状态',
       dataIndex: 'orderStatusDesc',

src/pages/orderManage/pendingDeliveryOrder/index.less

@@ -5,12 +5,25 @@
     .tableContent {
       display: flex;
       align-items: center;
-      height: 60px;
+      // height: 60px;
+      min-height: 60px;
       padding: 16px;
     }
     .border {
       border-bottom: 1px solid #e8e8e8;
     }
+
+    .subContent {
+      flex: 1;
+      padding: 16px;
+    }
+
+    .expressList {
+      display: flex;
+      flex-direction: column;
+      width: calc(100% + 32px);
+      margin: -16px;
+    }
     tbody .colStyle {
       padding: 0;
     }