PayApplyModal.tsx
4.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import React, {useEffect, useState} from 'react';
import {Modal, Form, Input, Button, message, DatePicker} from 'antd';
import {RightOutlined} from '@ant-design/icons';
import ImageUpload from '@/pages/pms/comonents/ImageUpload';
import {purchasePayApply, PageV0} from '../api';
import PurchasePartModal from './PurchasePartModal';
const Item = Form.Item;
interface Props{
visible:boolean
onCancel:Function
item?:PageV0
}
export default function Index(props:Props) {
const [form] = Form.useForm();
const {visible, onCancel, item} = props;
const [btnloading, setBtnloading] = useState(false);
const [partVisible, setPartVisible] = useState(false);
const [itemPurchaseId, setItemPurchaseId] = useState<number>();
const [isSure, setIsSure] = useState(false);
useEffect(() => {
if (visible && item?.purchaseId) {
form.setFieldsValue({
supplierName: item.supplierName,
shopName: item.shopName,
amount: item.amount,
onPayAmount: item.onPayAmount,
proportion: item.proportion,
payAmount: item.payAmount > item.amount ? 0 : item.onPayAmount
});
}
if (!visible) {
form.resetFields();
}
}, [visible]);
const apply = () => {
form.validateFields().then(fileds => {
setBtnloading(true);
const params = {
purchaseId: item?.purchaseId,
payAmount: fileds.payAmount,
payDays: fileds.payDays.format('YYYY-MM-DD'),
remark: fileds.remark || undefined,
fids: fileds.fids
};
purchasePayApply(params).then(res => {
message.success("提交成功");
setBtnloading(false);
onCancel();
}).catch(e => {
message.error(e.message);
setBtnloading(false);
});
});
};
return (
<Modal
title="付款申请"
visible={visible}
onCancel={() => onCancel()}
maskClosable={false}
width={600}
footer={[
<Button loading={btnloading} onClick={() => { onCancel(); }}>取消</Button>,
<Button
loading={btnloading}
type="primary"
htmlType="submit"
onClick={() => {
if (item?.purchaseId && (item.payAmount > item.amount)) {
setIsSure(true);
} else {
apply();
}
}}
>
提交申请
</Button>
]}
>
<Form
form={form}
labelCol={{span: 4}}
wrapperCol={{span: 16}}
>
<Item label="往来单位" name="supplierName">
<Input style={{width: 250}} disabled />
</Item>
<Item label="结算门店" name="shopName">
<Input style={{width: 250}} disabled />
</Item>
<Item label="采购金额" name="amount">
<Input style={{width: 250}} disabled addonAfter="元" />
</Item>
<Item label="未支付金额" name="onPayAmount">
<Input style={{width: 250}} disabled addonAfter="元" />
</Item>
<Item label="发票金额比例" name="proportion">
<Input style={{width: 250}} disabled addonAfter="%" />
</Item>
<Item
label="付款金额"
name="payAmount"
required
rules={[
{ required: true, message: '请输入付款金额' },
({ getFieldValue }) => ({
validator(_, value) {
if (value <= getFieldValue('onPayAmount')) {
return Promise.resolve();
}
return Promise.reject(new Error('付款金额不能超过未付款金额'));
},
}),
]}
>
<Input style={{width: 250}} placeholder="请输入付款金额" addonAfter="元" />
</Item>
<Item label="账期" name="payDays" required rules={[{ required: true, message: '请选择付款账期' }]}>
<DatePicker placeholder="请选择付款账期" style={{width: 250}} />
</Item>
<Item label="申请理由" name="remark">
<Input.TextArea rows={3} style={{width: 250}} />
</Item>
<Item label="配件清单">
<span style={{color: "#0000FF", cursor: "pointer"}} onClick={() => { setPartVisible(true); setItemPurchaseId(item?.purchaseId); }}>查看<RightOutlined /></span>
</Item>
<Item label="附件" name="fids">
<ImageUpload max={6} />
</Item>
</Form>
<PurchasePartModal itemPurchaseId={itemPurchaseId} visible={partVisible} onCancel={() => setPartVisible(false)} />
<Modal
visible={isSure}
title="外采付款申请确认"
width={400}
maskClosable={false}
onCancel={() => setIsSure(false)}
onOk={() => { setIsSure(false); apply(); }}
>
<h4>外采金额已完成支付，是否继续发起外采付款申请?</h4>
</Modal>
</Modal>
);
}