|
|
<!doctype html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
<title>非直接支付（简版演示数据）- A4打印</title>
|
|
|
<style>
|
|
|
:root {
|
|
|
--ink: #111827;
|
|
|
--muted: #6b7280;
|
|
|
--line: #e5e7eb;
|
|
|
--soft: #f3f4f6;
|
|
|
}
|
|
|
* { box-sizing: border-box; }
|
|
|
body {
|
|
|
margin: 0;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
|
|
color: var(--ink);
|
|
|
background: #f5f7fa;
|
|
|
}
|
|
|
|
|
|
/* A4 打印设置 */
|
|
|
@page { size: A4; margin: 12mm; }
|
|
|
|
|
|
.toolbar {
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
z-index: 10;
|
|
|
background: rgba(245, 247, 250, 0.92);
|
|
|
backdrop-filter: blur(6px);
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
padding: 12px 16px;
|
|
|
}
|
|
|
.toolbar-inner {
|
|
|
max-width: 980px;
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
.btn {
|
|
|
appearance: none;
|
|
|
border: 1px solid #111827;
|
|
|
background: #111827;
|
|
|
color: #fff;
|
|
|
border-radius: 8px;
|
|
|
padding: 8px 12px;
|
|
|
font-size: 13px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.btn.secondary {
|
|
|
background: #fff;
|
|
|
color: #111827;
|
|
|
}
|
|
|
|
|
|
.page {
|
|
|
max-width: 190mm; /* 210 - 12*2 */
|
|
|
margin: 16px auto;
|
|
|
background: #fff;
|
|
|
border: 1px solid var(--line);
|
|
|
border-radius: 14px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
padding: 14px 18px 10px;
|
|
|
border-bottom: 2px solid #111827;
|
|
|
}
|
|
|
.title {
|
|
|
margin: 0;
|
|
|
font-size: 18px;
|
|
|
font-weight: 800;
|
|
|
letter-spacing: 1px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.meta {
|
|
|
margin-top: 8px;
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 6px 14px;
|
|
|
font-size: 12px;
|
|
|
color: var(--muted);
|
|
|
}
|
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|
|
|
|
|
.section {
|
|
|
border-top: 1px solid var(--line);
|
|
|
}
|
|
|
.section-title {
|
|
|
padding: 8px 12px;
|
|
|
background: var(--soft);
|
|
|
font-size: 12.5px;
|
|
|
font-weight: 800;
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
}
|
|
|
|
|
|
table.kv {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
table-layout: fixed;
|
|
|
}
|
|
|
table.kv th, table.kv td {
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
padding: 7px 10px;
|
|
|
vertical-align: top;
|
|
|
font-size: 12px;
|
|
|
line-height: 1.25;
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
table.kv th {
|
|
|
width: 22%;
|
|
|
background: #fafafa;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
table.kv tr:last-child th,
|
|
|
table.kv tr:last-child td { border-bottom: none; }
|
|
|
|
|
|
table.pay {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
table-layout: fixed;
|
|
|
}
|
|
|
table.pay th, table.pay td {
|
|
|
border: 1px solid var(--line);
|
|
|
padding: 7px 8px;
|
|
|
font-size: 12px;
|
|
|
line-height: 1.25;
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
table.pay th {
|
|
|
background: #fafafa;
|
|
|
font-weight: 800;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.footer-note {
|
|
|
padding: 10px 12px 14px;
|
|
|
color: var(--muted);
|
|
|
font-size: 11px;
|
|
|
}
|
|
|
|
|
|
@media print {
|
|
|
body { background: #fff; }
|
|
|
.toolbar { display: none !important; }
|
|
|
.page { margin: 0; border: none; border-radius: 0; }
|
|
|
.section { break-inside: avoid; }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="toolbar">
|
|
|
<div class="toolbar-inner">
|
|
|
<div style="font-size:13px;color:#111827;">
|
|
|
简版：无拟支上会 / 无招标 / 无合同 / 单轮支付
|
|
|
</div>
|
|
|
<div style="display:flex;gap:10px;">
|
|
|
<button class="btn secondary" onclick="location.href='./indirect-payment-print-demo.html'">打开完整版</button>
|
|
|
<button class="btn" onclick="window.print()">打印 / 导出PDF</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<main class="page">
|
|
|
<header class="header">
|
|
|
<h1 class="title">非直接支付事前流程单（简版演示）</h1>
|
|
|
<div class="meta">
|
|
|
<div>单号：<span class="mono">PE-2025-12-12-0002</span></div>
|
|
|
<div>打印时间：<span id="printTime"></span></div>
|
|
|
<div>分类：非直接支出 / 一般事项（叶子节点）</div>
|
|
|
<div>分支：默认分支（无条件）</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
<section class="section">
|
|
|
<div class="section-title">一、基本信息</div>
|
|
|
<table class="kv">
|
|
|
<tr>
|
|
|
<th>事项标题</th>
|
|
|
<td colspan="3">设备小额维修服务（简版演示）</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>申请单位</th>
|
|
|
<td>市生态环境监测中心（综合科）</td>
|
|
|
<th>经办人</th>
|
|
|
<td>张三（138****1234）</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>金额（含税）</th>
|
|
|
<td>¥ 25,000.00</td>
|
|
|
<th>资金来源</th>
|
|
|
<td>公用经费</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>项目名称</th>
|
|
|
<td>监测设备日常维修</td>
|
|
|
<th>申请日期</th>
|
|
|
<td>2025-12-12</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>说明</th>
|
|
|
<td colspan="3" style="color:#6b7280;">
|
|
|
简版演示：不涉及上会、招标、合同；仅展示“事前流程主体”及“单轮支付”。
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</section>
|
|
|
|
|
|
<!-- 事前流程（仅主体） -->
|
|
|
<section class="section">
|
|
|
<div class="section-title">二、事前流程（主体）</div>
|
|
|
<table class="kv">
|
|
|
<tr>
|
|
|
<th>事项类型</th>
|
|
|
<td>服务类 / 维修</td>
|
|
|
<th>办理方式</th>
|
|
|
<td>询价（内部比价）</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>服务内容</th>
|
|
|
<td colspan="3">对2台水质分析仪进行故障排查与备件更换，含1次上门服务与调试。</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>验收方式</th>
|
|
|
<td>现场验收 + 维修报告</td>
|
|
|
<th>完成期限</th>
|
|
|
<td>7天内</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</section>
|
|
|
|
|
|
<!-- 单轮支付 -->
|
|
|
<section class="section">
|
|
|
<div class="section-title">三、支付计划（单轮）</div>
|
|
|
<table class="pay">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th style="width: 12%">轮次</th>
|
|
|
<th style="width: 22%">计划支付日期</th>
|
|
|
<th style="width: 18%">支付比例</th>
|
|
|
<th style="width: 20%">支付金额</th>
|
|
|
<th style="width: 28%">支付条件/说明</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td style="text-align:center;">第1轮</td>
|
|
|
<td style="text-align:center;">2025-12-20</td>
|
|
|
<td style="text-align:center;">100%</td>
|
|
|
<td style="text-align:right;">¥ 25,000.00</td>
|
|
|
<td>维修完成并验收合格，提交维修报告与发票后一次性支付</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</section>
|
|
|
|
|
|
<div class="footer-note">
|
|
|
打印建议：关闭页眉页脚；如需一页显示，浏览器打印缩放建议 90%~100%。
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<script>
|
|
|
const pad2 = (n) => String(n).padStart(2, '0');
|
|
|
const now = new Date();
|
|
|
document.getElementById('printTime').textContent = `${now.getFullYear()}-${pad2(now.getMonth()+1)}-${pad2(now.getDate())} ${pad2(now.getHours())}:${pad2(now.getMinutes())}`;
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
