index.tsx
5.42 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
129
130
131
132
import { Table, Select, Input, Card, message, Spin } from 'antd';
import React, { useState } from 'react';
import { fetchPartList, ListVO, fetchProgress, ProgressItemVO } from './api';
import { getShopApi } from '@/pages/pms/storage/partShop/api';
import useInitial from "@/hooks/useInitail";
import usePagination from '@/hooks/usePagination';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import * as API from '@/common/api';
import ProcessModal from './components/ProcessModal';
const { Column } = Table;
const Option = Select.Option;
const Search = Input.Search;
export default function Index() {
const { list, setParams, paginationConfig, loading } = usePagination<ListVO>(fetchPartList, [], {});
const { data: shops } = useInitial<PmsStoragePartShop.Option[], {}>(getShopApi, [], {});
const { data: brands } = useInitial(API.getBrandFilterApi, [], {});
const [currentInfo, setCurrentInfo] = useState<{visible?: boolean, item?: ProgressItemVO[], loading?:boolean}>({visible: false, item: [], loading: false});
const process = (id?: string) => {
setCurrentInfo({loading: true});
fetchProgress({handleTypeId: id, handleType: "客户订件"}).then(res => {
setCurrentInfo({ visible: true, item: res.data, loading: false });
}).catch(e => {
message.error(e.message);
setCurrentInfo({ loading: false });
});
};
return (
<PageHeaderWrapper title="客户订件计划进度">
<Card>
<Spin spinning={currentInfo.loading}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
<Search
allowClear
placeholder="配件名称/编码搜索"
style={{ width: 220, marginRight: 10 }}
onSearch={e => setParams({keywords: e}, true)}
/>
<Search
allowClear
placeholder="顾问名称搜索"
style={{ width: 200, marginRight: 10 }}
onSearch={e => setParams({ serviceName: e}, true)}
/>
<Search
allowClear
placeholder="车牌号搜索"
style={{ width: 200, marginRight: 10 }}
onSearch={e => setParams({ plateNo: e}, true)}
/>
<Search
allowClear
placeholder="VIN搜索"
style={{ width: 200, marginRight: 10 }}
onSearch={e => setParams({ vin: e}, true)}
/>
<Select
allowClear
placeholder="品牌筛选"
style={{ width: 200, marginRight: 10 }}
onChange={v => setParams({ brandId: v }, true)}
showSearch
optionFilterProp="children"
>
{brands.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
</Select>
<Select
allowClear
placeholder="门店筛选"
style={{ width: 200, marginRight: 10 }}
onChange={v => setParams({shopId: v }, true)}
showSearch
optionFilterProp="children"
>
{shops.map((item: PmsStoragePartShop.Option) => <Option key={item.id} value={item.id || ""}>{item.name || ""}</Option>)}
</Select>
<Select
allowClear
placeholder="状态筛选"
style={{ width: 200 }}
onChange={v => setParams({status: v }, true)}
showSearch
optionFilterProp="children"
>
<Option value={0} key="1">未确认</Option>
<Option value={1} key="2">未添加</Option>
<Option value={2} key="3">已添加</Option>
<Option value={3} key="4">已完成</Option>
</Select>
</div>
<Table
rowKey={(v: ListVO) => `${v.waitListIds}`}
dataSource={list}
pagination={paginationConfig}
loading={loading}
scroll={{x: 1200}}
>
<Column title="配件编码" dataIndex="partCode" fixed="left" />
<Column title="配件名称" dataIndex="partName" />
<Column title="采购数量" dataIndex="cnt" />
<Column title="采购单价" dataIndex="price" />
<Column title="车牌号" dataIndex="plateNo" />
<Column title="时间" dataIndex="planTime" />
<Column title="VIN" dataIndex="typeId" />
<Column title="工单号" dataIndex="remark" />
<Column title="品牌" dataIndex="brandName" />
<Column title="门店名称" dataIndex="shopName" />
<Column title="服务顾问" dataIndex="userName" />
<Column title="状态" dataIndex="status" />
{/* <Column title="接车服务顾问" dataIndex="userName" /> */}
{/* <Column title="库房名称" dataIndex="storageName" /> */}
{/* <Column title="订件数量" dataIndex="splitCnt" /> */}
<Column
title="进度"
fixed="right"
width={100}
render={(t, _: ListVO) => (
<a onClick={() => process(_.waitListIds)}>查看</a>
)}
/>
</Table>
<ProcessModal visible={currentInfo.visible} processItem={currentInfo.item} onCancel={() => setCurrentInfo({visible: false, item: [], loading: false})} />
</Spin>
</Card>
</PageHeaderWrapper>
);
}