TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装公共组件，调整样式文件的布局，修改路由页面样式

Browse Source
This commit is contained in:
yorn
2025-03-27 19:58:58 +08:00
parent d9b9ce4676
commit 540618b8ca
33 changed files with 2613 additions and 987 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/rule-groups._index.tsx
+189 -142
View File
@@ -1,11 +1,13 @@
import { json, type MetaFunction } from "@remix-run/node";
import { useLoaderData, Link, useNavigate } from "@remix-run/react";
import { useLoaderData, Link, useNavigate, useSearchParams } from "@remix-run/react";
import { useState } from "react";
import indexStyles from "~/styles/pages/rule-groups_index.css?url";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { SearchBox } from "~/components/ui/SearchBox";
import { StatusDot } from "~/components/ui/StatusDot";
import { Table } from "~/components/ui/Table";
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
import { Pagination } from "~/components/ui/Pagination";
// 定义数据类型
interface RuleGroup {
@@ -103,8 +105,7 @@ export async function loader() {
export default function RuleGroupsIndex() {
const { groups } = useLoaderData<typeof loader>();
const navigate = useNavigate();
const [searchText, setSearchText] = useState("");
const [groupCode, setGroupCode] = useState("");
const [searchParams, setSearchParams] = useSearchParams();
const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
// 处理展开/收起
@@ -131,14 +132,44 @@ export default function RuleGroupsIndex() {
// 处理搜索名称
const handleNameSearch = (value: string) => {
setSearchText(value);
// 实际项目中这里可能需要调用API或过滤本地数据
const newParams = new URLSearchParams(searchParams);
if (value) {
newParams.set('name', value);
} else {
newParams.delete('name');
}
newParams.set('page', '1');
setSearchParams(newParams);
};
// 处理搜索编码
const handleCodeSearch = (value: string) => {
setGroupCode(value);
// 实际项目中这里可能需要调用API或过滤本地数据
const newParams = new URLSearchParams(searchParams);
if (value) {
newParams.set('code', value);
} else {
newParams.delete('code');
}
newParams.set('page', '1');
setSearchParams(newParams);
};
// 处理状态筛选变更
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const { value } = e.target;
const newParams = new URLSearchParams(searchParams);
if (value) {
newParams.set('status', value);
} else {
newParams.delete('status');
}
newParams.set('page', '1');
setSearchParams(newParams);
};
// 处理重置筛选
const handleReset = () => {
setSearchParams(new URLSearchParams());
};
// 处理表格数据，包括父子级关系
@@ -158,6 +189,98 @@ export default function RuleGroupsIndex() {
return result;
});
// 定义表格列配置
const columns = [
{
title: "分组名称",
key: "name",
width: "400px",
render: (_: unknown, record: (RuleGroup & { isParent?: boolean, parentId?: string })) => (
<div className={`flex items-center ${!record.isParent ? 'ml-8' : ''}`}>
{record.isParent && (
<span
className="expand-icon"
onClick={() => toggleGroup(record.id)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleGroup(record.id);
}
}}
>
<i className={`ri-arrow-${expandedGroups.includes(record.id) ? 'down' : 'right'}-s-line`}></i>
</span>
)}
<Link
to={`/rule-groups/${record.id}/rules`}
className="group-name-link flex items-center ml-1 text-green-800"
>
<i className={`${record.isParent ? 'ri-folder-line' : 'ri-file-list-line'} mr-1 text-green-800`}></i> {record.name}
</Link>
<span className={`group-badge ${record.isParent ? 'parent-badge' : 'child-badge'}`}>
{record.isParent ? '一级分组' : '二级分组'}
</span>
</div>
)
},
{
title: "分组编码",
key: "code",
render: (_: unknown, record: RuleGroup) => record.code
},
{
title: "评查点数量",
key: "ruleCount",
render: (_: unknown, record: RuleGroup) => (
<>
<Link to={`/rule-groups/${record.id}/rules`} className="badge bg-primary text-white">
{record.ruleCount}
</Link>
{record.subGroupCount > 0 && (
<span className="text-secondary text-sm ml-1">
| 子分组: {record.subGroupCount}
</span>
)}
</>
)
},
{
title: "状态",
key: "status",
render: (_: unknown, record: RuleGroup) => (
<StatusDot status={record.status === 'active' ? 'success' : 'error'} text={record.status === 'active' ? '启用' : '禁用'} />
)
},
{
title: "创建时间",
key: "createdAt",
render: (_: unknown, record: RuleGroup) => record.createdAt
},
{
title: "操作",
key: "operation",
width: "180px",
render: (_: unknown, record: RuleGroup) => (
<>
<button
className="ant-btn ant-btn-text ant-btn-sm text-primary"
onClick={() => navigate(`/rule-groups/${record.id}`)}
>
<i className="ri-edit-line"></i> 编辑
</button>
<button
className="ant-btn ant-btn-text ant-btn-sm text-error"
onClick={() => handleDeleteGroup(record.id)}
>
<i className="ri-delete-bin-line"></i> 删除
</button>
</>
)
}
];
return (
<div className="content-container rule-groups-page">
{/* 页面头部 */}
@@ -190,146 +313,70 @@ export default function RuleGroupsIndex() {
</div>
</div>
{/* 搜索栏 */}
<Card className="mb-4" bodyClassName="px-4 py-4">
<div className="flex flex-wrap items-end gap-4">
<div className="flex-1 min-w-[200px]">
<label htmlFor="groupName" className="form-label">分组名称</label>
<SearchBox
placeholder="请输入分组名称"
defaultValue={searchText}
onSearch={handleNameSearch}
name="groupName"
buttonText=""
className="form-input-only"
/>
</div>
<div className="flex-1 min-w-[200px]">
<label htmlFor="groupCode" className="form-label">分组编码</label>
<SearchBox
placeholder="请输入分组编码"
defaultValue={groupCode}
onSearch={handleCodeSearch}
name="groupCode"
buttonText=""
className="form-input-only"
/>
</div>
<div className="flex-1 min-w-[200px]">
<label htmlFor="status" className="form-label">状态</label>
<select id="status" className="form-select">
<option value="">全部</option>
<option value="true">启用</option>
<option value="false">禁用</option>
</select>
</div>
<div className="flex items-center">
<Button type="default" icon="ri-refresh-line" className="mr-2">
{/* 搜索栏 - 使用FilterPanel */}
<FilterPanel
className="mb-4"
actions={
<>
<Button type="default" icon="ri-refresh-line" onClick={handleReset} className="mr-2">
重置
</Button>
<Button type="primary" icon="ri-search-line">
搜索
</Button>
</div>
</div>
</Card>
{/* 数据表格 */}
<Card bodyClassName="px-4 py-4">
<div className="overflow-x-auto">
<table className="ant-table tree-table w-full">
<thead>
<tr>
<th style={{ width: "400px" }}>分组名称</th>
<th>分组编码</th>
<th>评查点数量</th>
<th>状态</th>
<th>创建时间</th>
<th style={{ width: "180px" }}>操作</th>
</tr>
</thead>
<tbody>
{processedData.map((item) => (
<tr key={item.id} className={`group-row ${item.isParent ? 'parent-row' : 'child-row child-of-' + item.parentId}`}>
<td>
<div className={`flex items-center ${!item.isParent ? 'ml-8' : ''}`}>
{item.isParent && (
<span
className="expand-icon"
onClick={() => toggleGroup(item.id)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleGroup(item.id);
}
}}
>
<i className={`ri-arrow-${expandedGroups.includes(item.id) ? 'down' : 'right'}-s-line`}></i>
</span>
)}
<Link
to={`/rule-groups/${item.id}/rules`}
className="group-name-link flex items-center ml-1"
>
<i className={`${item.isParent ? 'ri-folder-line' : 'ri-file-list-line'} mr-1`}></i> {item.name}
</Link>
<span className={`group-badge ${item.isParent ? 'parent-badge' : 'child-badge'}`}>
{item.isParent ? '一级分组' : '二级分组'}
</span>
</div>
</td>
<td>{item.code}</td>
<td>
<Link to={`/rule-groups/${item.id}/rules`} className="badge bg-primary text-white">
{item.ruleCount}
</Link>
{item.subGroupCount > 0 && (
<span className="text-secondary text-sm ml-1">
| 子分组: {item.subGroupCount}
</span>
)}
</td>
<td>
<StatusDot status={item.status === 'active' ? 'success' : 'error'} text={item.status === 'active' ? '启用' : '禁用'} />
</td>
<td>{item.createdAt}</td>
<td>
<button
className="ant-btn ant-btn-text ant-btn-sm text-primary"
onClick={() => navigate(`/rule-groups/${item.id}`)}
>
<i className="ri-edit-line"></i> 编辑
</button>
<button
className="ant-btn ant-btn-text ant-btn-sm text-error"
onClick={() => handleDeleteGroup(item.id)}
>
<i className="ri-delete-bin-line"></i> 删除
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</>
}
noActionDivider={true}
>
<SearchFilter
label="分组名称"
placeholder="请输入分组名称"
value={searchParams.get('name') || ''}
onSearch={handleNameSearch}
className="flex-1 min-w-[200px]"
instantSearch={true}
/>
{/* 分页 */}
<div className="flex justify-between items-center mt-4">
<div className="text-sm text-secondary">
共 {groups.length} 条记录，每页显示 10 条
</div>
<div className="ant-pagination">
<button className="ant-pagination-item ant-pagination-prev" disabled>
<i className="ri-arrow-left-s-line"></i>
</button>
<button className="ant-pagination-item ant-pagination-item-active">1</button>
<button className="ant-pagination-item ant-pagination-next" disabled>
<i className="ri-arrow-right-s-line"></i>
</button>
</div>
</div>
<SearchFilter
label="分组编码"
placeholder="请输入分组编码"
value={searchParams.get('code') || ''}
onSearch={handleCodeSearch}
className="flex-1 min-w-[200px]"
instantSearch={true}
/>
<FilterSelect
label="状态"
name="status"
value={searchParams.get('status') || ''}
options={[
{ value: "active", label: "启用" },
{ value: "inactive", label: "禁用" }
]}
onChange={handleStatusChange}
className="flex-1 min-w-[200px]"
/>
</FilterPanel>
{/* 数据表格 - 使用Table组件 */}
<Card bodyClassName="px-4 py-4">
<Table
columns={columns}
dataSource={processedData}
rowKey="id"
emptyText="暂无分组数据"
className="tree-table"
/>
{/* 分页 - 使用Pagination组件 */}
<Pagination
currentPage={1}
total={groups.length}
pageSize={10}
onChange={() => {}}
showTotal={true}
/>
</Card>
</div>
);
app/routes/rules.files.tsx → app/routes/rules-files.tsx
+221 -228
View File
@@ -1,15 +1,18 @@
import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
import { useLoaderData, useSearchParams } 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 { Pagination } from "~/components/ui/Pagination";
import { Table } from "~/components/ui/Table";
import { SearchBox } from "~/components/ui/SearchBox";
import rulesFilesStyles from "~/styles/pages/rules_files.css?url";
import rulesFilesStyles from "~/styles/pages/rules-files.css?url";
export const links = () => [
{ rel: "stylesheet", href: rulesFilesStyles }
];
export const handle = {
breadcrumb: "评查文件列表"
};
@@ -196,7 +199,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
return fileDate >= today;
});
break;
case DateRange.WEEK:
case DateRange.WEEK: {
const weekStart = new Date(today);
weekStart.setDate(today.getDate() - today.getDay());
filteredFiles = filteredFiles.filter(file => {
@@ -204,13 +207,15 @@ export async function loader({ request }: LoaderFunctionArgs) {
return fileDate >= weekStart;
});
break;
case DateRange.MONTH:
}
case DateRange.MONTH: {
const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
filteredFiles = filteredFiles.filter(file => {
const fileDate = new Date(file.uploadTime.split(' ')[0]);
return fileDate >= monthStart;
});
break;
}
}
}
@@ -264,18 +269,20 @@ export async function loader({ request }: LoaderFunctionArgs) {
}
}
// 提取renderErrorBoundary函数作为命名导出
export function ErrorBoundary() {
return (
<div className="error-container p-6">
<h1 className="text-xl font-bold text-red-500 mb-4">出错了</h1>
<h1 className="text-xl font-normal text-red-500 mb-4">出错了</h1>
<p className="mb-4">加载评查文件列表时发生错误。请稍后再试，或联系管理员。</p>
<Button type="primary" to="/">返回首页</Button>
</div>
);
}
export default function ReviewFilesList() {
const { files, totalCount, currentPage, pageSize, totalPages } = useLoaderData<typeof loader>();
// 在文件中定义一个与路由文件名匹配的命名函数组件
export default function RulesFiles() {
const { files, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const [searchParams, setSearchParams] = useSearchParams();
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
@@ -314,6 +321,14 @@ export default function ReviewFilesList() {
setSearchParams(newParams);
};
// 添加页码大小变更处理函数
const handlePageSizeChange = (size: number) => {
const newParams = new URLSearchParams(searchParams);
newParams.set('pageSize', size.toString());
newParams.set('page', '1'); // 改变每页条数时重置为第一页
setSearchParams(newParams);
};
// 渲染问题摘要
const renderIssues = (issues: ReviewFile['issues']) => {
if (issues.length === 0) {
@@ -327,7 +342,7 @@ export default function ReviewFilesList() {
return (
<div className="text-sm">
{issues.slice(0, 3).map((issue, index) => (
<div key={index} className="mb-1 last:mb-0">
<div key={index} className={`mb-1 ${index === issues.length - 1 ? 'last:mb-0' : ''}`}>
<span className={`severity-indicator severity-${issue.severity}`}></span>
{issue.message}
</div>
@@ -336,29 +351,145 @@ export default function ReviewFilesList() {
);
};
// 渲染文件图标
const renderFileIcon = (fileName: string) => {
if (fileName.endsWith('.pdf')) {
return <i className="ri-file-pdf-line text-red-500 mr-2 text-lg"></i>;
} else if (fileName.endsWith('.docx') || fileName.endsWith('.doc')) {
return <i className="ri-file-word-2-line text-blue-500 mr-2 text-lg"></i>;
} else if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
return <i className="ri-file-excel-2-line text-green-500 mr-2 text-lg"></i>;
} else {
return <i className="ri-file-line text-gray-500 mr-2 text-lg"></i>;
// 文件类型选项
const fileTypeOptions = Object.keys(FILE_TYPE_LABELS).map(type => ({
value: type,
label: FILE_TYPE_LABELS[type as FileType]
}));
// 评查状态选项
const reviewStatusOptions = Object.keys(REVIEW_STATUS_LABELS).map(status => ({
value: status,
label: REVIEW_STATUS_LABELS[status as ReviewStatus]
}));
// 时间范围选项
const dateRangeOptions = [
{ value: DateRange.TODAY, label: '今天' },
{ value: DateRange.WEEK, label: '本周' },
{ value: DateRange.MONTH, label: '本月' },
{ value: DateRange.CUSTOM, label: '自定义时间段' }
];
// 获取文件状态对应的图标和类名
const getStatusInfo = (status: ReviewStatus) => {
switch (status) {
case ReviewStatus.PASS:
return { icon: "ri-checkbox-circle-line", className: "success" };
case ReviewStatus.WARNING:
return { icon: "ri-alert-line", className: "warning" };
case ReviewStatus.FAIL:
return { icon: "ri-close-circle-line", className: "error" };
case ReviewStatus.PENDING:
return { icon: "ri-time-line", className: "processing" };
default:
return { icon: "", className: "default" };
}
};
// 定义表格列配置
const columns = [
{
title: "文件名称",
key: "fileName",
width: "30%",
render: (_: unknown, file: ReviewFile) => (
<div className="flex items-center">
<FileIcon fileName={file.fileName} className="mr-2 text-lg" />
<div>
<div className="font-normal text-base">{file.fileName}</div>
<div className="text-xs text-secondary mt-1">
{file.fileType === FileType.CONTRACT && "合同编号："}
{file.fileType === FileType.LICENSE && "许可证号："}
{file.fileType === FileType.PUNISHMENT && "文号："}
{file.fileType === FileType.REPORT && "报表编号："}
{file.fileCode}
</div>
</div>
</div>
)
},
{
title: "文件类型",
key: "fileType",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
<span className={`file-type-tag file-type-tag-${file.fileType}`}>
{file.fileType === FileType.CONTRACT && <i className="ri-file-list-3-line"></i>}
{file.fileType === FileType.LICENSE && <i className="ri-vip-crown-line"></i>}
{file.fileType === FileType.PUNISHMENT && <i className="ri-scales-line"></i>}
{file.fileType === FileType.REPORT && <i className="ri-file-chart-line"></i>}
{file.fileType === FileType.OTHER && <i className="ri-file-line"></i>}
{FILE_TYPE_LABELS[file.fileType]}
</span>
)
},
{
title: "上传时间",
key: "uploadTime",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
<div>
<span className="text-base">{file.uploadTime.split(' ')[0]}</span>
<br />
<span className="text-xs text-secondary">{file.uploadTime.split(' ')[1]}</span>
</div>
)
},
{
title: "评查状态",
key: "reviewStatus",
width: "12%",
render: (_: unknown, file: ReviewFile) => {
const statusInfo = getStatusInfo(file.reviewStatus);
return (
<span className={`status-badge status-badge-${statusInfo.className.replace('status-', '')}`}>
<i className={`${statusInfo.icon} mr-1`}></i>
{REVIEW_STATUS_LABELS[file.reviewStatus]}
{file.issueCount > 0 && ` (${file.issueCount})`}
</span>
);
}
},
{
title: "问题摘要",
key: "issues",
width: "20%",
render: (_: unknown, file: ReviewFile) => renderIssues(file.issues)
},
{
title: "操作",
key: "operation",
width: "14%",
render: (_: unknown, file: ReviewFile) => (
<>
{file.reviewStatus === ReviewStatus.PENDING ? (
<Button type="primary" size="small" icon="ri-check-double-line" className="mr-2">
确认
</Button>
) : (
<Button type="default" size="small" icon="ri-eye-line" to={`/files/${file.id}`} className="mr-2">
查看
</Button>
)}
<Button type="default" size="small" icon="ri-download-2-line">
下载
</Button>
</>
)
}
];
return (
<div className="p-6 review-files-page">
{/* 页面头部 */}
<div className="flex justify-between items-center mb-4">
<div className="flex items-center">
<h2 className="text-xl font-medium">评查文件列表</h2>
<h2 className="text-xl font-normal">评查文件列表</h2>
<div className="flex items-center ml-4 bg-white px-3 py-1 rounded-md">
<i className="ri-file-list-3-line text-primary text-lg mr-1"></i>
<span className="text-sm text-secondary">总文件数：</span>
<span className="text-base font-bold text-primary ml-1">{totalCount}</span>
<span className="text-base font-normal text-primary ml-1">{totalCount}</span>
</div>
</div>
<Button type="primary" icon="ri-file-upload-line" to="/files/new">
@@ -367,218 +498,80 @@ export default function ReviewFilesList() {
</div>
{/* 筛选区域 */}
<Card className="card-container">
<div className="flex flex-wrap items-end gap-3">
<div className="w-48">
<div className="mb-1 text-sm font-medium">文件类型</div>
<select
className="form-select w-full"
name="fileType"
value={searchParams.get('fileType') || ''}
onChange={handleFilterChange}
>
<option value="">全部</option>
<option value={FileType.CONTRACT}>合同文档</option>
<option value={FileType.LICENSE}>专卖许可证</option>
<option value={FileType.PUNISHMENT}>行政处罚决定书</option>
<option value={FileType.REPORT}>报表文档</option>
<option value={FileType.OTHER}>其他文档</option>
</select>
</div>
<div className="w-48">
<div className="mb-1 text-sm font-medium">评查状态</div>
<select
className="form-select w-full"
name="reviewStatus"
value={searchParams.get('reviewStatus') || ''}
onChange={handleFilterChange}
>
<option value="">全部</option>
<option value={ReviewStatus.PASS}>通过</option>
<option value={ReviewStatus.WARNING}>警告</option>
<option value={ReviewStatus.FAIL}>不通过</option>
<option value={ReviewStatus.PENDING}>待人工确认</option>
</select>
</div>
<div className="w-48">
<div className="mb-1 text-sm font-medium">时间范围</div>
<select
className="form-select w-full"
name="dateRange"
value={searchParams.get('dateRange') || ''}
onChange={handleFilterChange}
>
<option value="">全部</option>
<option value={DateRange.TODAY}>今天</option>
<option value={DateRange.WEEK}>本周</option>
<option value={DateRange.MONTH}>本月</option>
<option value={DateRange.CUSTOM}>自定义时间段</option>
</select>
</div>
<div className="w-72">
<div className="mb-1 text-sm font-medium">搜索</div>
<div className="flex border border-gray-300 rounded overflow-hidden">
<SearchBox
placeholder="搜索文件名、合同编号或关键词"
defaultValue={searchParams.get('keyword') || ''}
onSearch={handleSearch}
className="search-input"
buttonText="搜索"
/>
</div>
</div>
<FilterPanel className="px-3 py-3" noActionDivider={true}>
<FilterSelect
label="文件类型"
name="fileType"
value={searchParams.get('fileType') || ''}
options={fileTypeOptions}
onChange={handleFilterChange}
className="mr-2 w-40"
/>
<FilterSelect
label="评查状态"
name="reviewStatus"
value={searchParams.get('reviewStatus') || ''}
options={reviewStatusOptions}
onChange={handleFilterChange}
className="mr-2 w-40"
/>
<FilterSelect
label="时间范围"
name="dateRange"
value={searchParams.get('dateRange') || ''}
options={dateRangeOptions}
onChange={handleFilterChange}
className="mr-2 w-40"
/>
<SearchFilter
label="搜索"
placeholder="搜索文件名、合同编号或关键词"
value={searchParams.get('keyword') || ''}
onSearch={handleSearch}
buttonText=""
className="mr-2 w-64"
/>
<div className="ml-auto">
<select
className="form-select w-auto"
name="sortOrder"
value={searchParams.get('sortOrder') || 'upload_time_desc'}
onChange={handleFilterChange}
>
<option value="upload_time_desc">上传时间 ↓</option>
<option value="upload_time_asc">上传时间 ↑</option>
<option value="issue_count_desc">问题数量 ↓</option>
<option value="issue_count_asc">问题数量 ↑</option>
</select>
</div>
</div>
</Card>
<FilterSelect
label="排序方式"
name="sortOrder"
value={searchParams.get('sortOrder') || 'upload_time_desc'}
onChange={handleFilterChange}
className="w-32"
options={[
{ value: "upload_time_desc", label: "上传时间 ↓" },
{ value: "upload_time_asc", label: "上传时间 ↑" },
{ value: "issue_count_desc", label: "问题数量 ↓" },
{ value: "issue_count_asc", label: "问题数量 ↑" }
]}
/>
</FilterPanel>
{/* 文件列表 */}
<Card className="content-card">
<table className="ant-table">
<thead>
<tr>
<th style={{ width: "30%" }}>文件名称</th>
<th style={{ width: "12%" }}>文件类型</th>
<th style={{ width: "12%" }}>上传时间</th>
<th style={{ width: "12%" }}>评查状态</th>
<th style={{ width: "20%" }}>问题摘要</th>
<th style={{ width: "14%" }}>操作</th>
</tr>
</thead>
<tbody>
{files.length > 0 ? (
files.map((file) => (
<tr key={file.id}>
<td>
<div className="flex items-center">
{renderFileIcon(file.fileName)}
<div>
<div className="font-medium">{file.fileName}</div>
<div className="text-xs text-secondary mt-1">
{file.fileType === FileType.CONTRACT && "合同编号："}
{file.fileType === FileType.LICENSE && "许可证号："}
{file.fileType === FileType.PUNISHMENT && "文号："}
{file.fileType === FileType.REPORT && "报表编号："}
{file.fileCode}
</div>
</div>
</div>
</td>
<td>
<span className={`file-type-badge file-type-${file.fileType}`}>
{file.fileType === FileType.CONTRACT && <i className="ri-file-list-3-line"></i>}
{file.fileType === FileType.LICENSE && <i className="ri-vip-crown-line"></i>}
{file.fileType === FileType.PUNISHMENT && <i className="ri-scales-line"></i>}
{file.fileType === FileType.REPORT && <i className="ri-file-chart-line"></i>}
{file.fileType === FileType.OTHER && <i className="ri-file-line"></i>}
{FILE_TYPE_LABELS[file.fileType]}
</span>
</td>
<td>
{file.uploadTime.split(' ')[0]}
<br />
<span className="text-xs text-secondary">{file.uploadTime.split(' ')[1]}</span>
</td>
<td>
<span className={`status-badge status-${file.reviewStatus}`}>
{file.reviewStatus === ReviewStatus.PASS && <i className="ri-checkbox-circle-line mr-1"></i>}
{file.reviewStatus === ReviewStatus.WARNING && <i className="ri-alert-line mr-1"></i>}
{file.reviewStatus === ReviewStatus.FAIL && <i className="ri-close-circle-line mr-1"></i>}
{file.reviewStatus === ReviewStatus.PENDING && <i className="ri-time-line mr-1"></i>}
{REVIEW_STATUS_LABELS[file.reviewStatus]}
{file.issueCount > 0 && ` (${file.issueCount})`}
</span>
</td>
<td>
{renderIssues(file.issues)}
</td>
<td>
{file.reviewStatus === ReviewStatus.PENDING ? (
<Button type="primary" size="small" icon="ri-check-double-line" className="mr-2">
确认
</Button>
) : (
<Button type="default" size="small" icon="ri-eye-line" to={`/files/${file.id}`} className="mr-2">
查看
</Button>
)}
<Button type="default" size="small" icon="ri-download-2-line">
</Button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={6} className="text-center py-8 text-gray-500">
暂无文件数据
</td>
</tr>
)}
</tbody>
</table>
<Card >
<Table
columns={columns}
dataSource={files}
rowKey="id"
emptyText="暂无文件数据"
className="files-table"
/>
{/* 分页 */}
{/* 分页组件 */}
{totalCount > 0 && (
<div className="pagination">
<button
className={`pagination-item ${currentPage <= 1 ? 'disabled' : ''}`}
onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
disabled={currentPage <= 1}
>
<i className="ri-arrow-left-s-line"></i>
</button>
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
// 显示当前页附近的页码，最多显示5个
let pageNum;
if (totalPages <= 5) {
// 总页数少于5，直接显示所有页码
pageNum = i + 1;
} else if (currentPage <= 3) {
// 当前页靠近开始
pageNum = i + 1;
} else if (currentPage >= totalPages - 2) {
// 当前页靠近结尾
pageNum = totalPages - 4 + i;
} else {
// 当前页在中间
pageNum = currentPage - 2 + i;
}
return (
<button
key={pageNum}
className={`pagination-item ${pageNum === currentPage ? 'active' : ''}`}
onClick={() => handlePageChange(pageNum)}
>
{pageNum}
</button>
);
})}
<button
className={`pagination-item ${currentPage >= totalPages ? 'disabled' : ''}`}
onClick={() => currentPage < totalPages && handlePageChange(currentPage + 1)}
disabled={currentPage >= totalPages}
>
<i className="ri-arrow-right-s-line"></i>
</button>
</div>
<Pagination
currentPage={currentPage}
total={totalCount}
pageSize={pageSize}
onChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
showTotal={true}
showPageSizeChanger={true}
pageSizeOptions={[10, 20, 30, 50]}
/>
)}
</Card>
</div>
app/routes/rules.$rulesId.tsx
+418
View File
@@ -0,0 +1,418 @@
import React, { useState } from 'react';
import { redirect, type MetaFunction, type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData, useActionData, Form, useSubmit, useNavigate } from '@remix-run/react';
import { Button } from '~/components/ui/Button';
import { Card } from '~/components/ui/Card';
import { Breadcrumb } from '~/components/layout/Breadcrumb';
import type { Rule, RuleType, RulePriority } from '~/models/rule';
export const meta: MetaFunction = () => {
return [
{ title: "中国烟草AI合同及卷宗审核系统 - 评查规则详情" },
{ name: "description", content: "评查规则详情编辑页面" }
];
};
export const handle = {
breadcrumb: '编辑评查点'
};
interface LoaderData {
rule: Rule;
ruleTypes: { label: string; value: RuleType }[];
rulePriorities: { label: string; value: RulePriority }[];
groupOptions: { label: string; value: string }[];
}
export async function loader({ params }: LoaderFunctionArgs) {
const { ruleId } = params;
// 判断是否为新建规则
const isNewRule = ruleId === 'new';
// 模拟数据，实际项目中应从API获取
const rule: Rule = isNewRule ? {
id: '',
name: '',
description: '',
content: '',
type: 'text',
priority: 'medium',
groupId: '',
groupName: '',
isActive: true,
createdAt: '',
updatedAt: ''
} : {
id: ruleId,
name: '许可证编号格式检查',
description: '检查烟草专卖零售许可证编号是否符合"烟零许(年份)序号号"的标准格式',
content: '许可证编号应当符合"烟零许(年份)序号号"的标准格式，如"烟零许(2023)12345号"',
type: 'regex',
priority: 'high',
groupId: '1',
groupName: '专卖许可证规则组',
isActive: true,
createdAt: '2023-10-15 09:30',
updatedAt: '2023-12-10 14:20'
};
// 规则类型选项
const ruleTypes = [
{ label: '文本匹配', value: 'text' },
{ label: '正则表达式', value: 'regex' },
{ label: '数值范围', value: 'range' },
{ label: '日期检查', value: 'date' },
{ label: 'AI智能检查', value: 'ai' }
];
// 规则优先级选项
const rulePriorities = [
{ label: '低', value: 'low' },
{ label: '中', value: 'medium' },
{ label: '高', value: 'high' },
{ label: '关键', value: 'critical' }
];
// 规则组选项
const groupOptions = [
{ label: '专卖许可证规则组', value: '1' },
{ label: '合同协议规则组', value: '2' },
{ label: '财务票据规则组', value: '3' },
{ label: '采购订单规则组', value: '4' },
{ label: '销售报表规则组', value: '5' }
];
return Response.json({
rule,
ruleTypes,
rulePriorities,
groupOptions
});
}
interface ActionData {
success?: boolean;
errors?: {
name?: string;
description?: string;
content?: string;
type?: string;
priority?: string;
groupId?: string;
general?: string;
};
}
export async function action({ request, params }: ActionFunctionArgs) {
const { ruleId } = params;
const formData = await request.formData();
const isNewRule = ruleId === 'new';
// 获取表单数据
const name = formData.get('name')?.toString() || '';
const description = formData.get('description')?.toString() || '';
const content = formData.get('content')?.toString() || '';
const type = formData.get('type')?.toString() || '';
const priority = formData.get('priority')?.toString() || '';
const groupId = formData.get('groupId')?.toString() || '';
const isActive = formData.get('isActive') === 'true';
// 表单验证
const errors: ActionData['errors'] = {};
if (!name.trim()) {
errors.name = '规则名称不能为空';
}
if (!content.trim()) {
errors.content = '规则内容不能为空';
}
if (!type) {
errors.type = '必须选择规则类型';
}
if (!priority) {
errors.priority = '必须选择规则优先级';
}
if (!groupId) {
errors.groupId = '必须选择规则所属组';
}
if (Object.keys(errors).length > 0) {
return Response.json({ errors });
}
// 模拟API保存操作，实际项目中应调用API
try {
// 在这里调用API进行保存
console.log('保存规则:', {
id: isNewRule ? 'new-id' : ruleId,
name,
description,
content,
type,
priority,
groupId,
isActive
});
// 成功后重定向到规则列表页
return redirect('/rules');
} catch (error) {
return Response.json({
errors: {
general: '保存规则失败，请重试'
}
});
}
}
export default function RuleDetail() {
const { rule, ruleTypes, rulePriorities, groupOptions } = useLoaderData<typeof loader>();
const actionData = useActionData<typeof action>();
const navigate = useNavigate();
const submit = useSubmit();
const [formData, setFormData] = useState({
name: rule.name,
description: rule.description,
content: rule.content,
type: rule.type,
priority: rule.priority,
groupId: rule.groupId,
isActive: rule.isActive
});
const isNewRule = !rule.id;
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSwitchChange = (name: string, checked: boolean) => {
setFormData(prev => ({ ...prev, [name]: checked }));
};
const handleCancel = () => {
navigate('/rules');
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// 使用useSubmit提交表单
const formElement = e.currentTarget;
submit(formElement, { method: 'post' });
};
return (
<div>
<Breadcrumb
items={[
{ title: '评查规则', to: '/rules' },
{ title: isNewRule ? '新增规则' : '编辑规则', to: `/rules/${rule.id}` }
]}
/>
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-medium">{isNewRule ? '新增评查规则' : '编辑评查规则'}</h2>
</div>
<Card>
<Form method="post" onSubmit={handleSubmit}>
{actionData?.errors?.general && (
<div className="error-message mb-4">
<i className="ri-error-warning-line mr-1"></i>
{actionData.errors.general}
</div>
)}
<div className="form-section mb-6">
<h3 className="form-section-title">基本信息</h3>
<div className="form-row">
<div className="form-group col-span-6">
<label htmlFor="name" className="form-label required">规则名称</label>
<input
type="text"
id="name"
name="name"
className={`form-input ${actionData?.errors?.name ? 'error' : ''}`}
value={formData.name}
onChange={handleChange}
required
/>
{actionData?.errors?.name && (
<div className="form-error">{actionData.errors.name}</div>
)}
</div>
<div className="form-group col-span-6">
<label htmlFor="groupId" className="form-label required">所属规则组</label>
<select
id="groupId"
name="groupId"
className={`form-select ${actionData?.errors?.groupId ? 'error' : ''}`}
value={formData.groupId}
onChange={handleChange}
required
>
<option value="">选择规则组</option>
{groupOptions.map((option: { value: string; label: string }) => (
<option key={option.value} value={option.value}>{option.label}</option>
))}
</select>
{actionData?.errors?.groupId && (
<div className="form-error">{actionData.errors.groupId}</div>
)}
</div>
</div>
<div className="form-row">
<div className="form-group col-span-12">
<label htmlFor="description" className="form-label">规则描述</label>
<textarea
id="description"
name="description"
className="form-textarea"
rows={3}
value={formData.description}
onChange={handleChange}
></textarea>
</div>
</div>
</div>
<div className="form-section mb-6">
<h3 className="form-section-title">规则设置</h3>
<div className="form-row">
<div className="form-group col-span-4">
<label htmlFor="type" className="form-label required">规则类型</label>
<select
id="type"
name="type"
className={`form-select ${actionData?.errors?.type ? 'error' : ''}`}
value={formData.type}
onChange={handleChange}
required
>
<option value="">选择规则类型</option>
{ruleTypes.map((option: { value: string; label: string }) => (
<option key={option.value} value={option.value}>{option.label}</option>
))}
</select>
{actionData?.errors?.type && (
<div className="form-error">{actionData.errors.type}</div>
)}
</div>
<div className="form-group col-span-4">
<label htmlFor="priority" className="form-label required">规则优先级</label>
<select
id="priority"
name="priority"
className={`form-select ${actionData?.errors?.priority ? 'error' : ''}`}
value={formData.priority}
onChange={handleChange}
required
>
<option value="">选择优先级</option>
{rulePriorities.map((option: { value: string; label: string }) => (
<option key={option.value} value={option.value}>{option.label}</option>
))}
</select>
{actionData?.errors?.priority && (
<div className="form-error">{actionData.errors.priority}</div>
)}
</div>
<div className="form-group col-span-4">
<label htmlFor="isActive" className="form-label">状态</label>
<div className="flex items-center h-10 mt-1">
<label className="switch" aria-label="切换规则状态">
<input
type="checkbox"
name="isActive"
checked={formData.isActive}
onChange={(e) => handleSwitchChange('isActive', e.target.checked)}
/>
<span className="slider round"></span>
</label>
<input type="hidden" name="isActive" value={formData.isActive ? 'true' : 'false'} />
<span className="ml-2">{formData.isActive ? '启用' : '禁用'}</span>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-span-12">
<label htmlFor="content" className="form-label required">规则内容</label>
<textarea
id="content"
name="content"
className={`form-textarea code-editor ${actionData?.errors?.content ? 'error' : ''}`}
rows={8}
value={formData.content}
onChange={handleChange}
required
></textarea>
{actionData?.errors?.content && (
<div className="form-error">{actionData.errors.content}</div>
)}
{formData.type === 'regex' && (
<div className="text-xs text-gray-500 mt-1">
<i className="ri-information-line mr-1"></i>
输入正则表达式，用于匹配文档内容
</div>
)}
{formData.type === 'ai' && (
<div className="text-xs text-gray-500 mt-1">
<i className="ri-information-line mr-1"></i>
请使用自然语言描述规则检查的要求，AI将自动理解并执行检查
</div>
)}
</div>
</div>
</div>
<div className="form-section mb-6">
<h3 className="form-section-title">测试工具</h3>
<div className="p-4 bg-gray-50 rounded-md">
<div className="mb-4">
<label htmlFor="testContent" className="form-label">测试内容</label>
<textarea
id="testContent"
className="form-textarea"
rows={4}
placeholder="粘贴待测试的文本内容..."
></textarea>
</div>
<div className="flex justify-end">
<Button type="default">
<i className="ri-test-tube-line mr-1"></i>
测试规则
</Button>
</div>
</div>
</div>
<div className="flex justify-end space-x-2">
<Button type="default" onClick={handleCancel}>
取消
</Button>
<Button type="primary">
{isNewRule ? '创建规则' : '保存修改'}
</Button>
</div>
</Form>
</Card>
</div>
);
}
app/routes/rules._index.tsx
+161 -194
View File
@@ -3,7 +3,6 @@ import { json, type MetaFunction, type LoaderFunctionArgs, redirect } from "@rem
import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
import { Button } from '~/components/ui/Button';
import { Card } from '~/components/ui/Card';
import { SearchBox } from '~/components/ui/SearchBox';
import { Tag } from '~/components/ui/Tag';
import { StatusDot } from '~/components/ui/StatusDot';
import rulesStyles from "~/styles/pages/rules_index.css?url";
@@ -11,14 +10,16 @@ import type { Rule } from '~/models/rule';
import { RULE_TYPE_LABELS, RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
import type { TagColor } from '~/components/ui/Tag';
import { Link } from '@remix-run/react';
import { Table } from '~/components/ui/Table';
import { FilterPanel, FilterSelect, SearchFilter } from '~/components/ui/FilterPanel';
import { Pagination } from '~/components/ui/Pagination';
export const links = () => [
{ rel: "stylesheet", href: rulesStyles }
];
export const handle = {
breadcrumb: "评查点列表"
};
// export const handle = {
// breadcrumb: "评查点列表"
// };
export const meta: MetaFunction = () => {
return [
@@ -301,8 +302,8 @@ const priorityLabels = {
'low': '低'
};
export default function RulesList() {
const { rules, groups, totalCount, currentPage, pageSize, totalPages } = useLoaderData<typeof loader>();
export default function RulesIndex() {
const { rules, groups, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const [searchParams, setSearchParams] = useSearchParams();
const submit = useSubmit();
@@ -371,213 +372,179 @@ export default function RulesList() {
setSearchParams(newParams);
};
const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const newPageSize = e.target.value;
const handlePageSizeChange = (size: number) => {
const newParams = new URLSearchParams(searchParams);
newParams.set('pageSize', newPageSize);
newParams.set('pageSize', size.toString());
newParams.set('page', '1'); // 更改每页条数时，重置到第一页
setSearchParams(newParams);
};
// 处理重置筛选
const handleReset = () => {
setSearchParams(new URLSearchParams());
};
// 定义表格列配置
const columns = [
{
title: "评查点编码",
dataIndex: "code" as keyof Rule,
key: "code",
align: "center" as const
},
{
title: "评查点名称",
dataIndex: "name" as keyof Rule,
key: "name",
align: "center" as const
},
{
title: "评查点类型",
key: "ruleType",
align: "center" as const,
render: (_: unknown, record: Rule) => {
const typeColor = RULE_TYPE_COLORS[record.ruleType] as TagColor;
return (
<Tag color={typeColor}>
{typeLabels[record.ruleType as keyof typeof typeLabels] || RULE_TYPE_LABELS[record.ruleType]}
</Tag>
);
}
},
{
title: "所属规则组",
dataIndex: "groupName" as keyof Rule,
key: "groupName",
align: "center" as const
},
{
title: "优先级",
key: "priority",
align: "center" as const,
render: (_: unknown, record: Rule) => {
const priorityColor = RULE_PRIORITY_COLORS[record.priority] as TagColor;
return (
<Tag color={priorityColor}>
{priorityLabels[record.priority as keyof typeof priorityLabels] || RULE_PRIORITY_LABELS[record.priority]}
</Tag>
);
}
},
{
title: "状态",
key: "isActive",
align: "center" as const,
className: "status-column",
render: (_: unknown, record: Rule) => (
<StatusDot status={record.isActive} text={record.isActive ? "启用" : "禁用"} />
)
},
{
title: "创建时间",
dataIndex: "createdAt" as keyof Rule,
key: "createdAt",
align: "center" as const
},
{
title: "操作",
key: "operation",
align: "center" as const,
render: (_: unknown, record: Rule) => (
<div className="operations-cell">
<Link to={`/rules/${record.id}`} className="operation-btn">
<i className="ri-edit-line"></i> 编辑
</Link>
<button className="operation-btn" onClick={() => handleCopy(record)}>
<i className="ri-file-copy-line"></i> 复制
</button>
<button className="operation-btn operation-btn-danger" onClick={() => handleDeleteClick(record)}>
<i className="ri-delete-bin-line"></i> 删除
</button>
</div>
)
}
];
return (
<div className="p-6 rules-page">
{/* 页面头部 */}
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-medium">评查点管理</h2>
<Button type="primary" icon="ri-add-line" to="/rules/new">
<Button type="primary" icon="ri-add-line" to="/rules/new" className="btn-add-rule">
新增评查点
</Button>
</div>
{/* 筛选区域 */}
<Card className="card-container">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label htmlFor="ruleType" className="form-label">评查点类型</label>
<select
id="ruleType"
className="form-select"
name="ruleType"
value={searchParams.get('ruleType') || ''}
onChange={handleFilterChange}
>
<option value="">全部</option>
<option value="essential">基本要素类</option>
<option value="content">内容合规类</option>
<option value="format">格式规范类</option>
<option value="legal">法律风险类</option>
<option value="business">业务专项类</option>
</select>
</div>
<div>
<label htmlFor="groupId" className="form-label">所属规则组</label>
<select
id="groupId"
className="form-select"
name="groupId"
value={searchParams.get('groupId') || ''}
onChange={handleFilterChange}
>
<option value="">全部</option>
{groups.map((group) => (
<option key={group.id} value={group.id}>{group.name}</option>
))}
</select>
</div>
<div>
<label htmlFor="isActive" className="form-label">状态</label>
<select
id="isActive"
className="form-select"
name="isActive"
value={searchParams.get('isActive') || ''}
onChange={handleFilterChange}
>
<option value="">全部</option>
<option value="true">启用</option>
<option value="false">禁用</option>
</select>
</div>
<div>
<label htmlFor="keyword" className="form-label">搜索</label>
<SearchBox
placeholder="输入评查点名称或编码"
defaultValue={searchParams.get('keyword') || ''}
onSearch={handleSearch}
/>
</div>
</div>
</Card>
<FilterPanel>
<FilterSelect
label="评查点类型"
name="ruleType"
value={searchParams.get('ruleType') || ''}
options={[
{ value: "essential", label: "基本要素类" },
{ value: "content", label: "内容合规类" },
{ value: "format", label: "格式规范类" },
{ value: "legal", label: "法律风险类" },
{ value: "business", label: "业务专项类" }
]}
onChange={handleFilterChange}
className="mr-3 w-80 "
/>
<FilterSelect
label="所属规则组"
name="groupId"
value={searchParams.get('groupId') || ''}
options={groups.map(group => ({ value: group.id, label: group.name }))}
onChange={handleFilterChange}
className="mr-3 w-80"
/>
<FilterSelect
label="状态"
name="isActive"
value={searchParams.get('isActive') || ''}
options={[
{ value: "true", label: "启用" },
{ value: "false", label: "禁用" }
]}
onChange={handleFilterChange}
className="mr-3 w-80"
/>
<SearchFilter
label="搜索"
placeholder="输入评查点名称或编码"
value={searchParams.get('keyword') || ''}
onSearch={handleSearch}
className="flex-1"
/>
</FilterPanel>
{/* 评查点列表 */}
{/* 评查点列表 - 使用Table组件 */}
<Card className="ant-card">
<div className="overflow-x-auto">
<table className="ant-table">
<thead>
<tr>
<th>评查点编码</th>
<th>评查点名称</th>
<th>评查点类型</th>
<th>所属规则组</th>
<th>优先级</th>
<th>状态</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{rules.length > 0 ? (
rules.map((rule) => {
const typeColor = RULE_TYPE_COLORS[rule.ruleType] as TagColor;
const priorityColor = RULE_PRIORITY_COLORS[rule.priority] as TagColor;
return (
<tr key={rule.id}>
<td>{rule.code}</td>
<td>{rule.name}</td>
<td>
<Tag color={typeColor}>
{typeLabels[rule.ruleType as keyof typeof typeLabels] || RULE_TYPE_LABELS[rule.ruleType]}
</Tag>
</td>
<td>{rule.groupName}</td>
<td>
<Tag color={priorityColor}>
{priorityLabels[rule.priority as keyof typeof priorityLabels] || RULE_PRIORITY_LABELS[rule.priority]}
</Tag>
</td>
<td>
<StatusDot status={rule.isActive} />
</td>
<td>{rule.createdAt}</td>
<td className="operations-cell">
<Link to={`/rules/${rule.id}`} className="operation-btn">
<i className="ri-edit-line"></i> 编辑
</Link>
<button className="operation-btn" onClick={() => handleCopy(rule)}>
<i className="ri-file-copy-line"></i> 复制
</button>
<button className="operation-btn operation-btn-danger" onClick={() => handleDeleteClick(rule)}>
<i className="ri-delete-bin-line"></i> 删除
</button>
</td>
</tr>
);
})
) : (
<tr>
<td colSpan={8} className="text-center py-8 text-gray-500">
暂无评查点数据
</td>
</tr>
)}
</tbody>
</table>
</div>
<Table
columns={columns}
dataSource={rules}
rowKey="id"
emptyText="暂无评查点数据"
className="rules-table"
/>
{/* 分页 */}
{totalCount > 0 && (
<div className="ant-pagination">
<div className="ant-pagination-options">
<span className="text-sm mr-2">共 {totalCount} 条</span>
<select
className="form-select ant-pagination-options-size-changer"
style={{ width: "100px" }}
value={pageSize}
onChange={handlePageSizeChange}
>
<option value="10">10 条/页</option>
<option value="20">20 条/页</option>
<option value="50">50 条/页</option>
</select>
</div>
<div className="ant-pagination-right">
<button
className={`ant-pagination-item ant-pagination-prev ${currentPage <= 1 ? 'ant-pagination-disabled' : ''}`}
onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
disabled={currentPage <= 1}
>
<i className="ri-arrow-left-s-line"></i>
</button>
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
// 显示当前页附近的页码，最多显示5个
let pageNum;
if (totalPages <= 5) {
// 总页数少于5，直接显示所有页码
pageNum = i + 1;
} else if (currentPage <= 3) {
// 当前页靠近开始
pageNum = i + 1;
} else if (currentPage >= totalPages - 2) {
// 当前页靠近结尾
pageNum = totalPages - 4 + i;
} else {
// 当前页在中间
pageNum = currentPage - 2 + i;
}
return (
<button
key={pageNum}
className={`ant-pagination-item ${pageNum === currentPage ? 'ant-pagination-item-active' : ''}`}
onClick={() => handlePageChange(pageNum)}
>
{pageNum}
</button>
);
})}
<button
className={`ant-pagination-item ant-pagination-next ${currentPage >= totalPages ? 'ant-pagination-disabled' : ''}`}
onClick={() => currentPage < totalPages && handlePageChange(currentPage + 1)}
disabled={currentPage >= totalPages}
>
<i className="ri-arrow-right-s-line"></i>
</button>
</div>
</div>
<Pagination
currentPage={currentPage}
total={totalCount}
pageSize={pageSize}
onChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
showTotal={true}
showPageSizeChanger={true}
pageSizeOptions={[10, 20, 30, 50]}
/>
)}
</Card>
app/routes/rules.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const meta: MetaFunction = () => {
};
export const handle = {
breadcrumb: "评查规则库"
breadcrumb: "评查点列表"
};
/**