fix: 添加付款记录弹窗

boyang
1 parent d5796d31
Showing 4 changed files with 320 additions and 30 deletions
src/pages/Order/OrderList/OrderList.tsx
src/pages/Order/OrderList/PaymentRecordModal.tsx
src/pages/Order/OrderList/index.css
src/pages/Order/OrderList/index.less
@@ -2,6 +2,7 @@ import ButtonConfirm from &#39;@/components/ButtomConfirm&#39;;
 import { RESPONSE_CODE } from '@/constants/enum';
 import ImportExpressBillModal from '@/pages/Order/OrderList/ImportExpressBillModal';
 import InvoicingDrawerForm from '@/pages/Order/OrderList/InvoicingDrawerForm';
+import PaymentRecordModal from '@/pages/Order/OrderList/PaymentRecordModal';
 import ReissueModal from '@/pages/Order/OrderList/ReissueModal';
 import ReissueModal_old from '@/pages/Order/OrderList/ReissueModal_old';
 import {
@@ -151,6 +152,8 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
     hirePurchaseUploadPayBillModalVisible,
     setHirePurchaseUploadPayBillModalVisible,
   ] = useState<boolean>(false);
+  const [paymentRecordModalVisible, setPaymentRecordModalVisible] =
+    useState<boolean>(false);
   const [
     feedbackRegistrationModalVisible,
     setFeedbackRegistrationModalVisible,
@@ -1454,20 +1457,6 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
                 }}
               />
             )}
-            {optRecord.paths?.includes('uploadPaymentReceiptBill') ? (
-              <Button
-                className="p-0"
-                type="link"
-                onClick={() => {
-                  createOptObject(optRecord.id, record.id);
-                  setUploadPayBillModalVisible(true);
-                }}
-              >
-                回款
-              </Button>
-            ) : (
-              ''
-            )}
             {optRecord.paths?.includes('confirmReissue_old') ? (
               <Button
@@ -1536,22 +1525,6 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
               ''
             )}
-            {optRecord.paths?.includes('auditPaymentReceipt') ? (
-              <Button
-                className="p-0"
-                type="link"
-                onClick={() => {
-                  createOptObject(optRecord.id, record.id);
-                  setCheckVisible(true);
-                  setOrderCheckType(CHECK_TYPE.PAYMENT_RECEIPTS_AUDIT);
-                }}
-              >
-                回款审核
-              </Button>
-            ) : (
-              ''
-            )}
-
             {optRecord.paths?.includes('modifiedAuditRequest') ? (
               <Button
                 className="p-0"
@@ -2986,6 +2959,21 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
                     ''
                   )}
+                  {record.paths?.includes('refundHistory') ? (
+                    <Button
+                      className="p-0"
+                      type="link"
+                      onClick={() => {
+                        createOptObject(record.id, record.id);
+                        setPaymentRecordModalVisible(true);
+                      }}
+                    >
+                      付款记录
+                    </Button>
+                  ) : (
+                    ''
+                  )}
+
                   {/* 输出日志以检查权限和支付方式 */}
                   {console.log('Order info:', record.id, record.paths)}
                   {record.paths?.includes('auditPartialPaymentReceipt') ? (
@@ -5373,6 +5361,17 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
         />
       )}
