881 lines
35 KiB
HTML
881 lines
35 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>
|
|
:root {
|
|
--primary-color: #00684a;
|
|
--primary-hover: #005a40;
|
|
--primary-light: rgba(0, 104, 74, 0.1);
|
|
--success-color: #52c41a;
|
|
--warning-color: #faad14;
|
|
--error-color: #ff4d4f;
|
|
--text-color: rgba(0, 0, 0, 0.85);
|
|
--text-secondary: rgba(0, 0, 0, 0.45);
|
|
--border-color: #f0f0f0;
|
|
--bg-gray: #f5f5f5;
|
|
}
|
|
|
|
body {
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
line-height: 1.5;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-gray);
|
|
}
|
|
|
|
.layout-container {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 240px;
|
|
background-color: white;
|
|
border-right: 1px solid var(--border-color);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 240px;
|
|
width: calc(100% - 240px);
|
|
padding: 24px;
|
|
background-color: var(--bg-gray);
|
|
}
|
|
|
|
.sidebar-menu-item a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
margin: 0 8px;
|
|
color: var(--text-color);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.sidebar-menu-item:hover a {
|
|
background-color: var(--primary-light);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.sidebar-menu-item.active a {
|
|
background-color: var(--primary-light);
|
|
color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ant-card {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
background-color: white;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ant-card-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ant-card-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.ant-btn {
|
|
border-radius: 4px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.ant-btn-primary {
|
|
background-color: var(--primary-color);
|
|
border: 1px solid var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.ant-btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
}
|
|
|
|
.ant-btn-default {
|
|
background-color: white;
|
|
border: 1px solid #d9d9d9;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.ant-btn-default:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.ant-btn i {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.breadcrumb-item:last-child {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.breadcrumb-item:not(:last-child)::after {
|
|
content: '/';
|
|
margin: 0 8px;
|
|
color: #d9d9d9;
|
|
}
|
|
|
|
.text-primary { color: var(--primary-color); }
|
|
.text-success { color: var(--success-color); }
|
|
.text-warning { color: var(--warning-color); }
|
|
.text-error { color: var(--error-color); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
|
|
.bg-primary { background-color: var(--primary-color); }
|
|
.bg-primary-light { background-color: var(--primary-light); }
|
|
.bg-success { background-color: #f6ffed; }
|
|
.bg-warning { background-color: #fffbe6; }
|
|
.bg-error { background-color: #fff2f0; }
|
|
|
|
/* File type badges */
|
|
.file-type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-type-badge i {
|
|
margin-right: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.file-type-contract {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.file-type-license {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.file-type-punishment {
|
|
background-color: #fff7e6;
|
|
color: #fa8c16;
|
|
}
|
|
|
|
/* Status badge */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-waiting {
|
|
background-color: #f9f0ff;
|
|
color: #722ed1;
|
|
}
|
|
|
|
.status-processing {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.status-success {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-error {
|
|
background-color: #fff1f0;
|
|
color: #f5222d;
|
|
}
|
|
|
|
.status-warning {
|
|
background-color: #fffbe6;
|
|
color: #faad14;
|
|
}
|
|
|
|
/* Table styles */
|
|
.ant-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.ant-table th, .ant-table td {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
text-align: left;
|
|
}
|
|
|
|
.ant-table th {
|
|
background-color: #fafafa;
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ant-table tr:hover td {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* Search box */
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: white;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.form-label, .form-select, .search-input {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-select {
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
padding: 0.5rem;
|
|
width: 100%;
|
|
color: var(--text-color);
|
|
background-color: white;
|
|
}
|
|
|
|
.form-select:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
|
|
}
|
|
|
|
.search-icon {
|
|
color: var(--text-secondary);
|
|
font-size: 16px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Filter dropdown */
|
|
.filter-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.filter-dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
z-index: 1050;
|
|
min-width: 120px;
|
|
padding: 4px 0;
|
|
margin: 4px 0 0;
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
|
|
display: none;
|
|
}
|
|
|
|
.filter-dropdown-menu.show {
|
|
display: block;
|
|
}
|
|
|
|
.filter-dropdown-item {
|
|
display: block;
|
|
padding: 5px 12px;
|
|
color: var(--text-color);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.filter-dropdown-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* Severity indicator */
|
|
.severity-indicator {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.severity-info {
|
|
background-color: #1890ff;
|
|
}
|
|
|
|
.severity-warning {
|
|
background-color: #faad14;
|
|
}
|
|
|
|
.severity-error {
|
|
background-color: #ff4d4f;
|
|
}
|
|
|
|
.severity-critical {
|
|
background-color: #722ed1;
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.pagination-item {
|
|
min-width: 32px;
|
|
height: 32px;
|
|
margin-right: 8px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.pagination-item:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.pagination-item.active {
|
|
border-color: var(--primary-color);
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.pagination-item.disabled {
|
|
color: var(--text-secondary);
|
|
border-color: #d9d9d9;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Result count summary */
|
|
.result-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.result-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-right: 24px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.result-tag-count {
|
|
font-weight: 500;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Message tooltip */
|
|
.message-tooltip {
|
|
max-width: 280px;
|
|
word-wrap: break-word;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid #eee;
|
|
font-size: 12px;
|
|
}
|
|
</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>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<div class="flex items-center">
|
|
<h2 class="text-xl font-medium">评查文件列表</h2>
|
|
<div class="flex items-center ml-4 bg-white px-3 py-1 rounded-md">
|
|
<i class="ri-file-list-3-line text-primary text-lg mr-1"></i>
|
|
<span class="text-sm text-secondary">总文件数：</span>
|
|
<span class="text-base font-bold text-primary ml-1">124</span>
|
|
</div>
|
|
</div>
|
|
<button class="ant-btn ant-btn-primary">
|
|
<i class="ri-file-upload-line"></i> 上传新文件
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 搜索和筛选区域 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-body py-3">
|
|
<div class="flex flex-wrap items-end gap-3">
|
|
<div class="w-48">
|
|
<div class="mb-1 text-sm font-medium">文件类型</div>
|
|
<select class="form-select w-full">
|
|
<option value="">全部</option>
|
|
<option value="contract">合同文档</option>
|
|
<option value="license">专卖许可证</option>
|
|
<option value="punishment">行政处罚决定书</option>
|
|
<option value="other">其他文档</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="w-48">
|
|
<div class="mb-1 text-sm font-medium">评查状态</div>
|
|
<select class="form-select w-full">
|
|
<option value="">全部</option>
|
|
<option value="pass">通过</option>
|
|
<option value="warning">警告</option>
|
|
<option value="fail">不通过</option>
|
|
<option value="pending">待人工确认</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="w-48">
|
|
<div class="mb-1 text-sm font-medium">时间范围</div>
|
|
<select class="form-select w-full">
|
|
<option value="">全部</option>
|
|
<option value="today">今天</option>
|
|
<option value="week">本周</option>
|
|
<option value="month">本月</option>
|
|
<option value="custom">自定义时间段</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="w-72">
|
|
<div class="mb-1 text-sm font-medium">搜索</div>
|
|
<div class="flex border border-gray-300 rounded overflow-hidden">
|
|
<input type="text" class="search-input px-3 py-2 flex-1 outline-none" placeholder="搜索文件名、合同编号或关键词">
|
|
<button class="ant-btn ant-btn-primary rounded-none px-3">
|
|
<i class="ri-search-line"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-4 flex justify-end">
|
|
<select class="form-select w-auto">
|
|
<option value="upload_time_desc">上传时间 ↓</option>
|
|
<option value="upload_time_asc">上传时间 ↑</option>
|
|
<option value="issue_count_desc">问题数量 ↓</option>
|
|
<option value="issue_count_asc">问题数量 ↑</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 文件列表 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-body p-0">
|
|
<table class="ant-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 30%">文件名称</th>
|
|
<th style="width: 12%">文件类型</th>
|
|
<th style="width: 12%">上传时间</th>
|
|
<th style="width: 12%">评查状态</th>
|
|
<th style="width: 20%">问题摘要</th>
|
|
<th style="width: 14%">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="flex items-center">
|
|
<i class="ri-file-pdf-line text-red-500 mr-2 text-lg"></i>
|
|
<div>
|
|
<div class="font-medium">烟草产品销售合同（2023版）.pdf</div>
|
|
<div class="text-xs text-secondary mt-1">合同编号：XS-2023-1025-001</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="file-type-badge file-type-contract">
|
|
<i class="ri-file-list-3-line"></i>合同文档
|
|
</span>
|
|
</td>
|
|
<td>2023-10-25<br><span class="text-xs text-secondary">14:30:45</span></td>
|
|
<td>
|
|
<span class="status-badge status-warning">
|
|
<i class="ri-alert-line mr-1"></i>警告 (3)
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="text-sm">
|
|
<div class="mb-1"><span class="severity-indicator severity-warning"></span>付款条件描述不明确</div>
|
|
<div class="mb-1"><span class="severity-indicator severity-warning"></span>违约责任条款缺失</div>
|
|
<div><span class="severity-indicator severity-warning"></span>签章不完整</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default mr-2">
|
|
<i class="ri-eye-line"></i> 查看
|
|
</button>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default">
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="flex items-center">
|
|
<i class="ri-file-pdf-line text-red-500 mr-2 text-lg"></i>
|
|
<div>
|
|
<div class="font-medium">2023年度烟草专卖零售许可证.pdf</div>
|
|
<div class="text-xs text-secondary mt-1">许可证号：LS-2023-0058</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="file-type-badge file-type-license">
|
|
<i class="ri-vip-crown-line"></i>专卖许可证
|
|
</span>
|
|
</td>
|
|
<td>2023-10-24<br><span class="text-xs text-secondary">10:15:22</span></td>
|
|
<td>
|
|
<span class="status-badge status-success">
|
|
<i class="ri-checkbox-circle-line mr-1"></i>通过
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="text-sm text-success">
|
|
<i class="ri-check-double-line mr-1"></i>所有评查点均通过
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default mr-2">
|
|
<i class="ri-eye-line"></i> 查看
|
|
</button>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default">
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="flex items-center">
|
|
<i class="ri-file-pdf-line text-red-500 mr-2 text-lg"></i>
|
|
<div>
|
|
<div class="font-medium">XX公司违规处罚决定书.pdf</div>
|
|
<div class="text-xs text-secondary mt-1">文号：处罚[2023]42号</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="file-type-badge file-type-punishment">
|
|
<i class="ri-scales-line"></i>行政处罚
|
|
</span>
|
|
</td>
|
|
<td>2023-10-23<br><span class="text-xs text-secondary">16:45:30</span></td>
|
|
<td>
|
|
<span class="status-badge status-error">
|
|
<i class="ri-close-circle-line mr-1"></i>不通过 (2)
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="text-sm">
|
|
<div class="mb-1"><span class="severity-indicator severity-error"></span>处罚依据条款引用错误</div>
|
|
<div><span class="severity-indicator severity-error"></span>处罚金额超出规定范围</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default mr-2">
|
|
<i class="ri-eye-line"></i> 查看
|
|
</button>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default">
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="flex items-center">
|
|
<i class="ri-file-word-2-line text-blue-500 mr-2 text-lg"></i>
|
|
<div>
|
|
<div class="font-medium">烟草设备采购协议.docx</div>
|
|
<div class="text-xs text-secondary mt-1">合同编号：CG-2023-0089</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="file-type-badge file-type-contract">
|
|
<i class="ri-file-list-3-line"></i>合同文档
|
|
</span>
|
|
</td>
|
|
<td>2023-10-22<br><span class="text-xs text-secondary">09:22:15</span></td>
|
|
<td>
|
|
<span class="status-badge status-processing">
|
|
<i class="ri-time-line mr-1"></i>待确认 (1)
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="text-sm">
|
|
<div><span class="severity-indicator severity-warning"></span>交付日期条款存在歧义，需人工确认</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-sm ant-btn-primary mr-2">
|
|
<i class="ri-check-double-line"></i> 确认
|
|
</button>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default">
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="flex items-center">
|
|
<i class="ri-file-excel-2-line text-green-500 mr-2 text-lg"></i>
|
|
<div>
|
|
<div class="font-medium">2023年度销售额报表.xlsx</div>
|
|
<div class="text-xs text-secondary mt-1">报表编号：BB-2023-Q3</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="file-type-badge" style="background-color: #e6fffb; color: #13c2c2;">
|
|
<i class="ri-file-chart-line"></i>报表文档
|
|
</span>
|
|
</td>
|
|
<td>2023-10-20<br><span class="text-xs text-secondary">14:05:38</span></td>
|
|
<td>
|
|
<span class="status-badge status-success">
|
|
<i class="ri-checkbox-circle-line mr-1"></i>通过
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="text-sm text-success">
|
|
<i class="ri-check-double-line mr-1"></i>所有评查点均通过
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default mr-2">
|
|
<i class="ri-eye-line"></i> 查看
|
|
</button>
|
|
<button class="ant-btn ant-btn-sm ant-btn-default">
|
|
<i class="ri-download-2-line"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination">
|
|
<a class="pagination-item disabled">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
<a class="pagination-item active">1</a>
|
|
<a class="pagination-item">2</a>
|
|
<a class="pagination-item">3</a>
|
|
<a class="pagination-item">4</a>
|
|
<a class="pagination-item">5</a>
|
|
<a class="pagination-item">
|
|
<i class="ri-arrow-right-s-line"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 表格行点击事件
|
|
const tableRows = document.querySelectorAll('.ant-table tbody tr');
|
|
tableRows.forEach(row => {
|
|
row.addEventListener('click', function(e) {
|
|
// 如果点击的是按钮，不触发行点击事件
|
|
if (e.target.closest('button')) {
|
|
return;
|
|
}
|
|
|
|
const fileName = this.querySelector('td:first-child .font-medium').textContent;
|
|
window.location.href = '#/detail/' + encodeURIComponent(fileName);
|
|
});
|
|
|
|
// 添加鼠标悬停样式
|
|
row.style.cursor = 'pointer';
|
|
});
|
|
|
|
// 查看按钮点击事件
|
|
const viewButtons = document.querySelectorAll('.ant-btn-sm i.ri-eye-line').forEach(icon => {
|
|
const button = icon.closest('button');
|
|
button.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const row = this.closest('tr');
|
|
const fileName = row.querySelector('td:first-child .font-medium').textContent;
|
|
window.location.href = '#/detail/' + encodeURIComponent(fileName);
|
|
});
|
|
});
|
|
|
|
// 下载按钮点击事件
|
|
const downloadButtons = document.querySelectorAll('.ant-btn-sm i.ri-download-2-line').forEach(icon => {
|
|
const button = icon.closest('button');
|
|
button.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const row = this.closest('tr');
|
|
const fileName = row.querySelector('td:first-child .font-medium').textContent;
|
|
alert(`下载文件: ${fileName}`);
|
|
});
|
|
});
|
|
|
|
// 确认按钮点击事件
|
|
const confirmButtons = document.querySelectorAll('.ant-btn-sm i.ri-check-double-line').forEach(icon => {
|
|
const button = icon.closest('button');
|
|
button.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const row = this.closest('tr');
|
|
const fileName = row.querySelector('td:first-child .font-medium').textContent;
|
|
alert(`确认评查结果: ${fileName}`);
|
|
});
|
|
});
|
|
|
|
// 上传新文件按钮点击事件
|
|
const uploadButton = document.querySelector('.ant-btn-primary i.ri-file-upload-line').closest('button');
|
|
uploadButton.addEventListener('click', function() {
|
|
window.location.href = '待审核文件上传.html';
|
|
});
|
|
|
|
// 分页点击事件
|
|
const paginationItems = document.querySelectorAll('.pagination-item');
|
|
paginationItems.forEach(item => {
|
|
if (!item.classList.contains('disabled')) {
|
|
item.addEventListener('click', function() {
|
|
paginationItems.forEach(i => i.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
}
|
|
});
|
|
|
|
// 搜索框输入事件
|
|
const searchInput = document.querySelector('.search-input');
|
|
searchInput.addEventListener('keyup', function(e) {
|
|
if (e.key === 'Enter') {
|
|
const searchValue = this.value.trim();
|
|
if (searchValue) {
|
|
alert(`搜索: ${searchValue}`);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 搜索按钮点击事件
|
|
const searchBtn = document.querySelector('.search-box .ant-btn');
|
|
if (searchBtn) {
|
|
searchBtn.addEventListener('click', function() {
|
|
const searchValue = searchInput.value.trim();
|
|
if (searchValue) {
|
|
alert(`搜索: ${searchValue}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 筛选下拉框变化事件
|
|
const filterSelects = document.querySelectorAll('.form-select');
|
|
filterSelects.forEach(select => {
|
|
select.addEventListener('change', function() {
|
|
const filters = Array.from(filterSelects)
|
|
.map(s => `${s.name || '筛选'}: ${s.options[s.selectedIndex].text}`)
|
|
.filter(f => !f.includes('(全部)') && !f.includes('上传时间 ↓'));
|
|
|
|
if (filters.length > 0) {
|
|
// console.log('应用筛选:', filters.join(', '));
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|