import React, { useState } from 'react';
|
import { Form, InputNumber, Select, DatePicker, Button } from 'antd';
|
import './WageCalculatorContent.css';
|
|
const { RangePicker } = DatePicker;
|
|
/**
|
* 欠薪计算器组件（按 similar_case.html 原型风格重构）
|
*/
|
const WageCalculatorContent = () => {
|
const [form] = Form.useForm();
|
const [result, setResult] = useState(null);
|
|
const handleCalculate = (values) => {
|
const { salary, unpaidMonths, overtimeHours, compensationType, workYears, dateRange } = values;
|
|
const s = salary || 0;
|
const m = unpaidMonths || 0;
|
const otHours = overtimeHours || 0;
|
const years = workYears || 0;
|
|
// 基本欠薪
|
const basicUnpaid = s * m;
|
|
// 加班费：小时工资 * 1.5 * 每月加班小时 * 月数
|
const hourlyWage = s / 21.75 / 8;
|
const overtimeUnpaid = hourlyWage * 1.5 * otHours * m;
|
|
// 经济补偿金
|
let compensation = 0;
|
if (compensationType === '1') {
|
compensation = s * years;
|
} else if (compensationType === '2') {
|
compensation = s * 2 * years;
|
}
|
|
// 滞纳金
|
let lateFee = 0;
|
if (dateRange && dateRange[0] && dateRange[1]) {
|
const daysDiff = dateRange[1].diff(dateRange[0], 'day');
|
lateFee = basicUnpaid * 0.0005 * daysDiff;
|
}
|
|
// 总计
|
const totalUnpaid = basicUnpaid + overtimeUnpaid + compensation + lateFee;
|
|
setResult({
|
basicUnpaid: basicUnpaid.toFixed(2),
|
overtimeUnpaid: overtimeUnpaid.toFixed(2),
|
compensation: compensation.toFixed(2),
|
lateFee: lateFee.toFixed(2),
|
totalUnpaid: totalUnpaid.toFixed(2),
|
salary: s,
|
unpaidMonths: m,
|
overtimeHours: otHours,
|
workYears: years,
|
});
|
};
|
|
return (
|
<div className="wage-calculator-container">
|
{/* 左侧：输入区域 + 计算说明 */}
|
<div className="calc-input-section">
|
<h2 className="calc-section-title">
|
<i className="fas fa-edit"></i>
|
欠薪信息输入
|
</h2>
|
|
<div className="input-form-wrapper">
|
<Form
|
form={form}
|
layout="vertical"
|
onFinish={handleCalculate}
|
initialValues={{ salary: 8000, unpaidMonths: 3, overtimeHours: 30, compensationType: '1' }}
|
>
|
<div className="form-row">
|
<Form.Item label="月平均工资（元）" name="salary" rules={[{ required: true, message: '请输入月平均工资' }]}>
|
<InputNumber style={{ width: '100%' }} min={0} placeholder="请输入工资" />
|
</Form.Item>
|
<Form.Item label="欠薪月数" name="unpaidMonths" rules={[{ required: true, message: '请输入欠薪月数' }]}>
|
<InputNumber style={{ width: '100%' }} min={0} placeholder="请输入月数" />
|
</Form.Item>
|
</div>
|
|
<div className="form-row">
|
<Form.Item label="每月平均加班时长（小时）" name="overtimeHours">
|
<InputNumber style={{ width: '100%' }} min={0} placeholder="可选" />
|
</Form.Item>
|
<Form.Item label="经济补偿类型" name="compensationType">
|
<Select>
|
<Select.Option value="0">无</Select.Option>
|
<Select.Option value="1">N个月工资（根据工作年限）</Select.Option>
|
<Select.Option value="2">2N个月工资（违法解除）</Select.Option>
|
</Select>
|
</Form.Item>
|
</div>
|
|
<div className="form-row">
|
<Form.Item label="工作年限（年）" name="workYears">
|
<InputNumber style={{ width: '100%' }} min={0} placeholder="用于计算补偿金" />
|
</Form.Item>
|
<Form.Item label="欠薪时间范围" name="dateRange">
|
<RangePicker style={{ width: '100%' }} placeholder={['开始日期', '结束日期']} />
|
</Form.Item>
|
</div>
|
|
<Form.Item>
|
<Button type="primary" htmlType="submit" size="large" icon={<i className="fas fa-calculator"></i>}>
|
立即计算欠薪
|
</Button>
|
</Form.Item>
|
</Form>
|
</div>
|
|
{/* 计算说明 */}
|
<div className="calc-explanation">
|
<h3 className="explanation-title">
|
<i className="fas fa-info-circle"></i>
|
计算说明
|
</h3>
|
<div className="explanation-content">
|
<div className="explanation-item">
|
<span className="item-label">基本欠薪：</span>
|
<span className="item-value">月平均工资 × 欠薪月数</span>
|
</div>
|
<div className="explanation-item">
|
<span className="item-label">加班费：</span>
|
<span className="item-value">（月工资 ÷ 21.75 ÷ 8）× 1.5 × 每月加班小时 × 欠薪月数</span>
|
</div>
|
<div className="explanation-item">
|
<span className="item-label">经济补偿金：</span>
|
<span className="item-value">月工资 × 工作年限 × 倍数（N或2N）</span>
|
</div>
|
<div className="explanation-item">
|
<span className="item-label">滞纳金：</span>
|
<span className="item-value">基本欠薪 × 0.05% × 拖欠天数</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 右侧：计算结果 */}
|
<div className="calc-result-section">
|
<h2 className="calc-section-title">
|
<i className="fas fa-receipt"></i>
|
计算结果
|
</h2>
|
|
{result ? (
|
<div className="result-wrapper">
|
{/* 总计金额 */}
|
<div className="result-total">
|
<div className="total-label">欠薪总计</div>
|
<div className="total-amount">¥ {result.totalUnpaid}</div>
|
<div className="total-hint">（以下为详细构成）</div>
|
</div>
|
|
{/* 详细列表 */}
|
<div className="result-details">
|
<div className="detail-card">
|
<div className="detail-icon basic">
|
<i className="fas fa-coins"></i>
|
</div>
|
<div className="detail-info">
|
<div className="detail-label">基本欠薪总额</div>
|
<div className="detail-amount">¥ {result.basicUnpaid}</div>
|
<div className="detail-formula">{result.salary} × {result.unpaidMonths}个月</div>
|
</div>
|
</div>
|
|
<div className="detail-card">
|
<div className="detail-icon overtime">
|
<i className="fas fa-clock"></i>
|
</div>
|
<div className="detail-info">
|
<div className="detail-label">加班费总额</div>
|
<div className="detail-amount">¥ {result.overtimeUnpaid}</div>
|
<div className="detail-formula">基于每月{result.overtimeHours}小时加班</div>
|
</div>
|
</div>
|
|
<div className="detail-card">
|
<div className="detail-icon compensation">
|
<i className="fas fa-hand-holding-usd"></i>
|
</div>
|
<div className="detail-info">
|
<div className="detail-label">经济补偿金</div>
|
<div className="detail-amount">¥ {result.compensation}</div>
|
<div className="detail-formula">工作年限 {result.workYears}年</div>
|
</div>
|
</div>
|
|
<div className="detail-card">
|
<div className="detail-icon late">
|
<i className="fas fa-exclamation-triangle"></i>
|
</div>
|
<div className="detail-info">
|
<div className="detail-label">滞纳金</div>
|
<div className="detail-amount">¥ {result.lateFee}</div>
|
<div className="detail-formula">按日0.05%计算</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 法律依据 */}
|
<div className="legal-basis">
|
<h4 className="basis-title">
|
<i className="fas fa-gavel"></i>
|
法律依据
|
</h4>
|
<div className="basis-content">
|
<p><strong>《劳动法》第五十条</strong>：工资应当以货币形式按月支付给劳动者本人。不得克扣或者无故拖欠劳动者的工资。</p>
|
<p><strong>《劳动合同法》第八十五条</strong>：用人单位未按照劳动合同约定或者国家规定及时足额支付劳动报酬的，由劳动行政部门责令限期支付；逾期不支付的，责令用人单位按应付金额百分之五十以上百分之一百以下的标准向劳动者加付赔偿金。</p>
|
</div>
|
</div>
|
</div>
|
) : (
|
<div className="no-result">
|
<i className="fas fa-calculator"></i>
|
<p>请在左侧输入欠薪信息后点击"立即计算欠薪"</p>
|
</div>
|
)}
|
</div>
|
</div>
|
);
|
};
|
|
export default WageCalculatorContent;
|
