ConfigModal.tsx
2.78 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
import React, { useState, useEffect } from "react";
import "@ant-design/compatible/assets/index.css";
import { Alert, Modal, Form, message, InputNumber } from "antd";
import { ListResult, SaveParams, saveApi, Staff } from "../api";
const FormItem = Form.Item;
const maxFormProps = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
interface Props {
visible: boolean;
onCancel: () => any;
detail?: ListResult;
}
export default function ConfigModal({ visible, onCancel, detail }: Props) {
const [form] = Form.useForm();
console.log("detail", detail);
const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
useEffect(() => {
if (visible) {
form.resetFields();
// init form values
const initialValues: any = {};
detail?.userInfoVOS?.forEach((user: Staff) => {
initialValues[user.staffId] = user.manHoursProp;
});
form.setFieldsValue(initialValues);
}
}, [visible]);
function handleSubmit(fieldsValue: any) {
const configItems = detail!.userInfoVOS.map((user: Staff) => ({
id: user.id,
staffId: user.staffId,
staffName: user.staffName,
manHoursProp: fieldsValue[user.staffId],
}));
const sum = configItems.reduce((acc: number, cur: Staff) => acc + cur.manHoursProp, 0);
if (sum !== 1) {
message.error("所有人员分成占比之和必须等于1");
return;
}
const params: SaveParams = {
shopId: detail!.shopId,
shopName: detail!.shopName,
teamId: detail!.teamId,
teamName: detail!.teamName,
userInfoVOS: configItems,
};
setConfirmLoading(true);
saveApi(params)
.then(() => {
message.success("配置成功!");
setConfirmLoading(false);
onCancel();
})
.catch((e) => {
setConfirmLoading(false);
message.error(e.message);
});
}
return (
<Modal
title="配置机修组工时分成比例"
width={640}
open={visible}
confirmLoading={confirmLoading}
onOk={() => form.submit()}
onCancel={onCancel}
>
<Alert message="每人分成占比以小数表示,所有人员分成占比之和必须等于1" type="info" style={{ marginBottom: 20 }} />
<Form form={form} onFinish={handleSubmit}>
{detail?.userInfoVOS?.map((user: Staff) => (
<FormItem
key={user.id}
name={user.staffId}
label={user.staffName}
rules={[{ required: true, message: "必填" }]}
{...maxFormProps}
>
<InputNumber style={{ width: 200 }} max={1} min={0} step={0.1} defaultValue={user.manHoursProp} />
</FormItem>
))}
</Form>
</Modal>
);
}