List.tsx
3.92 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
import React from 'react';
import { Table, Popconfirm, message, Space } from 'antd';
import { useStore } from '../index';
import {ShopVo, banConfigApi, ListResult} from '../api';
import { isNil } from 'lodash';
import moment from 'moment';
interface Props {
addedValueType?: number // 附加值类型
}
const Column = Table.Column;
export default function LargeList({addedValueType} : Props) {
const {list, paginationConfig, loading, setLoading, setCurrentData, setShopData} = useStore();
const handleDeleteConfig = (id?:number) => {
banConfigApi({id})
.then(res => {
message.success(res.result);
setLoading(true);
}).catch(e => {
message.error(e.message);
});
};
function handleRenderShop(value: ShopVo[] = []) {
if (value.length === 0) {
return '--';
} else if (value.length > 2) {
return `${value[0].shopName}等${value.length}个门店`;
}
return value.map(v => v.shopName).join(",");
}
function handleEdit(value: ListResult = {}) {
setCurrentData({visible: true, title: "编辑", data: value});
}
return (
<Table
dataSource={list}
loading={loading}
rowKey="id"
pagination={paginationConfig}
>
<Column
title="单车附加值目标"
dataIndex="addedValueTask"
align="left"
render={(_text) => (isNil(_text) ? '-' : <span style={{color: "#FF921C", fontSize: '14px'}}>{_text}元<span style={{color: "#333"}}>/台</span></span>)}
/>
<Column
title="商业险产值目标"
dataIndex="vciOutputValueTask"
align="left"
render={(_text) => (isNil(_text) ? '-' : <div style={{display: 'flex', flexDirection: 'column'}}><span style={{color: "#FF921C", fontSize: '14px'}}>{_text}元<span style={{color: "#333"}}>/台</span></span><span>(含驾意险)</span></div>)}
/>
<Column
title={addedValueType === 2 ? "计算保险毛利" : "计算保险产值"}
dataIndex="addedValueTask"
align="left"
render={(_text, record: ListResult) => (
<div style={{display: 'flex', flexDirection: 'column'}}>
<span>商业险金额*{record.vciOutputValueRatio}%</span>
<span>交强险金额*{record.tciOutputValueRatio}%</span>
<span>架意险产值*{record.jcxOutputValueRatio}%</span>
</div>
)}
/>
<Column
title="装潢产值目标"
dataIndex="decoOutputValueTask"
align="left"
render={(_text) => (isNil(_text) ? '-' : <span style={{color: "#FF921C", fontSize: '14px'}}>{_text}元<span style={{color: "#333"}}>/台</span></span>)}
/>
<Column
title={addedValueType === 2 ? "计算装潢毛利" : "计算装潢产值"}
dataIndex="decoOutputValueRatio"
align="left"
render={(_text, record: ListResult) => `装潢产值*${_text}%`}
/>
<Column
title="适用门店"
dataIndex="shopList"
align="left"
render={(_text, record: ListResult) => <span style={{color: "#4189FD"}} onClick={() => setShopData({visible: true, data: record.shopList})}>{handleRenderShop(record.shopList)}</span>}
/>
<Column
title="生效时间"
dataIndex="beginTime"
align="left"
render={(_text, record: ListResult) => <span>{moment(record.beginTime).format("YYYY.MM")}-{moment(record.endTime).format("YYYY.MM")}</span>}
/>
<Column
title="操作"
align="center"
render={(text, record: ListResult) => (
<Space>
<a onClick={() => handleEdit(record)} style={{color: "#4189FD"}}>编辑</a>
<Popconfirm
title="是否删除?"
onConfirm={() => handleDeleteConfig(record.id)}
okText="确定"
cancelText="取消"
>
<a style={{ color: 'red' }}>删除</a>
</Popconfirm>
</Space>
)}
/>
</Table>
);
}