index.tsx
10.7 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
import React, { useState, useEffect, useMemo } from 'react';
import { Table, Card, Divider, Popover, Button, Tag } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Column from 'antd/lib/table/Column';
import usePagination from '@/hooks/usePagination';
import { getDealerApi } from '@/common/api';
import QueryForm from './comps/QueryForm';
import DetailModal from './comps/DetailModal';
import useInitail from "@/hooks/useInitail";
import { TypeEnum, StatusEnum, LockedStatusEnum, FinanceType, FakeRetailEnum, TransportedStatusEnum, CashCarType, OccupyType } from "./entity";
import RecordModal from './comps/RecordModal';
import * as api from './api';
import st from '../style.less';
import moment from 'moment';
import OptionalDetails from '@/pages/stock/Components/OptionalDetails';
interface Optionals {
visible: boolean,
listItem?: SpecialOfferCar.OptionalVo[],
}
export default function Repertory() {
const { data: delearData, errMsg } = useInitail<CommonApi.OptionVO[], CommonApi.DealerParam>(getDealerApi, [], {});
const { loading, list, setParams, paginationConfig, innerParams, resetParam } = usePagination(api.fetchRepertoryList, { sold: '0' });
const [showDetailModal, setShowDetailModal] = useState(false);
const [listRecord, setListRecord] = useState<Repertory.RepertoryItem>({});
const [recordVisible, setRecordVisible] = useState(false);
const [Optionals, setOptionals] = useState<Optionals>({ visible: false });
const RecordContent = useMemo(() => (
<RecordModal
visible={recordVisible}
onCancel={() => { setRecordVisible(false); }}
record={listRecord}
/>
), [recordVisible]);
const getColumnStyle = (text: number) => {
return (
<span style={{ color: text == 1 ? "red" : "" }}>{FakeRetailEnum[text]}</span>
);
};
return (
<PageHeaderWrapper title="库存管理">
<Card>
<QueryForm delearData={delearData} onChange={(params) => setParams({ ...params, current: 1 }, true)} setSearchParams={setParams} innerParams={innerParams} resetParam={resetParam} />
<Table loading={loading} pagination={paginationConfig} bordered rowKey="vin" size="small" scroll={{ x: 2600, y: 900 }} dataSource={list} className={st.table}>
<Column title="VIN" dataIndex="vin" fixed width="6%" />
<Column
title="车辆名称"
dataIndex="materialName"
fixed
width="8%"
render={(text, _item: Repertory.RepertoryItem) => (
<Popover placement="topLeft" content={text}>
<span>{text}</span>
</Popover>
)}
/>
<Column title="内饰颜色" dataIndex="interiorColor" width="6%" />
<Column
title="物料代码"
dataIndex="materialCode"
width="6%"
sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => {
if ((a.materialCode || "") > (b.materialCode || "")) {
return 1;
} else {
return -1;
}
}}
/>
<Column title="库房" dataIndex="storageName" width="6%" />
<Column title="车辆类型" dataIndex="vehicleType" render={(text) => TypeEnum[text] || ""} width="6%" />
<Column title="是否上传押品" dataIndex="collateralTag" render={(text) => <span>{text ? "是" : "否"}</span>} width="6%" />
<Column title=" 定制车标记" dataIndex="customTag" render={(text) => <span>{text ? "是" : "否"}</span>} width="6%" />
<Column title="定制客户" dataIndex="memberName" render={(text) => <span>{text || "--"}</span>} width="6%" />
<Column
title="车辆标签"
width="6%"
render={(text, record: Repertory.RepertoryItem) => (
<div>
{record.damageCar === 1 && <Tag color="red">质损车</Tag>}
{record.cashCar === 1 && <Tag color="volcano">现金车</Tag>}
{record.showCar === 1 && <Tag color="volcano">展厅样车</Tag>}
{record.crucialCar === 1 && <Tag color="orange">攻坚车</Tag>}
{record.decoratedCar === 1 && <Tag color="gold">前装车</Tag>}
{record.specialPriceCar === 1 && <Tag color="lime">特价车</Tag>}
{record.bindingTag && <Tag color="blue">绑定订单</Tag>}
{record.optionalTag && <Tag color="purple">加装车</Tag>}
</div>
)}
/>
<Column title="押品合同开始时间" dataIndex="invoiceTime" render={(text) => text && moment(text).format("YYYY-MM-DD")} width="6%" />
<Column title="导入系统时间" dataIndex="createTime" render={(text) => text && moment(text).format("YYYY-MM-DD")} width="6%" />
<Column title="启票时间" dataIndex="ticketTime" render={(text) => (text && moment(text).format("YYYY-MM-DD")) || "--"} width="6%" />
<Column title="启票导入间隔时长" dataIndex="intervalDay" render={(text) => text || "--"} sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.intervalDay || 0) - (b.intervalDay || 0)} width="6%" />
<Column title="账期天数" dataIndex="billDay" render={(text) => text || "--"} sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.billDay || 0) - (b.billDay || 0)} width="6%" />
<Column title="库龄天数" dataIndex="storageAgeDay" sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.storageAgeDay || 0) - (b.storageAgeDay || 0)} width="6%" />
<Column title="发运状态" dataIndex="shippingStatus" width="6%" render={(text) => <span>{LockedStatusEnum[text] || "--"} </span>} />
<Column title="调运状态" dataIndex="transportedStatus" render={(text) => <span>{TransportedStatusEnum[text] || "--"}</span>} width="6%" />
<Column title="发运入库时间" dataIndex="storageTime" render={(text) => text && moment(text).format("YYYY-MM-DD")} width="6%" />
{/* <Column title="发运时长(天)" dataIndex="storageTime" render={(text, record: Repertory.RepertoryItem) => (text && Math.floor((text - (record.invoiceTime || 0)) / (24 * 3600 * 1000))) || "--"} width="6%" /> */}
<Column title="发运时长(天)" dataIndex="shippingDay" render={(text) => text || "--"} sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.shippingDay || 0) - (b.shippingDay || 0)} width="6%" />
<Column title="是否锁车" dataIndex="locked" render={(text) => <span style={{ color: text ? "red" : "" }}>{StatusEnum[text]}</span>} width="6%" />
<Column title="锁车时间" dataIndex="lockedTime" render={(text) => (text ? moment(text).format("YYYY-MM-DD HH:mm:ss") : "--")} width="6%" />
<Column title="特殊零售" dataIndex="fakeRetail" render={(text) => getColumnStyle(text)} width="6%" />
<Column title="下零售时间" dataIndex="retailTime" render={(text) => (text && moment(text).format("YYYY-MM-DD")) || "--"} width="6%" />
<Column title="绑定订单" dataIndex="bindingTag" render={(text) => (text ? "是" : "否")} width="6%" />
{/* <Column title="临时锁车标识" dataIndex="tempLocked" render={(text) => (text ? "是" : "否")} width="6%" /> */}
<Column title="质损车" dataIndex="damageCar" render={(text) => getColumnStyle(text)} width="6%" />
<Column title="现金车类型" dataIndex="cashCarType" render={(text) => CashCarType[text] || ""} width="6%" />
<Column title="库存占用类型" dataIndex="occupyType" render={(text) => OccupyType[text] || ""} width="6%" />
<Column title="特价车" dataIndex="specialPriceCar" render={(text) => getColumnStyle(text)} width="6%" />
<Column title="攻坚车" dataIndex="crucialCar" render={(text) => getColumnStyle(text)} width="6%" />
<Column title="展厅样车" dataIndex="showCar" render={(text) => getColumnStyle(text)} width="6%" />
<Column title="前装车" dataIndex="decoratedCar" render={(text) => getColumnStyle(text)} width="5%" />
<Column title="加装车" dataIndex="optionalTag" render={(text) => (text ? "是" : "否")} width="5%" />
<Column title="厂家加装金额" dataIndex="optionalPrice" width="5%" />
<Column
title="加装项目"
width="5%"
dataIndex="optionalItemList"
render={(t, record: SpecialOfferCar.Item) => (t && record.optionalTag ? (<Button type="link" onClick={() => setOptionals({ visible: true, listItem: t })}>查看</Button>) : "--")}
/>
<Column title="锁车时长(天)" dataIndex="lockedDuration" render={(text) => text || "--"} sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.lockedDuration || 0) - (b.lockedDuration || 0)} width="6%" />
<Column title="调运次数" dataIndex="transportedNum" sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.transportedNum || 0) - (b.transportedNum || 0)} render={(text) => text || "--"} width="6%" />
<Column title="启票商家" dataIndex="dealerName" width="8%" />
<Column title="零售价格(元)" dataIndex="dealerRetailPrice" sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.dealerRetailPrice || 0) - (b.dealerRetailPrice || 0)} width="6%" />
<Column title="厂家指导价(元)" dataIndex="dealerRetailPrice" sorter={(a: Repertory.RepertoryItem, b: Repertory.RepertoryItem) => (a.dealerRetailPrice || 0) - (b.dealerRetailPrice || 0)} width="6%" />
<Column title="融资方式" dataIndex="financeType" render={(text) => FinanceType[text] || ""} width="6%" />
<Column
width="6%"
title="操作"
render={(text, record: Repertory.RepertoryItem) => (
<span>
{/* <a onClick={() => { setShowDetailModal(true); setListRecord(record); }}>详情</a>
<Divider type="vertical" /> */}
<a
onClick={() => {
setRecordVisible(true);
setListRecord(record);
}}
>
锁车记录
</a>
</span>
)}
/>
</Table>
</Card>
<DetailModal
visible={showDetailModal}
onCancel={() => {
setShowDetailModal(false);
}}
listItem={listRecord}
/>
<OptionalDetails
{...Optionals}
onCancel={() => setOptionals({ visible: false, listItem: undefined })}
/>
{/* <RecordModal
visible={recordVisible}
onCancel={() => { setRecordVisible(false); }}
record={listRecord}
/> */}
{RecordContent}
</PageHeaderWrapper>
);
}