修改表格样式

package.json

@@ -53,7 +53,9 @@
 		"@antv/data-set": "^0.10.2",
 		"antd": "^3.23.6",
 		"classnames": "^2.2.6",
+		"date-fns": "^2.16.1",
 		"dva": "^2.4.1",
+		"file-saver": "^2.0.5",
 		"lodash": "^4.17.11",
 		"moment": "^2.24.0",
 		"omit.js": "^1.0.2",

src/pages/orderManage/pendingDeliveryOrder/index.jsx

@@ -3,7 +3,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
 import LogisticsForm from './components/LogisticsForm';
-import OrderDetail from './components/OrderDetail';
 import style from './styles.less';
 import {
   queryToSend,
@@ -19,18 +18,30 @@ const TableList = props => {
   const [companys, setCompanys] = useState([]);
   const [LogisticsModalVisible, handleModalVisible] = useState(false);
   const [skuList, setSkuList] = useState([]);
-  const [rowKeys, setRowKeys] = useState([]);
   const [LogisticsData, setLogisticsData] = useState([{}]);
   const [QueryData, setQueryData] = useState({});
   const [ShowUpdateBtn] = useState([2, 5]);
 
   const actionRef = useRef();
+  const renderContent = (record, key) =>
+    record.mchOrderSkuVoList.map((item, index) => (
+      <td
+        className={[
+          'tableContent',
+          index < record.mchOrderSkuVoList.length - 1 ? 'border' : null,
+        ].join(' ')}
+      >
+        {item[key]}
+      </td>
+    ));
   const columns = [
     {
       title: '订单ID',
       dataIndex: 'orderNo',
       key: 'orderNo',
       order: 6,
+      width: 250,
+      fixed: 'left',
     },
     {
       title: '商品名称',
@@ -44,31 +55,88 @@ const TableList = props => {
       dataIndex: 'orderTime',
       key: 'orderTime',
       hideInSearch: true,
+      width: 200,
     },
     {
       title: '收货人手机',
       dataIndex: 'receiverPhone',
       key: 'receiverPhone',
       order: 4,
+      width: 150,
     },
     {
       title: '收货人姓名',
       dataIndex: 'receiverName',
       key: 'receiverName',
       order: 3,
+      width: 120,
     },
     {
       title: '收货地址',
       dataIndex: 'fullAddress',
       key: 'fullAddress',
       hideInSearch: true,
-      width: 160,
+      width: 350,
+    },
+    {
+      title: '商品自编码',
+      dataIndex: 'orderSkuId',
+      key: 'orderSkuId',
+      width: 120,
+      hideInSearch: true,
+      className: 'colStyle',
+      render: (_, record) => renderContent(record, 'orderSkuId'),
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'skuName',
+      key: 'skuName',
+      width: 400,
+      className: 'colStyle',
+      hideInSearch: true,
+      render: (_, record) => renderContent(record, 'skuName'),
+    },
+    {
+      title: '商品规格',
+      dataIndex: 'skuAttr',
+      key: 'skuAttr',
+      width: 100,
+      className: 'colStyle',
+      hideInSearch: true,
+      render: (_, record) => renderContent(record, 'skuAttr'),
+    },
+    {
+      title: '商品数量',
+      dataIndex: 'count',
+      key: 'count',
+      width: 100,
+      className: 'colStyle',
+      hideInSearch: true,
+      render: (_, record) => renderContent(record, 'count'),
+    },
+    {
+      title: '物流公司',
+      dataIndex: 'expressCompanyName',
+      key: 'expressCompanyName',
+      width: 100,
+      className: 'colStyle',
+      hideInSearch: true,
+      render: (_, record) => renderContent(record, 'expressCompanyName'),
+    },
+    {
+      title: '物流单号',
+      dataIndex: 'deliveryNo',
+      key: 'deliveryNo',
+      width: 180,
+      className: 'colStyle',
+      hideInSearch: true,
+      render: (_, record) => renderContent(record, 'deliveryNo'),
     },
     {
       title: '订单状态',
       dataIndex: 'orderStatus',
       key: 'orderStatus',
-      width: 200,
+      width: 100,
       hideInSearch: true,
       valueEnum: {
         12: '待发货',
@@ -95,7 +163,8 @@ const TableList = props => {
       dataIndex: 'option',
       key: 'option',
       valueType: 'option',
-      width: 120,
+      width: 150,
+      fixed: 'right',
       render: (_, record) => (
         <React.Fragment>
           {ShowUpdateBtn.includes(record.skuSource.value) ? null : (
@@ -140,23 +209,6 @@ const TableList = props => {
     };
     getCompanys();
   }, []);
-  const expandedRowRender = record => <OrderDetail value={record.mchOrderSkuVoList} />;
-  const getExpandId = data => {
-    const tableData = data.map(item => {
-      const temp = item;
-      temp.mchOrderSkuVoList = temp.mchOrderSkuVoList?.map(order => ({
-        ...order,
-        orderStatus: item.orderStatus,
-      }));
-      return temp;
-    });
-    setRowKeys(data.map(item => item.orderId));
-    return tableData;
-  };
-  const updateExpandId = (b, r) => {
-    const newExp = b ? [...rowKeys, r.orderId] : rowKeys.filter(i => i !== r.orderId);
-    setRowKeys(newExp);
-  };
   const uploadProps = {
     name: 'file',
     customRequest(info) {
@@ -214,7 +266,7 @@ const TableList = props => {
         onClick={() => {
           // eslint-disable-next-line no-unused-expressions
           form?.resetFields();
-          setQueryData({ logisticsStatus: 1 });
+          setQueryData({ logisticsStatus: props.type || 1 });
         }}
       >
         {resetText}
@@ -224,16 +276,14 @@ const TableList = props => {
   };
 
   const toolBarRenderFn = () => [
-    props.type === 2 ? null : (
-      <Button
-        type="primary"
-        onClick={() => {
-          downOrder(QueryData);
-        }}
-      >
-        导出数据
-      </Button>
-    ),
+    <Button
+      type="primary"
+      onClick={() => {
+        downOrder(QueryData);
+      }}
+    >
+      导出数据
+    </Button>,
   ];
   return (
     <PageHeaderWrapper>
@@ -242,16 +292,14 @@ const TableList = props => {
         actionRef={actionRef}
         request={params => queryToSendFn({ ...params })}
         columns={columns}
-        postData={getExpandId}
-        expandedRowRender={expandedRowRender}
-        expandedRowKeys={rowKeys}
         rowKey={r => r.orderId}
-        onExpand={updateExpandId}
         toolBarRender={toolBarRenderFn}
         search={{
           collapsed: false,
           optionRender: searchRender,
         }}
+        bordered
+        scroll={{ x: 1500 }}
       />
       <LogisticsForm
         onSubmit={reload}

src/pages/orderManage/pendingDeliveryOrder/service.js

 import { stringify } from 'querystring';
 import _ from 'lodash';
 import request from '@/utils/request';
+import { saveAs } from 'file-saver';
+import { format } from 'date-fns';
 import config from '../../../../config/env.config';
 
 // 待发货订单
@@ -24,7 +26,7 @@ export async function queryToSend(params) {
 
 // 快递公司
 export async function queryExpress() {
-  const { data = [] } = await request.get('/api/kdsp/op/express/list', {
+  const { data } = await request.get('/api/kdsp/op/express/list', {
     prefix: config.kdspApi,
   });
   return data;
@@ -61,8 +63,12 @@ export async function uploadFile(file) {
 export function downTemplate() {
   window.location.href = `${config.kdspApi}/api/kdsp/op/mch-order/import-mould-download`;
 }
-export function downOrder(params) {
-  window.location.href = `${config.kdspApi}/api/kdsp/op/mch-order/order-export?${stringify(
-    params,
-  )}`;
+export async function downOrder(params) {
+  const data = await request.post('/api/kdsp/op/mch-order/order-export', {
+    data: params,
+    prefix: config.kdspApi,
+    responseType: 'arrayBuffer',
+  });
+  const blob = new Blob([data]);
+  saveAs(blob, `商户订单列表-${format(new Date(), 'yyyyMMddHHmmss')}.xlsx`);
 }

src/pages/orderManage/pendingDeliveryOrder/styles.less

 .protable {
-  :global tr.ant-table-expanded-row {
-    background-color: #fff;
+  :global {
+    .tableContent {
+      display: flex;
+      align-items: flex-end;
+      height: 60px;
+      padding: 16px;
+    }
+    .border {
+      border-bottom: 1px solid #e8e8e8;
+    }
+    tbody .colStyle {
+      padding: 0;
+    }
   }
 }