Modal.tsx
2.84 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
import React, { useState, useEffect } from "react";
import "@ant-design/compatible/assets/index.css";
import { Select, Modal, Form, message } from "antd";
import * as api from "../api";
import { ListResult, SaveParams, saveApi, getShopRepairGroupsApi, ShopGroup } from "../api";
import useInitial from "@/hooks/useInitail";
const FormItem = Form.Item;
const { Option } = Select;
const maxFormProps = {
labelCol: { span: 5 },
wrapperCol: { span: 15 },
};
interface Props {
visible: boolean;
onCancel: () => any;
shopId?: number;
detail?: ListResult;
}
export default function SaveModal({ visible, onCancel, shopId, detail }: Props) {
const isNew = !detail.id;
const [form] = Form.useForm();
const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
const [userData, setUserData] = useState<api.User[]>([]);
const { data: userList } = useInitial(getShopRepairGroupsApi, [], { shopId });
useEffect(() => {
if (detail.id) {
console.log(detail);
// form.setFieldsValue({ ..._item });
} else {
form.resetFields();
}
}, [visible]);
function save(fieldsValue: any) {
console.log(fieldsValue);
setConfirmLoading(true);
const datas = {
id: detail.id || undefined,
roleCode: fieldsValue.roleCode.value,
partTypes: (fieldsValue.partTypes || []).map((e: any) => e.value),
};
api
.saveApi(datas)
.then(() => {
message.success("操作成功！");
setConfirmLoading(false);
onCancel();
})
.catch((e) => {
setConfirmLoading(false);
message.error(e.message);
});
}
return (
<Modal
title={`${isNew ? "新增" : "编辑"}工时分成比例`}
width={600}
open={visible}
confirmLoading={confirmLoading}
onOk={() => form.submit()}
onCancel={onCancel}
>
<Form form={form} onFinish={save}>
<FormItem name="roleCode" label="角色" rules={[{ required: true, message: "必填" }]} {...maxFormProps}>
<Select labelInValue placeholder="请选择角色">
{userData.map((r) => (
<Select.Option key={r.id} value={r.id}>
{r.name || "--"}
</Select.Option>
))}
</Select>
</FormItem>
<FormItem
label="可领辅料类型"
name="partTypes"
rules={[{ required: true, message: "该选项为必选项" }]}
{...maxFormProps}
>
<Select placeholder="请选择辅料类型" mode="multiple" labelInValue>
{[].map((r) => (
<Select.Option key={r.id} value={r.id}>
{r.name || "--"}
</Select.Option>
))}
</Select>
</FormItem>
</Form>
</Modal>
);
}