437 lines
24 KiB
HTML
437 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>中国烟草AI合同及卷宗审核系统 - 评查点分组列表</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/2.5.0/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
|
<!-- <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
|
|
<!-- 引入外部CSS文件 -->
|
|
<link href="main.css" rel="stylesheet">
|
|
<style>
|
|
/* 树形结构样式 */
|
|
.tree-table .group-row {
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tree-table .group-row:hover {
|
|
background-color: rgba(0, 104, 74, 0.05);
|
|
}
|
|
|
|
.tree-table .parent-row {
|
|
background-color: #f9f9f9;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tree-table .child-row {
|
|
border-left: 3px solid #f0f0f0;
|
|
}
|
|
|
|
.expand-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 4px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.expand-icon:hover {
|
|
background-color: rgba(0, 104, 74, 0.1);
|
|
}
|
|
|
|
.group-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.parent-badge {
|
|
background-color: rgba(0, 104, 74, 0.1);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.child-badge {
|
|
background-color: rgba(0, 104, 74, 0.05);
|
|
color: var(--primary-color);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout-container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<div class="py-6 px-4 border-b border-gray-100">
|
|
<div class="flex items-center">
|
|
<i class="ri-file-search-line text-primary text-xl mr-2"></i>
|
|
<h2 class="text-lg font-medium">AI审核系统</h2>
|
|
</div>
|
|
</div>
|
|
<div class="py-4">
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-dashboard-line mr-3"></i>
|
|
<span>首页</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-file-upload-line mr-3"></i>
|
|
<span>文件上传</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item active">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-list-check-2 mr-3"></i>
|
|
<span>评查规则库</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-history-line mr-3"></i>
|
|
<span>审核历史</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-settings-3-line mr-3"></i>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 面包屑导航 -->
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">评查规则库</span>
|
|
<span class="breadcrumb-item">评查点分组管理</span>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-medium">评查点分组管理</h2>
|
|
<div class="flex">
|
|
<button class="ant-btn ant-btn-default mr-2" id="expand-all-btn">
|
|
<i class="ri-arrow-down-s-line"></i> 展开全部
|
|
</button>
|
|
<button class="ant-btn ant-btn-default mr-2" id="collapse-all-btn">
|
|
<i class="ri-arrow-up-s-line"></i> 收起全部
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary" onclick="window.location.href='评查点分组新增修改页面.html'">
|
|
<i class="ri-add-line"></i> 新增分组
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索栏 -->
|
|
<div class="ant-card mb-4">
|
|
<div class="ant-card-body">
|
|
<div class="flex flex-wrap items-end gap-4">
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="form-label">分组名称</label>
|
|
<input type="text" class="form-input" placeholder="请输入分组名称">
|
|
</div>
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="form-label">分组编码</label>
|
|
<input type="text" class="form-input" placeholder="请输入分组编码">
|
|
</div>
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="form-label">状态</label>
|
|
<select class="form-select">
|
|
<option value="">全部</option>
|
|
<option value="true">启用</option>
|
|
<option value="false">禁用</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button class="ant-btn ant-btn-default mr-2">
|
|
<i class="ri-refresh-line"></i> 重置
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary">
|
|
<i class="ri-search-line"></i> 搜索
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-body">
|
|
<div class="overflow-x-auto">
|
|
<table class="ant-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>
|
|
<!-- 一级分组：合同基本要素检查 -->
|
|
<tr class="group-row parent-row" data-group-id="1">
|
|
<td>
|
|
<div class="flex items-center">
|
|
<span class="expand-icon" data-group-id="1">
|
|
<i class="ri-arrow-down-s-line text-primary"></i>
|
|
</span>
|
|
<a href="评查点列表.html?groupId=1" class="text-primary hover:underline flex items-center ml-1">
|
|
<i class="ri-folder-line mr-1"></i> 合同基本要素检查
|
|
</a>
|
|
<span class="group-badge parent-badge">一级分组</span>
|
|
</div>
|
|
</td>
|
|
<td>contract-base</td>
|
|
<td>
|
|
<a href="评查点列表.html?groupId=1" class="badge bg-primary text-white">18</a>
|
|
<span class="text-secondary text-sm ml-1">| 子分组: 12</span>
|
|
</td>
|
|
<td><span class="status-dot status-success"></span> 启用</td>
|
|
<td>2023-10-01 14:30</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="window.location.href='评查点分组新增修改页面.html?id=1'">
|
|
<i class="ri-edit-line"></i> 编辑
|
|
</button>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-error delete-btn" data-id="1">
|
|
<i class="ri-delete-bin-line"></i> 删除
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 二级分组 -->
|
|
<tr class="group-row child-row child-of-1" data-parent-id="1" data-group-id="2">
|
|
<td>
|
|
<div class="flex items-center ml-8">
|
|
<a href="评查点列表.html?groupId=2" class="text-primary hover:underline flex items-center">
|
|
<i class="ri-file-list-line mr-1"></i> 必备要素检查
|
|
</a>
|
|
<span class="group-badge child-badge">二级分组</span>
|
|
</div>
|
|
</td>
|
|
<td>essential-elements</td>
|
|
<td><a href="评查点列表.html?groupId=2" class="badge bg-primary text-white">7</a></td>
|
|
<td><span class="status-dot status-success"></span> 启用</td>
|
|
<td>2023-10-02 10:15</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="window.location.href='评查点分组新增修改页面.html?id=2'">
|
|
<i class="ri-edit-line"></i> 编辑
|
|
</button>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-error delete-btn" data-id="2">
|
|
<i class="ri-delete-bin-line"></i> 删除
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 二级分组 -->
|
|
<tr class="group-row child-row child-of-1" data-parent-id="1" data-group-id="3">
|
|
<td>
|
|
<div class="flex items-center ml-8">
|
|
<a href="评查点列表.html?groupId=3" class="text-primary hover:underline flex items-center">
|
|
<i class="ri-file-list-line mr-1"></i> 合同主体检查
|
|
</a>
|
|
<span class="group-badge child-badge">二级分组</span>
|
|
</div>
|
|
</td>
|
|
<td>contract-parties</td>
|
|
<td><a href="评查点列表.html?groupId=3" class="badge bg-primary text-white">5</a></td>
|
|
<td><span class="status-dot status-success"></span> 启用</td>
|
|
<td>2023-10-03 16:20</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="window.location.href='评查点分组新增修改页面.html?id=3'">
|
|
<i class="ri-edit-line"></i> 编辑
|
|
</button>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-error delete-btn" data-id="3">
|
|
<i class="ri-delete-bin-line"></i> 删除
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 一级分组：销售合同专项检查 -->
|
|
<tr class="group-row parent-row" data-group-id="4">
|
|
<td>
|
|
<div class="flex items-center">
|
|
<span class="expand-icon" data-group-id="4">
|
|
<i class="ri-arrow-right-s-line text-primary"></i>
|
|
</span>
|
|
<a href="评查点列表.html?groupId=4" class="text-primary hover:underline flex items-center ml-1">
|
|
<i class="ri-folder-line mr-1"></i> 销售合同专项检查
|
|
</a>
|
|
<span class="group-badge parent-badge">一级分组</span>
|
|
</div>
|
|
</td>
|
|
<td>contract-sales</td>
|
|
<td>
|
|
<a href="评查点列表.html?groupId=4" class="badge bg-primary text-white">12</a>
|
|
<span class="text-secondary text-sm ml-1">| 子分组: 5</span>
|
|
</td>
|
|
<td><span class="status-dot status-success"></span> 启用</td>
|
|
<td>2023-10-05 09:30</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="window.location.href='评查点分组新增修改页面.html?id=4'">
|
|
<i class="ri-edit-line"></i> 编辑
|
|
</button>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-error delete-btn" data-id="4">
|
|
<i class="ri-delete-bin-line"></i> 删除
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 二级分组（默认隐藏） -->
|
|
<tr class="group-row child-row child-of-4 hidden" data-parent-id="4" data-group-id="6">
|
|
<td>
|
|
<div class="flex items-center ml-8">
|
|
<a href="评查点列表.html?groupId=6" class="text-primary hover:underline flex items-center">
|
|
<i class="ri-file-list-line mr-1"></i> 付款条件检查
|
|
</a>
|
|
<span class="group-badge child-badge">二级分组</span>
|
|
</div>
|
|
</td>
|
|
<td>payment-terms</td>
|
|
<td><a href="评查点列表.html?groupId=6" class="badge bg-primary text-white">5</a></td>
|
|
<td><span class="status-dot status-success"></span> 启用</td>
|
|
<td>2023-10-05 14:45</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="window.location.href='评查点分组新增修改页面.html?id=6'">
|
|
<i class="ri-edit-line"></i> 编辑
|
|
</button>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-error delete-btn" data-id="6">
|
|
<i class="ri-delete-bin-line"></i> 删除
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- 一级分组：行政处罚规范性检查 -->
|
|
<tr class="group-row parent-row" data-group-id="5">
|
|
<td>
|
|
<div class="flex items-center">
|
|
<span class="expand-icon" data-group-id="5">
|
|
<i class="ri-arrow-right-s-line text-primary"></i>
|
|
</span>
|
|
<a href="评查点列表.html?groupId=5" class="text-primary hover:underline flex items-center ml-1">
|
|
<i class="ri-folder-line mr-1"></i> 行政处罚规范性检查
|
|
</a>
|
|
<span class="group-badge parent-badge">一级分组</span>
|
|
</div>
|
|
</td>
|
|
<td>punishment</td>
|
|
<td>
|
|
<a href="评查点列表.html?groupId=5" class="badge bg-primary text-white">8</a>
|
|
<span class="text-secondary text-sm ml-1">| 子分组: 0</span>
|
|
</td>
|
|
<td><span class="status-dot status-error"></span> 禁用</td>
|
|
<td>2023-10-08 11:45</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="window.location.href='评查点分组新增修改页面.html?id=5'">
|
|
<i class="ri-edit-line"></i> 编辑
|
|
</button>
|
|
<button class="ant-btn ant-btn-text ant-btn-sm text-error delete-btn" data-id="5">
|
|
<i class="ri-delete-bin-line"></i> 删除
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="flex justify-between items-center mt-4">
|
|
<div class="text-sm text-secondary">
|
|
共 6 条记录，每页显示 10 条
|
|
</div>
|
|
<div class="ant-pagination">
|
|
<button class="ant-pagination-item ant-pagination-prev" disabled>
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</button>
|
|
<button class="ant-pagination-item ant-pagination-item-active">1</button>
|
|
<button class="ant-pagination-item ant-pagination-next" disabled>
|
|
<i class="ri-arrow-right-s-line"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 删除按钮确认对话框
|
|
document.querySelectorAll('.delete-btn').forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
const groupId = this.getAttribute('data-id');
|
|
if (!confirm('确定要删除该分组吗？此操作将同时删除该分组下的所有评查点，且不可恢复。')) {
|
|
e.preventDefault();
|
|
} else {
|
|
console.log('删除分组ID:', groupId);
|
|
// 实际应调用API删除数据
|
|
alert('删除成功！');
|
|
// 刷新页面
|
|
window.location.reload();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 展开/收起功能
|
|
document.querySelectorAll('.expand-icon').forEach(icon => {
|
|
icon.addEventListener('click', function() {
|
|
const groupId = this.getAttribute('data-group-id');
|
|
const childRows = document.querySelectorAll(`.child-of-${groupId}`);
|
|
const iconElement = this.querySelector('i');
|
|
|
|
if (iconElement.classList.contains('ri-arrow-right-s-line')) {
|
|
// 展开
|
|
childRows.forEach(row => row.classList.remove('hidden'));
|
|
iconElement.classList.remove('ri-arrow-right-s-line');
|
|
iconElement.classList.add('ri-arrow-down-s-line');
|
|
} else {
|
|
// 收起
|
|
childRows.forEach(row => row.classList.add('hidden'));
|
|
iconElement.classList.remove('ri-arrow-down-s-line');
|
|
iconElement.classList.add('ri-arrow-right-s-line');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 展开全部按钮
|
|
document.getElementById('expand-all-btn').addEventListener('click', function() {
|
|
document.querySelectorAll('.child-row').forEach(row => {
|
|
row.classList.remove('hidden');
|
|
});
|
|
|
|
document.querySelectorAll('.expand-icon i').forEach(icon => {
|
|
icon.classList.remove('ri-arrow-right-s-line');
|
|
icon.classList.add('ri-arrow-down-s-line');
|
|
});
|
|
});
|
|
|
|
// 收起全部按钮
|
|
document.getElementById('collapse-all-btn').addEventListener('click', function() {
|
|
document.querySelectorAll('.child-row').forEach(row => {
|
|
row.classList.add('hidden');
|
|
});
|
|
|
|
document.querySelectorAll('.expand-icon i').forEach(icon => {
|
|
icon.classList.remove('ri-arrow-down-s-line');
|
|
icon.classList.add('ri-arrow-right-s-line');
|
|
});
|
|
});
|
|
|
|
// 页面加载时默认展开全部
|
|
document.getElementById('expand-all-btn').click();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |