FEV2 / fw-cms

Commit 6c2eb360ba60b7133d5a19c00fad1d4b21adf0ad

Authored by zhaofeng
1 parent 8f250fb7

feat(finance): 现金支付

Inline Side-by-side
Showing 2 changed files with 172 additions and 257 deletions
src/pages/finance/ToPaymentList/subpages/toPaying/components/AddPaymentModal.tsx
  View file @6c2eb36
... ... @@ -2,7 +2,7 @@
2 2 * @Author: zhaofeng 1272190090@qq.com
3 3 * @Date: 2023-12-13 09:15:08
4 4 * @LastEditors: zhaofeng 1272190090@qq.com
5   - * @LastEditTime: 2024-03-02 15:50:37
  5 + * @LastEditTime: 2024-03-05 19:38:35
6 6 * @FilePath: \fw-cms\src\pages\finance\ToPaymentList\subpages\toPaying\components\AddPaymentModal.tsx
7 7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
8 8 */
... ... @@ -14,9 +14,10 @@ import { FinanceSubjectTypeEnum, noVerifyTypeList } from '@/pages/finance/entity
14 14 import { IMGURL } from '@/utils';
15 15 import rmb from '@/utils/rmb';
16 16 import { PlusOutlined } from '@ant-design/icons';
17   -import { Button, Form, InputNumber, message, Modal, Popconfirm, Select } from 'antd';
  17 +import { Button, Form, Input, InputNumber, message, Modal, Popconfirm, Select } from 'antd';
18 18 import React, { useEffect, useMemo, useRef, useState } from 'react';
19 19 import { useStore } from '../index';
  20 +import CashPay from './CashPay';
20 21  
21 22 const { Option } = Select;
22 23  
... ... @@ -360,6 +361,7 @@ export default function AddPaymentModal() {
360 361 </Form.Item>
361 362 )}
362 363  
  364 +
363 365 <>
364 366 <div>
365 367 <span style={{ color: 'red' }}>*</span> 交易金额
... ... @@ -379,99 +381,108 @@ export default function AddPaymentModal() {
379 381 </Form.Item>
380 382 </div>
381 383 <div style={{ width: '100%', height: 1, backgroundColor: '#ddd' }} />
382   - <div style={{ fontSize: '12px' }}>
383   - 本单手续费<span style={{ color: '#FF0000' }}>{rmb.sp(poundage)}</span>{' '}
384   - </div>
  384 +
  385 + {/* 现金支付没有手续费 */}
  386 + {!cashPay && (
  387 + <div style={{ fontSize: '12px' }}>
  388 + 本单手续费<span style={{ color: '#FF0000' }}>{rmb.sp(poundage)}</span>{' '}
  389 + </div>
  390 + )}
385 391 </>
386 392 {/* 识别交易单 */}
387   - <div style={{ display: 'flex', alignItems: 'center' }}>
388   - <Form.Item
389   - label={
390   - <span>
391   - <span style={{ color: 'red' }}>*</span> 上传交易凭证
392   - </span>
393   - }
394   - >
395   - <div style={{ width: 300 }}>
  393 + {
  394 + cashPay ? <CashPay /> : (
  395 + <div style={{ display: 'flex', alignItems: 'center' }}>
396 396 <Form.Item
397   - label="上传交易凭证"
398   - name="credentials"
399   - noStyle
400   - hidden={!uploadEnabled}
401   - valuePropName="fileList"
402   - getValueFromEvent={(e) => {
403   - if (Array.isArray(e)) {
404   - return e.slice(-1);
405   - }
406   - if (!e.file.status) return [];
407   - if (e.file.status == 'error') {
408   - message.error('文件上传出错，请重新上传');
409   - return [];
410   - }
411   - if (e.file.status === 'done') {
412   - if (e.file.type === 'application/pdf' || e.file.type === 'image/png' || e.file.type === 'image/jpeg') {
413   - e.file.response.data && identifyOrder(e.file.response.data, e.file.name);
414   - } else {
415   - message.error('请上传JPG、PNG、PDF文件');
416   - return;
417   - }
418   - }
419   - return e && e.fileList.slice(-1);
420   - }}
421   - required
422   - extra="上传JPG、PNG、PDF等格式的原件，图片小于10MB"
  397 + label={
  398 + <span>
  399 + <span style={{ color: 'red' }}>*</span> 上传交易凭证
  400 + </span>
  401 + }
423 402 >
424   - <FeeweeUpload
425   - accept="application/pdf,image/*"
426   - listType="picture-card"
427   - disabled={!uploadEnabled}
428   - limitSize={10}
429   - action={IMGURL.uploadUrl}
430   - maxCount={1}
431   - >
432   - <div>
433   - <PlusOutlined />
434   - <div style={{ marginTop: 8 }}>上传并识别交易凭证</div>
435   - </div>
436   - </FeeweeUpload>
  403 + <div style={{ width: 300 }}>
  404 + <Form.Item
  405 + label="上传交易凭证"
  406 + name="credentials"
  407 + noStyle
  408 + hidden={!uploadEnabled}
  409 + valuePropName="fileList"
  410 + getValueFromEvent={(e) => {
  411 + if (Array.isArray(e)) {
  412 + return e.slice(-1);
  413 + }
  414 + if (!e.file.status) return [];
  415 + if (e.file.status == 'error') {
  416 + message.error('文件上传出错，请重新上传');
  417 + return [];
  418 + }
  419 + if (e.file.status === 'done') {
  420 + if (e.file.type === 'application/pdf' || e.file.type === 'image/png' || e.file.type === 'image/jpeg') {
  421 + e.file.response.data && identifyOrder(e.file.response.data, e.file.name);
  422 + } else {
  423 + message.error('请上传JPG、PNG、PDF文件');
  424 + return;
  425 + }
  426 + }
  427 + return e && e.fileList.slice(-1);
  428 + }}
  429 + required
  430 + extra="上传JPG、PNG、PDF等格式的原件，图片小于10MB"
  431 + >
  432 + <FeeweeUpload
  433 + accept="application/pdf,image/*"
  434 + listType="picture-card"
  435 + disabled={!uploadEnabled}
  436 + limitSize={10}
  437 + action={IMGURL.uploadUrl}
  438 + maxCount={1}
  439 + >
  440 + <div>
  441 + <PlusOutlined />
  442 + <div style={{ marginTop: 8 }}>上传并识别交易凭证</div>
  443 + </div>
  444 + </FeeweeUpload>
  445 + </Form.Item>
  446 + </div>
437 447 </Form.Item>
438   - </div>
439   - </Form.Item>
440 448  
441   - {/* 上传附件识别后，再展示识别结果 */}
442   - {Object.keys(uploadParams).length > 0 && (
443   - <div style={{ marginLeft: 30 }}>
444   - <p style={{ color: '#333333', fontWeight: 'bold', fontSize: 16 }}>识别结果</p>
445   - <p style={{ color: '#666' }}>
446   - 付款账号：
447   - <span
448   - style={{
449   - color: payNoPassed ? NORMAL_COLOR : ABNORMAL_COLOR,
450   - }}
451   - >
452   - {uploadParams.payAccountNo || '--'}
453   - </span>
454   - </p>
455   - <p style={{ color: '#666' }}>
456   - 收款账户：
457   - <span
458   - style={{
459   - color: receiveNoPassed ? NORMAL_COLOR : ABNORMAL_COLOR,
460   - }}
461   - >
462   - {uploadParams.rcvAccountNo || '--'}
463   - </span>
464   - </p>
465   - <p style={{ color: '#666' }}>
466   - 交易金额：
467   - <span style={{ color: amountPassed ? NORMAL_COLOR : ABNORMAL_COLOR }}>
468   - {typeof uploadParams.amount === 'number' ? rmb.sp(uploadParams.amount) : '--'}
469   - </span>
470   - </p>
471   - {!allPassed && <p style={{ color: 'red' }}> 注：标红部分与填写信息不一致！</p>}
  449 + {/* 上传附件识别后，再展示识别结果 */}
  450 + {Object.keys(uploadParams).length > 0 && (
  451 + <div style={{ marginLeft: 30 }}>
  452 + <p style={{ color: '#333333', fontWeight: 'bold', fontSize: 16 }}>识别结果</p>
  453 + <p style={{ color: '#666' }}>
  454 + 付款账号：
  455 + <span
  456 + style={{
  457 + color: payNoPassed ? NORMAL_COLOR : ABNORMAL_COLOR,
  458 + }}
  459 + >
  460 + {uploadParams.payAccountNo || '--'}
  461 + </span>
  462 + </p>
  463 + <p style={{ color: '#666' }}>
  464 + 收款账户：
  465 + <span
  466 + style={{
  467 + color: receiveNoPassed ? NORMAL_COLOR : ABNORMAL_COLOR,
  468 + }}
  469 + >
  470 + {uploadParams.rcvAccountNo || '--'}
  471 + </span>
  472 + </p>
  473 + <p style={{ color: '#666' }}>
  474 + 交易金额：
  475 + <span style={{ color: amountPassed ? NORMAL_COLOR : ABNORMAL_COLOR }}>
  476 + {typeof uploadParams.amount === 'number' ? rmb.sp(uploadParams.amount) : '--'}
  477 + </span>
  478 + </p>
  479 + {!allPassed && <p style={{ color: 'red' }}> 注：标红部分与填写信息不一致！</p>}
  480 + </div>
  481 + )}
472 482 </div>
473   - )}
474   - </div>
  483 + )
  484 + }
  485 +
475 486 </Form>
476 487 <div style={{ marginTop: '20px', justifyContent: 'center', display: 'flex' }}>
477 488 <Button htmlType="button" style={{ width: '100px', marginRight: 10 }} loading={executing} onClick={() => handleCancle()}>
... ...
src/pages/finance/ToPaymentList/subpages/toPaying/components/CashPay.tsx
  View file @6c2eb36
... ... @@ -2,198 +2,102 @@
2 2 * @Author: zhaofeng 1272190090@qq.com
3 3 * @Date: 2023-08-16 17:29:41
4 4 * @LastEditors: zhaofeng 1272190090@qq.com
5   - * @LastEditTime: 2023-11-02 17:28:51
  5 + * @LastEditTime: 2024-03-05 19:38:29
6 6 * @FilePath: \fw-cms\src\pages\finance\ToPaymentList\subpages\toPaying\components\Header.tsx
7 7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
8 8 */
9 9 import rmb from '@/utils/rmb';
10   -import { Button, Popover } from 'antd';
  10 +import { Button, Form, Input, InputNumber, Popover, message } from 'antd';
11 11 import React, { useState } from 'react';
12 12 import { PayDetailVO } from '../../../api';
13 13 import { ObjectTypeEnum, subject2Object } from '../../../entity';
14 14 import st from '../../../style.less';
15 15 import { useStore } from '../index';
16 16 import ApproveModal from "./ApproveModal";
  17 +import FeeweeUpload from '@/components/FeeweeUpload';
  18 +import { PlusOutlined } from '@ant-design/icons';
  19 +import { IMGURL } from '@/utils';
17 20  
18 21 interface Props {
19   - data: PayDetailVO;
  22 + // data: PayDetailVO;
20 23 }
21 24 const color = '#333';
22 25  
23   -export default function CashPay({ data }: Props) {
24   - const { setPaymentDetail } = useStore();
25   - const [approveInfo, setApproveInfo] = useState({ visible: false, approvalNo: "" });
  26 +export default function CashPay({ }: Props) {
  27 + // export default function CashPay({ data }: Props) {
26 28  
27   - function renderDifferTitle() {
28   - let title = null;
29   - const objectType = subject2Object(data.subjectType as number);
30   - switch (objectType) {
31   - case ObjectTypeEnum['员工']:
32   - // 在职门店
33   - const incumbencyStore = (data.staffInfos && data.staffInfos.find((it) => it.type === 2)?.shopName) || '--';
34   - //社保门店
35   - const socialSecurityStore = (data.staffInfos && data.staffInfos.find((it) => it.type === 3)?.shopName) || '--';
36   - title = (
37   - <div className={st.Finace_HeaderWarp}>
38   - <span className={st.Finance_Topay_Header_Title}>
39   - 员工：<span style={{ color }}>{data.subjectName || '--'}</span>
40   - {` ${data.postName ? `(${data.postName})` : ''}`}
41   - </span>
42   - <span className={st.Finance_Topay_Header_Title}>
43   - 在职门店: <span style={{ color }}> {`${incumbencyStore}`}</span>
44   - </span>
45   - <span className={st.Finance_Topay_Header_Title}>
46   - 社保门店：<span style={{ color }}>{`${socialSecurityStore}`}</span>
47   - </span>
48   - </div>
49   - );
50   - break;
51   - case ObjectTypeEnum['单位']:
52   - title = (
53   - <div className={st.Finace_HeaderWarp}>
54   - <span className={st.Finance_Topay_Header_Title}>
55   - 往来单位：<span style={{ color }}>{`${data.subjectName || '--'}`}</span>
56   - </span>
57   - <span className={st.Finance_Topay_Header_Title}>
58   - 社会信用代码：<span style={{ color }}>{`${data.creditCode || '--'}`}</span>
59   - </span>
60   - <span className={st.Finance_Topay_Header_Title}>
61   - 往来单位类型：<span style={{ color }}>{`${data.subjectTypeName || '--'}`}</span>
62   - </span>
63   - </div>
64   - );
65   - break;
66   - case ObjectTypeEnum['客户']:
67   - title = (
68   - <div className={st.Finace_HeaderWarp}>
69   - <span className={st.Finance_Topay_Header_Title}>
70   - 客户：<span style={{ color }}>{data.subjectName || '-'}</span>
71   - {`${data.subjectPhone ? `(${data.subjectPhone})` : ''} `}
72   - </span>
73   - </div>
74   - );
75   - break;
76   - default:
77   - break;
78   - }
79   - return title;
80   - }
81   - const res = renderDifferTitle();
82   - const onCancel = () => {
83   - setApproveInfo({ visible: false, approvalNo: "" });
84   - };
85 29  
86   - return (
87   - <>
88   - <div style={{ marginTop: 20 }}>
89   - {res}
90   - <div className={st.Finace_HeaderWarp} style={{ marginTop: 20 }}>
91   - <span className={st.Finance_Topay_Header_Title}>
92   - {data?.typeNames && data?.typeNames.length > 0 ? '合计金额: ' : ' 金额：'}
93   - <span className={st.Finance_Font_Color_RED}>{`${rmb.p(data.amount || 0)}`}</span>
94   - <span style={{ color }}>元</span>
95   - </span>
96   - <span className={st.Finance_Topay_Header_Title}>
97   - {!!data.typeNames && data.typeNames.length >= 1 && (
98   - <>
99   - <span>
100   - 款项：
101   - <span style={{ color }}>
102   - {data.typeNames[0]}等<span className={st.Finance_Font_Color_BLUE}>{data.typeNames.length}</span>
103   - 个款项
104   - </span>
105   - </span>
106   - <Button
107   - type="link"
108   - color="#448EF7"
109   - onClick={() =>
110   - setPaymentDetail({
111   - visible: true,
112   - params: {
113   - id: data.id,
114   - typeValue: data.type,
115   - businessType: data.businessType,
116   - },
117   - })
118   - }
119   - >
120   - {' '}
121   - {`查看 >`}
122   - </Button>
123   - </>
124   - )}
125   - </span>
126   - <span className={st.Finance_Topay_Header_Title}>
127   - 业务类型：<span style={{ color }}>{data.businessTypeName || '-'}</span>{' '}
128   - </span>
129   - </div>
130   -
131   - <div className={st.Finace_HeaderWarp} style={{ marginTop: 20 }}>
132   - <span className={st.Finance_Topay_Header_Title}>
133   - 结算门店：<span style={{ color }}>{data.shopName || '--'}</span>{' '}
134   - </span>
135   - <span className={st.Finance_Topay_Header_Title}>
136   - 备注：
137   - {data.remark ? (
138   - <Popover content={data.remark} title="备注">
139   - <Button
140   - type="link"
141   - color="#448EF7"
142   - onClick={() => {
143   - console.log('查看888');
144   - }}
145   - >
146   - {' '}
147   - {`查看 >`}
148   - </Button>
149   - </Popover>
150   - ) : (
151   - <span>--</span>
152   - )}
153   - </span>
154 30  
155   - <span className={st.Finance_Topay_Header_Title}>
156 31  
157   - {data.businessApprovalNo ? (<>
158   - 业务审批单号:
159   - <Button
160   - type="link"
161   - color="#448EF7"
162   - onClick={() => {
163   - setApproveInfo({ visible: true, approvalNo: data.businessApprovalNo || "" });
164   - }}
165   - >
166   - {`查看 >`}
167   - </Button>
168   - </>) : null}
169   -
170   - </span>
171   - </div>
172   -
173   - <div className={st.Finace_HeaderWarp} style={{ marginTop: 20 }}>
  32 + return (
  33 + <>
  34 + <div style={{ marginTop: 10, display: "flex" }}>
  35 + <Form.Item
  36 + label="收款验证"
  37 + name="username"
  38 + noStyle
  39 + rules={[{ required: true, message: '请输入验证码' }]}
  40 + >
  41 + <Input />
  42 + </Form.Item>
  43 + <a href="#"
  44 + onClick={(e) => {
  45 + e.preventDefault();
  46 + }}
  47 + > 获取验证码</a>
  48 + </div>
174 49  
175   - <span className={st.Finance_Topay_Header_Title}>
176   - {data.paymentConfirmApprovalNo ? (
177   - <>
178   - 款项确认审批单号:
179   - <Button
180   - type="link"
181   - color="#448EF7"
182   - onClick={() => {
183   - setApproveInfo({ visible: true, approvalNo: data.paymentConfirmApprovalNo || "" });
184   - }}
185   - >
186   - {`查看 >`}
187   - </Button>
188   - </>) : null}
189 50  
  51 + {/* <Form.Item
  52 + label={
  53 + <span>
  54 + <span style={{ color: 'red' }}>*</span> 上传交易凭证
190 55 </span>
191   - <span className={st.Finance_Topay_Header_Title} />
192   - <span className={st.Finance_Topay_Header_Title} />
193   -
  56 + }
  57 + >
  58 + <div style={{ width: 300 }}>
  59 + <Form.Item
  60 + label="附件"
  61 + name="credentials"
  62 + noStyle
  63 + valuePropName="fileList"
  64 + getValueFromEvent={(e) => {
  65 + if (Array.isArray(e)) {
  66 + return e.slice(-1);
  67 + }
  68 + if (!e.file.status) return [];
  69 + if (e.file.status == 'error') {
  70 + message.error('文件上传出错，请重新上传');
  71 + return [];
  72 + }
  73 + if (e.file.status === 'done') {
  74 + if (e.file.type === 'application/pdf' || e.file.type === 'image/png' || e.file.type === 'image/jpeg') {
  75 + } else {
  76 + message.error('请上传JPG、PNG、PDF文件');
  77 + return;
  78 + }
  79 + }
  80 + return e && e.fileList.slice(-1);
  81 + }}
  82 + required
  83 + extra="上传JPG、PNG、PDF等格式的原件，图片小于10MB"
  84 + >
  85 + <FeeweeUpload
  86 + accept="application/pdf,image/*"
  87 + listType="picture-card"
  88 + // disabled={!uploadEnabled}
  89 + limitSize={10}
  90 + action={IMGURL.uploadUrl}
  91 + maxCount={1}
  92 + >
  93 + <div>
  94 + <PlusOutlined />
  95 + <div style={{ marginTop: 8 }}>上传并识别交易凭证</div>
  96 + </div>
  97 + </FeeweeUpload>
  98 + </Form.Item>
194 99 </div>
195   - </div>
196   - <ApproveModal visible={approveInfo.visible} onCancel={() => onCancel()} approvalNo={approveInfo.approvalNo} />
  100 + </Form.Item> */}
197 101 </>
198 102  
199 103 );
... ...