feat: 添加变更订单收货人手机号功能

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsPhoneModal/changeLog.jsx

+import React, { useState, useEffect } from 'react';
+import { Modal, Table, Button } from 'antd';
+import { logColumn } from './staticData.js';
+import { apiQueryModifyReceiverMobileLog } from '../../service';
+
+/**
+ * 更新收货人手机历史记录
+ */
+const ChangeLog = props => {
+  const refForm = React.useRef();
+  const { orderNo } = props;
+  const [dataSource, setDataSource] = useState([]);
+
+  const closeModal = v => {
+    refForm?.current?.resetFields?.();
+    !v && props.onClose(false);
+  };
+
+  const getDataSource = async () => {
+    const res = await apiQueryModifyReceiverMobileLog(orderNo);
+    if (res?.success) {
+      setDataSource(res?.data?.records || []);
+    }
+  };
+
+  useEffect(() => {
+    if (props.visible) {
+      getDataSource();
+    }
+  }, [props.visible]);
+
+  return (
+    props.visible && (
+      <Modal
+        open={props.visible}
+        width={800}
+        onCancel={() => closeModal(false)}
+        footer={[
+          <Button key="close" onClick={() => closeModal(false)}>
+            关闭
+          </Button>,
+        ]}
+      >
+        <Table pagination={false} columns={logColumn} dataSource={dataSource} />
+      </Modal>
+    )
+  );
+};
+
+export default ChangeLog;

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsPhoneModal/index.jsx

-import React from 'react';
+import React, { useState } from 'react';
 import { BetaSchemaForm } from '@ant-design/pro-components';
-import { notification } from 'antd';
+import { notification, Button } from 'antd';
 import { infoColumn } from './staticData.js';
 import { layout } from '@/utils/bll';
