EPCModal.tsx
4.5 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
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
import React, { useState, useEffect } from 'react';
import { Button, Modal, Table, Card, message, Divider, Popconfirm, Input } from "antd";
import { useStore } from '../index';
import usePagination from '@/hooks/usePagination';
import { getEpcdetailApi, deleteApi } from '../api';
import AddepcModal from './AddepcModal';
const { Column } = Table;
export default function FactoryEpcDetailModal() {
const { currentItem, setEpcVisible, epcVisible, setCurrentInfo } = useStore();
const [delay, setDelay] = useState(true);
const [addVisible, setAddVisible] = useState(false);
const { list, loading, setLoading, setParams, paginationConfig } = usePagination(getEpcdetailApi, { partCode: currentItem.partCode }, { delay });
const _onChange = (param: string) => {
setParams({ partCode: currentItem.partCode, current: 1, keywords: param }, true);
};
useEffect(() => {
if (currentItem.partCode) {
setParams({ partCode: currentItem.partCode }, true);
setDelay(false);
} else {
setLoading(false);
setDelay(false);
}
}, [currentItem]);
function _delete(_item: PartRepertorySpace.PartEpc) {
deleteApi({ id: _item.id }).then(() => {
message.success('操作成功');
setLoading(true);
}).catch(e => {
message.error(e.message);
});
}
return (
<Modal
title="知识库标准"
width={650}
visible={epcVisible}
maskClosable={false}
onCancel={() => setEpcVisible(false)}
// forceRender
footer={
<div>
<Button onClick={() => setEpcVisible(false)}>取消</Button>
</div>
}
>
<Card title="配件信息" style={{ marginBottom: 20 }}>
<div style={{ display: "flex", flexDirection: "column", paddingLeft: 15, paddingRight: 15 }}>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start", marginBottom: 20 }}>
<span style={{ width: "50%" }}>
<span style={{ color: 'red' }}>*</span>
{`备件编码：${currentItem.partCode || '无'}`}
</span>
<span>
<span style={{ color: 'red' }}>*</span>
{`备件件号：${currentItem.partNo || '无'}`}
</span>
</div>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start", marginBottom: 20 }}>
<span style={{ width: "50%" }}>
<span style={{ color: 'red' }}>*</span>
{`备件名称：${currentItem.partName || '无'}`}
</span>
<span>
<span style={{ color: 'red' }}>*</span>
{`备件单位：${currentItem.unit || '无'}`}
</span>
</div>
</div>
</Card>
<Card title="知识库信息">
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
<Input.Search
placeholder="搜索车型代码"
allowClear
style={{ width: 200 }}
onSearch={v => _onChange(v)}
enterButton
/>
<Button type="primary" onClick={() => { setAddVisible(true); setCurrentInfo({}); }}>新增</Button>
</div>
<Table
size="small"
loading={loading}
pagination={paginationConfig}
dataSource={list}
rowKey={record => `id ${record.id}`}
scroll={{ y: 400 }}
>
<Column title="车型代码" dataIndex="specCode" />
<Column title="标准类型" dataIndex="stdType" render={(text) => <span>{text == 1 ? '厂家标准' : '霏微标准'}</span>} />
<Column title="使用数量" dataIndex="partCount" />
<Column
title="操作"
render={(text, _item: PartRepertorySpace.PartEpc) => (
<>
<a onClick={() => { setAddVisible(true); setCurrentInfo(_item); }}> 编辑</a>
<Divider type="vertical" />
<Popconfirm
title={`是否删除${_item.partCode}?`}
onConfirm={() => _delete(_item)}
okText="确定"
cancelText="取消"
>
<a onClick={(e) => { e.preventDefault(); }}>删除</a>
</Popconfirm>
</>
)}
/>
</Table>
</Card>
<AddepcModal
visible={addVisible}
onCancel={() => setAddVisible(false)}
onFreshing={() => setLoading(true)}
/>
</Modal>
);
}