|
|
1
2
3
4
|
import { getAliYunOSSFileNameFromUrl, isImageName } from '@/utils';
import { ModalForm } from '@ant-design/pro-components';
import { Button, Card, Divider, Empty, Form, Image, List, message } from 'antd';
import Base64 from 'base-64';
|
|
|
5
|
import { cloneDeep } from 'lodash';
|
|
|
6
|
import React, { useEffect, useState } from 'react';
|
|
|
7
8
9
10
|
export default ({ data, onClose }) => {
let newData = cloneDeep(data);
const [fileList, setFileList] = useState<[]>([]);
|
|
|
11
|
console.log(fileList);
|
|
|
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
const [form] = Form.useForm<{
subOrderId: '';
listAnnex: [];
}>();
let newListAnnex = newData.listAnnex?.map((path) => {
let i = 0;
return {
uid: i++,
name: getAliYunOSSFileNameFromUrl(path),
status: 'uploaded',
url: path,
response: { data: [path] },
};
});
newData.listAnnex = newListAnnex;
|
|
|
28
29
30
31
32
33
34
35
36
37
38
39
|
//将图片和其他文件区分开
let images: any[] = [];
let otherAnnex: any[] = [];
newListAnnex.forEach((item: any) => {
if (isImageName(item.name)) {
images.push(item);
} else {
otherAnnex.push(item);
}
});
|
|
|
40
41
42
43
44
45
|
useEffect(() => {
setFileList(newData.listAnnex);
}, []);
return (
<ModalForm
|
|
|
46
|
width={800}
|
|
|
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
open
title="查看附件"
initialValues={newData}
form={form}
modalProps={{
onCancel: onClose,
}}
submitter={{
render: () => {
return [
<Button
key="back"
onClick={() => {
onClose();
}}
>
返回
</Button>,
];
},
}}
>
|
|
|
69
70
71
|
{newListAnnex?.length <= 0 ? (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
) : (
|
|
|
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
127
128
129
|
// <ProFormUploadDragger
// name="listAnnex"
// action="/api/service/order/fileProcess"
// disabled
// fieldProps={{
// headers: { Authorization: localStorage.getItem('token') },
// // onRemove: (file) => {
// // const index = fileList[listMeta.index].indexOf(file);
// // console.log(index);
// // const newFileList = fileList.slice();
// // newFileList.splice(index, 1);
// // setFileList(newFileList);
// // },
// // beforeUpload: (file) => {
// // fileList[listMeta.index] = [...fileList[listMeta.index], file as RcFile];
// // setFileList(fileList);
// // return true;
// // },
// fileList,
// // defaultFileList: itemFileList
// }}
// />
<>
<Card>
<Image.PreviewGroup
className="mr-10"
preview={{
onChange: (current, prev) =>
console.log(`current index: ${current}, prev index: ${prev}`),
}}
>
{images.map((item, index) => (
<React.Fragment key={index}>
<Image
className="max-h-[200px] max-w-[200px]"
src={item.url}
title={item.name}
/>{' '}
<Divider type="vertical" />
</React.Fragment>
))}
</Image.PreviewGroup>
</Card>
<Divider />
<div>
<List
size="small"
header={<div>其他类型文件</div>}
bordered
dataSource={otherAnnex}
renderItem={(item) => (
<List.Item
actions={[
<Button
type="link"
key="key"
href={item.url}
|
|
|
130
|
target="blank"
|
|
|
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
className="py-1"
>
下载
</Button>,
<Button
type="link"
key="key"
className="py-1"
onClick={() => {
message.info(item.url);
window.open(
'/previewApi/onlinePreview?url=' +
encodeURIComponent(Base64.encode(item.url)),
);
}}
>
预览
</Button>,
]}
>
<div>
<span>{item.name}</span>
</div>
</List.Item>
)}
/>
</div>
</>
|
|
|
159
|
)}
|
|
|
160
161
162
|
</ModalForm>
);
};
|