优化订单查询

.eslintrc.js

@@ -7,5 +7,6 @@ module.exports = {
   },
   rules: {
     'max-len': ['error', { code: 200 }],
+    '@typescript-eslint/camelcase': ['off'],
   },
 };

config/config.js

+import slash from 'slash2';
 import defaultSettings from './defaultSettings'; // https://umijs.org/config/
 
-import slash from 'slash2';
 import webpackPlugin from './plugin.config';
+
 const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
 // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
 
@@ -91,6 +92,11 @@ export default {
               name: 'pendingDeliveryOrder',
               component: './orderManage/pendingDeliveryOrder',
             },
+            {
+              path: '/orderManage/deliveryOrder',
+              name: 'deliveryOrder',
+              component: './orderManage/deliveryOrder',
+            },
             {
               component: './404',
             },

src/pages/orderManage/deliveryOrder/index.jsx

+import React from 'react';
+import DeliverOrder from '../pendingDeliveryOrder';
+
+const TableList = () => <DeliverOrder type={2} />;
+
+export default TableList;

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsForm.jsx

@@ -8,33 +8,33 @@ const { Option } = Select;
 
 const LogisticsForm = props => {
   const { modalVisible, onCancel, companys = [], skuList, onSubmit } = props;
-  const { getFieldDecorator, resetFields } = props.form;
-  const [result, setResult] = useState([{}]);
-
+  const { getFieldDecorator } = props.form;
+  const [result, setResult] = useState(() => props.value);
   const formData = async (formDataList, fieldsValue, suffixes) => {
     // 数据聚合
     suffixes.forEach(suffixe => {
       const formObj = {};
-      for(let key in fieldsValue) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key in fieldsValue) {
         if (key.startsWith(suffixe)) {
-          formObj[key.split('-')[1]] = fieldsValue[key]; 
+          formObj[key.split('-')[1]] = fieldsValue[key];
         }
       }
       formDataList.push(formObj);
     });
 
     // 参数整合
-    const result = [];
+    const resultData = [];
     formDataList.forEach(data => {
       data.selectedGoods.forEach(orderSkuId => {
-        result.push({
-          orderSkuId: orderSkuId,
+        resultData.push({
+          orderSkuId,
           expressCompanyCode: data.selectedCompany.split('-')[0],
           expressCompanyName: data.selectedCompany.split('-')[1],
           deliveryNo: data.orderNum,
-        })
-      })
-    })
+        });
+      });
+    });
     // 校验重复商品
     let orderSkuIds = [];
     formDataList.forEach(data => {
@@ -49,36 +49,34 @@ const LogisticsForm = props => {
       notification.open({ message: '该订单下的所有商品必须设置物流信息！' });
       return;
     }
-
-    console.log(result);
-    await updateExpress(result);
+    await updateExpress(resultData);
     onSubmit();
-  }
+  };
 
   const handleSubmit = () => {
     props.form.validateFields((err, fieldsValue) => {
-      let suffixes = [], formDataList = [];
+      const suffixes = [];
+      const formDataList = [];
       if (err) return;
-      for(const key in fieldsValue) {
+      Object.keys(fieldsValue).forEach(key => {
         const suffixe = key.split('-')[0];
-        if(!suffixes.includes(suffixe)) suffixes.push(suffixe);
-      }
+        if (!suffixes.includes(suffixe)) suffixes.push(suffixe);
+      });
       formData(formDataList, fieldsValue, suffixes);
     });
-  }
+  };
 
   const addForm = () => {
-    setResult([...result, {}])
-  }
+    setResult([...result, {}]);
+  };
 
   const rmForm = () => {
     if (result.length === 1) return;
-    setResult(result.slice(0, result.length - 1))
-  }
-
-  const reset = () => {
-    setResult([{}]);
-  }
+    setResult(result.slice(0, result.length - 1));
+  };
+  useEffect(() => {
+    setResult(props.value);
+  }, props.value);
 
   return (
     <Modal
@@ -90,63 +88,65 @@ const LogisticsForm = props => {
       afterClose={() => setResult([{}])}
     >
       <Form>
-        {result && result.length &&
+        {result &&
+          result.length &&
           result.map((v, i) => (
-             <Card key={i}>
-                   <FormItem>
-                    {getFieldDecorator(`${i}-selectedGoods`, {
-                      rules: [
-                        {
-                          required: true,
-                          message: '请选择该订单下的商品!',
-                        },
-                      ],
-                    })(
-                      <Select
-                        mode="multiple"
-                        placeholder="请选择该订单下的商品"
-                      >
-                        {skuList.map(item => (
-                          <Option value={item.orderSkuId} key={item.orderSkuId}>
-                            {item.skuName + (item.skuAttr || '')}
-                          </Option>
-                        ))}
-                      </Select>,
-                    )}
-                  </FormItem>
-                  <FormItem>
-                    {getFieldDecorator(`${i}-selectedCompany`, {
-                        rules: [
-                          {
-                            required: true,
-                            message: '请选择物流公司!',
-                          },
-                        ],
-                      })(
-                      <Select
-                        showSearch
-                        placeholder="请选择物流公司"
+            // eslint-disable-next-line react/no-array-index-key
+            <Card key={i}>
+              <FormItem>
+                {getFieldDecorator(`${i}-selectedGoods`, {
+                  initialValue: v.selectedGoods,
+                  rules: [
+                    {
+                      required: true,
+                      message: '请选择该订单下的商品!',
+                    },
+                  ],
+                })(
+                  <Select mode="multiple" placeholder="请选择该订单下的商品">
+                    {skuList.map(item => (
+                      <Option value={item.orderSkuId} key={item.orderSkuId}>
+                        {item.skuName + (item.skuAttr || '')}
+                      </Option>
+                    ))}
+                  </Select>,
+                )}
+              </FormItem>
+              <FormItem>
+                {getFieldDecorator(`${i}-selectedCompany`, {
+                  initialValue: v.selectedCompany,
+                  rules: [
+                    {
+                      required: true,
+                      message: '请选择物流公司!',
+                    },
+                  ],
+                })(
+                  <Select showSearch placeholder="请选择物流公司">
+                    {companys.map(item => (
+                      <Option
+                        value={`${item.expressCompanyCode}-${item.expressCompanyName}`}
+                        key={item.expressCompanyCode}
                       >
-                        {companys.map(item => (
-                          <Option value={item.expressCompanyCode + '-' + item.expressCompanyName} key={item.expressCompanyCode}>
-                            {item.expressCompanyName}
-                          </Option>
-                        ))}
-                      </Select>,
-                    )}
-                  </FormItem>
-                  <FormItem>
-                    {getFieldDecorator(`${i}-orderNum`, {
-                      rules: [
-                        {
-                          required: true,
-                          message: '请填写物流单号!',
-                        },
-                      ],
-                    })(<Input placeholder="请填写物流单号" />)}
-                  </FormItem>
-                </Card>)
-          )}
+                        {item.expressCompanyName}
+                      </Option>
+                    ))}
+                  </Select>,
+                )}
+              </FormItem>
+              <FormItem>
+                {getFieldDecorator(`${i}-orderNum`, {
+                  initialValue: v.orderNum,
+                  rules: [
+                    {
+                      required: true,
+                      message: '请填写物流单号!',
+                    },
+                  ],
+                })(<Input placeholder="请填写物流单号" />)}
+              </FormItem>
+            </Card>
+          ))}
         <div className={style.logistics}>
           <Icon className={style.logisticsIcon} onClick={addForm} type="plus-circle" />
           <Icon className={style.logisticsIcon} onClick={rmForm} type="minus-circle" />

src/pages/orderManage/pendingDeliveryOrder/components/OrderDetail.jsx

 import React from 'react';
-import { Modal, Form, Select, Input, Table } from 'antd';
-
-const FormItem = Form.Item;
-const { Option } = Select;
+import { Table } from 'antd';
 
 const LogisticsForm = props => {
-  const { modalVisible, onCancel, value } = props;
-
+  const { value } = props;
   const columns = [
+    {
+      title: '商品自编码',
+      dataIndex: 'orderSkuId',
+      key: 'orderSkuId',
+      width: 250,
+    },
     {
       title: '商品名称',
       dataIndex: 'skuName',
@@ -15,45 +17,33 @@ const LogisticsForm = props => {
       width: 250,
     },
     {
-      title: '商品属性',
+      title: '商品规格',
       dataIndex: 'skuAttr',
       key: 'skuAttr',
-      width: 200,
+      width: 250,
     },
     {
-      title: '商品件数（件）',
+      title: '商品数量',
       dataIndex: 'count',
       key: 'count',
-      width: 150
+      width: 150,
     },
     {
       title: '物流公司',
       dataIndex: 'expressCompanyName',
       key: 'expressCompanyName',
-      width: 150
+      width: 150,
     },
     {
       title: '物流单号',
       dataIndex: 'deliveryNo',
       key: 'deliveryNo',
-      width: 150
-    }
+      width: 150,
+    },
   ];
-  const style = {
-    width: '900px'
-  };
   return (
-    <Modal
-      title="订单详情"
-      visible={modalVisible}
-      onCancel={() => onCancel()}
-      onOk={() => onCancel()}
-      bodyStyle={style}
-      width={900}
-    >
-      <Table columns={columns} dataSource={value} />
-    </Modal>
+    <Table columns={columns} dataSource={value} rowKey={r => r.orderSkuId} pagination={false} />
   );
 };
 
-export default Form.create()(LogisticsForm);
+export default LogisticsForm;

src/pages/orderManage/pendingDeliveryOrder/index.jsx

-import { Button, Divider, Dropdown, Icon, Menu, message, Table } from 'antd';
+import { Button, Upload, message } from 'antd';
 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 { queryToSend, queryExpress, getGoods } from './service';
+import {
+  queryToSend,
+  queryExpress,
+  getGoods,
+  uploadFile,
+  getLogistics,
+  downTemplate,
+  downOrder,
+} from './service';
 
-const TableList = () => {
+const TableList = props => {
   const [companys, setCompanys] = useState([]);
   const [LogisticsModalVisible, handleModalVisible] = useState(false);
-  const [detailModalVisible, handleDetailModalVisible] = useState(false);
   const [skuList, setSkuList] = useState([]);
+  const [rowKeys, setRowKeys] = useState([]);
+  const [LogisticsData, setLogisticsData] = useState([{}]);
+  const [QueryData, setQueryData] = useState({});
   const actionRef = useRef();
   const columns = [
     {
@@ -20,10 +30,11 @@ const TableList = () => {
       order: 6,
     },
     {
-      title: '商品渠道',
-      dataIndex: 'skuSource.desc',
-      key: 'skuSource.desc',
-      hideInSearch: true,
+      title: '商品名称',
+      dataIndex: 'skuName',
+      key: 'skuName',
+      order: 6,
+      hideInTable: true,
     },
     {
       title: '交易时间',
@@ -51,16 +62,15 @@ const TableList = () => {
       width: 160,
     },
     {
-      title: '物流状态',
-      dataIndex: 'logisticsStatus',
-      key: 'logisticsStatus',
-      filters: false,
+      title: '订单状态',
+      dataIndex: 'orderStatus',
+      key: 'orderStatus',
+      width: 200,
       valueEnum: {
-        '_3': '全部',
-        '_1': '未发货',
-        '_2': '已发货',
+        12: '待发货',
+        13: '待收货',
+        21: '订单完成',
       },
-      order: 5,
     },
     {
       title: '订单开始时间',
@@ -85,39 +95,37 @@ const TableList = () => {
       render: (_, record) => (
         <React.Fragment>
           {
-            record.skuSource.value !== 2 && record.logisticsStatus === '_1' ? (
-                <Button
-                  type="primary"
-                  style={
-                    {
-                      marginBottom: '10px',
-                    }
-                  }
-                  onClick={async () => {
-                    const skuList = await getGoods(record.orderId);
-                    setSkuList(skuList);
-                    handleModalVisible(true);
-                  }}
-                >
-                  更新物流信息
-                </Button>
-            ) : null
+            <Button
+              type="primary"
+              style={{
+                marginBottom: '10px',
+              }}
+              onClick={async () => {
+                const skuListData = await getGoods(record.orderId);
+                let logisticsData = [{}];
+                setSkuList(skuListData);
+                if (props.type === 2) {
+                  const data = await getLogistics(record.orderId);
+                  logisticsData = data.map(item => ({
+                    selectedGoods: item.skus.map(sku => sku.orderSkuId),
+                    selectedCompany: `${item.expressCompanyCode}-${item.expressCompanyName}`,
+                    orderNum: item.deliveryNo,
+                  }));
+                }
+                setLogisticsData(logisticsData);
+                handleModalVisible(true);
+              }}
+            >
+              更新物流信息
+            </Button>
           }
-          <Button 
-            type="primary" 
-            onClick={async () => {
-              const skuList = await getGoods(record.orderId);
-              console.log('skuList', skuList);
-              setSkuList(skuList);
-              handleDetailModalVisible(true);
-            }}>查看订单详情</Button>
         </React.Fragment>
       ),
     },
   ];
 
   const reload = () => {
-    handleModalVisible(false)
+    handleModalVisible(false);
     if (actionRef.current) {
       actionRef.current.reload();
     }
@@ -130,19 +138,131 @@ const TableList = () => {
     };
     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) {
+      uploadFile(info.file);
+    },
+    accept: '.xlsx',
+    showUploadList: false,
+    onChange(info) {
+      if (info.file.status === 'done') {
+        message.success(`${info.file.name}导入成功`);
+      } else if (info.file.status === 'error') {
+        message.error(`${info.file.name}导入失败`);
+      }
+    },
+  };
 
+  const queryToSendFn = params => {
+    const transformedParam = {
+      ...params,
+      logisticsStatus: props.type || 1,
+      startTime: params.beginTime,
+      pageNo: params.current,
+      pageSize: params.pageSize || 20,
+    };
+    setQueryData(transformedParam);
+    return queryToSend(transformedParam);
+  };
+  const searchRender = ({ searchText, resetText }, { form }) => {
+    const exportBtn = [
+      <Upload {...uploadProps}>
+        <Button type="primary" style={{ marginRight: '10px' }} key="export">
+          导入
+        </Button>
+      </Upload>,
+      <Button
+        type="primary"
+        key="exportTemplate"
+        onClick={downTemplate}
+        style={{ marginRight: '10px' }}
+      >
+        导入模板下载
+      </Button>,
+    ];
+    return [
+      <Button
+        key="search"
+        type="primary"
+        style={{ marginRight: '10px' }}
+        onClick={() => {
+          // eslint-disable-next-line no-unused-expressions
+          form?.submit();
+        }}
+      >
+        {searchText}
+      </Button>,
+      <Button
+        key="rest"
+        style={{ marginRight: '10px' }}
+        onClick={() => {
+          // eslint-disable-next-line no-unused-expressions
+          form?.resetFields();
+        }}
+      >
+        {resetText}
+      </Button>,
+      props.type === 2 ? null : [...exportBtn],
+    ];
+  };
+
+  const toolBarRenderFn = () => [
+    props.type === 2 ? null : (
+      <Button
+        type="primary"
+        onClick={() => {
+          downOrder(QueryData);
+        }}
+      >
+        导出数据
+      </Button>
+    ),
+  ];
   return (
     <PageHeaderWrapper>
       <ProTable
         actionRef={actionRef}
-        request={(params, sorter, filter) => queryToSend({ ...params })}
+        request={params => queryToSendFn({ ...params })}
         columns={columns}
-        search={{ collapsed: false, collapseRender: () => null }}
+        postData={getExpandId}
+        expandedRowRender={expandedRowRender}
+        expandedRowKeys={rowKeys}
+        rowKey={r => r.orderId}
+        onExpand={updateExpandId}
+        toolBarRender={toolBarRenderFn}
+        search={{
+          collapsed: false,
+          optionRender: searchRender,
+        }}
+      />
+      <LogisticsForm
+        onSubmit={reload}
+        skuList={skuList}
+        companys={companys}
+        onCancel={() => handleModalVisible(false)}
+        modalVisible={LogisticsModalVisible}
+        value={LogisticsData}
       />
-      <LogisticsForm onSubmit={reload} skuList={skuList} companys={companys} onCancel={() => handleModalVisible(false)} modalVisible={LogisticsModalVisible} />
-      <OrderDetail value={skuList} onCancel={() => handleDetailModalVisible(false)} modalVisible={detailModalVisible} />
     </PageHeaderWrapper>
-  )
+  );
 };
 
 export default TableList;

src/pages/orderManage/pendingDeliveryOrder/service.js

@@ -5,41 +5,35 @@ import config from '../../../../config/env.config';
 
 // 待发货订单
 export async function queryToSend(params) {
-  const transformedParam = {
-  	...params,
-    logisticsStatus: params.logisticsStatus ? params.logisticsStatus.slice(1) : '',
-    startTime: params.beginTime,
-  	pageNo: params.current,
-    pageSize: params.pageSize || 20,
-  };
-  
-  const { data: { current, records, total, size } } = await request.post('/api/kdsp/op/mch-order/list', {
+  const {
+    data: { current, records, total, size },
+  } = await request.post('/api/kdsp/op/mch-order/list-v2', {
     prefix: config.kdspApi,
-    data: stringify(_.omitBy(transformedParam, v => !v)),
+    data: stringify(_.omitBy(params, v => !v)),
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
-    }
+    },
   });
   return {
-    current: current,
-    data: records.map(v => ({...v, logisticsStatus: `_${v.logisticsStatus}`})),
-    total: total,
-    pageSize: size
-  }
+    current,
+    data: records.map(v => ({ ...v, logisticsStatus: `_${v.logisticsStatus}` })),
+    total,
+    pageSize: size,
+  };
 }
 
 // 快递公司
 export async function queryExpress() {
-	 const { data } = await request.get('/api/kdsp/op/express/list', {
-     prefix: config.kdspApi,
-   });
-   return data;
+  const { data = [] } = await request.get('/api/kdsp/op/express/list', {
+    prefix: config.kdspApi,
+  });
+  return data;
 }
 
 export async function updateExpress(params) {
   return request.post('/api/kdsp/op/mch-order/update-express-info', {
     prefix: config.kdspApi,
-    data: params
+    data: params,
   });
 }
 
@@ -48,4 +42,29 @@ export async function getGoods(orderId) {
     prefix: config.kdspApi,
   });
   return data;
-}
+}
\ No newline at end of file
+export async function getLogistics(orderId) {
+  const { data } = await request.get(`/api/kdsp/op/mch-order/logistics-skus?orderId=${orderId}`, {
+    prefix: config.kdspApi,
+  });
+  return data;
+}
+export async function uploadFile(file) {
+  const params = new FormData();
+  params.append('file', file);
+  request.post('/api/kdsp/op/mch-order/order-logistics-batch-import', {
+    data: params,
+    prefix: config.kdspApi,
+    // headers: {
+    //   'Content-Type': 'multipart/form-data',
+    // },
+  });
+}
+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,
+  )}`;
+}

src/utils/request.js

@@ -84,7 +84,7 @@ request.interceptors.request.use(async (url, options) => {
   const header = {
     ...headers,
     'Access-Token': token,
-    'Content-Type': headers['Content-Type'] ? headers['Content-Type'] : 'application/json',
+    // 'Content-Type': headers['Content-Type'] ? headers['Content-Type'] : 'application/json',
   };
   return {
     url,