SpecEpcModal.tsx
4.81 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
126
127
128
import React, { useState, useEffect } from 'react';
import { Button, Modal, Table, Card, Input, Divider, Popconfirm, message } from "antd";
import { useStore } from '../index';
import { getEpcdetailApi, deleteApi } from '../api';
import usePagination from '@/hooks/usePagination';
import AddepcModal from './AddepcModal';
const { Column } = Table;
export default function specEcpModal() {
const { currentItem, setSpecVisible, specVisible, setCurrentInfo } = useStore();
const [addVisible, setAddVisible] = useState(false);
const [delay, setDelay] = useState(true);
const { list, loading, setLoading, setParams, paginationConfig } = usePagination(getEpcdetailApi, { specCode: currentItem.specCode, configCode: currentItem.configCode }, { delay });
useEffect(() => {
if (currentItem.specCode) {
setParams({ specCode: currentItem.specCode, configCode: currentItem.configCode }, true);
setDelay(false);
} else {
setLoading(false);
setDelay(false);
}
}, [currentItem]);
const _onChange =(v: string) => {
setParams({ keywords: v, current: 1, specCode: currentItem.specCode }, true);
};
function _delete(_item: PartRepertorySpace.PartEpc) {
deleteApi({ id: _item.id }).then(() => {
message.success('操作成功');
setLoading(true);
}).catch(e => {
message.error(e.message);
});
}
return (
<Modal
title="知识库标准"
width={700}
visible={specVisible}
maskClosable={false}
onCancel={() => setSpecVisible(false)}
// forceRender
footer={
<div>
<Button onClick={() => setSpecVisible(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.brandName || '无'}`}
</span>
<span style={{ width: "50%" }}>
<span style={{ color: 'red' }}>*</span>
{`车系：${currentItem.seriesName || '无'}`}
</span>
</div>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start", marginBottom: 20 }}>
<span style={{ width: "50%" }}>
<span style={{ color: 'red' }}>*</span>
{`车型名称：${currentItem.modelName || currentItem.specName||'无'}`}
</span>
<span>
<span style={{ color: 'red' }}>*</span>
{`车型代码：${currentItem.specCode || '无'}`}
</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: 240 }}
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="partCode" />
<Column title="配件名称" dataIndex="partName" />
<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>
);
}