You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
514 lines
19 KiB
514 lines
19 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>流程查询 - 资金使用管理系统</title>
|
|
<link href="https://cdn.staticfile.org/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
background-color: #f5f7fa;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
background: white;
|
|
padding: 25px 30px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-title i {
|
|
margin-right: 10px;
|
|
color: #667eea;
|
|
}
|
|
|
|
.filter-section {
|
|
background: white;
|
|
padding: 20px 25px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.filter-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
align-items: end;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.main-content {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-header {
|
|
padding: 20px 25px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.table-container {
|
|
padding: 25px;
|
|
}
|
|
|
|
.table {
|
|
margin: 0;
|
|
}
|
|
|
|
.table thead th {
|
|
border-top: none;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
font-weight: 600;
|
|
color: #666;
|
|
font-size: 14px;
|
|
padding: 12px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.table tbody td {
|
|
padding: 15px 12px;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.badge {
|
|
padding: 6px 12px;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.badge-pending {
|
|
background-color: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
.badge-approving {
|
|
background-color: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.badge-approved {
|
|
background-color: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.badge-rejected {
|
|
background-color: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.badge-completed {
|
|
background-color: #e0e7ff;
|
|
color: #3730a3;
|
|
}
|
|
|
|
.process-type {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.process-type i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.process-type .text-primary {
|
|
color: #667eea;
|
|
}
|
|
|
|
.process-type .text-success {
|
|
color: #10b981;
|
|
}
|
|
|
|
.process-type .text-warning {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.process-type .text-info {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.btn-action {
|
|
padding: 5px 12px;
|
|
font-size: 12px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 64px;
|
|
margin-bottom: 20px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.pagination-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 25px;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 页面头部 -->
|
|
<div class="page-header">
|
|
<h1 class="page-title">
|
|
<i class="bi bi-search"></i> 事前流程查询
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- 筛选区域 -->
|
|
<div class="filter-section">
|
|
<form id="filterForm">
|
|
<div class="filter-row">
|
|
<div>
|
|
<label class="form-label">流程类型</label>
|
|
<select class="form-select" id="processType">
|
|
<option value="">全部</option>
|
|
<option value="procurement">采购管理</option>
|
|
<option value="meeting">会议、培训、接待</option>
|
|
<option value="vehicle">车船管理及维修</option>
|
|
<option value="instrument">仪器管理</option>
|
|
<option value="travel">出差管理</option>
|
|
<option value="contract">合同管理</option>
|
|
<option value="installation">安装维修</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">流程状态</label>
|
|
<select class="form-select" id="processStatus">
|
|
<option value="">全部</option>
|
|
<option value="pending">待审批</option>
|
|
<option value="approving">审批中</option>
|
|
<option value="approved">已批准</option>
|
|
<option value="rejected">已拒绝</option>
|
|
<option value="completed">已完成</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">申请人</label>
|
|
<input type="text" class="form-control" id="applicant" placeholder="输入申请人姓名">
|
|
</div>
|
|
<div>
|
|
<label class="form-label">申请时间</label>
|
|
<input type="date" class="form-control" id="startDate">
|
|
</div>
|
|
<div>
|
|
<label class="form-label">至</label>
|
|
<input type="date" class="form-control" id="endDate">
|
|
</div>
|
|
<div>
|
|
<label class="form-label">关键词</label>
|
|
<input type="text" class="form-control" id="keyword" placeholder="输入关键词搜索">
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-primary w-100" onclick="searchProcess()">
|
|
<i class="bi bi-search"></i> 查询
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-secondary w-100" onclick="resetFilter()">
|
|
<i class="bi bi-arrow-clockwise"></i> 重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="main-content">
|
|
<div class="content-header">
|
|
<h2 class="content-title">
|
|
<i class="bi bi-list-ul"></i> 流程记录
|
|
</h2>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary" onclick="exportData()">
|
|
<i class="bi bi-download"></i> 导出数据
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>流程编号</th>
|
|
<th>流程类型</th>
|
|
<th>申请事项</th>
|
|
<th>申请人</th>
|
|
<th>申请金额</th>
|
|
<th>当前状态</th>
|
|
<th>申请时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>PR-2024-001</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-cart text-primary"></i>
|
|
<span>采购管理</span>
|
|
</div>
|
|
</td>
|
|
<td>政府采购 - 科研设备采购</td>
|
|
<td>张三</td>
|
|
<td>¥125,000</td>
|
|
<td><span class="badge badge-pending">待审批</span></td>
|
|
<td>2024-01-15 10:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PR-2024-001')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>TR-2024-002</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-airplane text-info"></i>
|
|
<span>出差管理</span>
|
|
</div>
|
|
</td>
|
|
<td>出差审批 - 课题A调研</td>
|
|
<td>李四</td>
|
|
<td>¥8,500</td>
|
|
<td><span class="badge badge-approving">审批中</span></td>
|
|
<td>2024-01-15 09:15</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('TR-2024-002')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MT-2024-003</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-calendar-event text-success"></i>
|
|
<span>会议、培训、接待</span>
|
|
</div>
|
|
</td>
|
|
<td>会议审批 - 非课题</td>
|
|
<td>王五</td>
|
|
<td>¥3,200</td>
|
|
<td><span class="badge badge-approved">已批准</span></td>
|
|
<td>2024-01-14 16:45</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('MT-2024-003')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>CT-2024-004</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-file-earmark-text text-warning"></i>
|
|
<span>合同管理</span>
|
|
</div>
|
|
</td>
|
|
<td>合同审批 - 服务合同</td>
|
|
<td>赵六</td>
|
|
<td>¥450,000</td>
|
|
<td><span class="badge badge-approving">审批中</span></td>
|
|
<td>2024-01-14 14:20</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('CT-2024-004')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IN-2024-005</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-tools text-info"></i>
|
|
<span>安装维修</span>
|
|
</div>
|
|
</td>
|
|
<td>安装、维修申请表</td>
|
|
<td>钱七</td>
|
|
<td>¥15,800</td>
|
|
<td><span class="badge badge-approved">已批准</span></td>
|
|
<td>2024-01-14 11:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('IN-2024-005')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>VE-2024-006</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-truck text-success"></i>
|
|
<span>车船管理及维修</span>
|
|
</div>
|
|
</td>
|
|
<td>车船维修保养申请</td>
|
|
<td>孙八</td>
|
|
<td>¥12,000</td>
|
|
<td><span class="badge badge-completed">已完成</span></td>
|
|
<td>2024-01-13 15:20</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('VE-2024-006')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IG-2024-007</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-gear text-primary"></i>
|
|
<span>仪器管理</span>
|
|
</div>
|
|
</td>
|
|
<td>仪器设备购置申请</td>
|
|
<td>周九</td>
|
|
<td>¥68,000</td>
|
|
<td><span class="badge badge-approved">已批准</span></td>
|
|
<td>2024-01-13 10:15</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('IG-2024-007')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PR-2024-008</td>
|
|
<td>
|
|
<div class="process-type">
|
|
<i class="bi bi-cart text-primary"></i>
|
|
<span>采购管理</span>
|
|
</div>
|
|
</td>
|
|
<td>一般采购 - 办公用品</td>
|
|
<td>吴十</td>
|
|
<td>¥5,600</td>
|
|
<td><span class="badge badge-rejected">已拒绝</span></td>
|
|
<td>2024-01-12 09:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PR-2024-008')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页信息 -->
|
|
<div class="pagination-info">
|
|
<div>
|
|
<span class="text-muted">共 <strong>8</strong> 条记录，第 <strong>1</strong> 页，共 <strong>1</strong> 页</span>
|
|
</div>
|
|
<nav>
|
|
<ul class="pagination pagination-sm mb-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">上一页</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">下一页</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// 查询流程
|
|
function searchProcess() {
|
|
const processType = document.getElementById('processType').value;
|
|
const processStatus = document.getElementById('processStatus').value;
|
|
const applicant = document.getElementById('applicant').value;
|
|
const startDate = document.getElementById('startDate').value;
|
|
const endDate = document.getElementById('endDate').value;
|
|
const keyword = document.getElementById('keyword').value;
|
|
|
|
// 这里应该调用后端API进行查询
|
|
console.log('查询参数:', { processType, processStatus, applicant, startDate, endDate, keyword });
|
|
|
|
// 模拟查询结果
|
|
alert('查询功能待对接后端API');
|
|
}
|
|
|
|
// 重置筛选
|
|
function resetFilter() {
|
|
document.getElementById('processType').value = '';
|
|
document.getElementById('processStatus').value = '';
|
|
document.getElementById('applicant').value = '';
|
|
document.getElementById('startDate').value = '';
|
|
document.getElementById('endDate').value = '';
|
|
document.getElementById('keyword').value = '';
|
|
}
|
|
|
|
// 查看详情
|
|
function viewDetail(processId) {
|
|
// 这里可以打开详情模态框或跳转到详情页面
|
|
alert('流程详情功能待开发，流程编号: ' + processId);
|
|
}
|
|
|
|
// 导出数据
|
|
function exportData() {
|
|
// 这里应该调用后端API导出数据
|
|
alert('导出功能待对接后端API');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|