canrd-main / canrd-erp-front · Commits

Commit e82d7a135458ef6a24d44c1d5f0224f0f26dfdcf

Authored by boyang
1 parent d5796d31
build: skipped

fix: 添加付款记录弹窗

Inline Side-by-side
Showing 4 changed files with 320 additions and 30 deletions
src/pages/Order/OrderList/OrderList.tsx
  View file @e82d7a1
... ... @@ -2,6 +2,7 @@ import ButtonConfirm from '@/components/ButtomConfirm';
2 2 import { RESPONSE_CODE } from '@/constants/enum';
3 3 import ImportExpressBillModal from '@/pages/Order/OrderList/ImportExpressBillModal';
4 4 import InvoicingDrawerForm from '@/pages/Order/OrderList/InvoicingDrawerForm';
  5 +import PaymentRecordModal from '@/pages/Order/OrderList/PaymentRecordModal';
5 6 import ReissueModal from '@/pages/Order/OrderList/ReissueModal';
6 7 import ReissueModal_old from '@/pages/Order/OrderList/ReissueModal_old';
7 8 import {
... ... @@ -151,6 +152,8 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) => {
151 152 hirePurchaseUploadPayBillModalVisible,
152 153 setHirePurchaseUploadPayBillModalVisible,
153 154 ] = useState<boolean>(false);
  155 + const [paymentRecordModalVisible, setPaymentRecordModalVisible] =
  156 + useState<boolean>(false);
154 157 const [
155 158 feedbackRegistrationModalVisible,
156 159 setFeedbackRegistrationModalVisible,
... ... @@ -1454,20 +1457,6 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
1454 1457 }}
1455 1458 />
1456 1459 )}
1457   - {optRecord.paths?.includes('uploadPaymentReceiptBill') ? (
1458   - <Button
1459   - className="p-0"
1460   - type="link"
1461   - onClick={() => {
1462   - createOptObject(optRecord.id, record.id);
1463   - setUploadPayBillModalVisible(true);
1464   - }}
1465   - >
1466   - 回款
1467   - </Button>
1468   - ) : (
1469   - ''
1470   - )}
1471 1460  
1472 1461 {optRecord.paths?.includes('confirmReissue_old') ? (
1473 1462 <Button
... ... @@ -1536,22 +1525,6 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
1536 1525 ''
1537 1526 )}
1538 1527  
1539   - {optRecord.paths?.includes('auditPaymentReceipt') ? (
1540   - <Button
1541   - className="p-0"
1542   - type="link"
1543   - onClick={() => {
1544   - createOptObject(optRecord.id, record.id);
1545   - setCheckVisible(true);
1546   - setOrderCheckType(CHECK_TYPE.PAYMENT_RECEIPTS_AUDIT);
1547   - }}
1548   - >
1549   - 回款审核
1550   - </Button>
1551   - ) : (
1552   - ''
1553   - )}
1554   -
1555 1528 {optRecord.paths?.includes('modifiedAuditRequest') ? (
1556 1529 <Button
1557 1530 className="p-0"
... ... @@ -2986,6 +2959,21 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
2986 2959 ''
2987 2960 )}
2988 2961  
  2962 + {record.paths?.includes('refundHistory') ? (
  2963 + <Button
  2964 + className="p-0"
  2965 + type="link"
  2966 + onClick={() => {
  2967 + createOptObject(record.id, record.id);
  2968 + setPaymentRecordModalVisible(true);
  2969 + }}
  2970 + >
  2971 + 付款记录
  2972 + </Button>
  2973 + ) : (
  2974 + ''
  2975 + )}
  2976 +
