canrd-main / canrd-erp-front · Commits

Commit 8b892bf231139009a0a9f52085fdda1166c32c4d

Authored by 曾国涛
1 parent ac7b28d0

fix(invoice): 修正发票记录详情模态框中的表单提交行为 

解决了开发者在发票记录详情模态框中提交表单时遇到的问题。表单提交后，现在将正确重新加载表格，不再出现错误。

Closes 4a5514341356941f39768413591ac711eaf681c5
Inline Side-by-side
Showing 8 changed files with 67 additions and 494 deletions
src/pages/Invoice/Invoice/index.tsx
  View file @8b892bf
... ... @@ -130,7 +130,7 @@ const InvoiceRecord = () => {
130 130 type="link"
131 131 onClick={() => {
132 132 setInvoiceVerificationVisible(true);
133   - setInvoiceId(record.invoiceId);
  133 + setInvoiceId(record.id);
134 134 }}
135 135 >
136 136 查看
... ...
src/pages/Invoice/InvoiceRecord/components/InvoiceRecordDetailModal.tsx
  View file @8b892bf
... ... @@ -21,7 +21,7 @@ import {
21 21 import { Button, Divider, Form, Space, message } from 'antd';
22 22 import { useEffect, useRef, useState } from 'react';
23 23  
24   -export default ({ id, setVisible }) => {
  24 +export default ({ id, setVisible, reloadTable }) => {
25 25 const [readOnly, setReadOnly] = useState(true);
26 26 const [detailTableData, setDetailTableData] = useState([]);
27 27 const [payees, setPayees] = useState([]);
... ... @@ -124,6 +124,7 @@ export default ({ id, setVisible }) => {
124 124 message.success('提交成功');
125 125 }
126 126 setVisible(false);
  127 + reloadTable();
127 128 return true;
128 129 }}
129 130 >
... ... @@ -168,6 +169,7 @@ export default ({ id, setVisible }) => {
168 169 },
169 170 });
170 171 if (result.result === RESPONSE_CODE.SUCCESS) {
  172 + reloadTable();
171 173 message.success('提交成功');
172 174 }
173 175 return true;
... ...
src/pages/Invoice/InvoiceRecord/index.tsx
  View file @8b892bf
... ... @@ -239,7 +239,7 @@ const InvoiceRecord = () => {
239 239 },
240 240 {
241 241 title: '开票状态',
242   - key: 'invoiceRecordStatus',
  242 + key: 'status',
243 243 valueType: 'select',
244 244 dataIndex: 'status',
245 245 filters: true,
... ... @@ -474,6 +474,9 @@ const InvoiceRecord = () => {
474 474 key="detail"
475 475 id={invoiceRecord.id}
476 476 setVisible={setInvoiceRecordDetailVisible}
  477 + reloadTable={() => {
  478 + processedRecordRef?.current?.reload();
  479 + }}
477 480 />
478 481 ) : (
479 482 ''
... ...
src/pages/Invoice/waitProcessRecord/components/InvoiceRecordDetailModal.tsx deleted 100644 → 0
  View file @ac7b28d
1   -import { RESPONSE_CODE } from '@/constants/enum';
2   -import InvoiceDetailTable from '@/pages/Invoice/waitProcessRecord/components/InvoiceDetailTable';
3   -import {
4   - postServiceConstGetPayeeEnum,
5   - postServiceConstInvoiceType,
6   - postServiceConstInvoicingType,
7   - postServiceInvoiceGetInvoiceRecord,
8   - postServiceInvoiceModifyRecord,
9   -} from '@/services';
10   -import { enumToSelect } from '@/utils';
11   -import {
12   - ModalForm,
13   - ProCard,
14   - ProForm,
15   - ProFormInstance,
16   - ProFormList,
17   - ProFormSelect,
18   - ProFormText,
19   - ProFormTextArea,
20   -} from '@ant-design/pro-components';
21   -import { Button, Divider, Form, Space, message } from 'antd';
22   -import { useEffect, useRef, useState } from 'react';
23   -
24   -export default ({ id, setVisible }) => {
25   - const [readOnly, setReadOnly] = useState(true);
26   - const [detailTableData, setDetailTableData] = useState([]);
27   - const [payees, setPayees] = useState([]);
28   - const [payeeNameOptions, setPayeeNameOptions] = useState([]);
29   - const formRef = useRef<ProFormInstance>();
30   - const [form] = Form.useForm();
31   -
32   - useEffect(() => {
33   - console.log('id' + id);
34   - const getPayees = async () => {
35   - let res = await postServiceConstGetPayeeEnum();
36   - setPayees(res.data);
37   - let payeeNameOptions = res.data.map((item) => {
38   - return {
39   - label: item.payeeName,
40   - value: item.payeeName,
41   - };
42   - });
43   - setPayeeNameOptions(payeeNameOptions);
44   - };
45   - getPayees();
46   - }, []);
47   - const getRecord = async (id) => {
48   - let ret = await postServiceInvoiceGetInvoiceRecord({
49   - query: {
50   - id: id,
51   - },
52   - });
53   - console.log(ret.data);
54   - const updatedInvoiceDetails = ret.data.invoiceDetails?.map(
55   - (item, index) => ({
56   - ...item, // 保留原有属性
57   - tid: index + 1, // 添加tid属性，这里以T开头，后面跟索引+1，仅作示例，实际可根据需求生成tid
58   - }),
59   - );
60   - setDetailTableData(updatedInvoiceDetails);
61   - };
62   - useEffect(() => {
63   - getRecord(id);
64   - }, []);
65   -
66   - const updateDetails = (values) => {
67   - setDetailTableData(values);
68   - };
69   - return (
70   - <>
71   - <Space>
72   - <ModalForm
73   - open
74   - title="发票详情"
75   - formRef={formRef}
76   - request={async () => {
77   - let ret = await postServiceInvoiceGetInvoiceRecord({
78   - query: {
79   - id: id,
80   - },
81   - });
82   - const data = ret.data;
83   - const orderIdMap = data.orderIdMap;
84   - const orderIdList = [];
85   -
86   - // 使用Object.entries()遍历属性
87   - Object.entries(orderIdMap).forEach(([key, value]) => {
88   - const orderId = {
89   - mainId: key,
90   - subIds: value,
91   - };
92   - orderIdList.push(orderId);
93   - });
94   - return {
95   - ...data,
96   - orderIdList: orderIdList,
97   - };
98   - }}
99   - submitter={{
100   - render: () => {
101   - return [
102   - <Button
103   - type={readOnly ? 'primary' : 'default'}
104   - key="ok"
105   - onClick={() => {
106   - setReadOnly(!readOnly);
107   - }}
108   - >
109   - {readOnly ? '编辑' : '取消编辑'}
110   - </Button>,
111   - <>
112   - {!readOnly && (
113   - <Button
114   - type="primary"
115   - key="submit"
116   - onClick={async () => {
117   - const result = await postServiceInvoiceModifyRecord({
118   - data: {
119   - ...form.getFieldsValue(),
120   - invoiceDetails: [...detailTableData],
121   - },
122   - });
123   - if (result.result === RESPONSE_CODE.SUCCESS) {
124   - message.success('提交成功');
125   - }
126   - setVisible(false);
127   - return true;
128   - }}
129   - >
130   - 提交
131   - </Button>
132   - )}
133   - </>,
134   - /*<Button
135   - type={'default'}
136   - key="ok"
137   - onClick={() => {
138   - setVisible(false)
139   - }}
140   - >
141   - 取消
142   - </Button>,*/
143   - ];
144   - },
145   - }}
146   - width={1200}
147   - form={form}
148   - autoFocusFirstInput
149   - modalProps={{
150   - destroyOnClose: true,
151   - onCancel: () => {
152   - setVisible(false);
153   - },
154   - }}
155   - grid={true}
156   - layout="horizontal"
157   - rowProps={{
158   - gutter: [0, 0],
159   - }}
160   - submitTimeout={2000}
161   - onFinish={async (values) => {
162   - const result = await postServiceInvoiceModifyRecord({
163   - data: {
164   - ...values,
165   - invoiceDetails: {
166   - ...detailTableData,
167   - },
168   - },
169   - });
170   - if (result.result === RESPONSE_CODE.SUCCESS) {
171   - message.success('提交成功');
172   - }
173   - return true;
174   - }}
175   - >
176   - <ProCard
177   - title="基础信息"
178   - bordered
179   - //
180   - headStyle={{}}
181   - headerBordered
182   - size={'small'}
183   - >
184   - <ProForm.Group>
185   - <ProFormText
186   - readonly
187   - name="id"
188   - label="订单批号"
189   - colProps={{
190   - span: 5,
191   - }}
192   - tooltip="最长为 24 位"
193   - placeholder="请输入名称"
194   - />
195   -
196   - <ProFormText
197   - readonly
198   - width="md"
199   - colProps={{
200   - span: 5,
201   - }}
202   - name="createByName"
203   - label="销售代表"
204   - placeholder="请输入名称"
205   - />
206   - <ProFormText
207   - readonly
208   - width="md"
209   - colProps={{
210   - span: 5,
211   - }}
212   - name="createTime"
213   - label="申请时间"
214   - placeholder="请输入名称"
215   - />
216   - <ProFormSelect
217   - name="type"
218   - label="发票类型"
219   - colProps={{
220   - span: 5,
221   - }}
222   - readonly={readOnly}
223   - request={async () => {
224   - let invoiceTypeRet = await postServiceConstInvoiceType();
225   - return enumToSelect(invoiceTypeRet.data);
226   - }}
227   - placeholder="Please select a country"
228   - rules={[
229   - { required: true, message: 'Please select your country!' },
230   - ]}
231   - />
232   - <ProFormSelect
233   - name="invoicingType"
234   - readonly={readOnly}
235   - label="开具类型"
236   - colProps={{
237   - span: 4,
238   - }}
239   - request={async () => {
240   - let invoicingTypeRet = await postServiceConstInvoicingType();
241   - let options = enumToSelect(invoicingTypeRet.data);
242   - return options;
243   - }}
244   - placeholder="Please select a country"
245   - rules={[
246   - { required: true, message: 'Please select your country!' },
247   - ]}
248   - />
249   - <ProFormList
250   - label="订单号"
251   - name="orderIdList"
252   - creatorButtonProps={false}
253   - itemRender={({}, { record }) => {
254   - console.log('record' + JSON.stringify(record));
255   - return (
256   - <Space>
257   - <Button
258   - key={record.mainId}
259   - className="pl-1 pr-0"
260   - type="link"
261   - target="_blank"
262   - href={'/order?id=' + record.mainId}
263   - >
264   - {record.mainId}
265   - </Button>
266   - (
267   - {record.subIds.map((item) => {
268   - return (
269   - <Button
270   - key={item}
271   - className="pl-1 pr-0"
272   - type="link"
273   - target="_blank"
274   - href={'/order?subOrderId=' + item}
275   - >
276   - {item}
277   - </Button>
278   - );
279   - })}
280   - )
281   - <Divider type="vertical" />
282   - </Space>
283   - );
284   - }}
285   - >
286   - <ProFormText allowClear={false} width="xs" name={['name']} />
287   - </ProFormList>
288   - </ProForm.Group>
289   - </ProCard>
290   - <hr />
291   - <ProCard title="购方信息" bordered headerBordered size={'small'}>
292   - <ProForm.Group>
293   - <ProFormText
294   - readonly={readOnly}
295   - width="md"
296   - colProps={{
297   - span: 8,
298   - }}
299   - name="partyAName"
300   - label="购方名称"
301   - placeholder="请输入名称"
302   - />
303   - <ProFormText
304   - readonly={readOnly}
305   - width="md"
306   - colProps={{
307   - span: 8,
308   - }}
309   - name="partyATaxid"
310   - label="购方税号"
311   - placeholder="请输入名称"
312   - />
313   - <ProFormText
314   - readonly={readOnly}
315   - width="md"
316   - colProps={{
317   - span: 8,
318   - }}
319   - label="开户银行"
320   - name={'partyAOpenBank'}
321   - placeholder="请输入名称"
322   - />
323   - <ProFormText
324   - readonly={readOnly}
325   - width="md"
326   - colProps={{
327   - span: 8,
328   - }}
329   - name="partyABankAccount"
330   - label="银行账号"
331   - placeholder="请输入名称"
332   - />
333   - <ProFormText
334   - readonly={readOnly}
335   - width="md"
336   - colProps={{
337   - span: 8,
338   - }}
339   - name="partyAAddress"
340   - label="购方地址"
341   - placeholder="请输入名称"
342   - />
343   - <ProFormText
344   - readonly={readOnly}
345   - width="md"
346   - colProps={{
347   - span: 8,
348   - }}
349   - name="partyAPhoneNumber"
350   - label="电话"
351   - placeholder="请输入名称"
352   - />
353   - </ProForm.Group>
354   - </ProCard>
355   - <hr />
356   - <ProCard title="销方信息" bordered headerBordered size={'small'}>
357   - <ProForm.Group>
358   - <ProFormSelect
359   - readonly={readOnly}
360   - width="md"
361   - name="partyBName"
362   - options={payeeNameOptions}
363   - onChange={(value: any) => {
364   - let payee = payees.find((item: any) => {
365   - return item.payeeName === value;
366   - });
367   - console.log(JSON.stringify(payee));
368   - form.setFieldsValue({
369   - partyBTaxid: payee.taxId,
370   - partyBBankAccount: payee.bankAccount,
371   - partyBOpenBank: payee.openBank,
372   - partyBAddress: payee.address,
373   - partyBPhoneNumber: payee.phoneNumber,
374   - });
375   - }}
376   - label="销方名称"
377   - colProps={{
378   - span: 8,
379   - }}
380   - placeholder="请输入名称"
381   - />
382   -
383   - <ProFormText
384   - readonly
385   - width="md"
386   - name="partyBTaxid"
387   - label="销方税号"
388   - colProps={{
389   - span: 8,
390   - }}
391   - placeholder="请输入名称"
392   - />
393   - <ProFormText
394   - readonly
395   - width="md"
396   - name="partyBOpenBank"
397   - label="开户银行"
398   - colProps={{
399   - span: 8,
400   - }}
401   - placeholder="请输入名称"
402   - />
403   - <ProFormText
404   - readonly
405   - width="md"
406   - name="partyBBankAccount"
407   - label="银行账号"
408   - colProps={{
409   - span: 8,
410   - }}
411   - placeholder="请输入名称"
412   - />
413   - <ProFormText
414   - readonly
415   - width="md"
416   - colProps={{
417   - span: 8,
418   - }}
419   - name="partyBAddress"
420   - label="销方地址"
421   - placeholder="请输入名称"
422   - />
423   - <ProFormText
424   - readonly
425   - width="md"
426   - colProps={{
427   - span: 8,
428   - }}
429   - name="partyBPhoneNumber"
430   - label="电话"
431   - placeholder="请输入名称"
432   - />
433   - </ProForm.Group>
434   - </ProCard>
435   - <hr />
436   - <ProCard title="发票明细" bordered headerBordered size={'small'}>
437   - <InvoiceDetailTable
438   - recordId={id}
439   - details={detailTableData}
440   - updateDetails={updateDetails}
441   - readOnly={readOnly}
442   - />
443   - </ProCard>
444   - <hr />
445   - <ProCard title="备注" bordered headerBordered size={'small'}>
446   - <ProFormTextArea
447   - readonly={readOnly}
448   - name="comment"
449   - placeholder="请输入备注"
450   - />
451   - </ProCard>
452   - </ModalForm>
453   - </Space>
454   - </>
455   - );
456   -};
src/pages/Invoice/waitProcessRecord/index.tsx
  View file @8b892bf
  1 +import InvoiceRecordDetailModal from '@/pages/Invoice/InvoiceRecord/components/InvoiceRecordDetailModal';
1 2 import InvoiceModal from '@/pages/Invoice/waitProcessRecord/components/InvoiceModal';
2   -import InvoiceRecordDetailModal from '@/pages/Invoice/waitProcessRecord/components/InvoiceRecordDetailModal';
3 3 import InvoicingModal from '@/pages/Invoice/waitProcessRecord/components/InvoicingModal';
4 4 import ManualInvoicingModal from '@/pages/Invoice/waitProcessRecord/components/ManualInvoicingModal';
5 5 import { PAYEE_OPTIONS } from '@/pages/Order/constant';
... ... @@ -258,7 +258,7 @@ const InvoiceRecord = () =&gt; {
258 258 {
259 259 title: '开票状态',
260 260 valueType: 'select',
261   - key: 'waitProcessRecordStatus',
  261 + key: 'status',
262 262 dataIndex: 'status',
263 263 filters: true,
264 264 onFilter: true,
... ... @@ -423,6 +423,9 @@ const InvoiceRecord = () =&gt; {
423 423 key="detail"
424 424 id={invoiceRecord.id}
425 425 setVisible={setInvoiceRecordDetailVisible}
  426 + reloadTable={() => {
  427 + waitDealrecordActionRef?.current?.reload();
  428 + }}
426 429 />
427 430 ) : (
428 431 ''
... ...
src/pages/Invoice/whiteList/index.tsx
  View file @8b892bf
... ... @@ -111,8 +111,8 @@ export default () =&gt; {
111 111 },
112 112 }}
113 113 pagination={{
114   - pageSize: 5,
115   - onChange: (page) => console.log(page),
  114 + showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
  115 + pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
116 116 }}
117 117 dateFormatter="string"
118 118 headerTitle="白名单"
... ...
src/pages/Order/components/InvoicingDrawerForm.tsx
  View file @8b892bf
... ... @@ -10,10 +10,11 @@ import {
10 10 postServiceInvoiceQueryCompanyInfo,
11 11 postServiceInvoiceWaitReissueInvoices,
12 12 } from '@/services';
13   -import { FloatAdd, enum2ReverseSelect, enumToSelect } from '@/utils';
  13 +import { FloatAdd, FloatSub, enum2ReverseSelect, enumToSelect } from '@/utils';
14 14 import { convertCurrency } from '@/utils/numberUtil';
15 15 import {
16 16 DrawerForm,
  17 + FormListActionType,
17 18 ProCard,
18 19 ProFormDigit,
19 20 ProFormGroup,
... ... @@ -34,6 +35,7 @@ export default ({ dataList, setVisible, mainOrder, onClose }) =&gt; {
34 35 const [form] = Form.useForm();
35 36 const [projectOptions] = useState();
36 37 const [dataListCopy] = useState(dataList);
  38 + const listActionRef = useRef<FormListActionType>();
37 39 const formRef = useRef<ProFormInstance>();
38 40 useEffect(() => {
39 41 const initOptions = async () => {
... ... @@ -378,6 +380,18 @@ export default ({ dataList, setVisible, mainOrder, onClose }) =&gt; {
378 380 <ProFormList
379 381 name="invoiceDetails"
380 382 label="开票明细"
  383 + actionRef={listActionRef}
  384 + actionGuard={{
  385 + beforeRemoveRow: async (index) => {
  386 + const list = listActionRef.current?.getList();
  387 + const totalPrice = list[index].totalPrice;
  388 + form.setFieldValue(
  389 + 'price',
  390 + FloatSub(form.getFieldValue('price'), totalPrice),
  391 + );
  392 + return true;
  393 + },
  394 + }}
381 395 rules={[
382 396 {
383 397 required: true,
... ...
src/pages/Order/components/OrderDrawer.tsx
  View file @8b892bf
... ... @@ -11,7 +11,6 @@ import {
11 11 postKingdeeRepMaterialUnit,
12 12 postKingdeeRepMeasureUnit,
13 13 postPrepaidPhoneAvailableList,
14   - postResearchGroupsNameSet,
15 14 postServiceOrderAddOrder,
16 15 postServiceOrderAfterSalesQuerySnapshotOrder,
17 16 postServiceOrderApplyAfterSales,
... ... @@ -1203,37 +1202,45 @@ export default ({ onClose, data, subOrders, orderOptType }) =&gt; {
1203 1202 placeholder="请输入单位"
1204 1203 rules={[{ required: true, message: '单位必填' }]}
1205 1204 />
1206   - <ProFormSelect
1207   - key={'institutionContactName'}
1208   - width="md"
1209   - showSearch
  1205 + <ProFormText
  1206 + width="lg"
  1207 + key="institutionContactName"
1210 1208 name="institutionContactName"
1211   - rules={[{ required: true, message: '请输入课题组名称!' }]}
1212   - request={async (value) => {
1213   - const keywords = value.keyWords;
1214   - const res = await postResearchGroupsNameSet({
1215   - data: {
1216   - groupName: keywords,
1217   - },
1218   - });
1219   - let options = res?.data?.map((c: any) => {
1220   - return {
1221   - label: c,
1222   - value: c,
1223   - key: c,
1224   - };
1225   - });
1226   - return options;
1227   - }}
1228   - fieldProps={{
1229   - filterOption() {
1230   - return true;
1231   - },
1232   - }}
1233   - debounceTime={1000}
1234   - label="课题组名称"
1235   - placeholder="请输入名称"
  1209 + label="课题组"
  1210 + placeholder="请输入课题组"
  1211 + rules={[{ required: true, message: '课题组必填' }]}
1236 1212 />
  1213 + {/*<ProFormSelect
  1214 + key={'institutionContactName'}
  1215 + width="md"
  1216 + showSearch
  1217 + name="institutionContactName"
  1218 + rules={[{ required: true, message: '请输入课题组名称!' }]}
  1219 + request={async (value) => {
  1220 + const keywords = value.keyWords;
  1221 + const res = await postResearchGroupsNameSet({
  1222 + data: {
  1223 + groupName: keywords,
  1224 + },
  1225 + });
  1226 + let options = res?.data?.map((c: any) => {
  1227 + return {
  1228 + label: c,
  1229 + value: c,
  1230 + key: c,
  1231 + };
  1232 + });
  1233 + return options;
  1234 + }}
  1235 + fieldProps={{
  1236 + filterOption() {
  1237 + return true;
  1238 + },
  1239 + }}
  1240 + debounceTime={1000}
  1241 + label="课题组名称"
  1242 + placeholder="请输入名称"
  1243 + />*/}
1237 1244 <div
1238 1245 style={{
1239 1246 display: 'flex',
... ...