384 lines
13 KiB
TypeScript
384 lines
13 KiB
TypeScript
import React from 'react';
|
||
import { Link } from "@remix-run/react";
|
||
import { json, type MetaFunction } from "@remix-run/node";
|
||
import { useLoaderData, useNavigate } from "@remix-run/react";
|
||
import { Button } from "~/components/ui/Button";
|
||
|
||
// import stylesUrl from "~/styles/pages/rule-groups.css";
|
||
// 引入CSS
|
||
// export function links() {
|
||
// return [
|
||
// { rel: "stylesheet", href: stylesUrl }
|
||
// ];
|
||
// }
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点分组列表" },
|
||
{ name: "description", content: "评查点分组管理" }
|
||
];
|
||
};
|
||
|
||
|
||
// 分组接口定义
|
||
interface RuleGroup {
|
||
id: string;
|
||
name: string;
|
||
code: string;
|
||
ruleCount: number;
|
||
childGroupCount: number;
|
||
isActive: boolean;
|
||
parentId: string | null;
|
||
createdAt: string;
|
||
level: 1 | 2; // 1-一级分组，2-二级分组
|
||
}
|
||
|
||
interface LoaderData {
|
||
groups: RuleGroup[];
|
||
}
|
||
|
||
export async function loader() {
|
||
// 模拟数据，实际项目中应该从API获取
|
||
const groups: RuleGroup[] = [
|
||
{
|
||
id: "1",
|
||
name: "合同基本要素检查",
|
||
code: "contract-base",
|
||
ruleCount: 18,
|
||
childGroupCount: 2,
|
||
isActive: true,
|
||
parentId: null,
|
||
createdAt: "2023-10-01 14:30",
|
||
level: 1
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "必备要素检查",
|
||
code: "essential-elements",
|
||
ruleCount: 7,
|
||
childGroupCount: 0,
|
||
isActive: true,
|
||
parentId: "1",
|
||
createdAt: "2023-10-02 10:15",
|
||
level: 2
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "合同主体检查",
|
||
code: "contract-parties",
|
||
ruleCount: 5,
|
||
childGroupCount: 0,
|
||
isActive: true,
|
||
parentId: "1",
|
||
createdAt: "2023-10-02 11:40",
|
||
level: 2
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "销售合同专项检查",
|
||
code: "sales-contract",
|
||
ruleCount: 10,
|
||
childGroupCount: 2,
|
||
isActive: true,
|
||
parentId: null,
|
||
createdAt: "2023-10-03 09:20",
|
||
level: 1
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "交付条款检查",
|
||
code: "delivery-terms",
|
||
ruleCount: 4,
|
||
childGroupCount: 0,
|
||
isActive: true,
|
||
parentId: "4",
|
||
createdAt: "2023-10-03 14:30",
|
||
level: 2
|
||
},
|
||
{
|
||
id: "6",
|
||
name: "付款条款检查",
|
||
code: "payment-terms",
|
||
ruleCount: 6,
|
||
childGroupCount: 0,
|
||
isActive: true,
|
||
parentId: "4",
|
||
createdAt: "2023-10-03 15:45",
|
||
level: 2
|
||
},
|
||
{
|
||
id: "7",
|
||
name: "采购合同专项检查",
|
||
code: "purchase-contract",
|
||
ruleCount: 8,
|
||
childGroupCount: 0,
|
||
isActive: true,
|
||
parentId: null,
|
||
createdAt: "2023-10-04 10:15",
|
||
level: 1
|
||
},
|
||
{
|
||
id: "8",
|
||
name: "行政处罚规范性检查",
|
||
code: "admin-punishment",
|
||
ruleCount: 12,
|
||
childGroupCount: 0,
|
||
isActive: false,
|
||
parentId: null,
|
||
createdAt: "2023-10-05 16:30",
|
||
level: 1
|
||
}
|
||
];
|
||
|
||
return json<LoaderData>({ groups });
|
||
}
|
||
|
||
export default function RuleGroupsPage() {
|
||
const { groups } = useLoaderData<typeof loader>();
|
||
const navigate = useNavigate();
|
||
|
||
// 过滤出父级分组和子级分组
|
||
const parentGroups = groups.filter(group => group.parentId === null);
|
||
|
||
// 根据父级ID获取子分组
|
||
const getChildGroups = (parentId: string) => {
|
||
return groups.filter(group => group.parentId === parentId);
|
||
};
|
||
|
||
// 模拟删除操作
|
||
const handleDelete = (id: string) => {
|
||
if (window.confirm("确定要删除该分组吗？删除后无法恢复，且会删除该分组下的所有评查点。")) {
|
||
alert(`删除分组: ${id}`);
|
||
}
|
||
};
|
||
|
||
// 创建新分组
|
||
const handleCreate = () => {
|
||
navigate("/rule-groups/new");
|
||
};
|
||
|
||
// 展开/收起状态（实际项目中可以使用useState管理）
|
||
const toggleExpand = (groupId: string) => {
|
||
const childRows = document.querySelectorAll(`.child-of-${groupId}`);
|
||
childRows.forEach(row => {
|
||
(row as HTMLElement).style.display =
|
||
(row as HTMLElement).style.display === "none" ? "table-row" : "none";
|
||
});
|
||
|
||
// 切换图标
|
||
const icon = document.querySelector(`span.expand-icon[data-group-id="${groupId}"] i`);
|
||
if (icon) {
|
||
icon.classList.toggle("ri-arrow-down-s-line");
|
||
icon.classList.toggle("ri-arrow-right-s-line");
|
||
}
|
||
};
|
||
|
||
// 键盘处理器
|
||
const handleKeyDown = (e: React.KeyboardEvent, groupId: string) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
toggleExpand(groupId);
|
||
}
|
||
};
|
||
|
||
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">当前页面: 评查点分组列表 (rule-groups._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>
|
||
<div className="flex">
|
||
<Button type="default" className="mr-2" icon="ri-arrow-down-s-line"
|
||
onClick={() => document.querySelectorAll(".child-row").forEach(row => (row as HTMLElement).style.display = "table-row")}>
|
||
展开全部
|
||
</Button>
|
||
<Button type="default" className="mr-2" icon="ri-arrow-up-s-line"
|
||
onClick={() => document.querySelectorAll(".child-row").forEach(row => (row as HTMLElement).style.display = "none")}>
|
||
收起全部
|
||
</Button>
|
||
<Button type="primary" icon="ri-add-line" onClick={handleCreate}>
|
||
新增分组
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜索栏 */}
|
||
<div className="card mb-4">
|
||
<div className="card-body">
|
||
<div className="flex flex-wrap items-end gap-4">
|
||
<div className="flex-1 min-w-[200px]">
|
||
<label htmlFor="groupName" className="form-label">分组名称</label>
|
||
<input type="text" id="groupName" className="form-input" placeholder="请输入分组名称" />
|
||
</div>
|
||
<div className="flex-1 min-w-[200px]">
|
||
<label htmlFor="groupCode" className="form-label">分组编码</label>
|
||
<input type="text" id="groupCode" className="form-input" placeholder="请输入分组编码" />
|
||
</div>
|
||
<div className="flex-1 min-w-[200px]">
|
||
<label htmlFor="groupStatus" className="form-label">状态</label>
|
||
<select id="groupStatus" className="form-select">
|
||
<option value="">全部</option>
|
||
<option value="true">启用</option>
|
||
<option value="false">禁用</option>
|
||
</select>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<Button type="default" className="mr-2" icon="ri-refresh-line">
|
||
重置
|
||
</Button>
|
||
<Button type="primary" icon="ri-search-line">
|
||
搜索
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 数据表格 */}
|
||
<div className="card">
|
||
<div className="card-body">
|
||
<div className="overflow-x-auto">
|
||
<table className="table tree-table">
|
||
<thead>
|
||
<tr>
|
||
<th style={{ width: "400px" }}>分组名称</th>
|
||
<th>分组编码</th>
|
||
<th>评查点数量</th>
|
||
<th>状态</th>
|
||
<th>创建时间</th>
|
||
<th style={{ width: "180px" }}>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{parentGroups.map(parent => (
|
||
<React.Fragment key={parent.id}>
|
||
{/* 一级分组 */}
|
||
<tr className="group-row parent-row" data-group-id={parent.id}>
|
||
<td>
|
||
<div className="flex items-center">
|
||
<span
|
||
className="expand-icon"
|
||
data-group-id={parent.id}
|
||
onClick={() => toggleExpand(parent.id)}
|
||
onKeyDown={(e) => handleKeyDown(e, parent.id)}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label="展开/收起"
|
||
>
|
||
<i className="ri-arrow-down-s-line text-primary"></i>
|
||
</span>
|
||
<Link
|
||
to={`/rules?groupId=${parent.id}`}
|
||
className="text-primary hover:underline flex items-center ml-1"
|
||
>
|
||
<i className="ri-folder-line mr-1"></i> {parent.name}
|
||
</Link>
|
||
<span className="group-badge parent-badge">一级分组</span>
|
||
</div>
|
||
</td>
|
||
<td>{parent.code}</td>
|
||
<td>
|
||
<Link to={`/rules?groupId=${parent.id}`} className="badge bg-primary text-white">
|
||
{parent.ruleCount}
|
||
</Link>
|
||
{parent.childGroupCount > 0 && (
|
||
<span className="text-secondary text-sm ml-1">
|
||
| 子分组: {parent.childGroupCount}
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td>
|
||
<span className={`status-dot ${parent.isActive ? 'status-success' : 'status-error'}`}></span>
|
||
{parent.isActive ? '启用' : '禁用'}
|
||
</td>
|
||
<td>{parent.createdAt}</td>
|
||
<td className="py-3 px-2 text-center">
|
||
<Button
|
||
type="default"
|
||
size="small"
|
||
className="text-primary mr-2"
|
||
icon="ri-edit-line"
|
||
onClick={() => navigate(`/rule-groups/${parent.id}/edit`)}
|
||
>
|
||
编辑
|
||
</Button>
|
||
<Button
|
||
type="danger"
|
||
size="small"
|
||
icon="ri-delete-bin-line"
|
||
onClick={() => handleDelete(parent.id)}
|
||
>
|
||
删除
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
|
||
{/* 二级分组 */}
|
||
{getChildGroups(parent.id).map(child => (
|
||
<tr
|
||
key={child.id}
|
||
className={`group-row child-row child-of-${parent.id}`}
|
||
data-parent-id={parent.id}
|
||
data-group-id={child.id}
|
||
>
|
||
<td>
|
||
<div className="flex items-center ml-8">
|
||
<Link
|
||
to={`/rules?groupId=${child.id}`}
|
||
className="text-primary hover:underline flex items-center"
|
||
>
|
||
<i className="ri-file-list-line mr-1"></i> {child.name}
|
||
</Link>
|
||
<span className="group-badge child-badge">二级分组</span>
|
||
</div>
|
||
</td>
|
||
<td>{child.code}</td>
|
||
<td>
|
||
<Link to={`/rules?groupId=${child.id}`} className="badge bg-primary text-white">
|
||
{child.ruleCount}
|
||
</Link>
|
||
</td>
|
||
<td>
|
||
<span className={`status-dot ${child.isActive ? 'status-success' : 'status-error'}`}></span>
|
||
{child.isActive ? '启用' : '禁用'}
|
||
</td>
|
||
<td>{child.createdAt}</td>
|
||
<td className="py-3 px-2 text-center">
|
||
<Button
|
||
type="default"
|
||
size="small"
|
||
className="text-primary mr-2"
|
||
icon="ri-edit-line"
|
||
onClick={() => navigate(`/rule-groups/${child.id}/edit`)}
|
||
>
|
||
编辑
|
||
</Button>
|
||
<Button
|
||
type="danger"
|
||
size="small"
|
||
icon="ri-delete-bin-line"
|
||
onClick={() => handleDelete(child.id)}
|
||
>
|
||
删除
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</React.Fragment>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |