RenderSelectGoos.tsx
2.25 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
import SelectGoodsTable from '@/pages/capital/ReceiveRules/component/SelectGoodsTable';
import { Button, Card, Popconfirm, Row, Table } from 'antd';
import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import RenderGoodsSpec from '@/pages/capital/components/RenderGoodsSpec';
const Column = Table.Column;
interface GoodsProps {
onChange?: Function;
value?: any;
multiple?: boolean;
disabled?: boolean;
}
function RenderSelectGoos({ onChange, value = [], multiple, disabled }: GoodsProps) {
const [goodsModal, setGoodsModal] = useState({ visible: false });
function deleteItem(code: string) {
const newData = value.filter((i: any) => i.code !== code);
onChange && onChange(newData);
}
return (
<Card>
{!disabled ? (
<Row justify="end" style={{ marginBottom: 10 }}>
<Button type="primary" icon={<PlusOutlined />} onClick={() => setGoodsModal({ visible: true })}>新增</Button>
</Row>
) : null}
<Table
dataSource={value}
pagination={multiple ? undefined : false}
// loading={loading}
bordered={false}
size="small"
rowKey="code"
>
<Column title="物品名称" dataIndex="name" />
<Column title="物品编码" dataIndex="code" />
<Column
title="型号规格"
dataIndex="spec"
width="16%"
ellipsis
render={(text, record) => text && <RenderGoodsSpec specList={JSON.parse(text)} />}
/>
<Column
align="center"
title="操作"
// width={400}
render={(value, record) => {
return (
<>
<Popconfirm title="确认删除?" onConfirm={() => deleteItem(value.code)}>
{!disabled && (
<Button type="link">
删除
</Button>
)}
</Popconfirm>
</>
);
}}
/>
</Table>
<SelectGoodsTable
multiple={multiple}
visible={goodsModal.visible}
onCancel={() => setGoodsModal({ visible: false })}
onChange={(v) => onChange && onChange(v)}
/>
</Card>
);
}
export default RenderSelectGoos;