Modal.tsx
3.79 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import React, { useEffect} from "react";
import { Modal, Form, message, Select, Radio, InputNumber } from "antd";
import * as API from '../api';
import useInitial from '@/hooks/useInitail';
const FormItem = Form.Item;
interface Props {
visiable: boolean;
setVisiable: (value: boolean) => any;
setLoading: (value: boolean) => any;
current?: API.Item;
}
function CreateModal(props: Props) {
const { visiable, setVisiable, setLoading, current} = props;
const [form] = Form.useForm();
const { data } = useInitial<API.outType[], {}>(API.fetchOutsideTypeList, [], {});
useEffect(() => {
if (visiable && current?.id) {
form.setFieldsValue({
isAllowReimburse: current.isAllowReimburse,
outsideType: current.outsideType,
breakfast: current.breakfast,
lunch: current.lunch,
dinner: current.dinner,
});
} else {
form.resetFields();
}
}, [visiable]);
const submit = (item:any) => {
const params = {
id: current?.id || undefined,
outsideType: item.outsideType,
outsideTypeName: data.find(i => i.id == item.outsideType)?.name,
isAllowReimburse: item.isAllowReimburse,
breakfast: item.breakfast,
lunch: item.lunch,
dinner: item.dinner
};
if (current?.id) {
API.updataApi(params).then(res => {
message.success('操作成功');
setVisiable(false);
setLoading(true);
}).catch(e => message.error(e.message));
} else {
API.saveApi(params).then(res => {
message.success('操作成功');
setVisiable(false);
setLoading(true);
}).catch(e => message.error(e.message));
}
};
return (
<Modal
title={current?.id ? "编辑外勤报销标准" : "新增外勤报销标准"}
visible={visiable}
onOk={form.submit}
onCancel={() => setVisiable(false)}
maskClosable={false}
getContainer={false}
>
<Form
form={form}
onFinish={submit}
labelCol={{ span: 8 }}
wrapperCol={{ span: 15 }}
>
<FormItem
name="isAllowReimburse"
label="是否允许报销"
rules={[{ required: true, message: "请选择是否允许报销" }]}
initialValue={false}
>
<Radio.Group>
<Radio value>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
</FormItem>
<FormItem
name="outsideType"
label="外勤类型"
rules={[{ required: true, message: "请选择外勤类型" }]}
>
<Select
style={{ width: 200 }}
placeholder="请选择外勤类型"
showSearch
filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{data.map((item: any) => (
<Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
))}
</Select>
</FormItem>
<FormItem
label="餐饮补贴(早餐)"
name="breakfast"
>
<InputNumber
min={0}
formatter={(value) => `${value}元/次`}
style={{ width: 200 }}
/>
</FormItem>
<FormItem
label="餐饮补贴(午餐)"
name="lunch"
>
<InputNumber
min={0}
formatter={(value) => `${value}元/次`}
style={{ width: 200 }}
/>
</FormItem>
<FormItem
label="餐饮补贴(晚餐)"
name="dinner"
>
<InputNumber
min={0}
formatter={(value) => `${value}元/次`}
style={{ width: 200 }}
/>
</FormItem>
</Form>
</Modal>
);
}
export default CreateModal;