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 20 import { Button, Divider, Form, Space, message } from 'antd';
21 21 import { useEffect, useRef, useState } from 'react';
22 22  
23   -export default ({ id }) => {
  23 +export default ({ id, setVisible }) => {
24 24 const [readOnly, setReadOnly] = useState(true);
25   - const [visible, setVisible] = useState(false);
26   - const [initialValues, setInitialValues] = useState({});
  25 + const [initialValues] = useState({});
27 26 const [detailTableData, setDetailTableData] = useState([]);
28 27 const [payees, setPayees] = useState([]);
29 28 const [payeeNameOptions, setPayeeNameOptions] = useState([]);
... ... @@ -31,6 +30,7 @@ export default ({ id }) => {
31 30 const [form] = Form.useForm();
32 31  
33 32 useEffect(() => {
  33 + console.log('id' + id);
34 34 const getPayees = async () => {
35 35 let res = await postServiceConstGetPayeeEnum();
36 36 setPayees(res.data);
... ... @@ -57,13 +57,10 @@ export default ({ id }) => {
57 57 }),
58 58 );
59 59 setDetailTableData(updatedInvoiceDetails);
60   - setInitialValues(ret.data);
61 60 };
62 61 useEffect(() => {
63   - if (visible) {
64   - getRecord(id);
65   - }
66   - }, [visible]);
  62 + getRecord(id);
  63 + }, []);
67 64  
68 65 const updateDetails = (values) => {
69 66 setDetailTableData(values);
... ... @@ -71,292 +68,291 @@ export default ({ id }) => {
71 68 return (
72 69 <>
73 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 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 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 356 </Space>
361 357 </>
362 358 );
... ...
src/pages/Invoice/index.tsx
  View file @ad33ec4
... ... @@ -52,6 +52,9 @@ const InvoicePage = () =&gt; {
52 52 const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
53 53 useState(false);
54 54 const [invoiceId, setInvoiceId] = useState(undefined);
  55 + const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
  56 + useState(false);
  57 + const [invoiceRecord, setInvoiceRecord] = useState({});
55 58  
56 59 useEffect(() => {
57 60 async function extracted() {
... ... @@ -304,11 +307,24 @@ const InvoicePage = () =&gt; {
304 307 key: 'option',
305 308 render: (text, record) => {
306 309 return [
307   - <InvoiceRecordDetailModal
  310 + /*<InvoiceRecordDetailModal
308 311 key="detail"
309 312 id={record.id}
310 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 328 <InvoiceModal key="invoiceModal" recordId={record.id} />,
313 329 ];
314 330 },
... ... @@ -477,11 +493,15 @@ const InvoicePage = () =&gt; {
477 493 valueType: 'option',
478 494 key: 'option',
479 495 render: (text, record) => [
480   - <InvoiceRecordDetailModal
  496 + <a
481 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 506 {record.status === 'SUCCESS' && (
487 507 <>
... ... @@ -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 1098 </div>
1070 1099 );
1071 1100 };
... ...