import React from 'react';
|
import { Form, InputNumber, Select, DatePicker, Row, Col, Button, Space } from 'antd';
|
|
const { Option } = Select;
|
|
const WageForm = ({ onCalculate, onReset }) => {
|
const [form] = Form.useForm();
|
|
const handleFinish = (values) => {
|
const { dateRange, ...rest } = values;
|
const input = {
|
...rest,
|
startDate: dateRange?.[0]?.format('YYYY-MM-DD'),
|
endDate: dateRange?.[1]?.format('YYYY-MM-DD'),
|
};
|
onCalculate(input);
|
};
|
|
const handleReset = () => {
|
form.resetFields();
|
onReset?.();
|
};
|
|
return (
|
<Form
|
form={form}
|
layout="vertical"
|
onFinish={handleFinish}
|
initialValues={{
|
salary: 8000,
|
unpaidMonths: 3,
|
overtimeHours: 30,
|
compensationType: '1',
|
}}
|
>
|
<Row gutter={16}>
|
<Col span={8}>
|
<Form.Item
|
label="月平均工资（元）"
|
name="salary"
|
rules={[{ required: true, message: '请输入月平均工资' }]}
|
>
|
<InputNumber
|
min={0}
|
step={100}
|
style={{ width: '100%' }}
|
placeholder="请输入月平均工资"
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="欠薪月数"
|
name="unpaidMonths"
|
rules={[{ required: true, message: '请输入欠薪月数' }]}
|
>
|
<InputNumber
|
min={0}
|
step={0.5}
|
style={{ width: '100%' }}
|
placeholder="请输入欠薪月数"
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="每月平均加班时长（小时）"
|
name="overtimeHours"
|
rules={[{ required: true, message: '请输入加班时长' }]}
|
>
|
<InputNumber
|
min={0}
|
step={1}
|
style={{ width: '100%' }}
|
placeholder="请输入加班时长"
|
/>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
<Row gutter={16}>
|
<Col span={8}>
|
<Form.Item
|
label="经济补偿金类型"
|
name="compensationType"
|
rules={[{ required: true, message: '请选择经济补偿金类型' }]}
|
>
|
<Select>
|
<Option value="0">无需支付经济补偿金</Option>
|
<Option value="0.5">工作不满半年，支付半个月工资</Option>
|
<Option value="1">工作半年以上，支付一个月工资</Option>
|
<Option value="n">N个月工资（根据工作年限）</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="工作年限（年）" name="yearsOfWork">
|
<InputNumber
|
min={0}
|
step={0.5}
|
style={{ width: '100%' }}
|
placeholder="如选择 N 个月工资，请填写工作年限"
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="欠薪持续时间"
|
name="dateRange"
|
rules={[{ required: true, message: '请选择欠薪持续时间' }]}
|
>
|
<DatePicker.RangePicker style={{ width: '100%' }} />
|
</Form.Item>
|
</Col>
|
</Row>
|
|
<Row justify="end">
|
<Col>
|
<Space>
|
<Button onClick={handleReset}>重置数据</Button>
|
<Button type="primary" htmlType="submit">
|
计算欠薪总额
|
</Button>
|
</Space>
|
</Col>
|
</Row>
|
</Form>
|
);
|
};
|
|
export default WageForm;
|
