InvoiceDetailTable.tsx
2.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
import InvoiceDetailImportModal from '@/pages/Invoice/components/InvoiceDetailImportModal';
import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable } from '@ant-design/pro-components';
import { useEffect, useState } from 'react';
export default ({ recordId, details, updateDetails, readOnly }) => {
const [editableKeys, setEditableRowKeys] = useState([]);
useEffect(() => {
updateDetails(details);
}, []);
useEffect(() => {
setEditableRowKeys(details?.map((item) => item.tid));
}, [details]);
const columns: ProColumns[] = [
{
title: '项目名称',
readonly: readOnly,
dataIndex: 'projectName',
valueType: 'text',
ellipsis: true,
},
{
title: '规格型号',
readonly: readOnly,
dataIndex: 'specification',
valueType: 'text',
ellipsis: true,
},
{
title: '单位',
readonly: readOnly,
dataIndex: 'unit',
valueType: 'text',
ellipsis: true,
},
{
title: '数量',
readonly: readOnly,
dataIndex: 'quantity',
valueType: 'digit',
ellipsis: true,
},
{
title: '单价',
readonly: readOnly,
dataIndex: 'price',
valueType: 'digit',
ellipsis: true,
},
{
title: '金额',
readonly: readOnly,
dataIndex: 'totalPrice',
valueType: 'digit',
ellipsis: true,
},
{
title: '税率/征收率',
readonly: true,
dataIndex: 'taxRate',
valueType: () => ({
type: 'percent',
}),
ellipsis: true,
},
{
title: '税额',
readonly: true,
dataIndex: 'taxPrice',
valueType: 'digit',
ellipsis: true,
},
{
title: '操作',
valueType: 'option',
width: 250,
render: () => {
return null;
},
},
];
return (
<>
<EditableProTable
headerTitle="可编辑表格"
columns={columns}
rowKey="tid"
scroll={{
x: 960,
}}
value={details}
onChange={updateDetails}
recordCreatorProps={
readOnly
? false
: {
newRecordType: 'dataSource',
record: () => ({
tid: Date.now(),
}),
}
}
toolBarRender={() => {
return [
<InvoiceDetailImportModal key={'import'} recordId={recordId} />,
];
}}
editable={{
type: 'multiple',
editableKeys,
actionRender: (row, config, defaultDoms) => {
return [defaultDoms.delete];
},
onValuesChange: (record, recordList) => {
updateDetails(recordList);
},
onChange: setEditableRowKeys,
}}
/>
</>
);
};