bdad4eb5
Shinner
调试自动分配接口
|
1
|
import { PlusOutlined } from "@ant-design/icons";
|
a60f9f4a
Shinner
调试批量设置接口
|
2
3
4
5
6
7
8
9
10
11
|
import {
Button,
Card,
Col,
Form,
InputNumber,
Modal,
Row,
message,
} from "antd";
|
bdad4eb5
Shinner
调试自动分配接口
|
12
|
import styles from "./index.less";
|
a60f9f4a
Shinner
调试批量设置接口
|
13
|
import React, { useState } from "react";
|
bdad4eb5
Shinner
调试自动分配接口
|
14
|
import { MAX_NUM } from "../entity";
|
a60f9f4a
Shinner
调试批量设置接口
|
15
16
|
import * as API from "../api";
import ShopSelectNew from "@/components/ShopSelectNew";
|
bdad4eb5
Shinner
调试自动分配接口
|
17
|
|
a60f9f4a
Shinner
调试批量设置接口
|
18
19
|
interface SaleTaskBatchSetProps {
id: number;
|
90c2447f
Shinner
零售任务快捷分配交互优化
|
20
|
onCancel: () => void;
|
a60f9f4a
Shinner
调试批量设置接口
|
21
22
23
24
|
onRefresh: () => void;
}
export default function SaleTaskBatchSet(props: SaleTaskBatchSetProps) {
|
bdad4eb5
Shinner
调试自动分配接口
|
25
|
const [form] = Form.useForm();
|
a60f9f4a
Shinner
调试批量设置接口
|
26
27
28
29
30
31
|
// 过滤各项已经选择的门店
// const [selectedShopIds, setSelectedShopIds] = useState({
// grossProfit: [],
// tackCar: [],
// testDrive: [],
// });
|
bdad4eb5
Shinner
调试自动分配接口
|
32
|
|
a60f9f4a
Shinner
调试批量设置接口
|
33
|
const batchSetSaleTask = async (isAssignToAdviser: boolean) => {
|
bdad4eb5
Shinner
调试自动分配接口
|
34
35
|
await form.validateFields();
const values = form.getFieldsValue();
|
d0ec8e16
Shinner
二级表头
|
36
37
38
39
|
if (Object.values(values).every((item) => !item)) {
message.warn("请设置任务后再进行分配");
return;
}
|
a60f9f4a
Shinner
调试批量设置接口
|
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
|
const newValues = {};
Array.from(Object.keys(values)).forEach((valueKey: any) => {
if (values[valueKey]) {
newValues[valueKey] = values[valueKey].map((valueItem: any) => ({
taskAims: valueItem.taskAims,
shopIdList: valueItem.shopIdList.map(
(shopItem: any) => shopItem.shopId
),
}));
}
});
Modal.confirm({
title: isAssignToAdviser
? "确认分配到门店和顾问吗?"
: "确认分配到门店吗?",
zIndex: 1002,
onOk: async () => {
const hide = message.loading("分配中,请稍候", 0);
API.batchSetSaleTask({
assignTask: isAssignToAdviser,
orderTaskApplyId: props.id,
...newValues,
})
.then((res) => {
message.success("分配成功");
props.onRefresh();
})
.catch((error: any) => {
message.error(error.message ?? "请求失败");
})
.finally(() => {
hide();
});
},
});
|
bdad4eb5
Shinner
调试自动分配接口
|
75
76
|
};
|
a60f9f4a
Shinner
调试批量设置接口
|
77
78
79
80
81
82
83
84
85
86
87
|
// const handleFormChange = (changedValues: any) => {
// const labelKey: any = Object.keys(changedValues)[0];
// const list: any = Object.values(changedValues)[0];
// console.log(list);
// if (!list[0]) return;
// if (Object.keys(list[0])[0] === "shopIdList") {
// const newSelectedIds = { ...selectedShopIds };
// newSelectedIds[labelKey] = Object.values(list[0])[0];
// setSelectedShopIds(newSelectedIds);
// }
// };
|
bdad4eb5
Shinner
调试自动分配接口
|
88
89
|
return (
|
a60f9f4a
Shinner
调试批量设置接口
|
90
91
92
93
94
95
96
|
<Form
form={form}
name="sale-task-batch-set-form"
autoComplete="off"
// onValuesChange={handleFormChange}
>
<Form.List name="grossProfitTaskList">
|
bdad4eb5
Shinner
调试自动分配接口
|
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
{(fields, { add, remove }) => (
<Card>
<Row
align="middle"
justify="space-between"
style={{ marginBottom: 15 }}
>
<h4 className={styles.title}>单车毛利任务</h4>
<Button type="link" onClick={() => add()} icon={<PlusOutlined />}>
新增
</Button>
</Row>
{fields.map(({ key, name, ...restField }) => (
<Row gutter={16} key={key}>
<Col className="gutter-row" span={6}>
<Form.Item
{...restField}
|
a60f9f4a
Shinner
调试批量设置接口
|
114
|
name={[name, "taskAims"]}
|
bdad4eb5
Shinner
调试自动分配接口
|
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
rules={[{ required: true, message: "请填写单车毛利任务" }]}
>
<InputNumber
formatter={(value) => `${value}元`}
parser={(value: any) => value.replace("元", "")}
min={0}
max={MAX_NUM}
style={{ width: "100%" }}
precision={2}
placeholder="请填写单车毛利任务"
/>
</Form.Item>
</Col>
<Col className="gutter-row" span={15}>
<Form.Item
{...restField}
|
a60f9f4a
Shinner
调试批量设置接口
|
131
|
name={[name, "shopIdList"]}
|
bdad4eb5
Shinner
调试自动分配接口
|
132
133
|
rules={[{ required: true, message: "请选择适用门店" }]}
>
|
a60f9f4a
Shinner
调试批量设置接口
|
134
135
136
|
<ShopSelectNew
multiple
defaultOptions={{ bizTypes: "1" }}
|
bdad4eb5
Shinner
调试自动分配接口
|
137
|
placeholder="请选择适用门店"
|
a60f9f4a
Shinner
调试批量设置接口
|
138
|
// disabledShopIds={selectedShopIds.grossProfit}
|
bdad4eb5
Shinner
调试自动分配接口
|
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
/>
</Form.Item>
</Col>
<Col className="gutter-row" span={3}>
<Button
type="link"
style={{ color: "#999" }}
onClick={() => remove(name)}
>
删除
</Button>
</Col>
</Row>
))}
</Card>
)}
</Form.List>
|
a60f9f4a
Shinner
调试批量设置接口
|
156
|
<Form.List name="testDriveTaskList">
|
bdad4eb5
Shinner
调试自动分配接口
|
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
{(fields, { add, remove }) => (
<Card style={{ marginTop: 20 }}>
<Row
align="middle"
justify="space-between"
style={{ marginBottom: 15 }}
>
<h4 className={styles.title}>首客试驾成交</h4>
<Button type="link" onClick={() => add()} icon={<PlusOutlined />}>
新增
</Button>
</Row>
{fields.map(({ key, name, ...restField }) => (
<Row gutter={16} key={key}>
<Col className="gutter-row" span={6}>
<Form.Item
{...restField}
|
a60f9f4a
Shinner
调试批量设置接口
|
174
|
name={[name, "taskAims"]}
|
bdad4eb5
Shinner
调试自动分配接口
|
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
rules={[{ required: true, message: "请填写首客试驾成交" }]}
>
<InputNumber
formatter={(value) => `${value}台`}
parser={(value: any) => value.replace("台", "")}
min={0}
max={MAX_NUM}
style={{ width: "100%" }}
precision={0}
placeholder="请填写首客试驾成交"
/>
</Form.Item>
</Col>
<Col className="gutter-row" span={15}>
<Form.Item
{...restField}
|
a60f9f4a
Shinner
调试批量设置接口
|
191
|
name={[name, "shopIdList"]}
|
bdad4eb5
Shinner
调试自动分配接口
|
192
193
|
rules={[{ required: true, message: "请选择适用门店" }]}
>
|
a60f9f4a
Shinner
调试批量设置接口
|
194
195
196
|
<ShopSelectNew
multiple
defaultOptions={{ bizTypes: "1" }}
|
bdad4eb5
Shinner
调试自动分配接口
|
197
|
placeholder="请选择适用门店"
|
a60f9f4a
Shinner
调试批量设置接口
|
198
|
// disabledShopIds={selectedShopIds.testDrive}
|
bdad4eb5
Shinner
调试自动分配接口
|
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
/>
</Form.Item>
</Col>
<Col className="gutter-row" span={3}>
<Button
type="link"
style={{ color: "#999" }}
onClick={() => remove(name)}
>
删除
</Button>
</Col>
</Row>
))}
</Card>
)}
</Form.List>
|
a60f9f4a
Shinner
调试批量设置接口
|
216
|
<Form.List name="tackCarTaskList">
|
bdad4eb5
Shinner
调试自动分配接口
|
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
|
{(fields, { add, remove }) => (
<Card style={{ marginTop: 20 }}>
<Row
align="middle"
justify="space-between"
style={{ marginBottom: 15 }}
>
<h4 className={styles.title}>攻坚车任务</h4>
<Button type="link" onClick={() => add()} icon={<PlusOutlined />}>
新增
</Button>
</Row>
{fields.map(({ key, name, ...restField }) => (
<Row gutter={16} key={key}>
<Col className="gutter-row" span={6}>
<Form.Item
{...restField}
|
a60f9f4a
Shinner
调试批量设置接口
|
234
|
name={[name, "taskAims"]}
|
bdad4eb5
Shinner
调试自动分配接口
|
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
|
rules={[{ required: true, message: "请填写攻坚车任务" }]}
>
<InputNumber
formatter={(value) => `${value}台`}
parser={(value: any) => value.replace("台", "")}
min={0}
max={MAX_NUM}
style={{ width: "100%" }}
precision={0}
placeholder="请填写攻坚车任务"
/>
</Form.Item>
</Col>
<Col className="gutter-row" span={15}>
<Form.Item
{...restField}
|
a60f9f4a
Shinner
调试批量设置接口
|
251
|
name={[name, "shopIdList"]}
|
bdad4eb5
Shinner
调试自动分配接口
|
252
253
|
rules={[{ required: true, message: "请选择适用门店" }]}
>
|
a60f9f4a
Shinner
调试批量设置接口
|
254
255
256
|
<ShopSelectNew
multiple
defaultOptions={{ bizTypes: "1" }}
|
bdad4eb5
Shinner
调试自动分配接口
|
257
|
placeholder="请选择适用门店"
|
a60f9f4a
Shinner
调试批量设置接口
|
258
|
// disabledShopIds={selectedShopIds.tackCar}
|
bdad4eb5
Shinner
调试自动分配接口
|
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
|
/>
</Form.Item>
</Col>
<Col className="gutter-row" span={3}>
<Button
type="link"
style={{ color: "#999" }}
onClick={() => remove(name)}
>
删除
</Button>
</Col>
</Row>
))}
</Card>
)}
</Form.List>
<Row align="middle" justify="center" style={{ marginTop: 20 }}>
|
90c2447f
Shinner
零售任务快捷分配交互优化
|
277
|
<Button onClick={props.onCancel}>取消</Button>
|
bdad4eb5
Shinner
调试自动分配接口
|
278
279
280
|
<Button
type="primary"
style={{ marginLeft: 10 }}
|
a60f9f4a
Shinner
调试批量设置接口
|
281
|
onClick={() => batchSetSaleTask(false)}
|
bdad4eb5
Shinner
调试自动分配接口
|
282
283
284
285
286
287
|
>
分配到门店
</Button>
<Button
type="primary"
style={{ marginLeft: 10 }}
|
a60f9f4a
Shinner
调试批量设置接口
|
288
|
onClick={() => batchSetSaleTask(true)}
|
bdad4eb5
Shinner
调试自动分配接口
|
289
290
291
292
293
294
295
|
>
分配到门店和顾问
</Button>
</Row>
</Form>
);
}
|