Modal.tsx
4.53 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
import React, { useEffect, useState } from "react";
import { Modal, Form, InputNumber, message, Radio } from "antd";
import * as API from "../api";
import * as TYPE from "../entity";
import LeaveDetail from "./LeaveDetail/index";
interface Props {
type: number;
visiable: boolean;
setVisiable: (value: any) => any;
data: any;
}
const FormItem = Form.Item;
const CreateModal = (props: Props) => {
const { type, visiable, setVisiable, data } = props;
const [form] = Form.useForm();
const [year, setYear] = useState([]);
const [yearData, setYearData] = useState<any>();
useEffect(() => {
if (visiable && type === 1) {
API.fetchDetail(1).then((res: any) => {
const data = res.data || {};
setYear(data);
setYearData(data.conditions);
});
}
}, [visiable]);
useEffect(() => {
form.setFieldsValue({
days: data.days,
advanceDays: data.advanceDays,
times: data.times,
years: data.years,
conditions: data.conditions,
annualWay: data.annualWay,
needAdvancePay: data.needAdvancePay,
});
}, [data]);
function submit(item: any) {
const params = {
id: data.id,
type,
conditions: yearData,
advanceDays: item.advanceDays,
years: item.years,
days: item.days,
times: item.times,
annualWay: item.annualWay,
needAdvancePay: item.needAdvancePay,
};
if (type === 10) {
setVisiable(false);
} else {
API.saveApi(params)
.then((res) => {
message.success("保存成功");
setVisiable(false);
})
.catch((err) => {
message.error("请填写参数", err);
});
}
}
const onAdd = () => {
setVisiable(false);
};
return (
<Modal
title={`${TYPE.typeEnum[type]}设置`}
visible={visiable}
onOk={form.submit}
onCancel={() => onAdd()}
maskClosable={false}
getContainer={false}
width={1000}
>
<Form
form={form}
onFinish={submit}
labelCol={{ span: 8 }}
wrapperCol={{ span: 15 }}
>
<FormItem
name="days"
label="假期"
rules={[{ required: !(type === 1 || type === 8 || type === 6) }]}
hidden={type === 1 || type === 8 || type === 6 || type === 10}
>
<InputNumber min={1} style={{ width: 200 }} addonAfter="天" />
</FormItem>
<FormItem
name="annualWay"
rules={[{ required: type === 1 }]}
hidden={!(type === 1)}
label="年假方式"
>
<Radio.Group>
<Radio value={1}>自然年</Radio>
<Radio value={2}>转正日期滚动12个月</Radio>
</Radio.Group>
</FormItem>
<FormItem
name="years"
label="前置条件(入职需>)"
rules={[{ required: type === 1 }]}
hidden={!(type === 1)}
>
<InputNumber min={1} style={{ width: 200 }} addonAfter="天" />
</FormItem>
<FormItem
name="advanceDays"
label="需提前请假"
rules={[
{
required: !(
type === 3 ||
type === 8 ||
type === 5 ||
type === 10
),
},
]}
hidden={type === 3 || type === 8 || type === 5 || type === 10}
>
<InputNumber min={1} style={{ width: 200 }} addonAfter="天" />
</FormItem>
<FormItem
name="times"
label="月请假次数"
rules={[{ required: type === 6 || type === 8 }]}
hidden={!(type === 6 || type === 8)}
>
<InputNumber min={1} style={{ width: 200 }} addonAfter="次" />
</FormItem>
<FormItem
name="conditions"
label="年假范围"
rules={[{ required: type === 1 }]}
hidden={!(type === 1)}
>
<LeaveDetail
year={year}
yearData={yearData}
setYearData={setYearData}
/>
</FormItem>
<FormItem
name="needAdvancePay"
label="提前预缴产假保险费"
rules={[{ required: type === 4 }]}
hidden={type !== 4}
>
<Radio.Group>
<Radio value>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
</FormItem>
</Form>
{type === 10 && (
<div style={{ textAlign: "center" }}>假期(需审批,不限天数)</div>
)}
</Modal>
);
};
export default CreateModal;