453 lines
17 KiB
TypeScript
453 lines
17 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Card,
|
||
Descriptions,
|
||
Tag,
|
||
Button,
|
||
Space,
|
||
Typography,
|
||
message,
|
||
Spin,
|
||
Row,
|
||
Col,
|
||
Divider,
|
||
Form,
|
||
InputNumber,
|
||
Input,
|
||
Modal,
|
||
Alert,
|
||
List,
|
||
} from 'antd';
|
||
import {
|
||
CheckOutlined,
|
||
CloseOutlined,
|
||
ArrowLeftOutlined,
|
||
} from '@ant-design/icons';
|
||
import { useParams, useNavigate } from 'react-router-dom';
|
||
import { PerformanceRecord, PerformanceItemDetail } from '../../api/performance';
|
||
import http from '../../api/http';
|
||
import { useIsMobile } from '../../hooks/useBreakpoint';
|
||
import dayjs from 'dayjs';
|
||
|
||
const { Title, Text } = Typography;
|
||
const { TextArea } = Input;
|
||
|
||
const STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||
draft: { label: '草稿', color: 'default' },
|
||
submitted: { label: '已提交', color: 'processing' },
|
||
under_review: { label: '审核中', color: 'warning' },
|
||
completed: { label: '已完成', color: 'success' },
|
||
rejected: { label: '已驳回', color: 'error' },
|
||
};
|
||
|
||
const LEVEL_MAP: Record<string, { label: string; color: string }> = {
|
||
excellent: { label: '优秀', color: 'gold' },
|
||
qualified: { label: '合格', color: 'green' },
|
||
need_motivation: { label: '需激励', color: 'orange' },
|
||
unqualified: { label: '不合格', color: 'red' },
|
||
};
|
||
|
||
interface ItemScoreForm {
|
||
managerScore: number;
|
||
scoreExplanation: string;
|
||
}
|
||
|
||
interface ReviewFormData {
|
||
reviewOpinion: string;
|
||
itemScores: Record<string, ItemScoreForm>;
|
||
}
|
||
|
||
const PerformanceReview: React.FC = () => {
|
||
const { perfId } = useParams<{ perfId: string }>();
|
||
const navigate = useNavigate();
|
||
const isMobile = useIsMobile();
|
||
const [form] = Form.useForm<ReviewFormData>();
|
||
|
||
const [loading, setLoading] = useState(true);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [record, setRecord] = useState<PerformanceRecord | null>(null);
|
||
const [rejectModalOpen, setRejectModalOpen] = useState(false);
|
||
const [rejectReason, setRejectReason] = useState('');
|
||
|
||
useEffect(() => {
|
||
loadDetail();
|
||
}, [perfId]);
|
||
|
||
const loadDetail = async () => {
|
||
if (!perfId) return;
|
||
setLoading(true);
|
||
try {
|
||
const { data } = await http.get(
|
||
`/api/performance/manager/detail/${perfId}`
|
||
);
|
||
const record = data.data || data;
|
||
setRecord(record);
|
||
|
||
// Initialize form with existing manager scores if available
|
||
const itemScores: Record<string, ItemScoreForm> = {};
|
||
data.performanceItems?.forEach((item: PerformanceItemDetail) => {
|
||
itemScores[item.itemName] = {
|
||
managerScore: item.managerScore ?? item.aiScore ?? item.selfScore ?? 0,
|
||
scoreExplanation: item.managerExplanation ?? '',
|
||
};
|
||
});
|
||
form.setFieldsValue({
|
||
reviewOpinion: data.reviewOpinion ?? '',
|
||
itemScores,
|
||
});
|
||
} catch (err: any) {
|
||
message.error(err?.response?.data?.message || '加载绩效详情失败');
|
||
navigate('/manager/subordinates');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleApprove = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
setSubmitting(true);
|
||
|
||
const itemScores = Object.entries(values.itemScores).map(
|
||
([itemName, score]) => ({
|
||
itemName,
|
||
managerScore: score.managerScore,
|
||
managerExplanation: score.scoreExplanation || '',
|
||
})
|
||
);
|
||
|
||
await http.post('/api/performance/manager/review', {
|
||
perfId: Number(perfId),
|
||
reviewOpinion: values.reviewOpinion,
|
||
itemScores,
|
||
});
|
||
|
||
message.success('审核通过，绩效已归档');
|
||
navigate('/manager/subordinates');
|
||
} catch (err: any) {
|
||
if (err?.errorFields) {
|
||
message.error('请完成所有必填项');
|
||
} else {
|
||
message.error(err?.response?.data?.message || '审核失败，请重试');
|
||
}
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleReject = async () => {
|
||
if (!rejectReason.trim()) {
|
||
message.error('请填写驳回原因');
|
||
return;
|
||
}
|
||
|
||
setSubmitting(true);
|
||
try {
|
||
await http.post('/api/performance/manager/reject', {
|
||
perfId: Number(perfId),
|
||
reason: rejectReason,
|
||
});
|
||
message.success('绩效已驳回，员工将收到通知');
|
||
navigate('/manager/subordinates');
|
||
} catch (err: any) {
|
||
message.error(err?.response?.data?.message || '驳回失败，请重试');
|
||
} finally {
|
||
setSubmitting(false);
|
||
setRejectModalOpen(false);
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{ textAlign: 'center', padding: 100 }}>
|
||
<Spin size="large" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!record) {
|
||
return null;
|
||
}
|
||
|
||
const status = STATUS_MAP[record.status] || {
|
||
label: record.status,
|
||
color: 'default',
|
||
};
|
||
const level = record.level ? LEVEL_MAP[record.level] : null;
|
||
const isCompleted = record.status === 'completed';
|
||
|
||
return (
|
||
<div style={{ padding: isMobile ? 12 : 24, maxWidth: 1200, margin: '0 auto' }}>
|
||
<Space style={{ marginBottom: 12 }}>
|
||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/manager/subordinates')} size={isMobile ? 'small' : 'middle'}>
|
||
返回列表
|
||
</Button>
|
||
</Space>
|
||
|
||
<Title level={isMobile ? 4 : 3}>
|
||
绩效审核 — {record.month}
|
||
{isCompleted && <Tag color="success" style={{ marginLeft: 8 }}>已完成</Tag>}
|
||
</Title>
|
||
|
||
{/* 基础信息 */}
|
||
<Card style={{ marginBottom: 12 }} bodyStyle={{ padding: isMobile ? 12 : 24 }}>
|
||
{isMobile ? (
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 16px' }}>
|
||
{[
|
||
{ label: '员工姓名', value: (record as any).userName || '-' },
|
||
{ label: '部门', value: (record as any).userDepartment || '-' },
|
||
{ label: '岗位', value: (record as any).userPosition || '-' },
|
||
{ label: '考核月份', value: record.month },
|
||
{ label: '状态', value: <Tag color={status.color}>{status.label}</Tag> },
|
||
{ label: '提交时间', value: record.submitTime ? dayjs(record.submitTime).format('YYYY-MM-DD HH:mm') : '-' },
|
||
{ label: '自评总分', value: record.selfScore != null ? Number(record.selfScore).toFixed(1) : '-' },
|
||
{ label: 'AI 评分', value: record.aiScore != null ? Number(record.aiScore).toFixed(1) : '-' },
|
||
{ label: '最终总分', value: <Text strong>{record.totalScore != null ? Number(record.totalScore).toFixed(1) : '-'}</Text> },
|
||
].map(({ label, value }) => (
|
||
<div key={label}>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>{label}</Text>
|
||
<div>{value}</div>
|
||
</div>
|
||
))}
|
||
{level && (
|
||
<div>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>绩效等级</Text>
|
||
<div><Tag color={level.color}>{level.label}</Tag></div>
|
||
</div>
|
||
)}
|
||
{isCompleted && record.reviewOpinion && (
|
||
<div style={{ gridColumn: '1 / -1' }}>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>审核意见</Text>
|
||
<div><Text>{record.reviewOpinion}</Text></div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<Descriptions bordered column={3} size="small">
|
||
<Descriptions.Item label="员工姓名">{(record as any).userName || '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="部门">{(record as any).userDepartment || '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="岗位">{(record as any).userPosition || '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="考核月份">{record.month}</Descriptions.Item>
|
||
<Descriptions.Item label="状态"><Tag color={status.color}>{status.label}</Tag></Descriptions.Item>
|
||
<Descriptions.Item label="提交时间">{record.submitTime ? dayjs(record.submitTime).format('YYYY-MM-DD HH:mm') : '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="自评总分">{record.selfScore != null ? Number(record.selfScore).toFixed(1) : '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="AI 评分">{record.aiScore != null ? Number(record.aiScore).toFixed(1) : '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="最终总分"><Text strong>{record.totalScore != null ? Number(record.totalScore).toFixed(1) : '-'}</Text></Descriptions.Item>
|
||
{level && <Descriptions.Item label="绩效等级"><Tag color={level.color}>{level.label}</Tag></Descriptions.Item>}
|
||
{record.rewardPunish && <Descriptions.Item label="奖惩说明" span={2}>{record.rewardPunish}</Descriptions.Item>}
|
||
{isCompleted && record.reviewOpinion && (
|
||
<Descriptions.Item label="审核意见" span={3}>{record.reviewOpinion}</Descriptions.Item>
|
||
)}
|
||
</Descriptions>
|
||
)}
|
||
</Card>
|
||
|
||
{/* 工作汇总 */}
|
||
{record.workSummary && (
|
||
<Card title="工作汇总" style={{ marginBottom: 16 }}>
|
||
<Text>{record.workSummary}</Text>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 考勤信息 */}
|
||
{record.attendance && (
|
||
<Card title="考勤数据" style={{ marginBottom: 12 }} bodyStyle={{ padding: isMobile ? 12 : 24 }}>
|
||
<Row gutter={[8, 8]}>
|
||
<Col xs={12} sm={6}><Text type="secondary">事假：</Text><Text>{record.attendance.leave} 天</Text></Col>
|
||
<Col xs={12} sm={6}><Text type="secondary">迟到：</Text><Text>{record.attendance.late} 次</Text></Col>
|
||
<Col xs={12} sm={6}><Text type="secondary">旷工：</Text><Text>{record.attendance.absent} 天</Text></Col>
|
||
<Col xs={12} sm={6}><Text type="secondary">缺卡：</Text><Text>{record.attendance.lackCard} 次</Text></Col>
|
||
</Row>
|
||
{record.attendance.attendanceScore != null && (
|
||
<Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
|
||
考勤得分：<Text strong>{record.attendance.attendanceScore}</Text> 分
|
||
</Text>
|
||
)}
|
||
</Card>
|
||
)}
|
||
|
||
{/* AI 评分反馈 */}
|
||
{record.aiResult && (
|
||
<Card title="AI 评分反馈" style={{ marginBottom: 16 }}>
|
||
<Descriptions bordered column={1} size="small">
|
||
<Descriptions.Item label="AI 总分">
|
||
<Text strong>{record.aiResult.aiTotalScore != null ? Number(record.aiResult.aiTotalScore).toFixed(1) : '-'}</Text>
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
|
||
{record.aiResult.aiProblems?.length > 0 && (
|
||
<>
|
||
<Divider orientation="left">AI 总结的核心问题</Divider>
|
||
<List
|
||
size="small"
|
||
dataSource={record.aiResult.aiProblems}
|
||
renderItem={(item, i) => (
|
||
<List.Item>
|
||
<Text>
|
||
{i + 1}. {item}
|
||
</Text>
|
||
</List.Item>
|
||
)}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{record.aiResult.aiSuggestions?.length > 0 && (
|
||
<>
|
||
<Divider orientation="left">AI 改进建议</Divider>
|
||
<List
|
||
size="small"
|
||
dataSource={record.aiResult.aiSuggestions}
|
||
renderItem={(item, i) => (
|
||
<List.Item>
|
||
<Text>
|
||
{i + 1}. {item}
|
||
</Text>
|
||
</List.Item>
|
||
)}
|
||
/>
|
||
</>
|
||
)}
|
||
</Card>
|
||
)}
|
||
|
||
{/* 考核项评分 */}
|
||
<Card title="考核项评分与审核" style={{ marginBottom: 16 }}>
|
||
{!isCompleted && (
|
||
<Alert
|
||
type="info"
|
||
message="请为每个考核项填写管理层评分，系统将自动计算最终总分和绩效等级"
|
||
style={{ marginBottom: 16 }}
|
||
showIcon
|
||
/>
|
||
)}
|
||
|
||
<Form form={form} layout="vertical" disabled={isCompleted}>
|
||
{record.performanceItems?.map((item) => (
|
||
<Card
|
||
key={item.itemName}
|
||
size="small"
|
||
style={{ marginBottom: 12, background: '#fafafa' }}
|
||
title={
|
||
<Space>
|
||
<Text strong>{item.itemName}</Text>
|
||
<Tag>{item.weight} 分</Tag>
|
||
<Tag
|
||
color={
|
||
item.itemCategory === 'business' ? 'blue' : 'green'
|
||
}
|
||
>
|
||
{item.itemCategory === 'business'
|
||
? '业务素质'
|
||
: '综合素质'}
|
||
</Tag>
|
||
</Space>
|
||
}
|
||
>
|
||
{isMobile ? (
|
||
// 移动端简化展示
|
||
<div>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>{item.userContent || '-'}</Text>
|
||
<Row gutter={8} style={{ marginTop: 8 }}>
|
||
<Col span={8}><Text type="secondary" style={{ fontSize: 11 }}>自评</Text><br /><Text>{item.selfScore ?? '-'}</Text></Col>
|
||
<Col span={8}><Text type="secondary" style={{ fontSize: 11 }}>AI评分</Text><br /><Text>{item.aiScore ?? '-'}</Text></Col>
|
||
<Col span={8}><Text type="secondary" style={{ fontSize: 11 }}>管理层</Text><br /><Text>{item.managerScore ?? '-'}</Text></Col>
|
||
</Row>
|
||
{item.aiExplanation && <Text type="secondary" style={{ fontSize: 11, display: 'block', marginTop: 4 }}>AI说明：{item.aiExplanation}</Text>}
|
||
</div>
|
||
) : (
|
||
<Descriptions column={3} size="small" bordered>
|
||
<Descriptions.Item label="员工填报内容" span={3}>{item.userContent || '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="自评分">{item.selfScore ?? '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="AI 评分">{item.aiScore ?? '-'}</Descriptions.Item>
|
||
<Descriptions.Item label="管理层评分">{item.managerScore ?? '-'}</Descriptions.Item>
|
||
{item.aiExplanation && <Descriptions.Item label="AI 评分说明" span={3}>{item.aiExplanation}</Descriptions.Item>}
|
||
</Descriptions>
|
||
)}
|
||
|
||
{!isCompleted && (
|
||
<div style={{ marginTop: 12 }}>
|
||
<Form.Item
|
||
name={['itemScores', item.itemName, 'managerScore']}
|
||
label="管理层评分"
|
||
rules={[
|
||
{ required: true, message: '请填写评分' },
|
||
{ type: 'number', min: 0, max: 100, message: '评分范围 0-100' },
|
||
]}
|
||
>
|
||
<InputNumber min={0} max={100} style={{ width: 120 }} placeholder="0-100" />
|
||
</Form.Item>
|
||
</div>
|
||
)}
|
||
|
||
{isCompleted && item.managerExplanation && (
|
||
<div style={{ marginTop: 12 }}>
|
||
<Text type="secondary">管理层评分说明：</Text>
|
||
<Text>{item.managerExplanation}</Text>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
))}
|
||
|
||
{/* 审核意见 */}
|
||
<Divider />
|
||
<Form.Item
|
||
name="reviewOpinion"
|
||
label="审核意见"
|
||
rules={[{ required: !isCompleted, message: '请填写审核意见' }]}
|
||
>
|
||
<TextArea
|
||
rows={4}
|
||
placeholder="请填写对员工本月绩效的整体评价和改进建议"
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Card>
|
||
|
||
{/* 操作按钮 */}
|
||
{!isCompleted && (
|
||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', paddingBottom: 24 }}>
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
icon={<CheckOutlined />}
|
||
onClick={handleApprove}
|
||
loading={submitting}
|
||
style={isMobile ? { flex: 1 } : {}}
|
||
>
|
||
审核通过
|
||
</Button>
|
||
<Button
|
||
danger
|
||
size="large"
|
||
icon={<CloseOutlined />}
|
||
onClick={() => setRejectModalOpen(true)}
|
||
loading={submitting}
|
||
style={isMobile ? { flex: 1 } : {}}
|
||
>
|
||
驳回
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 驳回弹窗 */}
|
||
<Modal
|
||
title="驳回绩效"
|
||
open={rejectModalOpen}
|
||
onOk={handleReject}
|
||
onCancel={() => setRejectModalOpen(false)}
|
||
confirmLoading={submitting}
|
||
>
|
||
<TextArea
|
||
rows={4}
|
||
placeholder="请填写驳回原因，员工将收到此通知"
|
||
value={rejectReason}
|
||
onChange={(e) => setRejectReason(e.target.value)}
|
||
/>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PerformanceReview;
|