593 lines
31 KiB
HTML
593 lines
31 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>
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.status-pending {
|
||
background-color: #E6F7FF;
|
||
color: #1890FF;
|
||
}
|
||
|
||
.status-processing {
|
||
background-color: #FFF7E6;
|
||
color: #FA8C16;
|
||
}
|
||
|
||
.status-pass {
|
||
background-color: #F6FFED;
|
||
color: #52C41A;
|
||
}
|
||
|
||
.status-warning {
|
||
background-color: #FFFBE6;
|
||
color: #FAAD14;
|
||
}
|
||
|
||
.status-fail {
|
||
background-color: #FFF1F0;
|
||
color: #F5222D;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.file-name {
|
||
max-width: 240px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.document-number {
|
||
font-family: monospace;
|
||
color: #666;
|
||
}
|
||
|
||
.filter-container {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.filter-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.filter-label {
|
||
margin-bottom: 4px;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.filter-container {
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
</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 active">
|
||
<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">
|
||
<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>
|
||
<button class="ant-btn ant-btn-primary" onclick="window.location.href='文档-新增.html'">
|
||
<i class="ri-upload-line mr-1"></i> 上传文档
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索筛选区 -->
|
||
<div class="ant-card mb-4">
|
||
<div class="ant-card-body">
|
||
<div class="filter-container flex-nowrap">
|
||
<div class="filter-item">
|
||
<span class="filter-label">文档名称</span>
|
||
<input type="text" class="form-input" placeholder="请输入文档名称" style="width: 120px;">
|
||
</div>
|
||
<div class="filter-item">
|
||
<span class="filter-label">文档编号</span>
|
||
<input type="text" class="form-input" placeholder="请输入文档编号" style="width: 120px;">
|
||
</div>
|
||
<div class="filter-item">
|
||
<span class="filter-label">文档类型</span>
|
||
<select class="form-select" style="width: 120px;">
|
||
<option value="">全部</option>
|
||
<option value="1">销售合同</option>
|
||
<option value="2">采购合同</option>
|
||
<option value="3">专卖许可证</option>
|
||
<option value="4">行政处罚决定书</option>
|
||
<option value="5">承包协议</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<span class="filter-label">审核状态</span>
|
||
<select class="form-select" style="width: 100px;">
|
||
<option value="">全部</option>
|
||
<option value="pending">待审核</option>
|
||
<option value="processing">审核中</option>
|
||
<option value="pass">通过</option>
|
||
<option value="warning">警告</option>
|
||
<option value="fail">不通过</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<span class="filter-label">上传时间</span>
|
||
<div class="flex items-center">
|
||
<input type="date" class="form-input" style="width: 120px;">
|
||
<span class="mx-1">至</span>
|
||
<input type="date" class="form-input" style="width: 120px;">
|
||
</div>
|
||
</div>
|
||
<div class="filter-item ml-auto">
|
||
<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="mb-3 flex items-center justify-between">
|
||
<div>
|
||
<button class="ant-btn ant-btn-default mr-2">
|
||
<i class="ri-delete-bin-line"></i> 批量删除
|
||
</button>
|
||
<button class="ant-btn ant-btn-default">
|
||
<i class="ri-download-line"></i> 导出列表
|
||
</button>
|
||
</div>
|
||
<div class="text-sm text-secondary">
|
||
共 <span class="font-medium text-primary">156</span> 条记录
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="ant-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 50px;">
|
||
<input type="checkbox" id="select-all">
|
||
</th>
|
||
<th>文档名称</th>
|
||
<th>文档编号</th>
|
||
<th>文件大小</th>
|
||
<th>审核状态</th>
|
||
<th>问题数量</th>
|
||
<th>上传时间</th>
|
||
<th style="width: 240px;">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<input type="checkbox" class="row-checkbox" data-id="1">
|
||
</td>
|
||
<td>
|
||
<div class="flex items-center">
|
||
<i class="ri-file-text-line text-primary file-icon"></i>
|
||
<div>
|
||
<span class="file-name" title="2023年度烟草销售框架合同.pdf">2023年度烟草销售框架合同.pdf</span>
|
||
<div class="mt-1">
|
||
<span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded">销售合同</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="document-number">XS20230001</span></td>
|
||
<td>2.5 MB</td>
|
||
<td>
|
||
<span class="status-badge status-pass">通过</span>
|
||
</td>
|
||
<td>0</td>
|
||
<td>2023-10-15 15:30</td>
|
||
<td>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary view-btn">
|
||
<i class="ri-eye-line"></i> 查看
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary edit-btn">
|
||
<i class="ri-edit-line"></i> 修改
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary">
|
||
<i class="ri-download-line"></i> 下载
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-error">
|
||
<i class="ri-delete-bin-line"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<input type="checkbox" class="row-checkbox" data-id="2">
|
||
</td>
|
||
<td>
|
||
<div class="flex items-center">
|
||
<i class="ri-file-word-line text-blue-500 file-icon"></i>
|
||
<div>
|
||
<span class="file-name" title="设备采购合同-打印机.docx">设备采购合同-打印机.docx</span>
|
||
<div class="mt-1">
|
||
<span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded">采购合同</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="document-number">CG20230052</span></td>
|
||
<td>1.2 MB</td>
|
||
<td>
|
||
<span class="status-badge status-warning">警告</span>
|
||
</td>
|
||
<td>3</td>
|
||
<td>2023-10-14 09:15</td>
|
||
<td>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary view-btn">
|
||
<i class="ri-eye-line"></i> 查看
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary edit-btn">
|
||
<i class="ri-edit-line"></i> 修改
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary">
|
||
<i class="ri-download-line"></i> 下载
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-error">
|
||
<i class="ri-delete-bin-line"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<input type="checkbox" class="row-checkbox" data-id="3">
|
||
</td>
|
||
<td>
|
||
<div class="flex items-center">
|
||
<i class="ri-file-pdf-line text-red-500 file-icon"></i>
|
||
<div>
|
||
<span class="file-name" title="烟草零售许可证.pdf">烟草零售许可证.pdf</span>
|
||
<div class="mt-1">
|
||
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-0.5 rounded">专卖许可证</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="document-number">ZM2023100345</span></td>
|
||
<td>0.8 MB</td>
|
||
<td>
|
||
<span class="status-badge status-pending">待审核</span>
|
||
</td>
|
||
<td>-</td>
|
||
<td>2023-10-13 14:20</td>
|
||
<td>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary">
|
||
<i class="ri-play-circle-line"></i> 开始审核
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary edit-btn">
|
||
<i class="ri-edit-line"></i> 修改
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary">
|
||
<i class="ri-download-line"></i> 下载
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-error">
|
||
<i class="ri-delete-bin-line"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<input type="checkbox" class="row-checkbox" data-id="4">
|
||
</td>
|
||
<td>
|
||
<div class="flex items-center">
|
||
<i class="ri-file-word-line text-blue-500 file-icon"></i>
|
||
<div>
|
||
<span class="file-name" title="非法售烟行政处罚决定书.docx">非法售烟行政处罚决定书.docx</span>
|
||
<div class="mt-1">
|
||
<span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded">行政处罚决定书</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="document-number">CF20230087</span></td>
|
||
<td>1.5 MB</td>
|
||
<td>
|
||
<span class="status-badge status-processing">审核中</span>
|
||
</td>
|
||
<td>-</td>
|
||
<td>2023-10-10 16:45</td>
|
||
<td>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary view-btn">
|
||
<i class="ri-eye-line"></i> 查看进度
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary edit-btn">
|
||
<i class="ri-edit-line"></i> 修改
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary">
|
||
<i class="ri-download-line"></i> 下载
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-error">
|
||
<i class="ri-delete-bin-line"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<input type="checkbox" class="row-checkbox" data-id="5">
|
||
</td>
|
||
<td>
|
||
<div class="flex items-center">
|
||
<i class="ri-file-pdf-line text-red-500 file-icon"></i>
|
||
<div>
|
||
<span class="file-name" title="烟草种植承包协议-2023.pdf">烟草种植承包协议-2023.pdf</span>
|
||
<div class="mt-1">
|
||
<span class="text-xs bg-orange-100 text-orange-600 px-2 py-0.5 rounded">承包协议</span>
|
||
<span class="ml-2 text-xs bg-gray-100 text-gray-500 px-1 rounded">测试</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="document-number">CB20230024</span></td>
|
||
<td>3.2 MB</td>
|
||
<td>
|
||
<span class="status-badge status-fail">不通过</span>
|
||
</td>
|
||
<td>8</td>
|
||
<td>2023-10-09 10:30</td>
|
||
<td>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary view-btn">
|
||
<i class="ri-eye-line"></i> 查看
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary edit-btn">
|
||
<i class="ri-edit-line"></i> 修改
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-secondary">
|
||
<i class="ri-download-line"></i> 下载
|
||
</button>
|
||
<button class="ant-btn ant-btn-text ant-btn-sm text-error">
|
||
<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">
|
||
共 156 条记录，每页显示
|
||
<select class="mx-1 border rounded px-1 py-0.5">
|
||
<option>10</option>
|
||
<option selected>20</option>
|
||
<option>50</option>
|
||
<option>100</option>
|
||
</select>
|
||
条
|
||
</div>
|
||
<div class="ant-pagination">
|
||
<button class="ant-pagination-item ant-pagination-prev">
|
||
<i class="ri-arrow-left-s-line"></i>
|
||
</button>
|
||
<button class="ant-pagination-item">1</button>
|
||
<button class="ant-pagination-item ant-pagination-item-active">2</button>
|
||
<button class="ant-pagination-item">3</button>
|
||
<button class="ant-pagination-item">4</button>
|
||
<button class="ant-pagination-item">5</button>
|
||
<span class="ant-pagination-ellipsis">...</span>
|
||
<button class="ant-pagination-item">16</button>
|
||
<button class="ant-pagination-item ant-pagination-next">
|
||
<i class="ri-arrow-right-s-line"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 全选/全不选
|
||
const selectAll = document.getElementById('select-all');
|
||
const checkboxes = document.querySelectorAll('.row-checkbox');
|
||
|
||
selectAll.addEventListener('change', function() {
|
||
checkboxes.forEach(checkbox => {
|
||
checkbox.checked = this.checked;
|
||
});
|
||
});
|
||
|
||
// 当所有复选框都被选中时，全选按钮也应被选中
|
||
checkboxes.forEach(checkbox => {
|
||
checkbox.addEventListener('change', function() {
|
||
const allChecked = Array.from(checkboxes).every(c => c.checked);
|
||
const someChecked = Array.from(checkboxes).some(c => c.checked);
|
||
|
||
selectAll.checked = allChecked;
|
||
selectAll.indeterminate = someChecked && !allChecked;
|
||
});
|
||
});
|
||
|
||
// 删除按钮
|
||
document.querySelectorAll('button:has(.ri-delete-bin-line)').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const tr = this.closest('tr');
|
||
const fileName = tr.querySelector('.file-name').textContent;
|
||
|
||
if(confirm(`确认删除文档 "${fileName}"？`)) {
|
||
// console.log('删除文档:', fileName);
|
||
// 实际应用中调用API删除文档
|
||
tr.remove();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 批量删除
|
||
document.querySelector('button:has(.ri-delete-bin-line):not(.ant-btn-text)').addEventListener('click', function() {
|
||
const selectedIds = Array.from(document.querySelectorAll('.row-checkbox:checked')).map(
|
||
checkbox => checkbox.getAttribute('data-id')
|
||
);
|
||
|
||
if(selectedIds.length === 0) {
|
||
alert('请至少选择一个文档');
|
||
return;
|
||
}
|
||
|
||
if(confirm(`确认删除选中的 ${selectedIds.length} 个文档？`)) {
|
||
// console.log('批量删除文档IDs:', selectedIds);
|
||
// 实际应用中调用API批量删除文档
|
||
selectedIds.forEach(id => {
|
||
document.querySelector(`.row-checkbox[data-id="${id}"]`).closest('tr').remove();
|
||
});
|
||
}
|
||
});
|
||
|
||
// 查看按钮和开始审核按钮
|
||
document.querySelectorAll('.view-btn, button:has(.ri-play-circle-line)').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const tr = this.closest('tr');
|
||
const fileName = tr.querySelector('.file-name').textContent;
|
||
const docId = tr.querySelector('.row-checkbox').getAttribute('data-id');
|
||
|
||
// console.log('查看/审核文档:', fileName, 'ID:', docId);
|
||
window.location.href = `评查详情页面.html?id=${docId}`;
|
||
});
|
||
});
|
||
|
||
// 修改按钮
|
||
document.querySelectorAll('.edit-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const tr = this.closest('tr');
|
||
const fileName = tr.querySelector('.file-name').textContent;
|
||
const docId = tr.querySelector('.row-checkbox').getAttribute('data-id');
|
||
|
||
// console.log('修改文档:', fileName, 'ID:', docId);
|
||
window.location.href = `文档-修改.html?id=${docId}`;
|
||
});
|
||
});
|
||
|
||
// 下载按钮
|
||
document.querySelectorAll('button:has(.ri-download-line)').forEach(btn => {
|
||
if(btn.classList.contains('ant-btn-text')) {
|
||
btn.addEventListener('click', function() {
|
||
const tr = this.closest('tr');
|
||
const fileName = tr.querySelector('.file-name').textContent;
|
||
|
||
// console.log('下载文档:', fileName);
|
||
// 实际应用中调用API下载文档
|
||
alert(`开始下载 ${fileName}`);
|
||
});
|
||
}
|
||
});
|
||
|
||
// 搜索和重置按钮
|
||
document.querySelector('.ant-btn-primary:has(.ri-search-line)').addEventListener('click', function() {
|
||
const filters = {
|
||
name: document.querySelector('input[placeholder="请输入文档名称"]').value,
|
||
type: document.querySelector('select:nth-of-type(1)').value,
|
||
status: document.querySelector('select:nth-of-type(2)').value,
|
||
documentNumber: document.querySelector('input[placeholder="请输入文档编号"]').value,
|
||
dateFrom: document.querySelector('input[type="date"]:nth-of-type(1)').value,
|
||
dateTo: document.querySelector('input[type="date"]:nth-of-type(2)').value
|
||
};
|
||
|
||
// console.log('搜索条件:', filters);
|
||
// 实际应用中调用API搜索文档
|
||
});
|
||
|
||
document.querySelector('.ant-btn-default:has(.ri-refresh-line)').addEventListener('click', function() {
|
||
document.querySelector('input[placeholder="请输入文档名称"]').value = '';
|
||
document.querySelector('select:nth-of-type(1)').value = '';
|
||
document.querySelector('select:nth-of-type(2)').value = '';
|
||
document.querySelector('input[placeholder="请输入文档编号"]').value = '';
|
||
document.querySelector('input[type="date"]:nth-of-type(1)').value = '';
|
||
document.querySelector('input[type="date"]:nth-of-type(2)').value = '';
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |