Merge branch 'optimize' into 'master'

Optimize

See merge request !1

.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',
             },

config/env.config.js

@@ -4,7 +4,7 @@ let envAPi = {
   api: '//backstms-vcc2.liangkebang.net',
   // kdspApi: '//yapi.quantgroups.com/mock/351',
   // kdspApi: '//192.168.28.66:80',
-  kdspApi: 'https://kdsp-op-vcc2.liangkebang.net'
+  kdspApi: 'https://kdsp-op-vcc2.liangkebang.net',
 };
 
 let prodApi = {

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/deliveryOrder/index.jsx

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

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

@@ -8,14 +8,14 @@ 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];
         }
@@ -24,61 +24,59 @@ const LogisticsForm = props => {
     });
 
     // 参数整合
-    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 => {
       orderSkuIds = [...orderSkuIds, ...data.selectedGoods];
     });
     if (orderSkuIds.length !== Array.from(new Set(orderSkuIds)).length) {
-      notification.open({ message: '商品选择重复！' });
+      notification.error({ message: '商品选择重复！' });
       return;
     }
 
     if (skuList.length !== orderSkuIds.length) {
-      notification.open({ message: '该订单下的所有商品必须设置物流信息！' });
+      notification.error({ 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,11 +88,14 @@ const LogisticsForm = props => {
       afterClose={() => setResult([{}])}
     >
       <Form>
-        {result && result.length &&
+        {result &&
+          result.length &&
           result.map((v, i) => (
+            // eslint-disable-next-line react/no-array-index-key
             <Card key={i}>
               <FormItem>
                 {getFieldDecorator(`${i}-selectedGoods`, {
+                  initialValue: v.selectedGoods,
                   rules: [
                     {
                       required: true,
@@ -102,10 +103,7 @@ const LogisticsForm = props => {
                     },
                   ],
                 })(
-                      <Select
-                        mode="multiple"
-                        placeholder="请选择该订单下的商品"
-                      >
+                  <Select mode="multiple" placeholder="请选择该订单下的商品">
                     {skuList.map(item => (
                       <Option value={item.orderSkuId} key={item.orderSkuId}>
                         {item.skuName + (item.skuAttr || '')}
@@ -116,6 +114,7 @@ const LogisticsForm = props => {
               </FormItem>
               <FormItem>
                 {getFieldDecorator(`${i}-selectedCompany`, {
+                  initialValue: v.selectedCompany,
                   rules: [
                     {
                       required: true,
@@ -123,12 +122,12 @@ const LogisticsForm = props => {
                     },
                   ],
                 })(
-                      <Select
-                        showSearch
-                        placeholder="请选择物流公司"
-                      >
+                  <Select showSearch placeholder="请选择物流公司">
                     {companys.map(item => (
-                          <Option value={item.expressCompanyCode + '-' + item.expressCompanyName} key={item.expressCompanyCode}>
+                      <Option
+                        value={`${item.expressCompanyCode}-${item.expressCompanyName}`}
+                        key={item.expressCompanyCode}
+                      >
                         {item.expressCompanyName}
                       </Option>
                     ))}
@@ -137,6 +136,7 @@ const LogisticsForm = props => {
               </FormItem>
               <FormItem>
                 {getFieldDecorator(`${i}-orderNum`, {
+                  initialValue: v.orderNum,
                   rules: [
                     {
                       required: true,
@@ -145,8 +145,8 @@ const LogisticsForm = props => {
                   ],
                 })(<Input placeholder="请填写物流单号" />)}
               </FormItem>
-                </Card>)
-          )}
+            </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;
-
-const LogisticsForm = props => {
-  const { modalVisible, onCancel, value } = props;
-
-  const columns = [
-    {
-      title: '商品名称',
-      dataIndex: 'skuName',
-      key: 'skuName',
-      width: 250,
-    },
-    {
-      title: '商品属性',
-      dataIndex: 'skuAttr',
-      key: 'skuAttr',
-      width: 200,
-    },
-    {
-      title: '商品件数（件）',
-      dataIndex: 'count',
-      key: 'count',
-      width: 150
-    },
-    {
-      title: '物流公司',
-      dataIndex: 'expressCompanyName',
-      key: 'expressCompanyName',
-      width: 150
-    },
-    {
-      title: '物流单号',
-      dataIndex: 'deliveryNo',
-      key: 'deliveryNo',
-      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>
-  );
-};
-
-export default Form.create()(LogisticsForm);

src/pages/orderManage/pendingDeliveryOrder/index.jsx

-import { Button, Divider, Dropdown, Icon, Menu, message, Table } from 'antd';
+import { Button, Upload, notification } from 'antd';
 import React, { useState, useEffect, useRef } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
+import { FormInstance } from 'antd/lib/form';
 import LogisticsForm from './components/LogisticsForm';
-import OrderDetail from './components/OrderDetail';
-import { queryToSend, queryExpress, getGoods } from './service';
+import style from './styles.less';
+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 [LogisticsData, setLogisticsData] = useState([{}]);
+  const [ShowUpdateBtn] = useState([2, 5]);
+
   const actionRef = useRef();
+  const ref = useRef(FormInstance);
+  const renderContent = (record, key) =>
+    record.mchOrderSkuVoList.map((item, index) => (
+      <p
+        className={[
+          'tableContent',
+          index < record?.mchOrderSkuVoList?.length - 1 ? 'border' : null,
+        ].join(' ')}
+      >
+        {item[key]}
+      </p>
+    ));
   const columns = [
     {
       title: '订单ID',
       dataIndex: 'orderNo',
       key: 'orderNo',
       order: 6,
+      width: 250,
+      fixed: 'left',
     },
     {
-      title: '商品渠道',
-      dataIndex: 'skuSource.desc',
-      key: 'skuSource.desc',
-      hideInSearch: true,
+      title: '商品名称',
+      dataIndex: 'skuName',
+      key: 'skuName',
+      order: 6,
+      hideInTable: true,
     },
     {
       title: '交易时间',
       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: 'logisticsStatus',
-      key: 'logisticsStatus',
-      filters: false,
+      title: '商品自编码',
+      dataIndex: 'thirdSpuNo',
+      key: 'thirdSpuNo',
+      width: 120,
+      hideInSearch: true,
+      className: 'colStyle',
+      render: (_, record) => renderContent(record, 'thirdSpuNo'),
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'skuName',
+      key: 'skuName',
+      width: 400,
+      className: 'colStyle',
+      hideInSearch: true,
+      render: (_, record) => renderContent(record, 'skuName'),
+    },
+    {
+      title: '商品规格',
+      dataIndex: 'skuAttr',
+      key: 'skuAttr',
+      width: 200,
+      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: 120,
+      hideInSearch: true,
       valueEnum: {
-        '_3': '全部',
-        '_1': '未发货',
-        '_2': '已发货',
+        12: '待发货',
+        13: '待收货',
+        21: '订单完成',
       },
-      order: 5,
     },
     {
       title: '订单开始时间',
@@ -81,43 +164,42 @@ const TableList = () => {
       dataIndex: 'option',
       key: 'option',
       valueType: 'option',
-      width: 120,
+      width: 150,
+      fixed: 'right',
       render: (_, record) => (
         <React.Fragment>
-          {
-            record.skuSource.value !== 2 && record.logisticsStatus === '_1' ? (
+          {ShowUpdateBtn.includes(record?.skuSource?.value) ? null : (
             <Button
               type="primary"
-                  style={
-                    {
+              style={{
                 marginBottom: '10px',
-                    }
-                  }
+              }}
               onClick={async () => {
-                    const skuList = await getGoods(record.orderId);
-                    setSkuList(skuList);
+                const skuListData = await getGoods(record?.orderId);
+                let logisticsData = [{}];
+                setSkuList(skuListData);
+                const data = await getLogistics(record?.orderId);
+                logisticsData = data.map(item => ({
+                  selectedGoods: item?.skus?.map(sku => sku?.orderSkuId),
+                  selectedCompany: item.expressCompanyCode
+                    ? `${item?.expressCompanyCode}-${item?.expressCompanyName}`
+                    : null,
+                  orderNum: item?.deliveryNo,
+                }));
+                setLogisticsData(logisticsData);
                 handleModalVisible(true);
               }}
             >
-                  更新物流信息
+              {props.type === 2 ? '更新物流信息' : '填写物流信息'}
             </Button>
-            ) : null
-          }
-          <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 +212,110 @@ const TableList = () => {
     };
     getCompanys();
   }, []);
+  const uploadProps = {
+    name: 'file',
+    async customRequest(info) {
+      const result = await uploadFile(info.file);
+      if (result.businessCode === '0000') {
+        notification.success({ message: '导入成功' });
+      }
+    },
+    accept: '.xlsx',
+    showUploadList: false,
+  };
+
+  const queryToSendFn = params => {
+    const transformedParam = {
+      ...params,
+      logisticsStatus: props.type || 1,
+      startTime: params.beginTime,
+      pageNo: params.current,
+      pageSize: params.pageSize || 20,
+    };
+    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 = () => [
+    <Button
+      type="primary"
+      onClick={() => {
+        if (ref.current) {
+          const obj = { ...ref.current.getFieldsValue(), logisticsStatus: props.type || 1 };
+          downOrder(obj);
+        }
+      }}
+    >
+      导出数据
+    </Button>,
+  ];
   return (
     <PageHeaderWrapper>
       <ProTable
+        className={style.protable}
         actionRef={actionRef}
-        request={(params, sorter, filter) => queryToSend({ ...params })}
+        request={params => queryToSendFn({ ...params })}
         columns={columns}
-        search={{ collapsed: false, collapseRender: () => null }}
+        rowKey={r => r.orderId}
+        formRef={ref}
+        toolBarRender={toolBarRenderFn}
+        search={{
+          collapsed: false,
+          optionRender: searchRender,
+        }}
+        bordered
+        scroll={{ x: 1500 }}
+      />
+      <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

 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';
 
 // 待发货订单
 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,
+  };
 }
 
 // 快递公司
@@ -39,7 +35,7 @@ export async function queryExpress() {
 export async function updateExpress(params) {
   return request.post('/api/kdsp/op/mch-order/update-express-info', {
     prefix: config.kdspApi,
-    data: params
+    data: params,
   });
 }
 
@@ -49,3 +45,34 @@ export async function getGoods(orderId) {
   });
   return data;
 }
+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);
+  const data = await request.post('/api/kdsp/op/mch-order/order-logistics-batch-import', {
+    data: params,
+    prefix: config.kdspApi,
+  });
+  return data;
+}
+export function downTemplate() {
+  window.location.href =
+    'https://kdspstatic.q-gp.com/%E8%AE%A2%E5%8D%95%E7%89%A9%E6%B5%81%E4%BF%A1%E6%81%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF-v1.xlsx';
+}
+export async function downOrder(params) {
+  const data = await request.post('/api/kdsp/op/mch-order/order-export', {
+    data: stringify(_.omitBy(params, v => !v)),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    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 {
+    .tableContent {
+      display: flex;
+      align-items: flex-end;
+      height: 60px;
+      padding: 16px;
+    }
+    .border {
+      border-bottom: 1px solid #e8e8e8;
+    }
+    tbody .colStyle {
+      padding: 0;
+    }
+  }
+}

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,
@@ -116,6 +116,11 @@ request.interceptors.response.use(async (response, options) => {
     });
     window.location.href = loginPath;
   }
+  if (data.businessCode && data.businessCode !== '0000') {
+    notification.warning({
+      message: data.detail || data.msg || '操作失败',
+    });
+  }
   return response;
 });