+      {paymentRecordModalVisible && currentOptMainId && (
+        <PaymentRecordModal
+          visible={paymentRecordModalVisible}
+          mainOrderId={currentOptMainId}
+          onClose={() => {
+            setPaymentRecordModalVisible(false);
+            clearOptObject();
+          }}
+        />
+      )}
+
       {feedbackRegistrationModalVisible && (
         <FeedbackRegistrationModal
           setVisible={(val: boolean) => {
+import { postServiceOrderRefundHistory } from '@/services';
+import { Button, Empty, Image, Modal } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+interface PaymentRecordModalProps {
+  visible: boolean;
+  mainOrderId: number;
+  onClose: () => void;
+}
+
+interface PaymentRecord {
+  id: number;
+  mainOrderId: number;
+  refundMoney: number;
+  createTime: string;
+  annex: string;
+  isAudit: number;
+  isDel: number;
+  updateTime: string | null;
+  paymentReceiptAnnexPartial: string | null;
+}
+
+const PaymentRecordModal: React.FC<PaymentRecordModalProps> = ({
+  visible,
+  mainOrderId,
+  onClose,
+}) => {
+  const [paymentRecords, setPaymentRecords] = useState<PaymentRecord[]>([]);
+
+  const fetchPaymentRecords = async () => {
+    if (!mainOrderId) return;
+
+    try {
+      const response = await postServiceOrderRefundHistory({
+        data: { mainOrderId },
+      });
+
+      if (response.result === 0 && response.data) {
+        setPaymentRecords(response.data);
+      } else {
+        setPaymentRecords([]);
+      }
+    } catch (error) {
+      console.error('Failed to fetch payment records:', error);
+      setPaymentRecords([]);
+    }
+  };
+
+  useEffect(() => {
+    if (visible && mainOrderId) {
+      fetchPaymentRecords();
+    }
+  }, [visible, mainOrderId]);
+
+  const parseAnnex = (annexString: string): string[] => {
+    try {
+      const parsed = JSON.parse(annexString);
+      return parsed.map((item: { url: string }) => item.url);
+    } catch (e) {
+      console.error('Failed to parse annex:', e);
+      return [];
+    }
+  };
+
+  return (
+    <Modal
+      title="付款记录"
+      open={visible}
+      onCancel={onClose}
+      footer={[
+        <Button key="close" onClick={onClose}>
+          关闭
+        </Button>,
+      ]}
+      width={500}
+    >
+      <div className="payment-record-container">
+        {paymentRecords.length > 0 ? (
+          paymentRecords.map((record, index) => {
+            const imageUrls = record.annex ? parseAnnex(record.annex) : [];
+
+            return (
+              <div key={record.id} className="payment-record-item">
+                <div className="payment-record-header">
+                  {index < paymentRecords.length - 1 && (
+                    <div className="payment-record-line" />
+                  )}
+                  <div className="payment-record-circle" />
+                </div>
+                <div className="payment-record-content">
+                  <div className="payment-record-info">
+                    <p>
+                      <strong>提交时间：</strong> {record.createTime}
+                    </p>
+                    <p>
+                      <strong>付款金额：</strong>{' '}
+                      {record.refundMoney.toFixed(2)}
+                    </p>
+                    {imageUrls.length > 0 && (
+                      <p>
+                        <strong>付款凭证：</strong>
+                      </p>
+                    )}
+                  </div>
+                  {imageUrls.length > 0 && (
+                    <div className="payment-record-images">
+                      <Image.PreviewGroup>
+                        {imageUrls.map((url, imgIndex) => (
+                          <Image
+                            key={imgIndex}
+                            width={120}
+                            src={url}
+                            className="payment-record-image"
+                          />
+                        ))}
+                      </Image.PreviewGroup>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          <Empty description="暂无付款记录" className="payment-record-empty" />
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default PaymentRecordModal;
@@ -2,6 +2,14 @@
   margin-inline: 0 !important;
 }
+.order-page-container .ant-table-cell {
+  word-break: break-word;
+  white-space: normal !important;
+  overflow: hidden;
+  max-width: 500px;
+  box-sizing: border-box;
+}
+
 .order-page-container td {
   font-family: 'San Francisco', 'Helvetica Neue', Helvetica, Arial,
     'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
@@ -53,6 +61,8 @@
 .order-page-container .ant-table-thead .ant-table-cell {
   background-color: #fff !important;
   border-radius: 8px !important;
+  overflow: hidden;
+  white-space: normal !important;
 }
 #sub-table tbody td {
@@ -98,3 +108,78 @@
   /* 设置行与行之间分割线的颜色 */
 }
+
+/* 付款记录样式 */
+.payment-record-container {
+  padding: 10px 0;
+}
+
+.payment-record-item {
+  position: relative;
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.payment-record-header {
+  position: relative;
+  width: 24px;
+  margin-right: 12px;
+}
+
+.payment-record-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  background-color: #e8e8e8;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.payment-record-circle {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background-color: #d4b106;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.payment-record-content {
+  flex: 1;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.payment-record-info p {
+  margin-bottom: 8px;
+}
+
+.payment-record-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.payment-record-image {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.payment-record-divider {
+  height: 1px;
+  background-color: #e8e8e8;
+  margin: 16px 0;
+}
+
+.payment-record-empty {
+  text-align: center;
+  color: #999;
+  padding: 20px 0;
+}
@@ -106,3 +106,78 @@
 // .order-tooltip .ant-tooltip-inner{
 //   color: black !important;
 // }
+
+/* 付款记录样式 */
+.payment-record-container {
+  padding: 10px 0;
+}
+
+.payment-record-item {
+  position: relative;
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.payment-record-header {
+  position: relative;
+  width: 24px;
+  margin-right: 12px;
+}
+
+.payment-record-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  background-color: #e8e8e8;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.payment-record-circle {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background-color: #d4b106;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.payment-record-content {
+  flex: 1;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.payment-record-info p {
+  margin-bottom: 8px;
+}
+
+.payment-record-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.payment-record-image {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.payment-record-divider {
+  height: 1px;
+  background-color: #e8e8e8;
+  margin: 16px 0;
+}
+
+.payment-record-empty {
+  text-align: center;
+  color: #999;
+  padding: 20px 0;
+}