index.tsx
3.2 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
import React, { useState, useEffect } from "react";
import { Card, Table, Button, Tag, message, Select, Input } from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import usePagination from "@/hooks/usePagination";
import { getShopApi } from "@/common/api";
import { getListApi, ListResult, Staff } from "./api";
import ConfigModal from "./components/ConfigModal";
const { Option } = Select;
const { Column } = Table;
export default function ManhoursProportionConfig() {
const { loading, setLoading, list, paginationConfig, setParams } = usePagination(getListApi, {});
const [shops, setShops] = useState<CommonApi.OptionVO[]>([]);
const [visible, setVisible] = useState(false);
const [detail, setDetail] = useState<any>({});
useEffect(() => {
getShopApi({})
.then((res) => {
const { data = [] } = res;
setShops(data);
})
.catch((e) => {
message.error(e.message);
});
}, []);
return (
<PageHeaderWrapper title="机修组工时分成比例配置">
<Card>
<div style={{ display: "flex", marginBottom: "20px" }}>
<Select
style={{ width: 240 }}
showSearch
allowClear
optionFilterProp="children"
placeholder="请选择门店搜索"
onChange={(value) => setParams({ shopId: value }, true)}
>
{shops.map((shop) => (
<Option value={shop.id} key={shop.id}>
{shop.name}
</Option>
))}
</Select>
<Input.Search
style={{ width: 240, marginLeft: 20 }}
placeholder="请输入机修组名称搜索"
allowClear
onSearch={(value) => setParams({ keyword: value }, true)}
/>
</div>
<Table dataSource={list} loading={loading} pagination={paginationConfig} rowKey="teamId">
<Column title="门店" dataIndex="shopName" width={200} />
<Column title="机修组" dataIndex="teamName" width={200} />
<Column
title="分成比例"
dataIndex="userInfoVOS"
render={(users: Staff[]) => {
return users.map((user) => (
<Tag color="blue" key={user.id} style={{ marginRight: 10 }}>
{user.staffName}:{user.manHoursProp}
</Tag>
));
}}
/>
<Column
title="操作"
dataIndex="teamId"
align="center"
width={150}
render={(val, record: ListResult) => (
<Button
size="small"
type="primary"
onClick={() => {
setDetail(record);
setVisible(true);
}}
>
编辑
</Button>
)}
/>
</Table>
</Card>
<ConfigModal
visible={visible}
detail={detail}
onCancel={() => {
setVisible(false);
setDetail({});
setLoading(true);
}}
/>
</PageHeaderWrapper>
);
}