336 lines
11 KiB
TypeScript
336 lines
11 KiB
TypeScript
import { json, type MetaFunction } from "@remix-run/node";
|
||
import { useLoaderData, Link, useNavigate } 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";
|
||
|
||
// 定义数据类型
|
||
interface RuleGroup {
|
||
id: string;
|
||
name: string;
|
||
code: string;
|
||
ruleCount: number;
|
||
subGroupCount: number;
|
||
status: 'active' | 'inactive';
|
||
createdAt: string;
|
||
children?: RuleGroup[];
|
||
}
|
||
|
||
export const handle = {
|
||
breadcrumb: "评查点分组"
|
||
};
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "评查点分组 - 中国烟草AI合同及卷宗审核系统" },
|
||
{ name: "description", content: "管理评查点分组，包括创建、编辑和删除分组" },
|
||
];
|
||
};
|
||
|
||
export function links() {
|
||
return [{ rel: "stylesheet", href: indexStyles }];
|
||
}
|
||
|
||
// 模拟数据
|
||
const MOCK_GROUPS: RuleGroup[] = [
|
||
{
|
||
id: "1",
|
||
name: "合同基本要素检查",
|
||
code: "contract-base",
|
||
ruleCount: 18,
|
||
subGroupCount: 12,
|
||
status: "active",
|
||
createdAt: "2023-10-01 14:30",
|
||
children: [
|
||
{
|
||
id: "2",
|
||
name: "必备要素检查",
|
||
code: "essential-elements",
|
||
ruleCount: 7,
|
||
subGroupCount: 0,
|
||
status: "active",
|
||
createdAt: "2023-10-02 10:15",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "合同主体检查",
|
||
code: "contract-parties",
|
||
ruleCount: 5,
|
||
subGroupCount: 0,
|
||
status: "active",
|
||
createdAt: "2023-10-03 16:20",
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "销售合同专项检查",
|
||
code: "contract-sales",
|
||
ruleCount: 12,
|
||
subGroupCount: 5,
|
||
status: "active",
|
||
createdAt: "2023-10-05 09:30",
|
||
children: [
|
||
{
|
||
id: "6",
|
||
name: "付款条件检查",
|
||
code: "payment-terms",
|
||
ruleCount: 5,
|
||
subGroupCount: 0,
|
||
status: "active",
|
||
createdAt: "2023-10-05 14:45",
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "行政处罚规范性检查",
|
||
code: "punishment",
|
||
ruleCount: 8,
|
||
subGroupCount: 0,
|
||
status: "inactive",
|
||
createdAt: "2023-10-08 11:45",
|
||
}
|
||
];
|
||
|
||
export async function loader() {
|
||
return json({ groups: MOCK_GROUPS });
|
||
}
|
||
|
||
export default function RuleGroupsIndex() {
|
||
const { groups } = useLoaderData<typeof loader>();
|
||
const navigate = useNavigate();
|
||
const [searchText, setSearchText] = useState("");
|
||
const [groupCode, setGroupCode] = useState("");
|
||
const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
|
||
|
||
// 处理展开/收起
|
||
const toggleGroup = (groupId: string) => {
|
||
setExpandedGroups(prev =>
|
||
prev.includes(groupId)
|
||
? prev.filter(id => id !== groupId)
|
||
: [...prev, groupId]
|
||
);
|
||
};
|
||
|
||
// 展开/收起全部
|
||
const toggleAll = (expand: boolean) => {
|
||
setExpandedGroups(expand ? groups.map(g => g.id) : []);
|
||
};
|
||
|
||
// 处理删除分组
|
||
const handleDeleteGroup = (groupId: string) => {
|
||
if (confirm("确定要删除该分组吗？此操作将同时删除该分组下的所有评查点，且不可恢复。")) {
|
||
console.log('删除分组ID:', groupId);
|
||
// 实际应用中，这里会调用API删除数据
|
||
}
|
||
};
|
||
|
||
// 处理搜索名称
|
||
const handleNameSearch = (value: string) => {
|
||
setSearchText(value);
|
||
// 实际项目中这里可能需要调用API或过滤本地数据
|
||
};
|
||
|
||
// 处理搜索编码
|
||
const handleCodeSearch = (value: string) => {
|
||
setGroupCode(value);
|
||
// 实际项目中这里可能需要调用API或过滤本地数据
|
||
};
|
||
|
||
// 处理表格数据，包括父子级关系
|
||
const processedData = groups.flatMap(group => {
|
||
// 先添加父级分组
|
||
const result: (RuleGroup & { isParent?: boolean, parentId?: string })[] = [
|
||
{ ...group, isParent: true }
|
||
];
|
||
|
||
// 如果有子级分组并且当前已展开，则添加子级分组
|
||
if (group.children && expandedGroups.includes(group.id)) {
|
||
group.children.forEach(child => {
|
||
result.push({ ...child, parentId: group.id });
|
||
});
|
||
}
|
||
|
||
return result;
|
||
});
|
||
|
||
return (
|
||
<div className="content-container rule-groups-page">
|
||
{/* 页面头部 */}
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h2 className="text-xl font-medium">评查点分组管理</h2>
|
||
<div className="flex">
|
||
<Button
|
||
type="default"
|
||
icon="ri-arrow-down-s-line"
|
||
onClick={() => toggleAll(true)}
|
||
className="mr-2"
|
||
>
|
||
展开全部
|
||
</Button>
|
||
<Button
|
||
type="default"
|
||
icon="ri-arrow-up-s-line"
|
||
onClick={() => toggleAll(false)}
|
||
className="mr-2"
|
||
>
|
||
收起全部
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
icon="ri-add-line"
|
||
onClick={() => navigate("/rule-groups/new")}
|
||
>
|
||
新增分组
|
||
</Button>
|
||
</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">
|
||
重置
|
||
</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>
|
||
|
||
{/* 分页 */}
|
||
<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>
|
||
</Card>
|
||
</div>
|
||
);
|
||
} |