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.
538 lines
21 KiB
538 lines
21 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-processing {
|
|
background-color: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.badge-success {
|
|
background-color: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.badge-failed {
|
|
background-color: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.badge-cancelled {
|
|
background-color: #f3f4f6;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.payment-type {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.payment-type i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.payment-type .text-primary {
|
|
color: #667eea;
|
|
}
|
|
|
|
.payment-type .text-success {
|
|
color: #10b981;
|
|
}
|
|
|
|
.payment-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;
|
|
}
|
|
|
|
.amount {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
</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="paymentType">
|
|
<option value="">全部</option>
|
|
<option value="direct">直接支付</option>
|
|
<option value="beijing">非直接支付</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="paymentStatus">
|
|
<option value="">全部</option>
|
|
<option value="pending">待支付</option>
|
|
<option value="processing">支付中</option>
|
|
<option value="success">支付成功</option>
|
|
<option value="failed">支付失败</option>
|
|
<option value="cancelled">已取消</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">支付人</label>
|
|
<input type="text" class="form-control" id="payer" 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>
|
|
<select class="form-select" id="amountRange">
|
|
<option value="">全部</option>
|
|
<option value="0-50000">5万以下</option>
|
|
<option value="50000-100000">5-10万</option>
|
|
<option value="100000-300000">10-30万</option>
|
|
<option value="300000+">30万以上</option>
|
|
</select>
|
|
</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="searchPayment()">
|
|
<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>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>PY-2024-001</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-lightning text-primary"></i>
|
|
<span>直接支付</span>
|
|
</div>
|
|
</td>
|
|
<td>小额采购 - 办公用品</td>
|
|
<td>张三</td>
|
|
<td class="amount">¥45,000</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-success">支付成功</span></td>
|
|
<td>2024-01-15 14:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-2024-001')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PY-2024-002</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-building text-info"></i>
|
|
<span>非直接支付</span>
|
|
</div>
|
|
</td>
|
|
<td>公开招标 - 设备采购</td>
|
|
<td>李四</td>
|
|
<td class="amount">¥280,000</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-processing">支付中</span></td>
|
|
<td>2024-01-15 11:20</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-2024-002')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PY-2024-003</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-cart text-success"></i>
|
|
<span>采购管理支付</span>
|
|
</div>
|
|
</td>
|
|
<td>政府采购 - 比价采购</td>
|
|
<td>王五</td>
|
|
<td class="amount">¥85,000</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-success">支付成功</span></td>
|
|
<td>2024-01-14 16:45</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-2024-003')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PY-2024-004</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-calendar-event text-info"></i>
|
|
<span>会议、培训、接待支付</span>
|
|
</div>
|
|
</td>
|
|
<td>会议审批支付</td>
|
|
<td>赵六</td>
|
|
<td class="amount">¥3,200</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-success">支付成功</span></td>
|
|
<td>2024-01-14 15:10</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-2024-004')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PY-2024-005</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-tools text-success"></i>
|
|
<span>安装维修支付</span>
|
|
</div>
|
|
</td>
|
|
<td>安装、维修申请支付</td>
|
|
<td>钱七</td>
|
|
<td class="amount">¥15,800</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-success">支付成功</span></td>
|
|
<td>2024-01-14 13:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-2024-005')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PY-2024-006</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-truck text-info"></i>
|
|
<span>车船管理支付</span>
|
|
</div>
|
|
</td>
|
|
<td>车船维修保养支付</td>
|
|
<td>孙八</td>
|
|
<td class="amount">¥12,000</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-success">支付成功</span></td>
|
|
<td>2024-01-13 16:20</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-2024-006')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PY-2024-007</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-gear text-success"></i>
|
|
<span>仪器管理支付</span>
|
|
</div>
|
|
</td>
|
|
<td>仪器设备购置支付</td>
|
|
<td>周九</td>
|
|
<td class="amount">¥68,000</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-pending">待支付</span></td>
|
|
<td>2024-01-13 10:15</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-2024-007')">
|
|
<i class="bi bi-eye"></i> 查看
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PY-2024-008</td>
|
|
<td>
|
|
<div class="payment-type">
|
|
<i class="bi bi-lightning text-primary"></i>
|
|
<span>直接支付</span>
|
|
</div>
|
|
</td>
|
|
<td>公开招标 - 服务采购</td>
|
|
<td>吴十</td>
|
|
<td class="amount">¥156,000</td>
|
|
<td>银行转账</td>
|
|
<td><span class="badge badge-failed">支付失败</span></td>
|
|
<td>2024-01-12 09:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail('PY-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 searchPayment() {
|
|
const paymentType = document.getElementById('paymentType').value;
|
|
const paymentStatus = document.getElementById('paymentStatus').value;
|
|
const payer = document.getElementById('payer').value;
|
|
const startDate = document.getElementById('startDate').value;
|
|
const endDate = document.getElementById('endDate').value;
|
|
const amountRange = document.getElementById('amountRange').value;
|
|
const keyword = document.getElementById('keyword').value;
|
|
|
|
// 这里应该调用后端API进行查询
|
|
console.log('查询参数:', { paymentType, paymentStatus, payer, startDate, endDate, amountRange, keyword });
|
|
|
|
// 模拟查询结果
|
|
alert('查询功能待对接后端API');
|
|
}
|
|
|
|
// 重置筛选
|
|
function resetFilter() {
|
|
document.getElementById('paymentType').value = '';
|
|
document.getElementById('paymentStatus').value = '';
|
|
document.getElementById('payer').value = '';
|
|
document.getElementById('startDate').value = '';
|
|
document.getElementById('endDate').value = '';
|
|
document.getElementById('amountRange').value = '';
|
|
document.getElementById('keyword').value = '';
|
|
}
|
|
|
|
// 查看详情
|
|
function viewDetail(paymentId) {
|
|
// 这里可以打开详情模态框或跳转到详情页面
|
|
alert('支付详情功能待开发，支付编号: ' + paymentId);
|
|
}
|
|
|
|
// 导出数据
|
|
function exportData() {
|
|
// 这里应该调用后端API导出数据
|
|
alert('导出功能待对接后端API');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|