重新构建路由和配置样式文件
This commit is contained in:
@@ -0,0 +1,384 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user