659 lines
25 KiB
TypeScript
659 lines
25 KiB
TypeScript
/**
|
||
* 评查点列表组件
|
||
*
|
||
* 功能概述:
|
||
* - 展示评查结果统计信息（总计、通过、警告、错误数量）
|
||
* - 提供评查点过滤功能（按状态和搜索文本）
|
||
* - 显示评查点详细信息（标题、状态、内容、建议修改等）
|
||
* - 支持评查点操作（一键替换、人工审核等）
|
||
*
|
||
* 组件结构:
|
||
* - 统计区域: 显示评查点数量统计
|
||
* - 搜索区域: 提供文本搜索功能
|
||
* - 评查点列表: 展示所有评查点
|
||
* - 评查点卡片: 展示单个评查点详情
|
||
* - 评查点头部: 显示标题和状态
|
||
* - 评查点内容: 显示当前内容和问题
|
||
* - 建议修改区域: 显示建议的修改内容
|
||
* - 操作按钮: 提供一键替换和人工审核功能
|
||
*/
|
||
import { useState, useEffect } from 'react';
|
||
|
||
/**
|
||
* 评查点类型定义
|
||
* 用于展示单个评查结果
|
||
*/
|
||
export interface ReviewPoint {
|
||
id: string;
|
||
title: string;
|
||
groupName: string;
|
||
status: string;
|
||
content: string | Record<string, string>;
|
||
suggestion: string;
|
||
needsHumanReview?: boolean;
|
||
humanReviewNote?: string;
|
||
humanReviewBy?: string;
|
||
humanReviewTime?: string;
|
||
position?: {
|
||
section: string;
|
||
index: number;
|
||
};
|
||
result?: boolean;
|
||
}
|
||
|
||
// 统计数据类型
|
||
interface Statistics {
|
||
total: number;
|
||
success: number;
|
||
warning: number;
|
||
error: number;
|
||
score: number;
|
||
}
|
||
|
||
interface ReviewPointsListProps {
|
||
reviewPoints: ReviewPoint[];
|
||
statistics: Statistics;
|
||
activeReviewPointId: string | null;
|
||
onReviewPointSelect: (id: string) => void;
|
||
onStatusChange: (id: string, status: string) => void;
|
||
}
|
||
|
||
export function ReviewPointsList({
|
||
reviewPoints,
|
||
statistics,
|
||
activeReviewPointId,
|
||
onReviewPointSelect,
|
||
onStatusChange
|
||
}: ReviewPointsListProps) {
|
||
// 状态管理
|
||
const [editingReviewPoint, setEditingReviewPoint] = useState<string | null>(null); // 当前正在编辑的评查点ID
|
||
const [userInputText, setUserInputText] = useState(''); // 用户输入的审核意见文本
|
||
const [searchText, setSearchText] = useState(''); // 搜索文本
|
||
const [statusFilter, setStatusFilter] = useState<string | null>(null); // 状态过滤
|
||
const [suggestionTexts, setSuggestionTexts] = useState<Record<string, string>>({}); // 存储每个评查点的建议文本
|
||
|
||
// 初始化建议文本
|
||
useEffect(() => {
|
||
// 将所有评查点的建议文本存储到状态中
|
||
const suggestions: Record<string, string> = {};
|
||
reviewPoints.forEach(point => {
|
||
suggestions[point.id] = point.suggestion || '';
|
||
});
|
||
setSuggestionTexts(suggestions);
|
||
}, [reviewPoints]);
|
||
|
||
// 处理建议文本变更
|
||
const handleSuggestionChange = (reviewPointId: string, text: string) => {
|
||
setSuggestionTexts(prev => ({
|
||
...prev,
|
||
[reviewPointId]: text
|
||
}));
|
||
};
|
||
|
||
/**
|
||
* 过滤评查点
|
||
* 根据搜索文本和状态过滤条件筛选评查点
|
||
*/
|
||
const filteredReviewPoints = reviewPoints.filter(point => {
|
||
// 匹配搜索文本
|
||
const matchesSearch = searchText === '' ||
|
||
point.title.toLowerCase().includes(searchText.toLowerCase()) ||
|
||
point.groupName.toLowerCase().includes(searchText.toLowerCase()) ||
|
||
(typeof point.content === 'string' && point.content.toLowerCase().includes(searchText.toLowerCase())) ||
|
||
(typeof point.content === 'object' && point.content !== null &&
|
||
Object.values(point.content).some(value =>
|
||
typeof value === 'string' && value.toLowerCase().includes(searchText.toLowerCase())
|
||
));
|
||
|
||
// 处理状态过滤
|
||
let matchesStatus = false;
|
||
|
||
if (statusFilter === null) {
|
||
// 未选择过滤条件时显示所有
|
||
matchesStatus = true;
|
||
} else if (statusFilter === 'success') {
|
||
// 过滤"通过"状态
|
||
matchesStatus = point.result === true || (point.result === undefined && point.status === 'success');
|
||
} else if (statusFilter === 'warning') {
|
||
// 过滤"警告"状态
|
||
matchesStatus = point.result === false && point.status === 'warning';
|
||
} else if (statusFilter === 'error') {
|
||
// 过滤"错误"状态
|
||
matchesStatus = point.result === false && point.status === 'error';
|
||
}
|
||
|
||
return matchesSearch && matchesStatus;
|
||
});
|
||
|
||
/**
|
||
* 处理一键替换操作
|
||
* @param reviewPointId 评查点ID
|
||
*/
|
||
const handleReplace = (reviewPointId: string) => {
|
||
// 在实际应用中，这里应该调用API进行内容替换
|
||
// 模拟替换操作
|
||
alert(`将为评查点 ${reviewPointId} 执行一键替换操作`);
|
||
|
||
// 更新评查点状态为成功
|
||
onStatusChange(reviewPointId, 'success');
|
||
};
|
||
|
||
/**
|
||
* 处理评查点审核操作
|
||
* @param reviewPointId 评查点ID
|
||
* @param action 操作类型: 'approve' 通过 / 'reject' 不通过
|
||
*/
|
||
const handleReviewAction = (reviewPointId: string, action: 'approve' | 'reject') => {
|
||
// 更新评查点状态
|
||
onStatusChange(reviewPointId, action === 'approve' ? 'success' : 'error');
|
||
|
||
// 清除编辑状态
|
||
setEditingReviewPoint(null);
|
||
setUserInputText('');
|
||
|
||
alert(`${action === 'approve' ? '通过' : '不通过'}了评查点 ${reviewPointId}`);
|
||
};
|
||
|
||
/**
|
||
* 显示评查点详情编辑界面
|
||
* @param reviewPointId 评查点ID
|
||
*/
|
||
const handleEditReviewPoint = (reviewPointId: string) => {
|
||
setEditingReviewPoint(reviewPointId);
|
||
|
||
// 获取评查点的建议内容作为初始值
|
||
const reviewPoint = reviewPoints.find(point => point.id === reviewPointId);
|
||
if (reviewPoint) {
|
||
setUserInputText(reviewPoint.suggestion || '');
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 渲染评查统计信息
|
||
* 显示总计、通过、警告、错误数量
|
||
*/
|
||
const renderStatistics = () => {
|
||
// 确保传入的statistics存在，否则使用计算值
|
||
const statsToUse = statistics || {
|
||
total: reviewPoints.length,
|
||
success: 0,
|
||
warning: 0,
|
||
error: 0,
|
||
score: 0
|
||
};
|
||
|
||
// 计算各个状态的评查点数量
|
||
const successCount = reviewPoints.filter(
|
||
point => point.result === true || (point.result === undefined && point.status === 'success')
|
||
).length;
|
||
|
||
const warningCount = reviewPoints.filter(
|
||
point => point.result === false && point.status === 'warning'
|
||
).length;
|
||
|
||
const errorCount = reviewPoints.filter(
|
||
point => point.result === false && point.status === 'error'
|
||
).length;
|
||
|
||
// 如果没有计算值，则使用传入的统计值
|
||
const totalToShow = statsToUse.total === 0 ? reviewPoints.length : statsToUse.total;
|
||
const successToShow = successCount || statsToUse.success;
|
||
const warningToShow = warningCount || statsToUse.warning;
|
||
const errorToShow = errorCount || statsToUse.error;
|
||
|
||
return (
|
||
<div className="review-statistics bg-white border-b border-gray-100 py-3 px-4">
|
||
<div className="flex justify-between items-center">
|
||
{/* 总计数量 */}
|
||
<div className="flex items-center">
|
||
<div className="w-7 h-7 bg-gray-100 rounded-md flex items-center justify-center">
|
||
<span className="text-sm font-semibold text-gray-600">{totalToShow}</span>
|
||
</div>
|
||
<span className="text-xs text-gray-500 ml-1">总计</span>
|
||
</div>
|
||
<div className="h-8 border-r border-gray-200"></div>
|
||
{/* 通过数量 */}
|
||
<div className="flex items-center">
|
||
<button
|
||
className={`w-7 h-7 bg-green-50 rounded-md flex items-center justify-center cursor-pointer ${statusFilter === 'success' ? 'ring-2 ring-success' : ''}`}
|
||
onClick={() => setStatusFilter(statusFilter === 'success' ? null : 'success')}
|
||
aria-label={`过滤通过项 ${statusFilter === 'success' ? '(已选中)' : ''}`}
|
||
type="button"
|
||
>
|
||
<span className="text-sm font-semibold text-success">{successToShow}</span>
|
||
</button>
|
||
<span className="text-xs text-gray-500 ml-1">通过</span>
|
||
</div>
|
||
<div className="h-8 border-r border-gray-200"></div>
|
||
{/* 警告数量 */}
|
||
<div className="flex items-center">
|
||
<button
|
||
className={`w-7 h-7 bg-yellow-50 rounded-md flex items-center justify-center cursor-pointer ${statusFilter === 'warning' ? 'ring-2 ring-warning' : ''}`}
|
||
onClick={() => setStatusFilter(statusFilter === 'warning' ? null : 'warning')}
|
||
aria-label={`过滤警告项 ${statusFilter === 'warning' ? '(已选中)' : ''}`}
|
||
type="button"
|
||
>
|
||
<span className="text-sm font-semibold text-warning">{warningToShow}</span>
|
||
</button>
|
||
<span className="text-xs text-gray-500 ml-1">警告</span>
|
||
</div>
|
||
<div className="h-8 border-r border-gray-200"></div>
|
||
{/* 错误数量 */}
|
||
<div className="flex items-center">
|
||
<button
|
||
className={`w-7 h-7 bg-red-50 rounded-md flex items-center justify-center cursor-pointer ${statusFilter === 'error' ? 'ring-2 ring-error' : ''}`}
|
||
onClick={() => setStatusFilter(statusFilter === 'error' ? null : 'error')}
|
||
aria-label={`过滤错误项 ${statusFilter === 'error' ? '(已选中)' : ''}`}
|
||
type="button"
|
||
>
|
||
<span className="text-sm font-semibold text-error">{errorToShow}</span>
|
||
</button>
|
||
<span className="text-xs text-gray-500 ml-1">错误</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 渲染搜索框
|
||
* 用于按文本搜索评查点
|
||
*/
|
||
const renderSearchBar = () => {
|
||
return (
|
||
<div className="py-2 px-3 border-b border-gray-100">
|
||
<div className="relative">
|
||
<input
|
||
type="text"
|
||
className="w-full border border-gray-200 rounded-md pl-8 pr-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||
placeholder="搜索评查点..."
|
||
value={searchText}
|
||
onChange={(e) => setSearchText(e.target.value)}
|
||
/>
|
||
<i className="ri-search-line absolute left-2 top-0.5 text-gray-400"></i>
|
||
{searchText && (
|
||
<button
|
||
className="absolute right-2 top-1.5 text-gray-400 hover:text-gray-600"
|
||
onClick={() => setSearchText('')}
|
||
>
|
||
<i className="ri-close-line"></i>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 渲染评查点状态标签
|
||
* @param status 状态文本
|
||
* @param result 评查结果
|
||
* @returns 状态标签组件
|
||
*/
|
||
const renderStatusBadge = (status: string, result?: boolean) => {
|
||
// 优先根据result判断是否通过
|
||
if (result === true) {
|
||
return (
|
||
<span className="status-badge status-success">
|
||
<i className="ri-checkbox-circle-line mr-1"></i>通过
|
||
</span>
|
||
);
|
||
}
|
||
|
||
// 当result为false时，根据status决定显示警告还是错误
|
||
if (result === false) {
|
||
if (status === 'warning') {
|
||
return (
|
||
<span className="status-badge status-warning">
|
||
<i className="ri-alert-line mr-1"></i>警告
|
||
</span>
|
||
);
|
||
} else if (status === 'error') {
|
||
return (
|
||
<span className="status-badge status-error">
|
||
<i className="ri-close-circle-line mr-1"></i>不通过
|
||
</span>
|
||
);
|
||
}
|
||
}
|
||
|
||
// 兼容旧版逻辑，当没有result时，仍按status判断
|
||
switch (status) {
|
||
case 'success':
|
||
return (
|
||
<span className="status-badge status-success">
|
||
<i className="ri-checkbox-circle-line mr-1"></i>通过
|
||
</span>
|
||
);
|
||
case 'warning':
|
||
return (
|
||
<span className="status-badge status-warning">
|
||
<i className="ri-alert-line mr-1"></i>警告
|
||
</span>
|
||
);
|
||
case 'error':
|
||
return (
|
||
<span className="status-badge status-error">
|
||
<i className="ri-close-circle-line mr-1"></i>不通过
|
||
</span>
|
||
);
|
||
case 'processing':
|
||
return (
|
||
<span className="status-badge status-processing">
|
||
<i className="ri-time-line mr-1"></i>处理中
|
||
</span>
|
||
);
|
||
default:
|
||
return (
|
||
<span className="status-badge status-warning">
|
||
<i className="ri-alert-line mr-1"></i>警告
|
||
</span>
|
||
);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 渲染人工审核标记
|
||
* @param reviewPoint 评查点
|
||
* @returns 人工审核标记组件
|
||
*/
|
||
const renderHumanReviewBadge = (reviewPoint: ReviewPoint) => {
|
||
if (reviewPoint.needsHumanReview) {
|
||
return (
|
||
<span className="status-badge status-waiting ml-2">
|
||
<i className="ri-user-line mr-1"></i>需人工
|
||
</span>
|
||
);
|
||
}
|
||
return null;
|
||
};
|
||
|
||
/**
|
||
* 渲染人工审核注释
|
||
* @param reviewPoint 评查点
|
||
* @returns 人工审核注释组件
|
||
*/
|
||
const renderHumanReviewNote = (reviewPoint: ReviewPoint) => {
|
||
if (reviewPoint.needsHumanReview && reviewPoint.humanReviewNote) {
|
||
return (
|
||
<div className="human-review-note">
|
||
<i className="ri-information-line mr-1"></i> {reviewPoint.humanReviewNote}
|
||
{reviewPoint.humanReviewBy && reviewPoint.humanReviewTime && (
|
||
<div className="text-right text-xs text-gray-500 mt-1">
|
||
审核人：{reviewPoint.humanReviewBy} | 时间：{reviewPoint.humanReviewTime}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
return null;
|
||
};
|
||
|
||
/**
|
||
* 渲染评查点内容与建议
|
||
* @param reviewPoint 评查点
|
||
* @returns 评查点内容组件
|
||
*/
|
||
const renderReviewPointContent = (reviewPoint: ReviewPoint) => {
|
||
// 如果当前评查点不处于编辑状态，只显示简单信息
|
||
if (editingReviewPoint !== reviewPoint.id) {
|
||
// 根据result和status决定渲染哪种样式
|
||
if (reviewPoint.result === true || (reviewPoint.result === undefined && reviewPoint.status === 'success')) {
|
||
// 已通过的评查点只显示基本信息和人工审核注释
|
||
if (reviewPoint.needsHumanReview && reviewPoint.humanReviewNote) {
|
||
return (
|
||
<div className="mt-2">
|
||
<div className="p-2 bg-green-50 rounded border border-green-200 text-xs">
|
||
<p className="text-xs text-success"><i className="ri-check-line mr-1"></i>已处理</p>
|
||
{reviewPoint.suggestion && (
|
||
<div className="border-t border-green-200 mt-1 pt-1">
|
||
<p className="text-xs text-gray-600">{reviewPoint.suggestion}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// 非通过状态，显示内容和修改建议
|
||
const isErrorStatus = reviewPoint.result === false && reviewPoint.status === 'error';
|
||
|
||
return (
|
||
<div className="mt-2">
|
||
{/* 内容显示区域 */}
|
||
<div className="p-2 bg-white rounded border border-gray-200 text-xs mb-3">
|
||
{/* 移除顶部的"当前值"标题，在每个内容项中显示 */}
|
||
{typeof reviewPoint.content === 'object' && reviewPoint.content !== null ? (
|
||
// 当 content 是对象时的渲染方式
|
||
<div>
|
||
{Object.entries(reviewPoint.content).map(([key, value], index) => (
|
||
<div key={index} className="mb-2 pb-2 border-b border-gray-100 last:border-b-0 last:mb-0 last:pb-0">
|
||
{/* 使用flex布局使key和状态标签左右对齐 */}
|
||
<div className="flex justify-between items-center mb-1">
|
||
<span className="text-xs">{key}</span>
|
||
<span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
|
||
{isErrorStatus ? '不符合规范' : '需优化'}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-left">{value || '（内容为空）'}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
// 当 content 是字符串时的渲染方式
|
||
<>
|
||
{/* 为字符串内容也添加标题和状态 */}
|
||
<div className="flex justify-between items-center mb-1">
|
||
<span className="text-xs">当前值</span>
|
||
<span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
|
||
{isErrorStatus ? '不符合规范' : '需优化'}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-left">{reviewPoint.content || '（内容为空）'}</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* 建议修改区域 */}
|
||
<div className="mb-2">
|
||
<div className="flex justify-between items-center mb-2">
|
||
<span className="text-gray-700">建议修改为：</span>
|
||
<span className="text-green-500">符合规范</span>
|
||
</div>
|
||
<textarea
|
||
value={suggestionTexts[reviewPoint.id] || ''}
|
||
onChange={(e) => handleSuggestionChange(reviewPoint.id, e.target.value)}
|
||
className="w-full p-2 border rounded bg-gray-50 min-h-[100px] focus:outline-none focus:border-[#00684a] focus:shadow-[0_0_0_2px_rgba(0,104,74,0.2)]"
|
||
/>
|
||
</div>
|
||
|
||
{/* 操作按钮区域 */}
|
||
<div className="flex space-x-2 mt-2">
|
||
{/* 一键替换按钮 - 只有非人工审核的点或未通过的人工审核点才显示 */}
|
||
{(!reviewPoint.needsHumanReview || (!reviewPoint.result && reviewPoint.status !== 'success')) && (
|
||
<button
|
||
className="replace-action flex-1 justify-center"
|
||
onClick={() => handleReplace(reviewPoint.id)}
|
||
>
|
||
<i className="ri-replace-line"></i> 一键替换
|
||
</button>
|
||
)}
|
||
|
||
{/* 人工审核按钮 */}
|
||
{reviewPoint.needsHumanReview && !reviewPoint.result && reviewPoint.status !== 'success' && (
|
||
<button
|
||
className="replace-action flex-1 justify-center human-review-request"
|
||
onClick={() => handleEditReviewPoint(reviewPoint.id)}
|
||
>
|
||
<i className="ri-edit-line"></i> 人工审核
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 处于编辑状态时显示编辑界面
|
||
// 根据result和status决定显示不同的标记
|
||
const isErrorStatus = reviewPoint.result === false && reviewPoint.status === 'error';
|
||
|
||
return (
|
||
<div className="mt-2">
|
||
{/* 内容显示区域 */}
|
||
<div className="p-2 bg-white rounded border border-gray-200 text-xs mb-3">
|
||
{/* 隐藏顶部的"当前值"标题，在每个内容项中显示 */}
|
||
{typeof reviewPoint.content === 'object' && reviewPoint.content !== null ? (
|
||
// 当 content 是对象时的渲染方式
|
||
<div>
|
||
{Object.entries(reviewPoint.content).map(([key, value], index) => (
|
||
<div key={index} className="mb-2 pb-2 border-b border-gray-100 last:border-b-0 last:mb-0 last:pb-0">
|
||
{/* 使用flex布局使key和状态标签左右对齐 */}
|
||
<div className="flex justify-between items-center mb-1">
|
||
<span className="text-xs">{key}</span>
|
||
<span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
|
||
{isErrorStatus ? '不符合规范' : '需优化'}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-left">{value || '（内容为空）'}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
// 当 content 是字符串时的渲染方式
|
||
<>
|
||
{/* 为字符串内容也添加标题和状态 */}
|
||
<div className="flex justify-between items-center mb-1">
|
||
<span className="text-xs">当前值</span>
|
||
<span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
|
||
{isErrorStatus ? '不符合规范' : '需优化'}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs">{reviewPoint.content || '（内容为空）'}</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* 建议修改区域 */}
|
||
<div className="mb-2">
|
||
<div className="flex justify-between items-center mb-2">
|
||
<span className="text-gray-700">建议修改为：</span>
|
||
<span className="text-green-500">符合规范</span>
|
||
</div>
|
||
<textarea
|
||
value={suggestionTexts[reviewPoint.id] || ''}
|
||
onChange={(e) => handleSuggestionChange(reviewPoint.id, e.target.value)}
|
||
className="w-full p-2 border rounded bg-gray-50 min-h-[100px] focus:outline-none focus:border-[#00684a] focus:shadow-[0_0_0_2px_rgba(0,104,74,0.2)]"
|
||
/>
|
||
</div>
|
||
|
||
{/* 审核意见区域 */}
|
||
<div className="bg-gray-50 rounded border border-gray-200 p-2">
|
||
<label htmlFor="reviewNote" className="block text-xs text-gray-700 mb-1">审核意见</label>
|
||
<textarea
|
||
id="reviewNote"
|
||
className="w-full border border-gray-200 rounded-md text-xs p-2 mb-2"
|
||
placeholder="请输入审核意见（可选）..."
|
||
rows={2}
|
||
value={userInputText}
|
||
onChange={(e) => setUserInputText(e.target.value)}
|
||
></textarea>
|
||
<div className="flex justify-end mt-2 space-x-2">
|
||
<button
|
||
className="replace-action"
|
||
onClick={() => handleReviewAction(reviewPoint.id, 'approve')}
|
||
>
|
||
<i className="ri-check-line"></i> 通过
|
||
</button>
|
||
<button
|
||
className="replace-action status-error"
|
||
onClick={() => handleReviewAction(reviewPoint.id, 'reject')}
|
||
>
|
||
<i className="ri-close-line"></i> 不通过
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 渲染无匹配结果提示
|
||
* 当过滤后没有评查点时显示
|
||
*/
|
||
const renderEmptyState = () => {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-8 px-4 text-center text-gray-500">
|
||
<i className="ri-search-line text-3xl mb-2"></i>
|
||
<p className="text-sm mb-1">没有找到匹配的评查点</p>
|
||
<p className="text-xs">请尝试不同的搜索词或清除筛选条件</p>
|
||
{(searchText || statusFilter) && (
|
||
<button
|
||
className="mt-3 text-xs text-primary underline"
|
||
onClick={() => {
|
||
setSearchText('');
|
||
setStatusFilter(null);
|
||
}}
|
||
>
|
||
清除所有筛选
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 组件主渲染函数
|
||
return (
|
||
<div className="review-points-panel">
|
||
{/* 面板头部 */}
|
||
<div className="review-panel-header py-2 px-4 flex items-center">
|
||
<i className="ri-file-list-check-line text-primary mr-2"></i>
|
||
<span className="font-medium text-primary">评查结果</span>
|
||
</div>
|
||
|
||
{/* 评查统计 */}
|
||
{renderStatistics()}
|
||
|
||
{/* 搜索框 */}
|
||
{renderSearchBar()}
|
||
|
||
{/* 评查点列表 */}
|
||
<div className="review-points-list">
|
||
{filteredReviewPoints.length > 0 ? (
|
||
filteredReviewPoints.map(reviewPoint => (
|
||
<button
|
||
key={reviewPoint.id}
|
||
className={`review-point-item ${activeReviewPointId === reviewPoint.id ? 'active' : ''}`}
|
||
onClick={() => onReviewPointSelect(reviewPoint.id)}
|
||
type="button"
|
||
>
|
||
{/* 评查点标题和状态 */}
|
||
<div className="review-point-header flex justify-between items-start">
|
||
<div className="review-point-title flex-1 text-left">{reviewPoint.title}</div>
|
||
<div className="flex items-center ml-2 flex-shrink-0">
|
||
{renderStatusBadge(reviewPoint.status, reviewPoint.result)}
|
||
{renderHumanReviewBadge(reviewPoint)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 评查点所属分组 */}
|
||
<div className="review-point-location">
|
||
<i className="ri-file-list-line mr-1"></i>
|
||
<span>{reviewPoint.groupName}</span>
|
||
</div>
|
||
|
||
{/* 人工审核注释 */}
|
||
{renderHumanReviewNote(reviewPoint)}
|
||
|
||
{/* 评查点内容和操作 */}
|
||
{renderReviewPointContent(reviewPoint)}
|
||
</button>
|
||
))
|
||
) : (
|
||
renderEmptyState()
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|