曾国涛
authored
|
1
|
import InvoiceDetailImportModal from '@/pages/Invoice/components/InvoiceDetailImportModal';
|
曾国涛
authored
|
2
|
import { InvoiceProjectSelect } from '@/pages/Invoice/components/InvoiceProjectSelect';
|
曾国涛
authored
|
3
4
5
|
import {
ActionType,
EditableProTable,
|
曾国涛
authored
|
6
|
ProCard,
|
曾国涛
authored
|
7
|
ProColumns,
|
曾国涛
authored
|
8
|
ProFormField,
|
曾国涛
authored
|
9
10
|
} from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';
|
曾国涛
authored
|
11
|
|
曾国涛
authored
|
12
|
export default ({ recordId, details, updateDetails, readOnly }) => {
|
曾国涛
authored
|
13
|
const [editableKeys, setEditableRowKeys] = useState([]);
|
曾国涛
authored
|
14
|
const ref = useRef<ActionType>();
|
曾国涛
authored
|
15
16
17
18
19
20
21
22
23
24
25
|
useEffect(() => {
updateDetails(details);
}, []);
useEffect(() => {
setEditableRowKeys(details?.map((item) => item.tid));
}, [details]);
const columns: ProColumns[] = [
{
title: '项目名称',
dataIndex: 'projectName',
|
曾国涛
authored
|
26
|
width: 200,
|
曾国涛
authored
|
27
|
ellipsis: true,
|
曾国涛
authored
|
28
29
|
readonly: readOnly,
renderFormItem: () => {
|
曾国涛
authored
|
30
|
return <InvoiceProjectSelect readOnly={readOnly} />;
|
曾国涛
authored
|
31
|
},
|
曾国涛
authored
|
32
33
34
35
36
37
|
},
{
title: '规格型号',
readonly: readOnly,
dataIndex: 'specification',
valueType: 'text',
|
曾国涛
authored
|
38
|
ellipsis: true,
|
曾国涛
authored
|
39
40
41
42
43
44
|
},
{
title: '单位',
readonly: readOnly,
dataIndex: 'unit',
valueType: 'text',
|
曾国涛
authored
|
45
|
ellipsis: true,
|
曾国涛
authored
|
46
47
48
49
50
51
|
},
{
title: '数量',
readonly: readOnly,
dataIndex: 'quantity',
valueType: 'digit',
|
曾国涛
authored
|
52
|
ellipsis: true,
|
曾国涛
authored
|
53
54
55
56
57
58
|
},
{
title: '单价',
readonly: readOnly,
dataIndex: 'price',
valueType: 'digit',
|
曾国涛
authored
|
59
|
ellipsis: true,
|
曾国涛
authored
|
60
61
62
63
|
},
{
title: '金额',
readonly: readOnly,
|
曾国涛
authored
|
64
|
dataIndex: 'totalPrice',
|
曾国涛
authored
|
65
|
valueType: 'digit',
|
曾国涛
authored
|
66
|
ellipsis: true,
|
曾国涛
authored
|
67
68
69
|
},
{
title: '税率/征收率',
|
曾国涛
authored
|
70
|
readonly: true,
|
曾国涛
authored
|
71
72
73
74
|
dataIndex: 'taxRate',
valueType: () => ({
type: 'percent',
}),
|
曾国涛
authored
|
75
|
ellipsis: true,
|
曾国涛
authored
|
76
77
78
|
},
{
title: '税额',
|
曾国涛
authored
|
79
|
readonly: true,
|
曾国涛
authored
|
80
81
|
dataIndex: 'taxPrice',
valueType: 'digit',
|
曾国涛
authored
|
82
|
ellipsis: true,
|
曾国涛
authored
|
83
84
85
86
|
},
{
title: '操作',
valueType: 'option',
|
曾国涛
authored
|
87
|
width: 100,
|
曾国涛
authored
|
88
89
90
91
92
93
94
95
96
97
|
render: () => {
return null;
},
},
];
return (
<>
<EditableProTable
columns={columns}
|
曾国涛
authored
|
98
|
actionRef={ref}
|
曾国涛
authored
|
99
100
101
102
103
|
rowKey="tid"
scroll={{
x: 960,
}}
value={details}
|
曾国涛
authored
|
104
|
controlled={true}
|
曾国涛
authored
|
105
106
107
108
109
110
111
112
113
114
115
116
|
recordCreatorProps={
readOnly
? false
: {
newRecordType: 'dataSource',
record: () => ({
tid: Date.now(),
}),
}
}
toolBarRender={() => {
return [
|
曾国涛
authored
|
117
|
<InvoiceDetailImportModal key={'import'} recordId={recordId} />,
|
曾国涛
authored
|
118
119
120
121
122
123
124
125
126
127
|
];
}}
editable={{
type: 'multiple',
editableKeys,
actionRender: (row, config, defaultDoms) => {
return [defaultDoms.delete];
},
onValuesChange: (record, recordList) => {
|
曾国涛
authored
|
128
129
130
131
132
|
//修改recordList中tid为record.tid的元素,将它的specification属性设置为invoiceProject的specification属性
const records = recordList.map((item) => {
return item;
});
updateDetails(records);
|
曾国涛
authored
|
133
134
135
|
},
}}
/>
|
曾国涛
authored
|
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
{
<ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
<ProFormField
ignoreFormItem
fieldProps={{
style: {
width: '100%',
},
}}
mode="read"
valueType="jsonCode"
text={JSON.stringify(details)}
/>
</ProCard>
}
|
曾国涛
authored
|
151
152
153
|
</>
);
};
|