修改时间范围组件，评查详情创建新的数据结构来适配新的返回格式
This commit is contained in:
+83
-29
@@ -3,7 +3,7 @@ import { useLoaderData, useSearchParams, useNavigate } from "@remix-run/react";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { FileIcon } from "~/components/ui/FileIcon";
|
||||
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
|
||||
import { FilterPanel, FilterSelect, SearchFilter, DateRangeFilter } from "~/components/ui/FilterPanel";
|
||||
import { Pagination } from "~/components/ui/Pagination";
|
||||
import { Table } from "~/components/ui/Table";
|
||||
import { Tag } from "~/components/ui/Tag";
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
updateDocumentAuditStatus
|
||||
} from "~/api/evaluation_points/rules-files";
|
||||
import { getDocumentTypes } from "~/api/document-types/document-types";
|
||||
import { toastService } from "~/components/ui/Toast";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: rulesFilesStyles }
|
||||
@@ -55,6 +56,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const fileType = url.searchParams.get("fileType") || "";
|
||||
const reviewStatus = url.searchParams.get("reviewStatus") || "";
|
||||
const dateRange = url.searchParams.get("dateRange") || "";
|
||||
const dateFrom = url.searchParams.get("dateFrom") || "";
|
||||
const dateTo = url.searchParams.get("dateTo") || "";
|
||||
const keyword = url.searchParams.get("keyword") || "";
|
||||
const sortOrder = url.searchParams.get("sortOrder") || "upload_time_desc";
|
||||
const currentPage = parseInt(url.searchParams.get("page") || "1", 10);
|
||||
@@ -70,6 +73,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
||||
fileType,
|
||||
reviewStatus,
|
||||
dateRange,
|
||||
dateFrom,
|
||||
dateTo,
|
||||
keyword,
|
||||
sortOrder,
|
||||
page: currentPage,
|
||||
@@ -113,9 +118,11 @@ export function ErrorBoundary() {
|
||||
|
||||
// 在文件中定义一个与路由文件名匹配的命名函数组件
|
||||
export default function RulesFiles() {
|
||||
const navigate = useNavigate();
|
||||
const { files, documentTypes, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const dateFrom = searchParams.get('dateFrom') || '';
|
||||
const dateTo = searchParams.get('dateTo') || '';
|
||||
|
||||
// 处理筛选条件变更
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
|
||||
@@ -196,14 +203,14 @@ export default function RulesFiles() {
|
||||
);
|
||||
}
|
||||
|
||||
// 如果评查状态为通过，显示"所有评查点均通过"
|
||||
if (file.reviewStatus === 'fail') {
|
||||
return (
|
||||
<div className="text-sm text-error">
|
||||
<i className="ri-error-warning-line mr-1"></i>统计分数为：{file.score || 0}。分数低于80分。
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 如果评查状态为不通过，显示"统计分数为：{file.score || 0}。分数低于80分。"
|
||||
// if (file.reviewStatus === 'fail') {
|
||||
// return (
|
||||
// <div className="text-sm text-error">
|
||||
// <i className="ri-error-warning-line mr-1"></i>统计分数为：{file.score || 0}。分数低于80分。
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// 显示问题列表
|
||||
if (file.reviewStatus !== 'pass' && file.reviewStatus !== 'fail' && file.issues && file.issues.length > 0) {
|
||||
@@ -268,9 +275,38 @@ export default function RulesFiles() {
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('下载文件失败:', error);
|
||||
alert(`下载文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
||||
toastService.error(`下载文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理时间范围变更
|
||||
const handleDateChange = (field: 'dateFrom' | 'dateTo', value: string) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
if(value) {
|
||||
newParams.set(field, value);
|
||||
} else {
|
||||
newParams.delete(field);
|
||||
}
|
||||
newParams.set('page', '1');
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
const searchInput = document.querySelector('input[name="keyword"]');
|
||||
if(searchInput) {
|
||||
(searchInput as HTMLInputElement).value = '';
|
||||
}
|
||||
// newParams.delete('keyword');
|
||||
|
||||
newParams.delete('dateFrom');
|
||||
newParams.delete('dateTo');
|
||||
newParams.delete('fileType');
|
||||
// newParams.delete('reviewStatus');
|
||||
newParams.delete('sortOrder');
|
||||
newParams.set('page', '1');
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 文件类型选项
|
||||
const fileTypeOptions = documentTypes.map((type: {id: number, name: string}) => ({
|
||||
@@ -279,20 +315,20 @@ export default function RulesFiles() {
|
||||
}));
|
||||
|
||||
// 评查状态选项
|
||||
const reviewStatusOptions = [
|
||||
{ value: 'pass', label: '通过' },
|
||||
{ value: 'warning', label: '警告' },
|
||||
{ value: 'fail', label: '不通过' },
|
||||
{ value: 'pending', label: '待人工确认' }
|
||||
];
|
||||
// const reviewStatusOptions = [
|
||||
// { value: 'pass', label: '通过' },
|
||||
// { value: 'warning', label: '警告' },
|
||||
// { value: 'fail', label: '不通过' },
|
||||
// { value: 'pending', label: '待人工确认' }
|
||||
// ];
|
||||
|
||||
// 时间范围选项
|
||||
const dateRangeOptions = [
|
||||
{ value: DateRange.TODAY, label: '今天' },
|
||||
{ value: DateRange.WEEK, label: '本周' },
|
||||
{ value: DateRange.MONTH, label: '本月' },
|
||||
// { value: DateRange.CUSTOM, label: '自定义时间段' }
|
||||
];
|
||||
// const dateRangeOptions = [
|
||||
// { value: DateRange.TODAY, label: '今天' },
|
||||
// { value: DateRange.WEEK, label: '本周' },
|
||||
// { value: DateRange.MONTH, label: '本月' },
|
||||
// // { value: DateRange.CUSTOM, label: '自定义时间段' }
|
||||
// ];
|
||||
|
||||
// 定义表格列配置
|
||||
const columns = [
|
||||
@@ -423,7 +459,7 @@ export default function RulesFiles() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 review-files-page">
|
||||
<div className="review-files-page">
|
||||
{/* 页面头部 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center">
|
||||
@@ -440,7 +476,15 @@ export default function RulesFiles() {
|
||||
</div>
|
||||
|
||||
{/* 筛选区域 */}
|
||||
<FilterPanel className="px-3 py-3" noActionDivider={true}>
|
||||
<FilterPanel className="px-3 py-3" noActionDivider={true}
|
||||
actions={
|
||||
<>
|
||||
<Button type="default" icon="ri-refresh-line" onClick={handleReset} className="mr-2 hover:!border-gray-300">
|
||||
重置
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<FilterSelect
|
||||
label="文件类型"
|
||||
name="fileType"
|
||||
@@ -450,23 +494,33 @@ export default function RulesFiles() {
|
||||
className="mr-2 w-40"
|
||||
/>
|
||||
|
||||
<FilterSelect
|
||||
{/* <FilterSelect
|
||||
label="评查状态"
|
||||
name="reviewStatus"
|
||||
value={searchParams.get('reviewStatus') || ''}
|
||||
options={reviewStatusOptions}
|
||||
onChange={handleFilterChange}
|
||||
className="mr-2 w-40"
|
||||
/>
|
||||
/> */}
|
||||
|
||||
<FilterSelect
|
||||
{/* <FilterSelect
|
||||
label="时间范围"
|
||||
name="dateRange"
|
||||
value={searchParams.get('dateRange') || ''}
|
||||
options={dateRangeOptions}
|
||||
onChange={handleFilterChange}
|
||||
className="mr-2 w-40"
|
||||
/> */}
|
||||
|
||||
<DateRangeFilter
|
||||
label="时间范围"
|
||||
startDate={dateFrom}
|
||||
endDate={dateTo}
|
||||
onStartDateChange={(value) => handleDateChange('dateFrom', value)}
|
||||
onEndDateChange={(value) => handleDateChange('dateTo', value)}
|
||||
simple={true}
|
||||
/>
|
||||
|
||||
<FilterSelect
|
||||
label="排序方式"
|
||||
name="sortOrder"
|
||||
@@ -485,7 +539,7 @@ export default function RulesFiles() {
|
||||
placeholder="搜索文件名、合同编号"
|
||||
value={searchParams.get('keyword') || ''}
|
||||
onSearch={handleSearch}
|
||||
buttonText="搜索"
|
||||
buttonText=""
|
||||
className="mr-2 flex-1"
|
||||
/>
|
||||
</FilterPanel>
|
||||
|
||||
Reference in New Issue
Block a user