canrd-main / canrd-erp-front · Commits

Commit ad33ec4770be9fd8c8a99edd56a351eef538a86e

Authored by 曾国涛
1 parent 9b99e6f5

feat: 开票功能开发

Inline Side-by-side
Showing 2 changed files with 319 additions and 294 deletions
src/pages/Invoice/components/InvoiceRecordDetailModal.tsx
  View file @ad33ec4
@@ -20,10 +20,9 @@ import { @@ -20,10 +20,9 @@ import {
20 import { Button, Divider, Form, Space, message } from 'antd'; 20 import { Button, Divider, Form, Space, message } from 'antd';
21 import { useEffect, useRef, useState } from 'react'; 21 import { useEffect, useRef, useState } from 'react';
22 22
23 -export default ({ id }) => { 23 +export default ({ id, setVisible }) => {
24 const [readOnly, setReadOnly] = useState(true); 24 const [readOnly, setReadOnly] = useState(true);
25 - const [visible, setVisible] = useState(false);  
26 - const [initialValues, setInitialValues] = useState({}); 25 + const [initialValues] = useState({});
27 const [detailTableData, setDetailTableData] = useState([]); 26 const [detailTableData, setDetailTableData] = useState([]);
28 const [payees, setPayees] = useState([]); 27 const [payees, setPayees] = useState([]);
29 const [payeeNameOptions, setPayeeNameOptions] = useState([]); 28 const [payeeNameOptions, setPayeeNameOptions] = useState([]);
@@ -31,6 +30,7 @@ export default ({ id }) => { @@ -31,6 +30,7 @@ export default ({ id }) => {
31 const [form] = Form.useForm(); 30 const [form] = Form.useForm();
32 31
33 useEffect(() => { 32 useEffect(() => {
  33 + console.log('id' + id);
34 const getPayees = async () => { 34 const getPayees = async () => {
35 let res = await postServiceConstGetPayeeEnum(); 35 let res = await postServiceConstGetPayeeEnum();
36 setPayees(res.data); 36 setPayees(res.data);
@@ -57,13 +57,10 @@ export default ({ id }) => { @@ -57,13 +57,10 @@ export default ({ id }) => {
57 }), 57 }),
58 ); 58 );
59 setDetailTableData(updatedInvoiceDetails); 59 setDetailTableData(updatedInvoiceDetails);
60 - setInitialValues(ret.data);  
61 }; 60 };
62 useEffect(() => { 61 useEffect(() => {
63 - if (visible) {  
64 - getRecord(id);  
65 - }  
66 - }, [visible]); 62 + getRecord(id);
  63 + }, []);
67 64
68 const updateDetails = (values) => { 65 const updateDetails = (values) => {
69 setDetailTableData(values); 66 setDetailTableData(values);
@@ -71,292 +68,291 @@ export default ({ id }) => { @@ -71,292 +68,291 @@ export default ({ id }) => {
71 return ( 68 return (
72 <> 69 <>
73 <Space> 70 <Space>
74 - <a  
75 - type="primary"  
76 - onClick={() => {  
77 - setVisible(true);  
78 - }}  
79 - >  
80 - 详情  
81 - </a>  
82 - {visible && (  
83 - <ModalForm  
84 - open  
85 - onOpenChange={setVisible}  
86 - title="新建表单"  
87 - formRef={formRef}  
88 - initialValues={initialValues}  
89 - submitter={{  
90 - render: () => {  
91 - return [  
92 - <Button  
93 - type={readOnly ? 'primary' : 'default'}  
94 - key="ok"  
95 - onClick={() => {  
96 - setReadOnly(!readOnly);  
97 - }}  
98 - >  
99 - {readOnly ? '编辑' : '取消编辑'}  
100 - </Button>,  
101 - <>  
102 - {!readOnly && (  
103 - <Button  
104 - type="primary"  
105 - key="submit"  
106 - onClick={async () => {  
107 - const result = await postServiceInvoiceModifyRecord({  
108 - data: {  
109 - ...form.getFieldsValue(),  
110 - invoiceDetails: [...detailTableData],  
111 - },  
112 - });  
113 - if (result.result === RESPONSE_CODE.SUCCESS) {  
114 - message.success('提交成功');  
115 - }  
116 - setVisible(false);  
117 - return true;  
118 - }}  
119 - >  
120 - 提交  
121 - </Button>  
122 - )}  
123 - </>,  
124 - /*<Button  
125 - type={'default'}  
126 - key="ok"  
127 - onClick={() => {  
128 - setVisible(false)  
129 - }}  
130 - >  
131 - 取消  
132 - </Button>,*/  
133 - ]; 71 + <ModalForm
  72 + open
  73 + title="新建表单"
  74 + formRef={formRef}
  75 + initialValues={initialValues}
  76 + request={async () => {
  77 + let ret = await postServiceInvoiceGetInvoiceRecord({
  78 + query: {
  79 + id: id,
134 }, 80 },
135 - }}  
136 - width={1200}  
137 - form={form}  
138 - autoFocusFirstInput  
139 - modalProps={{  
140 - destroyOnClose: true,  
141 - }}  
142 - submitTimeout={2000}  
143 - onFinish={async (values) => {  
144 - const result = await postServiceInvoiceModifyRecord({  
145 - data: {  
146 - ...values,  
147 - invoiceDetails: {  
148 - ...detailTableData,  
149 - },  
150 - },  
151 - });  
152 - if (result.result === RESPONSE_CODE.SUCCESS) {  
153 - message.success('提交成功');  
154 - } 81 + });
  82 + return ret.data;
  83 + }}
  84 + submitter={{
  85 + render: () => {
  86 + return [
  87 + <Button
  88 + type={readOnly ? 'primary' : 'default'}
  89 + key="ok"
  90 + onClick={() => {
  91 + setReadOnly(!readOnly);
  92 + }}
  93 + >
  94 + {readOnly ? '编辑' : '取消编辑'}
  95 + </Button>,
  96 + <>
  97 + {!readOnly && (
  98 + <Button
  99 + type="primary"
  100 + key="submit"
  101 + onClick={async () => {
  102 + const result = await postServiceInvoiceModifyRecord({
  103 + data: {
  104 + ...form.getFieldsValue(),
  105 + invoiceDetails: [...detailTableData],
  106 + },
  107 + });
  108 + if (result.result === RESPONSE_CODE.SUCCESS) {
  109 + message.success('提交成功');
  110 + }
  111 + setVisible(false);
  112 + return true;
  113 + }}
  114 + >
  115 + 提交
  116 + </Button>
  117 + )}
  118 + </>,
  119 + /*<Button
  120 + type={'default'}
  121 + key="ok"
  122 + onClick={() => {
  123 + setVisible(false)
  124 + }}
  125 + >
  126 + 取消
  127 + </Button>,*/
  128 + ];
  129 + },
  130 + }}
  131 + width={1200}
  132 + form={form}
  133 + autoFocusFirstInput
  134 + modalProps={{
  135 + destroyOnClose: true,
  136 + onCancel: () => {
155 setVisible(false); 137 setVisible(false);
156 - return true;  
157 - }}  
158 - >  
159 - 基础信息  
160 - <hr />  
161 - <ProForm.Group>  
162 - <ProFormText  
163 - readonly  
164 - name="id"  
165 - label="订单批号"  
166 - tooltip="最长为 24 位"  
167 - placeholder="请输入名称"  
168 - />  
169 -  
170 - <ProFormText  
171 - readonly  
172 - width="md"  
173 - name="createByName"  
174 - label="销售代表"  
175 - placeholder="请输入名称"  
176 - />  
177 - <ProFormText  
178 - readonly  
179 - width="md"  
180 - name="createTime"  
181 - label="申请时间"  
182 - placeholder="请输入名称"  
183 - />  
184 - <ProFormSelect  
185 - name="type"  
186 - label="发票类型"  
187 - readonly={readOnly}  
188 - request={async () => {  
189 - let invoiceTypeRet = await postServiceConstInvoiceType();  
190 - return enumToSelect(invoiceTypeRet.data);  
191 - }}  
192 - placeholder="Please select a country"  
193 - rules={[  
194 - { required: true, message: 'Please select your country!' },  
195 - ]}  
196 - />  
197 - <ProFormSelect  
198 - name="invoicingType"  
199 - readonly={readOnly}  
200 - label="开具类型"  
201 - request={async () => {  
202 - let invoicingTypeRet = await postServiceConstInvoicingType();  
203 - let options = enumToSelect(invoicingTypeRet.data);  
204 - return options;  
205 - }}  
206 - placeholder="Please select a country"  
207 - rules={[  
208 - { required: true, message: 'Please select your country!' },  
209 - ]}  
210 - />  
211 - <ProFormFieldSet  
212 - name="list"  
213 - label="子订单号"  
214 - transform={(value: any) => ({  
215 - list: value,  
216 - startTime: value[0],  
217 - endTime: value[1],  
218 - })}  
219 - >  
220 - {initialValues?.subOrderIds?.map((item) => {  
221 - return (  
222 - <>  
223 - <Button  
224 - className="pl-1 pr-0"  
225 - type="link"  
226 - target="_blank"  
227 - href={'/order?subOrderId=' + item}  
228 - >  
229 - {item}  
230 - </Button>  
231 - <Divider type="vertical" />  
232 - </>  
233 - );  
234 - })}  
235 - </ProFormFieldSet>  
236 - </ProForm.Group>  
237 - 购方信息  
238 - <hr />  
239 - <ProForm.Group>  
240 - <ProFormText  
241 - readonly={readOnly}  
242 - width="md"  
243 - name="partyAName"  
244 - label="购方名称"  
245 - placeholder="请输入名称"  
246 - />  
247 - <ProFormText  
248 - readonly={readOnly}  
249 - width="md"  
250 - name="partyATaxid"  
251 - label="购方税号"  
252 - placeholder="请输入名称"  
253 - />  
254 - <ProFormText  
255 - readonly={readOnly}  
256 - width="md"  
257 - label="开户银行"  
258 - name={'partyAOpenBank'}  
259 - placeholder="请输入名称"  
260 - />  
261 - <ProFormText  
262 - readonly={readOnly}  
263 - width="md"  
264 - name="partyABankAccount"  
265 - label="银行账号"  
266 - placeholder="请输入名称"  
267 - />  
268 - <ProFormText  
269 - readonly={readOnly}  
270 - width="md"  
271 - name="partyAAddress"  
272 - label="购方地址"  
273 - placeholder="请输入名称"  
274 - />  
275 - <ProFormText  
276 - readonly={readOnly}  
277 - width="md"  
278 - name="partyAPhoneNumber"  
279 - label="电话"  
280 - placeholder="请输入名称"  
281 - />  
282 - </ProForm.Group>  
283 - 销方信息  
284 - <hr />  
285 - <ProForm.Group>  
286 - <ProFormSelect  
287 - readonly={readOnly}  
288 - width="md"  
289 - name="partyBName"  
290 - options={payeeNameOptions}  
291 - onChange={(value: any) => {  
292 - let payee = payees.find((item: any) => {  
293 - return item.payeeName === value;  
294 - });  
295 - console.log(JSON.stringify(payee));  
296 - form.setFieldsValue({  
297 - partyBTaxid: payee.taxId,  
298 - partyBBankAccount: payee.bankAccount,  
299 - partyBOpenBank: payee.openBank,  
300 - partyBAddress: payee.address,  
301 - partyBPhoneNumber: payee.phoneNumber,  
302 - });  
303 - }}  
304 - label="销方名称"  
305 - placeholder="请输入名称"  
306 - /> 138 + },
  139 + }}
  140 + submitTimeout={2000}
  141 + onFinish={async (values) => {
  142 + const result = await postServiceInvoiceModifyRecord({
  143 + data: {
  144 + ...values,
  145 + invoiceDetails: {
  146 + ...detailTableData,
  147 + },
  148 + },
  149 + });
  150 + if (result.result === RESPONSE_CODE.SUCCESS) {
  151 + message.success('提交成功');
  152 + }
  153 + return true;
  154 + }}
  155 + >
  156 + 基础信息
  157 + <hr />
  158 + <ProForm.Group>
  159 + <ProFormText
  160 + readonly
  161 + name="id"
  162 + label="订单批号"
  163 + tooltip="最长为 24 位"
  164 + placeholder="请输入名称"
  165 + />
307 166
308 - <ProFormText  
309 - readonly  
310 - width="md"  
311 - name="partyBTaxid"  
312 - label="销方税号"  
313 - placeholder="请输入名称"  
314 - />  
315 - <ProFormText  
316 - readonly  
317 - width="md"  
318 - name="partyBOpenBank"  
319 - label="开户银行"  
320 - placeholder="请输入名称"  
321 - />  
322 - <ProFormText  
323 - readonly  
324 - width="md"  
325 - name="partyBBankAccount"  
326 - label="银行账号"  
327 - placeholder="请输入名称"  
328 - />  
329 - <ProFormText  
330 - readonly  
331 - width="md"  
332 - name="partyBAddress"  
333 - label="销方地址"  
334 - placeholder="请输入名称"  
335 - />  
336 - <ProFormText  
337 - readonly  
338 - width="md"  
339 - name="partyBPhoneNumber"  
340 - label="电话"  
341 - placeholder="请输入名称"  
342 - />  
343 - </ProForm.Group>  
344 - 订单信息  
345 - <hr />  
346 - <InvoiceDetailTable  
347 - recordId={id}  
348 - details={detailTableData}  
349 - updateDetails={updateDetails}  
350 - readOnly={readOnly} 167 + <ProFormText
  168 + readonly
  169 + width="md"
  170 + name="createByName"
  171 + label="销售代表"
  172 + placeholder="请输入名称"
  173 + />
  174 + <ProFormText
  175 + readonly
  176 + width="md"
  177 + name="createTime"
  178 + label="申请时间"
  179 + placeholder="请输入名称"
  180 + />
  181 + <ProFormSelect
  182 + name="type"
  183 + label="发票类型"
  184 + readonly={readOnly}
  185 + request={async () => {
  186 + let invoiceTypeRet = await postServiceConstInvoiceType();
  187 + return enumToSelect(invoiceTypeRet.data);
  188 + }}
  189 + placeholder="Please select a country"
  190 + rules={[
  191 + { required: true, message: 'Please select your country!' },
  192 + ]}
  193 + />
  194 + <ProFormSelect
  195 + name="invoicingType"
  196 + readonly={readOnly}
  197 + label="开具类型"
  198 + request={async () => {
  199 + let invoicingTypeRet = await postServiceConstInvoicingType();
  200 + let options = enumToSelect(invoicingTypeRet.data);
  201 + return options;
  202 + }}
  203 + placeholder="Please select a country"
  204 + rules={[
  205 + { required: true, message: 'Please select your country!' },
  206 + ]}
351 /> 207 />
352 - <ProFormTextArea 208 + <ProFormFieldSet
  209 + name="list"
  210 + label="子订单号"
  211 + transform={(value: any) => ({
  212 + list: value,
  213 + startTime: value[0],
  214 + endTime: value[1],
  215 + })}
  216 + >
  217 + {initialValues?.subOrderIds?.map((item) => {
  218 + return (
  219 + <>
  220 + <Button
  221 + className="pl-1 pr-0"
  222 + type="link"
  223 + target="_blank"
  224 + href={'/order?subOrderId=' + item}
  225 + >
  226 + {item}
  227 + </Button>
  228 + <Divider type="vertical" />
  229 + </>
  230 + );
  231 + })}
  232 + </ProFormFieldSet>
  233 + </ProForm.Group>
  234 + 购方信息
  235 + <hr />
  236 + <ProForm.Group>
  237 + <ProFormText
  238 + readonly={readOnly}
  239 + width="md"
  240 + name="partyAName"
  241 + label="购方名称"
  242 + placeholder="请输入名称"
  243 + />
  244 + <ProFormText
  245 + readonly={readOnly}
  246 + width="md"
  247 + name="partyATaxid"
  248 + label="购方税号"
  249 + placeholder="请输入名称"
  250 + />
  251 + <ProFormText
353 readonly={readOnly} 252 readonly={readOnly}
354 - name="comment"  
355 - label="备注"  
356 - placeholder="请输入备注" 253 + width="md"
  254 + label="开户银行"
  255 + name={'partyAOpenBank'}
  256 + placeholder="请输入名称"
  257 + />
  258 + <ProFormText
  259 + readonly={readOnly}
  260 + width="md"
  261 + name="partyABankAccount"
  262 + label="银行账号"
  263 + placeholder="请输入名称"
  264 + />
  265 + <ProFormText
  266 + readonly={readOnly}
  267 + width="md"
  268 + name="partyAAddress"
  269 + label="购方地址"
  270 + placeholder="请输入名称"
  271 + />
  272 + <ProFormText
  273 + readonly={readOnly}
  274 + width="md"
  275 + name="partyAPhoneNumber"
  276 + label="电话"
  277 + placeholder="请输入名称"
  278 + />
  279 + </ProForm.Group>
  280 + 销方信息
  281 + <hr />
  282 + <ProForm.Group>
  283 + <ProFormSelect
  284 + readonly={readOnly}
  285 + width="md"
  286 + name="partyBName"
  287 + options={payeeNameOptions}
  288 + onChange={(value: any) => {
  289 + let payee = payees.find((item: any) => {
  290 + return item.payeeName === value;
  291 + });
  292 + console.log(JSON.stringify(payee));
  293 + form.setFieldsValue({
  294 + partyBTaxid: payee.taxId,
  295 + partyBBankAccount: payee.bankAccount,
  296 + partyBOpenBank: payee.openBank,
  297 + partyBAddress: payee.address,
  298 + partyBPhoneNumber: payee.phoneNumber,
  299 + });
  300 + }}
  301 + label="销方名称"
  302 + placeholder="请输入名称"
  303 + />
  304 +
  305 + <ProFormText
  306 + readonly
  307 + width="md"
  308 + name="partyBTaxid"
  309 + label="销方税号"
  310 + placeholder="请输入名称"
  311 + />
  312 + <ProFormText
  313 + readonly
  314 + width="md"
  315 + name="partyBOpenBank"
  316 + label="开户银行"
  317 + placeholder="请输入名称"
  318 + />
  319 + <ProFormText
  320 + readonly
  321 + width="md"
  322 + name="partyBBankAccount"
  323 + label="银行账号"
  324 + placeholder="请输入名称"
  325 + />
  326 + <ProFormText
  327 + readonly
  328 + width="md"
  329 + name="partyBAddress"
  330 + label="销方地址"
  331 + placeholder="请输入名称"
  332 + />
  333 + <ProFormText
  334 + readonly
  335 + width="md"
  336 + name="partyBPhoneNumber"
  337 + label="电话"
  338 + placeholder="请输入名称"
357 /> 339 />
358 - </ModalForm>  
359 - )} 340 + </ProForm.Group>
  341 + 订单信息
  342 + <hr />
  343 + <InvoiceDetailTable
  344 + recordId={id}
  345 + details={detailTableData}
  346 + updateDetails={updateDetails}
  347 + readOnly={readOnly}
  348 + />
  349 + <ProFormTextArea
  350 + readonly={readOnly}
  351 + name="comment"
  352 + label="备注"
  353 + placeholder="请输入备注"
  354 + />
  355 + </ModalForm>
360 </Space> 356 </Space>
361 </> 357 </>
362 ); 358 );
src/pages/Invoice/index.tsx
  View file @ad33ec4
@@ -52,6 +52,9 @@ const InvoicePage = () =&gt; { @@ -52,6 +52,9 @@ const InvoicePage = () =&gt; {
52 const [invoiceVerificationVisible, setInvoiceVerificationVisible] = 52 const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
53 useState(false); 53 useState(false);
54 const [invoiceId, setInvoiceId] = useState(undefined); 54 const [invoiceId, setInvoiceId] = useState(undefined);
  55 + const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
  56 + useState(false);
  57 + const [invoiceRecord, setInvoiceRecord] = useState({});
55 58
56 useEffect(() => { 59 useEffect(() => {
57 async function extracted() { 60 async function extracted() {
@@ -304,11 +307,24 @@ const InvoicePage = () =&gt; { @@ -304,11 +307,24 @@ const InvoicePage = () =&gt; {
304 key: 'option', 307 key: 'option',
305 render: (text, record) => { 308 render: (text, record) => {
306 return [ 309 return [
307 - <InvoiceRecordDetailModal 310 + /*<InvoiceRecordDetailModal
308 key="detail" 311 key="detail"
309 id={record.id} 312 id={record.id}
310 subOrderIds={record.subOrderIds} 313 subOrderIds={record.subOrderIds}
311 - />, 314 + onClose={()=>{
  315 + waitDealrecordActionRef.current?.reload();
  316 + }
  317 + }
  318 + />*/
  319 + <a
  320 + key="detail"
  321 + onClick={() => {
  322 + setInvoiceRecordDetailVisible(true);
  323 + setInvoiceRecord(record);
  324 + }}
  325 + >
  326 + 详情
  327 + </a>,
312 <InvoiceModal key="invoiceModal" recordId={record.id} />, 328 <InvoiceModal key="invoiceModal" recordId={record.id} />,
313 ]; 329 ];
314 }, 330 },
@@ -477,11 +493,15 @@ const InvoicePage = () =&gt; { @@ -477,11 +493,15 @@ const InvoicePage = () =&gt; {
477 valueType: 'option', 493 valueType: 'option',
478 key: 'option', 494 key: 'option',
479 render: (text, record) => [ 495 render: (text, record) => [
480 - <InvoiceRecordDetailModal 496 + <a
481 key="detail" 497 key="detail"
482 - id={record.id}  
483 - subOrderIds={record.subOrderIds}  
484 - />, 498 + onClick={() => {
  499 + setInvoiceRecordDetailVisible(true);
  500 + setInvoiceRecord(record);
  501 + }}
  502 + >
  503 + 详情
  504 + </a>,
485 <> 505 <>
486 {record.status === 'SUCCESS' && ( 506 {record.status === 'SUCCESS' && (
487 <> 507 <>
@@ -1066,6 +1086,15 @@ const InvoicePage = () =&gt; { @@ -1066,6 +1086,15 @@ const InvoicePage = () =&gt; {
1066 ) : ( 1086 ) : (
1067 '' 1087 ''
1068 )} 1088 )}
  1089 + {invoiceRecordDetailVisible ? (
  1090 + <InvoiceRecordDetailModal
  1091 + key="detail"
  1092 + id={invoiceRecord.id}
  1093 + setVisible={setInvoiceRecordDetailVisible}
  1094 + />
  1095 + ) : (
  1096 + ''
  1097 + )}
1069 </div> 1098 </div>
1070 ); 1099 );
1071 }; 1100 };