428 lines
14 KiB
TypeScript
428 lines
14 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
||
import {
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
Button,
|
||
Card,
|
||
Divider,
|
||
Space,
|
||
Typography,
|
||
message,
|
||
Tag,
|
||
Row,
|
||
Col,
|
||
Alert,
|
||
DatePicker,
|
||
Result,
|
||
Spin,
|
||
} from 'antd';
|
||
import { SaveOutlined, SendOutlined, LoadingOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||
import { useAuth } from '../../context/AuthContext';
|
||
import { performanceApi, PerformanceSubmitDTO } from '../../api/performance';
|
||
import { ALL_PERFORMANCE_ITEMS } from './performanceItems';
|
||
import dayjs, { Dayjs } from 'dayjs';
|
||
|
||
const { Title, Text } = Typography;
|
||
const { TextArea } = Input;
|
||
|
||
interface FormValues {
|
||
assessmentMonth: Dayjs;
|
||
workSummary: string;
|
||
leave: number;
|
||
late: number;
|
||
absent: number;
|
||
lackCard: number;
|
||
attendanceRemark?: string;
|
||
items: Array<{
|
||
userContent: string;
|
||
selfScore: number;
|
||
evidence?: string;
|
||
}>;
|
||
}
|
||
|
||
const PerformanceForm: React.FC = () => {
|
||
const { userInfo } = useAuth();
|
||
const [form] = Form.useForm<FormValues>();
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [submitted, setSubmitted] = useState(false);
|
||
const [aiWaiting, setAiWaiting] = useState(false);
|
||
const [aiDone, setAiDone] = useState(false);
|
||
const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
|
||
|
||
// 清理轮询定时器
|
||
useEffect(() => {
|
||
return () => {
|
||
if (pollTimerRef.current) clearInterval(pollTimerRef.current);
|
||
};
|
||
}, []);
|
||
|
||
// 轮询 AI 结果
|
||
const pollAIResult = (perfId: number) => {
|
||
setAiWaiting(true);
|
||
let attempts = 0;
|
||
const maxAttempts = 40; // 最多轮询 40 次（约 2 分钟）
|
||
|
||
pollTimerRef.current = setInterval(async () => {
|
||
attempts++;
|
||
try {
|
||
const result = await performanceApi.checkAIResult(perfId);
|
||
if (result.done) {
|
||
clearInterval(pollTimerRef.current!);
|
||
setAiWaiting(false);
|
||
setAiDone(true);
|
||
} else if (attempts >= maxAttempts) {
|
||
clearInterval(pollTimerRef.current!);
|
||
setAiWaiting(false);
|
||
setAiDone(true); // 超时也跳转，让用户去历史记录查看
|
||
}
|
||
} catch {
|
||
// 忽略轮询错误，继续重试
|
||
}
|
||
}, 3000); // 每 3 秒轮询一次
|
||
};
|
||
|
||
// 获取本月作为默认值
|
||
const getPreviousMonth = (): Dayjs => {
|
||
return dayjs();
|
||
};
|
||
|
||
const buildDTO = (values: FormValues, status: 'draft' | 'submitted'): PerformanceSubmitDTO => ({
|
||
month: values.assessmentMonth.format('YYYY-MM'),
|
||
status,
|
||
workSummary: values.workSummary || '',
|
||
attendance: {
|
||
leave: values.leave ?? 0,
|
||
late: values.late ?? 0,
|
||
absent: values.absent ?? 0,
|
||
lackCard: values.lackCard ?? 0,
|
||
remark: values.attendanceRemark,
|
||
},
|
||
performanceItems: ALL_PERFORMANCE_ITEMS.map((item, idx) => ({
|
||
itemName: item.itemName,
|
||
weight: item.weight,
|
||
userContent: values.items?.[idx]?.userContent || '',
|
||
selfScore: values.items?.[idx]?.selfScore ?? 0,
|
||
evidence: values.items?.[idx]?.evidence,
|
||
})),
|
||
});
|
||
|
||
const handleSave = async () => {
|
||
const values = form.getFieldsValue();
|
||
setSaving(true);
|
||
try {
|
||
await performanceApi.submit(buildDTO(values, 'draft'));
|
||
message.success('草稿已暂存');
|
||
} catch (err: any) {
|
||
message.error(err?.response?.data?.message || '暂存失败，请重试');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async (values: FormValues) => {
|
||
setSubmitting(true);
|
||
try {
|
||
const result = await performanceApi.submit(buildDTO(values, 'submitted'));
|
||
setSubmitted(true);
|
||
form.resetFields();
|
||
// 提交成功后开始轮询 AI 结果
|
||
if (result?.perfId) {
|
||
pollAIResult(result.perfId);
|
||
}
|
||
} catch (err: any) {
|
||
message.error(err?.response?.data?.message || '提交失败，请重试');
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
if (submitted) {
|
||
// AI 分析完成
|
||
if (aiDone) {
|
||
return (
|
||
<Result
|
||
icon={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
|
||
title="AI 分析完成！"
|
||
subTitle="绩效已提交，AI 评分已生成，可前往历史记录查看详情。"
|
||
style={{ margin: 24 }}
|
||
extra={
|
||
<Space>
|
||
<Button type="primary" onClick={() => { setSubmitted(false); setAiDone(false); }}>
|
||
重新填报
|
||
</Button>
|
||
</Space>
|
||
}
|
||
/>
|
||
);
|
||
}
|
||
|
||
// AI 分析中
|
||
if (aiWaiting) {
|
||
return (
|
||
<div style={{ textAlign: 'center', padding: '80px 24px' }}>
|
||
<Spin indicator={<LoadingOutlined style={{ fontSize: 48 }} spin />} />
|
||
<div style={{ marginTop: 24 }}>
|
||
<Typography.Title level={4}>AI 正在分析中，请稍等！</Typography.Title>
|
||
<Typography.Text type="secondary">
|
||
系统正在对您的绩效数据进行 AI 智能评分，通常需要 30 秒至 1 分钟...
|
||
</Typography.Text>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 提交成功但还未开始轮询（过渡状态）
|
||
return (
|
||
<Alert
|
||
type="success"
|
||
message="提交成功"
|
||
description="您的绩效已成功提交，AI 评分将在后台自动完成，管理层将在审核期内完成审核。"
|
||
showIcon
|
||
style={{ margin: 24 }}
|
||
action={
|
||
<Button onClick={() => setSubmitted(false)}>重新填报</Button>
|
||
}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{ padding: isMobile ? 8 : 24, maxWidth: 900, margin: '0 auto' }}>
|
||
<Title level={isMobile ? 4 : 3}>绩效填报</Title>
|
||
|
||
{/* 基础信息 */}
|
||
<Card style={{ marginBottom: 16 }}>
|
||
{isMobile ? (
|
||
<Space direction="vertical" size={4} style={{ width: '100%' }}>
|
||
<div><Text type="secondary">姓名：</Text><Text strong>{userInfo?.name}</Text></div>
|
||
<div><Text type="secondary">部门：</Text><Text strong>{userInfo?.department}</Text></div>
|
||
<div><Text type="secondary">岗位：</Text><Text strong>{userInfo?.position}</Text></div>
|
||
</Space>
|
||
) : (
|
||
<Row gutter={24}>
|
||
<Col span={8}><Text type="secondary">姓名：</Text><Text strong>{userInfo?.name}</Text></Col>
|
||
<Col span={8}><Text type="secondary">部门：</Text><Text strong>{userInfo?.department}</Text></Col>
|
||
<Col span={8}><Text type="secondary">岗位：</Text><Text strong>{userInfo?.position}</Text></Col>
|
||
</Row>
|
||
)}
|
||
</Card>
|
||
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={handleSubmit}
|
||
initialValues={{
|
||
assessmentMonth: getPreviousMonth(),
|
||
leave: 0, late: 0, absent: 0, lackCard: 0,
|
||
items: ALL_PERFORMANCE_ITEMS.map(() => ({ selfScore: 0 })),
|
||
}}
|
||
>
|
||
{/* 考核月份选择 */}
|
||
<Card style={{ marginBottom: 16 }}>
|
||
<Form.Item
|
||
name="assessmentMonth"
|
||
label="考核月份"
|
||
rules={[{ required: true, message: '请选择考核月份' }]}
|
||
>
|
||
<DatePicker
|
||
picker="month"
|
||
format="YYYY-MM"
|
||
placeholder="请选择考核月份"
|
||
style={{ width: 200 }}
|
||
disabledDate={(current) => {
|
||
// 不能选择未来的月份
|
||
return current && current > dayjs().endOf('month');
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
</Card>
|
||
{/* 考核指标 */}
|
||
<Card title="考核指标填写" style={{ marginBottom: 16 }}>
|
||
<Alert
|
||
type="info"
|
||
message="请逐项填写各考核指标的完成情况描述和自评分数（0-100分）"
|
||
style={{ marginBottom: 16 }}
|
||
showIcon
|
||
/>
|
||
|
||
{/* 业务素质 */}
|
||
<Title level={5}>
|
||
业务素质考评 <Tag color="blue">占总分 70%</Tag>
|
||
</Title>
|
||
{ALL_PERFORMANCE_ITEMS.filter(i => i.category === 'business').map((item, idx) => (
|
||
<Card
|
||
key={item.itemName}
|
||
size="small"
|
||
style={{ marginBottom: 12, background: '#fafafa' }}
|
||
title={
|
||
<Space>
|
||
<Text strong>{item.itemName}</Text>
|
||
<Tag color="geekblue">权重 {item.weight} 分</Tag>
|
||
</Space>
|
||
}
|
||
>
|
||
<Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
|
||
{item.description}
|
||
</Text>
|
||
<Row gutter={16}>
|
||
<Col xs={24} md={16}>
|
||
<Form.Item
|
||
name={['items', idx, 'userContent']}
|
||
label="完成情况描述"
|
||
rules={[{ required: true, message: '请填写完成情况描述' }]}
|
||
>
|
||
<TextArea rows={2} placeholder="请描述本月该项指标的完成情况" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={12} md={4}>
|
||
<Form.Item
|
||
name={['items', idx, 'selfScore']}
|
||
label="自评分数"
|
||
rules={[{ required: true, message: '请填写自评分' }]}
|
||
>
|
||
<InputNumber min={0} max={100} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={12} md={4}>
|
||
<Form.Item name={['items', idx, 'evidence']} label="佐证材料（可选）">
|
||
<Input placeholder="链接或说明" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Card>
|
||
))}
|
||
|
||
<Divider />
|
||
|
||
{/* 综合素质 */}
|
||
<Title level={5}>
|
||
综合素质考评 <Tag color="green">占总分 30%</Tag>
|
||
</Title>
|
||
{ALL_PERFORMANCE_ITEMS.filter(i => i.category === 'comprehensive').map((item) => {
|
||
const idx = ALL_PERFORMANCE_ITEMS.findIndex(x => x.itemName === item.itemName);
|
||
return (
|
||
<Card
|
||
key={item.itemName}
|
||
size="small"
|
||
style={{ marginBottom: 12, background: '#fafafa' }}
|
||
title={
|
||
<Space>
|
||
<Text strong>{item.itemName}</Text>
|
||
<Tag color="green">权重 {item.weight} 分</Tag>
|
||
</Space>
|
||
}
|
||
>
|
||
<Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
|
||
{item.description}
|
||
</Text>
|
||
<Row gutter={16}>
|
||
<Col xs={24} md={16}>
|
||
<Form.Item
|
||
name={['items', idx, 'userContent']}
|
||
label="完成情况描述"
|
||
rules={[{ required: true, message: '请填写完成情况描述' }]}
|
||
>
|
||
<TextArea rows={2} placeholder="请描述本月该项指标的完成情况" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={12} md={4}>
|
||
<Form.Item
|
||
name={['items', idx, 'selfScore']}
|
||
label="自评分数"
|
||
rules={[{ required: true, message: '请填写自评分' }]}
|
||
>
|
||
<InputNumber min={0} max={100} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={12} md={4}>
|
||
<Form.Item name={['items', idx, 'evidence']} label="佐证材料（可选）">
|
||
<Input placeholder="链接或说明" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Card>
|
||
);
|
||
})}
|
||
</Card>
|
||
|
||
{/* 考勤数据 */}
|
||
<Card title="考勤数据" style={{ marginBottom: 16 }}>
|
||
<Alert
|
||
type="info"
|
||
message="考勤满分 10 分，事假每天扣 5 分，迟到/缺卡每次扣 2 分，最低 0 分"
|
||
style={{ marginBottom: 16 }}
|
||
showIcon
|
||
/>
|
||
<Row gutter={16}>
|
||
<Col xs={12} sm={6}>
|
||
<Form.Item name="leave" label="事假（天）">
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={12} sm={6}>
|
||
<Form.Item name="late" label="迟到（次）">
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={12} sm={6}>
|
||
<Form.Item name="absent" label="旷工（天）">
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={12} sm={6}>
|
||
<Form.Item name="lackCard" label="缺卡（次）">
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
<Form.Item name="attendanceRemark" label="考勤备注（可选）">
|
||
<TextArea rows={2} placeholder="如有特殊情况请说明" />
|
||
</Form.Item>
|
||
</Card>
|
||
|
||
{/* 工作汇总 */}
|
||
<Card title="工作汇总" style={{ marginBottom: 16 }}>
|
||
<Form.Item
|
||
name="workSummary"
|
||
label="工作汇总"
|
||
rules={[{ required: true, message: '请填写工作汇总' }, { min: 10, message: '工作汇总至少填写 10 个字' }]}
|
||
>
|
||
<TextArea
|
||
rows={5}
|
||
placeholder="请填写本月工作总结，包括主要工作内容、成果、遇到的问题及解决方案等"
|
||
/>
|
||
</Form.Item>
|
||
</Card>
|
||
|
||
{/* 操作按钮 */}
|
||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', paddingBottom: 16 }}>
|
||
<Button
|
||
icon={<SaveOutlined />}
|
||
onClick={handleSave}
|
||
loading={saving}
|
||
size="large"
|
||
style={isMobile ? { flex: 1 } : {}}
|
||
>
|
||
暂存草稿
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
icon={<SendOutlined />}
|
||
htmlType="submit"
|
||
loading={submitting}
|
||
size="large"
|
||
style={isMobile ? { flex: 1 } : {}}
|
||
>
|
||
提交绩效
|
||
</Button>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PerformanceForm;
|