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
| import { Form, Input, Modal, Select, Upload, Space, Button, message } from 'antd';
| import { PageContainer, ProTable } from '@ant-design/pro-components';
| import { forwardRef, useEffect, useImperativeHandle, useState, useRef, useMemo } from 'react';
|
| const AddEditView = ({ visible, onSave, onUpdate, onCancel, }, ref) => {
| const actionRef = useRef();
| const [tableListData, setTableListData] = useState([])
|
| const columns = [
| {
| title: '姓名',
| dataIndex: 'name'
| },
| {
| title: '联系电话',
| hideInSearch: true,
| dataIndex: 'phone'
| },
| {
| title: '身份证号',
| dataIndex: 'idNumber'
| },
| {
| title: '所在社区',
| dataIndex: 'community',
| },
| {
| title: '服务对象',
| dataIndex: 'serviceTarget'
| },
| {
| title: '所在党组织',
| dataIndex: 'partyOrganization'
| },
| {
| title: '失败原因',
| dataIndex: 'failReason',
| },
| ]
|
| useImperativeHandle(ref, () => {
| return {
| refreshData: (data) => {
| setTableListData(()=>data)
| },
| clean: () => {
| setTableListData(()=>[])
| },
| };
| });
|
|
| return (
| <Modal
| getContainer={false}
| width="65%"
| destroyOnClose
| title="数据导入失败提示"
| open={visible}
| onCancel={() => onCancel(false)}
| footer={[
| <Button
| key="submit"
| type="primary"
| onClick={() => onCancel(false)}
| >
| 确认
| </Button>,
| ]}
| >
| <div>
| <div
| style={{
| width: '100%',
| textAlign: 'center',
| marginBottom: '20px',
| fontWeight: 'bold'
| }}
| >
| 以下信息导入失败
| </div>
| <ProTable
| rowKey="id"
| search={false}
| actionRef={actionRef}
| columns={columns}
| dataSource={tableListData}
| pagination={{
| showSizeChanger: true,
| showQuickJumper: true,
| defaultPageSize: 10,
| }}
| toolBarRender={false}
| />
| </div>
| </Modal>
| );
| };
|
| export default forwardRef(AddEditView);
|
|