2989 2977 {/* 输出日志以检查权限和支付方式 */}
2990 2978 {console.log('Order info:', record.id, record.paths)}
2991 2979 {record.paths?.includes('auditPartialPaymentReceipt') ? (
... ... @@ -5373,6 +5361,17 @@ const OrderList = ({ paramsNew, searchShow, toolbarShow }) =&gt; {
5373 5361 />
5374 5362 )}
5375 5363  
  5364 + {paymentRecordModalVisible && currentOptMainId && (
  5365 + <PaymentRecordModal
  5366 + visible={paymentRecordModalVisible}
  5367 + mainOrderId={currentOptMainId}
  5368 + onClose={() => {
  5369 + setPaymentRecordModalVisible(false);
  5370 + clearOptObject();
  5371 + }}
  5372 + />
  5373 + )}
  5374 +
5376 5375 {feedbackRegistrationModalVisible && (
5377 5376 <FeedbackRegistrationModal
5378 5377 setVisible={(val: boolean) => {
... ...
src/pages/Order/OrderList/PaymentRecordModal.tsx 0 → 100644
  View file @e82d7a1
  1 +import { postServiceOrderRefundHistory } from '@/services';
  2 +import { Button, Empty, Image, Modal } from 'antd';
  3 +import React, { useEffect, useState } from 'react';
  4 +
  5 +interface PaymentRecordModalProps {
  6 + visible: boolean;
  7 + mainOrderId: number;
  8 + onClose: () => void;
  9 +}
  10 +
  11 +interface PaymentRecord {
  12 + id: number;
  13 + mainOrderId: number;
  14 + refundMoney: number;
  15 + createTime: string;
  16 + annex: string;
  17 + isAudit: number;
  18 + isDel: number;
  19 + updateTime: string | null;
  20 + paymentReceiptAnnexPartial: string | null;
  21 +}
  22 +
  23 +const PaymentRecordModal: React.FC<PaymentRecordModalProps> = ({
  24 + visible,
  25 + mainOrderId,
  26 + onClose,
  27 +}) => {
  28 + const [paymentRecords, setPaymentRecords] = useState<PaymentRecord[]>([]);
  29 +
  30 + const fetchPaymentRecords = async () => {
  31 + if (!mainOrderId) return;
  32 +
  33 + try {
  34 + const response = await postServiceOrderRefundHistory({
  35 + data: { mainOrderId },
  36 + });
  37 +
  38 + if (response.result === 0 && response.data) {
  39 + setPaymentRecords(response.data);
  40 + } else {
  41 + setPaymentRecords([]);
  42 + }
  43 + } catch (error) {
  44 + console.error('Failed to fetch payment records:', error);
  45 + setPaymentRecords([]);
  46 + }
  47 + };
  48 +
  49 + useEffect(() => {
  50 + if (visible && mainOrderId) {
  51 + fetchPaymentRecords();
  52 + }
  53 + }, [visible, mainOrderId]);
  54 +
  55 + const parseAnnex = (annexString: string): string[] => {
  56 + try {
  57 + const parsed = JSON.parse(annexString);
  58 + return parsed.map((item: { url: string }) => item.url);
  59 + } catch (e) {
  60 + console.error('Failed to parse annex:', e);
  61 + return [];
  62 + }
  63 + };
  64 +
  65 + return (
  66 + <Modal
  67 + title="付款记录"
  68 + open={visible}
  69 + onCancel={onClose}
  70 + footer={[
  71 + <Button key="close" onClick={onClose}>
  72 + 关闭
  73 + </Button>,
  74 + ]}
  75 + width={500}
  76 + >
  77 + <div className="payment-record-container">
  78 + {paymentRecords.length > 0 ? (
  79 + paymentRecords.map((record, index) => {
  80 + const imageUrls = record.annex ? parseAnnex(record.annex) : [];
  81 +
  82 + return (
  83 + <div key={record.id} className="payment-record-item">
  84 + <div className="payment-record-header">
  85 + {index < paymentRecords.length - 1 && (
  86 + <div className="payment-record-line" />
  87 + )}
  88 + <div className="payment-record-circle" />
  89 + </div>
  90 + <div className="payment-record-content">
  91 + <div className="payment-record-info">
  92 + <p>
  93 + <strong>提交时间：</strong> {record.createTime}
  94 + </p>
  95 + <p>
  96 + <strong>付款金额：</strong>{' '}
  97 + {record.refundMoney.toFixed(2)}
  98 + </p>
  99 + {imageUrls.length > 0 && (
  100 + <p>
  101 + <strong>付款凭证：</strong>
  102 + </p>
  103 + )}
  104 + </div>
  105 + {imageUrls.length > 0 && (
  106 + <div className="payment-record-images">
  107 + <Image.PreviewGroup>
  108 + {imageUrls.map((url, imgIndex) => (
  109 + <Image
  110 + key={imgIndex}
  111 + width={120}
  112 + src={url}
  113 + className="payment-record-image"
  114 + />
  115 + ))}
  116 + </Image.PreviewGroup>
  117 + </div>
  118 + )}
  119 + </div>
  120 + </div>
  121 + );
  122 + })
  123 + ) : (
  124 + <Empty description="暂无付款记录" className="payment-record-empty" />
  125 + )}
  126 + </div>
  127 + </Modal>
  128 + );
  129 +};
  130 +
  131 +export default PaymentRecordModal;
... ...
src/pages/Order/OrderList/index.css
  View file @e82d7a1
... ... @@ -2,6 +2,14 @@
2 2 margin-inline: 0 !important;
3 3 }
4 4  
  5 +.order-page-container .ant-table-cell {
  6 + word-break: break-word;
  7 + white-space: normal !important;
  8 + overflow: hidden;
  9 + max-width: 500px;
  10 + box-sizing: border-box;
  11 +}
  12 +
5 13 .order-page-container td {
6 14 font-family: 'San Francisco', 'Helvetica Neue', Helvetica, Arial,
7 15 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
... ... @@ -53,6 +61,8 @@
53 61 .order-page-container .ant-table-thead .ant-table-cell {
54 62 background-color: #fff !important;
55 63 border-radius: 8px !important;
  64 + overflow: hidden;
  65 + white-space: normal !important;
56 66 }
57 67  
58 68 #sub-table tbody td {
... ... @@ -98,3 +108,78 @@
98 108  
99 109 /* 设置行与行之间分割线的颜色 */
100 110 }
  111 +
  112 +/* 付款记录样式 */
  113 +.payment-record-container {
  114 + padding: 10px 0;
  115 +}
  116 +
  117 +.payment-record-item {
  118 + position: relative;
  119 + display: flex;
  120 + margin-bottom: 16px;
  121 +}
  122 +
  123 +.payment-record-header {
  124 + position: relative;
  125 + width: 24px;
  126 + margin-right: 12px;
  127 +}
  128 +
  129 +.payment-record-line {
  130 + position: absolute;
  131 + top: 0;
  132 + bottom: 0;
  133 + left: 50%;
  134 + width: 1px;
  135 + background-color: #e8e8e8;
  136 + transform: translateX(-50%);
  137 + z-index: 1;
  138 +}
  139 +
  140 +.payment-record-circle {
  141 + position: absolute;
  142 + top: 12px;
  143 + left: 50%;
  144 + width: 12px;
  145 + height: 12px;
  146 + background-color: #d4b106;
  147 + border-radius: 50%;
  148 + transform: translateX(-50%);
  149 + z-index: 2;
  150 +}
  151 +
  152 +.payment-record-content {
  153 + flex: 1;
  154 + background-color: #f5f5f5;
  155 + border-radius: 8px;
  156 + padding: 12px 16px;
  157 +}
  158 +
  159 +.payment-record-info p {
  160 + margin-bottom: 8px;
  161 +}
  162 +
  163 +.payment-record-images {
  164 + display: flex;
  165 + flex-wrap: wrap;
  166 + gap: 8px;
  167 + margin-top: 8px;
  168 +}
  169 +
  170 +.payment-record-image {
  171 + border: 1px solid #e8e8e8;
  172 + border-radius: 4px;
  173 +}
  174 +
  175 +.payment-record-divider {
  176 + height: 1px;
  177 + background-color: #e8e8e8;
  178 + margin: 16px 0;
  179 +}
  180 +
  181 +.payment-record-empty {
  182 + text-align: center;
  183 + color: #999;
  184 + padding: 20px 0;
  185 +}
... ...
src/pages/Order/OrderList/index.less
  View file @e82d7a1
... ... @@ -106,3 +106,78 @@
106 106 // .order-tooltip .ant-tooltip-inner{
107 107 // color: black !important;
108 108 // }
  109 +
  110 +/* 付款记录样式 */
  111 +.payment-record-container {
  112 + padding: 10px 0;
  113 +}
  114 +
  115 +.payment-record-item {
  116 + position: relative;
  117 + display: flex;
  118 + margin-bottom: 16px;
  119 +}
  120 +
  121 +.payment-record-header {
  122 + position: relative;
  123 + width: 24px;
  124 + margin-right: 12px;
  125 +}
  126 +
  127 +.payment-record-line {
  128 + position: absolute;
  129 + top: 0;
  130 + bottom: 0;
  131 + left: 50%;
  132 + width: 1px;
  133 + background-color: #e8e8e8;
  134 + transform: translateX(-50%);
  135 + z-index: 1;
  136 +}
  137 +
  138 +.payment-record-circle {
  139 + position: absolute;
  140 + top: 12px;
  141 + left: 50%;
  142 + width: 12px;
  143 + height: 12px;
  144 + background-color: #d4b106;
  145 + border-radius: 50%;
  146 + transform: translateX(-50%);
  147 + z-index: 2;
  148 +}
  149 +
  150 +.payment-record-content {
  151 + flex: 1;
  152 + background-color: #f5f5f5;
  153 + border-radius: 8px;
  154 + padding: 12px 16px;
  155 +}
  156 +
  157 +.payment-record-info p {
  158 + margin-bottom: 8px;
  159 +}
  160 +
  161 +.payment-record-images {
  162 + display: flex;
  163 + flex-wrap: wrap;
  164 + gap: 8px;
  165 + margin-top: 8px;
  166 +}
  167 +
  168 +.payment-record-image {
  169 + border: 1px solid #e8e8e8;
  170 + border-radius: 4px;
  171 +}
  172 +
  173 +.payment-record-divider {
  174 + height: 1px;
  175 + background-color: #e8e8e8;
  176 + margin: 16px 0;
  177 +}
  178 +
  179 +.payment-record-empty {
  180 + text-align: center;
  181 + color: #999;
  182 + padding: 20px 0;
  183 +}
... ...