351 lines
13 KiB
TypeScript
351 lines
13 KiB
TypeScript
import React from 'react';
|
||
import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
|
||
import { useLoaderData, useSearchParams } from "@remix-run/react";
|
||
import { Button } from '~/components/ui/Button';
|
||
import { Card } from '~/components/ui/Card';
|
||
import { Tag, type TagColor } from '~/components/ui/Tag';
|
||
import type { Rule } from '~/models/rule';
|
||
import { RULE_TYPE_LABELS, RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
|
||
|
||
export const links = () => [
|
||
{ rel: "stylesheet", href: "/rules_index.css" }
|
||
];
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点列表" },
|
||
{ name: "description", content: "评查点管理列表" }
|
||
];
|
||
};
|
||
|
||
interface LoaderData {
|
||
rules: Rule[];
|
||
groups: {
|
||
id: string;
|
||
name: string;
|
||
}[];
|
||
totalCount: number;
|
||
}
|
||
|
||
export async function loader({ request }: LoaderFunctionArgs) {
|
||
const url = new URL(request.url);
|
||
const ruleType = url.searchParams.get("ruleType") || "";
|
||
const groupId = url.searchParams.get("groupId") || "";
|
||
const isActive = url.searchParams.get("isActive") || "";
|
||
const keyword = url.searchParams.get("keyword") || "";
|
||
|
||
// 模拟数据，实际项目中应从API获取
|
||
const rules: Rule[] = [
|
||
{
|
||
id: "1",
|
||
code: "CP001",
|
||
name: "合同主体信息完整性检查",
|
||
ruleGroupId: "1",
|
||
groupName: "合同基本要素检查",
|
||
ruleType: "essential",
|
||
priority: "high",
|
||
description: "检查合同中是否完整包含签约方的基本信息，包括名称、地址、法定代表人等",
|
||
checkMethod: "automatic",
|
||
prompt: "检查合同主体双方信息是否完整，包括企业名称、注册地址、法定代表人或授权代表、联系方式等",
|
||
isActive: true,
|
||
createdAt: "2023-06-15 10:30",
|
||
updatedAt: "2023-06-15 10:30"
|
||
},
|
||
{
|
||
id: "2",
|
||
code: "CP002",
|
||
name: "合同金额一致性校验",
|
||
ruleGroupId: "1",
|
||
groupName: "合同基本要素检查",
|
||
ruleType: "content",
|
||
priority: "high",
|
||
description: "检查合同大小写金额是否一致",
|
||
checkMethod: "automatic",
|
||
prompt: "检查合同中的金额大写和小写表示是否一致，如￥10,000.00(壹万元整)",
|
||
isActive: true,
|
||
createdAt: "2023-06-20 14:15",
|
||
updatedAt: "2023-06-20 14:15"
|
||
},
|
||
{
|
||
id: "3",
|
||
code: "CP003",
|
||
name: "保密条款合规性审核",
|
||
ruleGroupId: "1",
|
||
groupName: "合同基本要素检查",
|
||
ruleType: "legal",
|
||
priority: "medium",
|
||
description: "检查合同是否包含保密条款并符合行业要求",
|
||
checkMethod: "mixed",
|
||
prompt: "检查合同中的保密条款是否完整、清晰，包含保密范围、期限、违约责任等",
|
||
isActive: true,
|
||
createdAt: "2023-07-05 09:45",
|
||
updatedAt: "2023-07-05 09:45"
|
||
},
|
||
{
|
||
id: "4",
|
||
code: "CP004",
|
||
name: "合同签约日期格式检查",
|
||
ruleGroupId: "1",
|
||
groupName: "合同基本要素检查",
|
||
ruleType: "format",
|
||
priority: "low",
|
||
description: "检查合同签约日期格式是否规范",
|
||
checkMethod: "automatic",
|
||
prompt: "检查合同签约日期格式是否符合YYYY年MM月DD日的规范格式",
|
||
isActive: false,
|
||
createdAt: "2023-07-10 16:20",
|
||
updatedAt: "2023-07-10 16:20"
|
||
},
|
||
{
|
||
id: "5",
|
||
code: "CP005",
|
||
name: "违约责任条款完整性检查",
|
||
ruleGroupId: "2",
|
||
groupName: "销售合同专项检查",
|
||
ruleType: "legal",
|
||
priority: "high",
|
||
description: "检查合同违约责任条款是否明确、完整",
|
||
checkMethod: "mixed",
|
||
prompt: "检查合同中的违约责任条款是否包含违约情形、违约金计算方式、责任承担方式等内容",
|
||
isActive: true,
|
||
createdAt: "2023-07-15 11:30",
|
||
updatedAt: "2023-07-15 11:30"
|
||
}
|
||
];
|
||
|
||
const groups = [
|
||
{ id: "1", name: "合同基本要素检查" },
|
||
{ id: "2", name: "销售合同专项检查" },
|
||
{ id: "3", name: "采购合同专项检查" },
|
||
{ id: "4", name: "专卖许可证审核规则" },
|
||
{ id: "5", name: "行政处罚规范性检查" }
|
||
];
|
||
|
||
// 过滤数据
|
||
let filteredRules = [...rules];
|
||
|
||
if (ruleType) {
|
||
filteredRules = filteredRules.filter(rule => rule.ruleType === ruleType);
|
||
}
|
||
|
||
if (groupId) {
|
||
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === groupId);
|
||
}
|
||
|
||
if (isActive) {
|
||
const activeValue = isActive === 'true';
|
||
filteredRules = filteredRules.filter(rule => rule.isActive === activeValue);
|
||
}
|
||
|
||
if (keyword) {
|
||
const lowerKeyword = keyword.toLowerCase();
|
||
filteredRules = filteredRules.filter(rule =>
|
||
rule.name.toLowerCase().includes(lowerKeyword) ||
|
||
rule.code.toLowerCase().includes(lowerKeyword)
|
||
);
|
||
}
|
||
|
||
return json<LoaderData>({
|
||
rules: filteredRules,
|
||
groups,
|
||
totalCount: rules.length
|
||
});
|
||
}
|
||
|
||
export default function RulesList() {
|
||
const { rules, groups } = useLoaderData<typeof loader>();
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
|
||
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);
|
||
}
|
||
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
const handleSearch = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
const formData = new FormData(e.target as HTMLFormElement);
|
||
const keyword = formData.get('keyword') as string;
|
||
|
||
const newParams = new URLSearchParams(searchParams);
|
||
if (keyword) {
|
||
newParams.set('keyword', keyword);
|
||
} else {
|
||
newParams.delete('keyword');
|
||
}
|
||
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
const handleCopy = (rule: Rule) => {
|
||
// 实际项目中应调用API复制规则
|
||
alert(`复制规则: ${rule.name}`);
|
||
};
|
||
|
||
const handleDelete = (rule: Rule) => {
|
||
// 实际项目中应调用API删除规则
|
||
if (window.confirm(`确定要删除评查点"${rule.name}"吗？`)) {
|
||
alert(`删除规则: ${rule.name}`);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="p-6">
|
||
{/* 页面标识 */}
|
||
<div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded text-blue-800">
|
||
<h3 className="font-bold text-lg">当前页面: 评查点列表 (rules._index.tsx)</h3>
|
||
<p>如果你看到这个提示，说明你已成功到达评查点列表页面。</p>
|
||
<div className="mt-2">
|
||
<a href="/debug" className="text-blue-600 hover:underline">查看路由诊断页面</a> |
|
||
<a href="/" className="ml-2 text-blue-600 hover:underline">返回首页</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 页面头部 */}
|
||
<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>
|
||
</div>
|
||
|
||
{/* 筛选区域 */}
|
||
<Card className="mb-4" noDivider>
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4">
|
||
<div>
|
||
<label htmlFor="ruleType" className="block text-sm mb-1">评查点类型</label>
|
||
<select
|
||
id="ruleType"
|
||
className="form-select w-full rounded border-gray-300 shadow-sm"
|
||
name="ruleType"
|
||
value={searchParams.get('ruleType') || ''}
|
||
onChange={handleFilterChange}
|
||
>
|
||
<option value="">全部</option>
|
||
{Object.entries(RULE_TYPE_LABELS).map(([value, label]) => (
|
||
<option key={value} value={value}>{label}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="groupId" className="block text-sm mb-1">所属规则组</label>
|
||
<select
|
||
id="groupId"
|
||
className="form-select w-full rounded border-gray-300 shadow-sm"
|
||
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="block text-sm mb-1">状态</label>
|
||
<select
|
||
id="isActive"
|
||
className="form-select w-full rounded border-gray-300 shadow-sm"
|
||
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="block text-sm mb-1">搜索</label>
|
||
<form onSubmit={handleSearch} className="flex items-center">
|
||
<input
|
||
type="text"
|
||
id="keyword"
|
||
name="keyword"
|
||
className="form-input rounded-l flex-1 border-gray-300 shadow-sm"
|
||
placeholder="输入评查点名称或编码"
|
||
defaultValue={searchParams.get('keyword') || ''}
|
||
/>
|
||
<Button type="primary" icon="ri-search-line" className="rounded-l-none">
|
||
搜索
|
||
</Button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 评查点列表 */}
|
||
<Card noDivider>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-left border-collapse">
|
||
<thead className="bg-gray-50">
|
||
<tr className="text-xs text-gray-500 border-b">
|
||
<th className="py-3 px-4">评查点编码</th>
|
||
<th className="py-3 px-4">评查点名称</th>
|
||
<th className="py-3 px-4">评查点类型</th>
|
||
<th className="py-3 px-4">所属规则组</th>
|
||
<th className="py-3 px-4">优先级</th>
|
||
<th className="py-3 px-4">状态</th>
|
||
<th className="py-3 px-4">创建时间</th>
|
||
<th className="py-3 px-4">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{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} className="border-b hover:bg-gray-50">
|
||
<td className="py-3 px-4">{rule.code}</td>
|
||
<td className="py-3 px-4">{rule.name}</td>
|
||
<td className="py-3 px-4">
|
||
<Tag color={typeColor}>{RULE_TYPE_LABELS[rule.ruleType]}</Tag>
|
||
</td>
|
||
<td className="py-3 px-4">{rule.groupName}</td>
|
||
<td className="py-3 px-4">
|
||
<Tag color={priorityColor}>{RULE_PRIORITY_LABELS[rule.priority]}</Tag>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
{rule.isActive ? (
|
||
<span className="flex items-center">
|
||
<i className="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></i>
|
||
启用
|
||
</span>
|
||
) : (
|
||
<span className="flex items-center">
|
||
<i className="inline-block w-2 h-2 rounded-full bg-gray-400 mr-2"></i>
|
||
禁用
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="py-3 px-4">{rule.createdAt}</td>
|
||
<td className="py-3 px-4">
|
||
<Button type="default" size="small" icon="ri-edit-line" to={`/rules/${rule.id}`} className="mr-1">
|
||
编辑
|
||
</Button>
|
||
<Button type="default" size="small" icon="ri-file-copy-line" className="mr-1" onClick={() => handleCopy(rule)}>
|
||
复制
|
||
</Button>
|
||
<Button type="danger" size="small" icon="ri-delete-bin-line" onClick={() => handleDelete(rule)}>
|
||
删除
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|