-import { apiDeliveriesEdit } from '../../service';
+import { apiChangeReceiverMobile } from '../../service';
+import ChangeLog from './changeLog.jsx';
 
 /**
  * 更新收货人手机组件
  */
 const LogisticsPhone = props => {
+  const [visibleLog, setVisibleLog] = useState(false);
   const refForm = React.useRef();
   const { record } = props;
   const closeModal = v => {
@@ -16,9 +18,7 @@ const LogisticsPhone = props => {
     !v && props.onClose(false);
   };
   const submitForm = async values => {
-    const params = values;
-    params.id = record.id;
-    const res = await apiDeliveriesEdit(params);
+    const res = await apiChangeReceiverMobile(values);
     if (res?.success) {
       notification.success({
         message: '提交成功',
@@ -34,25 +34,44 @@ const LogisticsPhone = props => {
       });
     });
 
+  const onShowLog = () => {
+    setVisibleLog(true);
+  };
+
   return (
     props.visible && (
-      <BetaSchemaForm
-        layoutType="ModalForm"
-        title="更新收货人手机"
-        open={props.visible}
-        width="600px"
-        modalProps={{
-          maskClosable: true,
-          destroyOnClose: true,
-        }}
-        request={getInfo}
-        formRef={refForm}
-        onOpenChange={closeModal}
-        layout="horizontal"
-        {...layout}
-        onFinish={submitForm}
-        columns={infoColumn}
-      />
+      <>
+        <BetaSchemaForm
+          layoutType="ModalForm"
+          title="更新收货人手机"
+          open={props.visible}
+          width="600px"
+          modalProps={{
+            maskClosable: true,
+            destroyOnClose: true,
+          }}
+          request={getInfo}
+          formRef={refForm}
+          onOpenChange={closeModal}
+          layout="horizontal"
+          {...layout}
+          onFinish={submitForm}
+          columns={infoColumn}
+          submitter={{
+            render: (p, doms) => [
+              <Button htmlType="button" onClick={onShowLog} key="edit">
+                变更记录
+              </Button>,
+              ...doms,
+            ],
+          }}
+        />
+        <ChangeLog
+          visible={visibleLog}
+          orderNo={record.orderNo}
+          onClose={() => setVisibleLog(false)}
+        />
+      </>
     )
   );
 };

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsPhoneModal/index.less

+.sku-list-module {
+  margin-bottom: 20px;
+  padding: 10px 20px;
+  border: 1px solid #f2f2f2;
+  &__index {
+    margin-bottom: 5px;
+    font-weight: 700;
+    font-size: 14px;
+  }
+}
+
+.sku-list-box {
+  padding-bottom: 10px;
+  .sku-list {
+    display: flex;
+    // padding-bottom: 19px;
+    &__goods-name {
+      flex: 1;
+      margin-bottom: 0 !important;
+    }
+
+    &__goods-count {
+      width: 100px;
+      margin-bottom: 5px !important;
+    }
+  }
+}
+
+.operation {
+  font-size: 24px;
+  text-align: center;
+  > * {
+    margin: 0 10px;
+  }
+}

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsPhoneModal/staticData.js

@@ -11,7 +11,7 @@ export const infoColumn = [
   },
   {
     title: '收货人电话',
-    dataIndex: 'receiverPhone',
+    dataIndex: 'receiverMobile',
     fieldProps: {
       maxLength: 11,
     },
@@ -51,3 +51,42 @@ export const infoColumn = [
     },
   },
 ];
+
+export const logColumn = [
+  {
+    title: '序号',
+    dataIndex: 'orderNo',
+    key: 'orderNo',
+    width: 80,
+    render: (text, record, index) => <div>{index + 1}</div>,
+  },
+  {
+    title: '变更时间',
+    dataIndex: 'createdAt',
+    key: 'createdAt',
+    width: 200,
+  },
+  {
+    title: '变更前',
+    dataIndex: 'oldVal',
+    key: 'oldVal',
+    width: 150,
+  },
+  {
+    title: '变更后',
+    dataIndex: 'newVal',
+    key: 'newVal',
+    width: 150,
+  },
+  {
+    title: '操作人',
+    dataIndex: 'orderNo',
+    key: 'orderNo',
+    width: 200,
+    render: (text, record) => (
+      <div>
+        {record?.operator} {record?.operateTypeDesc}
+      </div>
+    ),
+  },
+];

src/pages/orderManage/pendingDeliveryOrder/index.jsx

@@ -19,7 +19,7 @@ import LogisticsPhoneModal from './components/LogisticsPhoneModal';
 import {
   queryToSend,
   queryExpress,
-  getGoods,
+  apiQueryReceiverDetail,
   downOrder,
   apiQueryOrderInfo,
   apiDeliveriesTraceList,
@@ -473,9 +473,12 @@ const TableList = props => {
               style={{
                 marginBottom: '10px',
               }}
-              onClick={() => {
-                setItemRecord(record);
-                setVisible(true);
+              onClick={async () => {
+                const res = await apiQueryReceiverDetail(record.orderNo);
+                if (res.data) {
+                  setItemRecord(res.data);
+                  setVisible(true);
+                }
               }}
             >
               更新收货人手机

src/pages/orderManage/pendingDeliveryOrder/service.js

@@ -167,3 +167,41 @@ export function apiDeliveriesTraceList(data) {
     prefix: config.kdspApi,
   });
 }
+
+/**
+ * 查询订单收货信息
+ * @see http://yapi.quantgroups.com/project/389/interface/api/72539
+ */
+export function apiQueryReceiverDetail(orderNo) {
+  return request.get('/api/merchants/orders/receiver/detail', {
+    params: { orderNo },
+    prefix: config.kdspApi,
+  });
+}
+
+/**
+ * 获取商家修改收件人手机号操作日志
+ * @see http://yapi.quantgroups.com/project/389/interface/api/72544
+ */
+export function apiQueryModifyReceiverMobileLog(orderNo) {
+  const transformedParam = {
+    pageNo: 1,
+    pageSize: 100,
+    orderNo,
+  };
+  return request.get('/api/merchants/orders/modify-receiver-mobile/page', {
+    prefix: config.kdspApi,
+    params: transformedParam,
+  });
+}
+
+/**
+ * 修改收件人手机号
+ * @see http://yapi.quantgroups.com/project/389/interface/api/72549
+ */
+export function apiChangeReceiverMobile(params) {
+  return request.post('/api/merchants/orders/receiver-mobile/edit', {
+    prefix: config.kdspApi,
+    data: params,
+  });
+}