RenderGoodsSpec.tsx
1.67 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
import React, { useCallback, useState } from 'react';
import { Button, Modal, Popover, Table } from 'antd';
interface Props {
specList: StanderList.AuthSpecList[]
}
export default function RenderGoodsSpec({ specList }: Props) {
const [visible, setVisible] = useState(false);
const items = (specList || []).map(i => `${i.standardSpecName}：${i.specDetails}`);
const RenderSpecModal = useCallback(() => (visible ? (
<SpecModal
visible={visible}
onCancel={() => setVisible(false)}
items={specList}
/>
) : null), [visible]);
return (
<>
<Popover
placement="topLeft"
content={<div style={{ maxWidth: 260 }}>{items.join('；')}</div>}
>
<div>
{items.slice(0, 3).map((i: string) => {
return (
<p key={i} style={{ margin: 0, fontSize: 12 }}>{i}</p>
);
})}
{items.length > 3 ? (<span>...</span>) : null}
</div>
<Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setVisible(true)}>查看</Button>
</Popover>
{RenderSpecModal()}
</>
);
}
function SpecModal({ items, onCancel, visible }: any) {
const columns = [
{
title: '规格名称',
dataIndex: 'standardSpecName',
},
{
title: '规格内容',
dataIndex: 'specDetails',
},
{
title: '排序',
dataIndex: 'sort',
},
];
return (
<Modal title="规格属性" open={visible} onCancel={onCancel} footer={false}>
<Table
pagination={false}
bordered
rowKey="standardSpecName"
dataSource={items}
size="small"
columns={columns}
/>
</Modal>
);
}