598 lines
18 KiB
TypeScript
598 lines
18 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { json, type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
|
||
import { useLoaderData, useSearchParams, useSubmit,Link } from "@remix-run/react";
|
||
import { Button } from '~/components/ui/Button';
|
||
import { Card } from '~/components/ui/Card';
|
||
import { Tag } from '~/components/ui/Tag';
|
||
import { StatusDot } from '~/components/ui/StatusDot';
|
||
import rulesStyles from "~/styles/pages/rules_index.css?url";
|
||
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 { Table } from '~/components/ui/Table';
|
||
import { FilterPanel, FilterSelect, SearchFilter } from '~/components/ui/FilterPanel';
|
||
import { Pagination } from '~/components/ui/Pagination';
|
||
// import { getRulesList } from '~/api/evaluation_points/rules';
|
||
|
||
export const links = () => [
|
||
{ rel: "stylesheet", href: rulesStyles }
|
||
];
|
||
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点列表" },
|
||
{ name: "rules", content: "管理评查点规则，支持根据类型、规则组和状态进行筛选" },
|
||
{ name: "keywords", content: "评查点,合同审核,规则管理,中国烟草" }
|
||
];
|
||
};
|
||
|
||
// 模拟数据 - 用于开发阶段展示UI
|
||
const mockRules: Rule[] = [
|
||
{
|
||
id: '1',
|
||
code: 'EP001',
|
||
name: '合同名称要素检查',
|
||
ruleType: 'essential',
|
||
ruleGroupId: '1',
|
||
groupName: '合同基本要素类检查',
|
||
priority: 'high',
|
||
description: '检查合同是否包含清晰的合同名称',
|
||
checkMethod: 'automatic',
|
||
prompt: '查找文档中的合同名称',
|
||
isActive: true,
|
||
createdAt: '2024-03-15T08:30:00Z',
|
||
updatedAt: '2024-03-15T08:30:00Z'
|
||
},
|
||
{
|
||
id: '2',
|
||
code: 'EP002',
|
||
name: '合同编号要素检查',
|
||
ruleType: 'essential',
|
||
ruleGroupId: '1',
|
||
groupName: '合同基本要素类检查',
|
||
priority: 'high',
|
||
description: '检查合同是否包含唯一的合同编号',
|
||
checkMethod: 'automatic',
|
||
prompt: '查找文档中的合同编号',
|
||
isActive: true,
|
||
createdAt: '2024-03-15T09:15:00Z',
|
||
updatedAt: '2024-03-15T09:15:00Z'
|
||
},
|
||
{
|
||
id: '3',
|
||
code: 'EP003',
|
||
name: '合同主体资格检查',
|
||
ruleType: 'legal',
|
||
ruleGroupId: '2',
|
||
groupName: '销售合同专项检查',
|
||
priority: 'medium',
|
||
description: '检查合同签署方是否具有合法的主体资格',
|
||
checkMethod: 'manual',
|
||
prompt: '确认合同签署方的法律主体资格',
|
||
isActive: true,
|
||
createdAt: '2024-03-16T10:20:00Z',
|
||
updatedAt: '2024-03-16T10:20:00Z'
|
||
},
|
||
{
|
||
id: '4',
|
||
code: 'EP004',
|
||
name: '付款条件检查',
|
||
ruleType: 'content',
|
||
ruleGroupId: '2',
|
||
groupName: '销售合同专项检查',
|
||
priority: 'medium',
|
||
description: '检查合同中的付款条件是否明确',
|
||
checkMethod: 'automatic',
|
||
prompt: '提取文档中的付款条件相关内容',
|
||
isActive: true,
|
||
createdAt: '2024-03-17T11:30:00Z',
|
||
updatedAt: '2024-03-17T11:30:00Z'
|
||
},
|
||
{
|
||
id: '5',
|
||
code: 'EP005',
|
||
name: '违约责任条款检查',
|
||
ruleType: 'legal',
|
||
ruleGroupId: '3',
|
||
groupName: '采购合同专项检查',
|
||
priority: 'high',
|
||
description: '检查合同是否包含违约责任条款',
|
||
checkMethod: 'mixed',
|
||
prompt: '提取文档中的违约责任相关条款',
|
||
isActive: true,
|
||
createdAt: '2024-03-18T13:45:00Z',
|
||
updatedAt: '2024-03-18T13:45:00Z'
|
||
},
|
||
{
|
||
id: '6',
|
||
code: 'EP006',
|
||
name: '合同文本格式检查',
|
||
ruleType: 'format',
|
||
ruleGroupId: '1',
|
||
groupName: '合同基本要素类检查',
|
||
priority: 'low',
|
||
description: '检查合同文本格式是否符合规范',
|
||
checkMethod: 'automatic',
|
||
prompt: '检查文档的整体格式规范性',
|
||
isActive: false,
|
||
createdAt: '2024-03-19T14:50:00Z',
|
||
updatedAt: '2024-03-19T14:50:00Z'
|
||
},
|
||
{
|
||
id: '7',
|
||
code: 'EP007',
|
||
name: '专卖许可证有效性检查',
|
||
ruleType: 'legal',
|
||
ruleGroupId: '4',
|
||
groupName: '专卖许可证审核规则',
|
||
priority: 'high',
|
||
description: '检查专卖许可证是否在有效期内',
|
||
checkMethod: 'automatic',
|
||
prompt: '提取专卖许可证有效期信息并判断有效性',
|
||
isActive: true,
|
||
createdAt: '2024-03-20T15:55:00Z',
|
||
updatedAt: '2024-03-20T15:55:00Z'
|
||
},
|
||
{
|
||
id: '8',
|
||
code: 'EP008',
|
||
name: '处罚决定书格式检查',
|
||
ruleType: 'format',
|
||
ruleGroupId: '5',
|
||
groupName: '行政处罚规范性检查',
|
||
priority: 'medium',
|
||
description: '检查行政处罚决定书格式是否规范',
|
||
checkMethod: 'automatic',
|
||
prompt: '检查处罚决定书的格式规范性',
|
||
isActive: true,
|
||
createdAt: '2024-03-21T16:00:00Z',
|
||
updatedAt: '2024-03-21T16:00:00Z'
|
||
},
|
||
{
|
||
id: '9',
|
||
code: 'EP009',
|
||
name: '处罚依据合法性检查',
|
||
ruleType: 'legal',
|
||
ruleGroupId: '5',
|
||
groupName: '行政处罚规范性检查',
|
||
priority: 'high',
|
||
description: '检查行政处罚依据是否合法',
|
||
checkMethod: 'manual',
|
||
prompt: '审核处罚依据的法律合法性',
|
||
isActive: true,
|
||
createdAt: '2024-03-22T09:10:00Z',
|
||
updatedAt: '2024-03-22T09:10:00Z'
|
||
},
|
||
{
|
||
id: '10',
|
||
code: 'EP010',
|
||
name: '业务特殊条款检查',
|
||
ruleType: 'business',
|
||
ruleGroupId: '3',
|
||
groupName: '采购合同专项检查',
|
||
priority: 'medium',
|
||
description: '检查合同是否包含烟草行业特殊条款',
|
||
checkMethod: 'mixed',
|
||
prompt: '识别文档中的烟草行业特殊要求条款',
|
||
isActive: true,
|
||
createdAt: '2024-03-23T10:15:00Z',
|
||
updatedAt: '2024-03-23T10:15:00Z'
|
||
}
|
||
];
|
||
|
||
export async function loader({ request }: LoaderFunctionArgs) {
|
||
const url = new URL(request.url);
|
||
|
||
// 从 URL 参数中提取查询条件
|
||
const params = {
|
||
ruleType: url.searchParams.get("ruleType") || undefined,
|
||
groupId: url.searchParams.get("groupId") || undefined,
|
||
isActive: url.searchParams.get("isActive") ? url.searchParams.get("isActive") === "true" : undefined,
|
||
keyword: url.searchParams.get("keyword") || undefined,
|
||
page: parseInt(url.searchParams.get("page") || "1", 10),
|
||
pageSize: parseInt(url.searchParams.get("pageSize") || "10", 10)
|
||
};
|
||
|
||
try {
|
||
// 使用模拟数据而不是API调用
|
||
// const response = await getRulesList(params);
|
||
|
||
// 过滤模拟数据
|
||
let filteredRules = [...mockRules];
|
||
|
||
if (params.ruleType) {
|
||
filteredRules = filteredRules.filter(rule => rule.ruleType === params.ruleType);
|
||
}
|
||
|
||
if (params.groupId) {
|
||
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === params.groupId);
|
||
}
|
||
|
||
if (params.isActive !== undefined) {
|
||
filteredRules = filteredRules.filter(rule => rule.isActive === params.isActive);
|
||
}
|
||
|
||
if (params.keyword) {
|
||
const keyword = params.keyword.toLowerCase();
|
||
filteredRules = filteredRules.filter(
|
||
rule => rule.name.toLowerCase().includes(keyword) ||
|
||
rule.code.toLowerCase().includes(keyword)
|
||
);
|
||
}
|
||
|
||
// 计算总记录数
|
||
const totalCount = filteredRules.length;
|
||
const totalPages = Math.ceil(totalCount / params.pageSize);
|
||
|
||
// 验证页码范围
|
||
if (params.page < 1 || (totalCount > 0 && params.page > totalPages)) {
|
||
const newUrl = new URL(request.url);
|
||
newUrl.searchParams.set('page', '1');
|
||
return redirect(newUrl.pathname + newUrl.search);
|
||
}
|
||
|
||
// 分页
|
||
const offset = (params.page - 1) * params.pageSize;
|
||
const paginatedRules = filteredRules.slice(offset, offset + params.pageSize);
|
||
|
||
return json({
|
||
rules: paginatedRules,
|
||
totalCount,
|
||
currentPage: params.page,
|
||
pageSize: params.pageSize,
|
||
totalPages
|
||
}, {
|
||
headers: {
|
||
"Cache-Control": "max-age=60, s-maxage=180"
|
||
}
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('加载评查点列表失败:', error);
|
||
throw new Response('加载评查点列表失败', { status: 500 });
|
||
}
|
||
}
|
||
|
||
export async function action({ request }: LoaderFunctionArgs) {
|
||
const formData = await request.formData();
|
||
const _action = formData.get('_action');
|
||
const ruleId = formData.get('ruleId');
|
||
|
||
if (!ruleId) {
|
||
return json({ success: false, error: "缺少评查点ID" }, { status: 400 });
|
||
}
|
||
|
||
try {
|
||
if (_action === 'delete') {
|
||
// 实际项目中应调用API删除评查点
|
||
console.log(`删除评查点 ${ruleId}`);
|
||
|
||
// 模拟API调用
|
||
// const response = await fetch(`/api/rules/${ruleId}`, {
|
||
// method: 'DELETE',
|
||
// });
|
||
|
||
// if (!response.ok) {
|
||
// throw new Error(`删除失败: ${response.status}`);
|
||
// }
|
||
|
||
return json({ success: true });
|
||
}
|
||
|
||
if (_action === 'duplicate') {
|
||
// 实际项目中应调用API复制评查点
|
||
console.log(`复制评查点 ${ruleId}`);
|
||
|
||
// 模拟API调用
|
||
// const response = await fetch(`/api/rules/${ruleId}/duplicate`, {
|
||
// method: 'POST',
|
||
// });
|
||
|
||
// if (!response.ok) {
|
||
// throw new Error(`复制失败: ${response.status}`);
|
||
// }
|
||
|
||
return json({ success: true });
|
||
}
|
||
|
||
return json({ success: false, error: "未知操作" }, { status: 400 });
|
||
} catch (error) {
|
||
console.error('操作评查点失败:', error);
|
||
return json({ success: false, error: "操作失败" }, { status: 500 });
|
||
}
|
||
}
|
||
|
||
export function ErrorBoundary() {
|
||
return (
|
||
<div className="error-container p-6">
|
||
<h1 className="text-xl font-bold text-red-500 mb-4">出错了</h1>
|
||
<p className="mb-4">加载评查点列表时发生错误。请稍后再试，或联系管理员。</p>
|
||
<Button type="primary" to="/">返回首页</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 规则类型和优先级的描述标签映射
|
||
const typeLabels = {
|
||
'essential': '基本要素类',
|
||
'content': '内容合规类',
|
||
'legal': '法律风险类',
|
||
'format': '格式规范类',
|
||
'business': '业务专项类'
|
||
};
|
||
|
||
const priorityLabels = {
|
||
'high': '高',
|
||
'medium': '中',
|
||
'low': '低'
|
||
};
|
||
|
||
export default function RulesIndex() {
|
||
const { rules, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const submit = useSubmit();
|
||
|
||
// 状态管理
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||
const [ruleToDelete, setRuleToDelete] = useState<Rule | null>(null);
|
||
|
||
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
|
||
const { name, value } = e.target;
|
||
const newParams = new URLSearchParams(searchParams);
|
||
|
||
if (value) {
|
||
newParams.set(name, value);
|
||
} else {
|
||
newParams.delete(name);
|
||
}
|
||
|
||
// 切换筛选条件时，重置到第一页
|
||
newParams.set('page', '1');
|
||
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
const handleSearch = (keyword: string) => {
|
||
const newParams = new URLSearchParams(searchParams);
|
||
if (keyword) {
|
||
newParams.set('keyword', keyword);
|
||
} else {
|
||
newParams.delete('keyword');
|
||
}
|
||
|
||
// 搜索时，重置到第一页
|
||
newParams.set('page', '1');
|
||
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
const handleDeleteClick = (rule: Rule) => {
|
||
setRuleToDelete(rule);
|
||
setShowDeleteConfirm(true);
|
||
};
|
||
|
||
const confirmDelete = () => {
|
||
if (!ruleToDelete) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('_action', 'delete');
|
||
formData.append('ruleId', ruleToDelete.id);
|
||
|
||
submit(formData, { method: 'post' });
|
||
setShowDeleteConfirm(false);
|
||
setRuleToDelete(null);
|
||
};
|
||
|
||
const handleCopy = (rule: Rule) => {
|
||
const formData = new FormData();
|
||
formData.append('_action', 'duplicate');
|
||
formData.append('ruleId', rule.id);
|
||
|
||
submit(formData, { method: 'post' });
|
||
};
|
||
|
||
const handlePageChange = (page: number) => {
|
||
const newParams = new URLSearchParams(searchParams);
|
||
newParams.set('page', page.toString());
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
const handlePageSizeChange = (size: number) => {
|
||
const newParams = new URLSearchParams(searchParams);
|
||
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" className="btn-add-rule">
|
||
新增评查点
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 筛选区域 */}
|
||
<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-60 "
|
||
/>
|
||
|
||
<FilterSelect
|
||
label="所属规则组"
|
||
name="groupId"
|
||
value={searchParams.get('groupId') || ''}
|
||
options={[
|
||
{ value: "1", label: "合同基本要素类检查" },
|
||
{ value: "2", label: "销售合同专项检查" },
|
||
{ value: "3", label: "采购合同专项检查" },
|
||
{ value: "4", label: "专卖许可证审核规则" },
|
||
{ value: "5", label: "行政处罚规范性检查" }
|
||
]}
|
||
onChange={handleFilterChange}
|
||
className="mr-3 w-60"
|
||
/>
|
||
|
||
<FilterSelect
|
||
label="状态"
|
||
name="isActive"
|
||
value={searchParams.get('isActive') || ''}
|
||
options={[
|
||
{ value: "true", label: "启用" },
|
||
{ value: "false", label: "禁用" }
|
||
]}
|
||
onChange={handleFilterChange}
|
||
className="mr-3 w-60"
|
||
/>
|
||
|
||
<SearchFilter
|
||
label="搜索"
|
||
placeholder="输入评查点名称或编码"
|
||
value={searchParams.get('keyword') || ''}
|
||
onSearch={handleSearch}
|
||
className="flex-1"
|
||
/>
|
||
</FilterPanel>
|
||
|
||
|
||
{/* 评查点列表 - 使用Table组件 */}
|
||
<Card className="ant-card">
|
||
<Table
|
||
columns={columns}
|
||
dataSource={rules}
|
||
rowKey="id"
|
||
emptyText="暂无评查点数据"
|
||
className="rules-table"
|
||
/>
|
||
|
||
{/* 分页 */}
|
||
{totalCount > 0 && (
|
||
<Pagination
|
||
currentPage={currentPage}
|
||
total={totalCount}
|
||
pageSize={pageSize}
|
||
onChange={handlePageChange}
|
||
onPageSizeChange={handlePageSizeChange}
|
||
showTotal={true}
|
||
showPageSizeChanger={true}
|
||
pageSizeOptions={[10, 20, 30, 50]}
|
||
/>
|
||
)}
|
||
</Card>
|
||
|
||
{/* 删除确认对话框 */}
|
||
{showDeleteConfirm && ruleToDelete && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 max-w-md w-full">
|
||
<h3 className="text-lg font-medium mb-4">确认删除</h3>
|
||
<p className="mb-6">确定要删除评查点“{ruleToDelete.name}”吗？</p>
|
||
<div className="flex justify-end space-x-2">
|
||
<Button type="default" onClick={() => setShowDeleteConfirm(false)}>取消</Button>
|
||
<Button type="danger" onClick={confirmDelete}>删除</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|