|
|
<!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>
|
|
|
/* ===== Screen base ===== */
|
|
|
:root {
|
|
|
--ink: #111827;
|
|
|
--muted: #6b7280;
|
|
|
--line: #e5e7eb;
|
|
|
--soft: #f3f4f6;
|
|
|
--accent: #111827;
|
|
|
}
|
|
|
* { box-sizing: border-box; }
|
|
|
html, body { height: 100%; }
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
gap: 10px;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.toolbar .hint { color: var(--muted); font-size: 13px; }
|
|
|
.btn {
|
|
|
appearance: none;
|
|
|
border: 1px solid #d1d5db;
|
|
|
background: #fff;
|
|
|
color: #111827;
|
|
|
padding: 8px 12px;
|
|
|
border-radius: 8px;
|
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.btn.primary {
|
|
|
background: #111827;
|
|
|
border-color: #111827;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.btn:active { transform: translateY(1px); }
|
|
|
|
|
|
.page {
|
|
|
max-width: 980px;
|
|
|
margin: 16px auto 36px;
|
|
|
padding: 0 12px;
|
|
|
}
|
|
|
|
|
|
/* ===== A4 sheet ===== */
|
|
|
.sheet {
|
|
|
background: #fff;
|
|
|
border: 1px solid var(--line);
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
|
|
|
padding: 18mm 16mm;
|
|
|
}
|
|
|
|
|
|
.doc-header {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr auto;
|
|
|
gap: 12px;
|
|
|
align-items: start;
|
|
|
border-bottom: 2px solid #111827;
|
|
|
padding-bottom: 10px;
|
|
|
margin-bottom: 14px;
|
|
|
}
|
|
|
.doc-title {
|
|
|
margin: 0;
|
|
|
font-size: 20px;
|
|
|
letter-spacing: 0.5px;
|
|
|
}
|
|
|
.doc-sub {
|
|
|
margin-top: 6px;
|
|
|
font-size: 12px;
|
|
|
color: var(--muted);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
.doc-meta {
|
|
|
text-align: right;
|
|
|
font-size: 12px;
|
|
|
color: var(--muted);
|
|
|
line-height: 1.7;
|
|
|
}
|
|
|
|
|
|
.grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.section {
|
|
|
margin-top: 14px;
|
|
|
break-inside: avoid;
|
|
|
page-break-inside: avoid;
|
|
|
}
|
|
|
.section-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
margin: 0 0 8px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
.badge {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
padding: 2px 8px;
|
|
|
border-radius: 999px;
|
|
|
background: var(--soft);
|
|
|
border: 1px solid var(--line);
|
|
|
font-size: 12px;
|
|
|
color: #111827;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
table-layout: fixed;
|
|
|
}
|
|
|
.kv td {
|
|
|
border: 1px solid var(--line);
|
|
|
padding: 8px 10px;
|
|
|
vertical-align: top;
|
|
|
font-size: 12.5px;
|
|
|
line-height: 1.45;
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
.kv td.k {
|
|
|
width: 28%;
|
|
|
background: #fafafa;
|
|
|
color: #374151;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.list th, .list td {
|
|
|
border: 1px solid var(--line);
|
|
|
padding: 8px 10px;
|
|
|
font-size: 12.5px;
|
|
|
line-height: 1.45;
|
|
|
vertical-align: top;
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
.list th {
|
|
|
background: #fafafa;
|
|
|
text-align: left;
|
|
|
color: #374151;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.note {
|
|
|
margin-top: 8px;
|
|
|
color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.sign {
|
|
|
margin-top: 16px;
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 14px;
|
|
|
}
|
|
|
.sign-box {
|
|
|
border: 1px dashed #d1d5db;
|
|
|
border-radius: 10px;
|
|
|
padding: 10px;
|
|
|
min-height: 70px;
|
|
|
}
|
|
|
.sign-title { font-size: 12px; color: #374151; font-weight: 700; margin-bottom: 6px; }
|
|
|
.sign-line { margin-top: 22px; border-top: 1px solid #d1d5db; }
|
|
|
.sign-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
|
|
|
|
|
|
/* ===== Print ===== */
|
|
|
@page {
|
|
|
size: A4;
|
|
|
margin: 12mm;
|
|
|
}
|
|
|
@media print {
|
|
|
body { background: #fff; }
|
|
|
.toolbar { display: none !important; }
|
|
|
.page { margin: 0; padding: 0; max-width: none; }
|
|
|
.sheet {
|
|
|
border: none;
|
|
|
box-shadow: none;
|
|
|
border-radius: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.section { break-inside: avoid; page-break-inside: avoid; }
|
|
|
a[href]:after { content: ""; }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="toolbar">
|
|
|
<div class="toolbar-inner">
|
|
|
<div>
|
|
|
<button class="btn primary" onclick="window.print()">打印 / 导出PDF（A4）</button>
|
|
|
<button class="btn" onclick="toggleWatermark()">切换水印</button>
|
|
|
</div>
|
|
|
<div class="hint">提示：浏览器打印里选择“布局：纵向 / 纸张：A4 / 边距：默认或自定义”。</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="page">
|
|
|
<div class="sheet" id="sheet">
|
|
|
<div class="doc-header">
|
|
|
<div>
|
|
|
<h1 class="doc-title">非直接支付申请单（演示数据）</h1>
|
|
|
<div class="doc-sub">
|
|
|
业务类型：非直接支付（事前流程）｜分类：基础设施 / 维修维护（叶子）｜分支：默认分支
|
|
|
<br />本页用于演示：基本信息、拟支上会、事前流程（主体流程/招标信息/合同信息）、多轮支付。
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="doc-meta">
|
|
|
单据编号：ND-2025-00123<br />
|
|
|
创建日期：2025-12-12<br />
|
|
|
打印时间：<span id="printTime">-</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
<section class="section">
|
|
|
<h2 class="section-title"><span class="badge">一</span> 基本信息</h2>
|
|
|
<div class="grid">
|
|
|
<table class="kv">
|
|
|
<tr><td class="k">事项标题</td><td>XX项目维修维护服务费（演示）</td></tr>
|
|
|
<tr><td class="k">申请单位</td><td>市生态环境局（演示单位）</td></tr>
|
|
|
<tr><td class="k">经办人</td><td>张三</td></tr>
|
|
|
<tr><td class="k">联系电话</td><td>138****1234</td></tr>
|
|
|
<tr><td class="k">预算来源</td><td>一般公共预算</td></tr>
|
|
|
</table>
|
|
|
<table class="kv">
|
|
|
<tr><td class="k">申请金额（元）</td><td><strong>¥ 1,280,000.00</strong></td></tr>
|
|
|
<tr><td class="k">申请日期</td><td>2025-12-10</td></tr>
|
|
|
<tr><td class="k">关联OA流程</td><td>OA-Flow-ID：987654（未关联示例）</td></tr>
|
|
|
<tr><td class="k">资金用途说明</td><td>用于XX项目维修维护服务费支付（含材料/人工/管理）。</td></tr>
|
|
|
<tr><td class="k">备注</td><td>此为演示数据，可用于打印效果展示。</td></tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 拟支上会 -->
|
|
|
<section class="section">
|
|
|
<h2 class="section-title"><span class="badge">二</span> 拟支上会</h2>
|
|
|
<table class="kv">
|
|
|
<tr><td class="k">是否上会</td><td>是</td></tr>
|
|
|
<tr><td class="k">会议类型</td><td>局务会（演示）</td></tr>
|
|
|
<tr><td class="k">拟上会时间</td><td>2025-12-18</td></tr>
|
|
|
<tr><td class="k">上会事项摘要</td><td>审议XX项目维修维护服务费支出事前流程与资金安排。</td></tr>
|
|
|
<tr><td class="k">上会材料清单</td><td>项目方案、预算测算表、采购/合同草案、风险评估表。</td></tr>
|
|
|
</table>
|
|
|
<div class="note">说明：此块对应模板的 <strong>meeting_info</strong> 区域字段。</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 事前流程：主体流程 / 招标信息 / 合同信息 -->
|
|
|
<section class="section">
|
|
|
<h2 class="section-title"><span class="badge">三</span> 事前流程</h2>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3 class="section-title"><span class="badge">3.1</span> 主体流程</h3>
|
|
|
<table class="kv">
|
|
|
<tr><td class="k">项目名称</td><td>XX项目维修维护（演示）</td></tr>
|
|
|
<tr><td class="k">项目负责人</td><td>李四</td></tr>
|
|
|
<tr><td class="k">立项依据</td><td>依据《XX项目年度实施计划》及现场巡检报告。</td></tr>
|
|
|
<tr><td class="k">必要性说明</td><td>保障设备稳定运行，避免环境监测中断与安全隐患。</td></tr>
|
|
|
<tr><td class="k">风险与合规</td><td>已完成合规审查，风险等级：中；拟采取控制措施：分阶段验收与支付。</td></tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3 class="section-title"><span class="badge">3.2</span> 招标信息</h3>
|
|
|
<table class="kv">
|
|
|
<tr><td class="k">采购方式</td><td>公开招标（演示）</td></tr>
|
|
|
<tr><td class="k">招标编号</td><td>ZB-2025-EC-0099</td></tr>
|
|
|
<tr><td class="k">招标公告日期</td><td>2025-11-20</td></tr>
|
|
|
<tr><td class="k">开标日期</td><td>2025-12-01</td></tr>
|
|
|
<tr><td class="k">中标单位</td><td>XX环境科技有限公司</td></tr>
|
|
|
<tr><td class="k">中标金额（元）</td><td>¥ 1,260,000.00</td></tr>
|
|
|
<tr><td class="k">评审要点</td><td>技术评分 62/70，商务评分 26/30，综合得分 88。</td></tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
<h3 class="section-title"><span class="badge">3.3</span> 合同信息</h3>
|
|
|
<table class="kv">
|
|
|
<tr><td class="k">合同编号</td><td>HT-2025-EC-0188</td></tr>
|
|
|
<tr><td class="k">合同名称</td><td>XX项目维修维护服务合同（演示）</td></tr>
|
|
|
<tr><td class="k">合同金额（元）</td><td>¥ 1,260,000.00</td></tr>
|
|
|
<tr><td class="k">签订日期</td><td>2025-12-05</td></tr>
|
|
|
<tr><td class="k">履约期限</td><td>2025-12-06 至 2026-12-05</td></tr>
|
|
|
<tr><td class="k">验收方式</td><td>阶段验收 + 最终验收，按验收报告支付。</td></tr>
|
|
|
<tr><td class="k">违约条款摘要</td><td>未达标按日扣罚；重大违约可解除合同并追究损失。</td></tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<div class="note">说明：此块对应模板的 <strong>pre_approval</strong> 区域（此处按“主体流程/招标信息/合同信息”拆分展示）。</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 多轮支付 -->
|
|
|
<section class="section">
|
|
|
<h2 class="section-title"><span class="badge">四</span> 多轮支付</h2>
|
|
|
<table class="list">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th style="width: 10%">轮次</th>
|
|
|
<th style="width: 22%">计划支付时间</th>
|
|
|
<th style="width: 18%">支付比例</th>
|
|
|
<th style="width: 20%">支付金额（元）</th>
|
|
|
<th>支付条件 / 说明</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>第1轮</td>
|
|
|
<td>2025-12-20</td>
|
|
|
<td>30%</td>
|
|
|
<td>¥ 378,000.00</td>
|
|
|
<td>合同生效 + 提交履约保函/开工资料。</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>第2轮</td>
|
|
|
<td>2026-06-30</td>
|
|
|
<td>40%</td>
|
|
|
<td>¥ 504,000.00</td>
|
|
|
<td>完成阶段验收（含服务台账、现场记录、阶段报告）。</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>第3轮</td>
|
|
|
<td>2026-12-10</td>
|
|
|
<td>30%</td>
|
|
|
<td>¥ 378,000.00</td>
|
|
|
<td>完成最终验收 + 结算资料齐全。</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
<div class="note">说明：此块模拟模板的 <strong>payment</strong> 多轮 rounds 展示，适合A4打印。</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 签字栏 -->
|
|
|
<section class="section">
|
|
|
<h2 class="section-title"><span class="badge">五</span> 审批与签字（打印留痕）</h2>
|
|
|
<div class="sign">
|
|
|
<div class="sign-box">
|
|
|
<div class="sign-title">经办人确认</div>
|
|
|
<div class="sign-line"></div>
|
|
|
<div class="sign-meta">签字：__________ 日期：____年__月__日</div>
|
|
|
</div>
|
|
|
<div class="sign-box">
|
|
|
<div class="sign-title">单位负责人</div>
|
|
|
<div class="sign-line"></div>
|
|
|
<div class="sign-meta">签字：__________ 日期：____年__月__日</div>
|
|
|
</div>
|
|
|
<div class="sign-box">
|
|
|
<div class="sign-title">财务审核</div>
|
|
|
<div class="sign-line"></div>
|
|
|
<div class="sign-meta">签字：__________ 日期：____年__月__日</div>
|
|
|
</div>
|
|
|
<div class="sign-box">
|
|
|
<div class="sign-title">分管领导</div>
|
|
|
<div class="sign-line"></div>
|
|
|
<div class="sign-meta">签字：__________ 日期：____年__月__日</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<div class="note" style="margin-top: 14px; text-align: center;">
|
|
|
—— 以上为演示数据，仅用于展示打印效果 ——
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
function formatNow() {
|
|
|
const d = new Date();
|
|
|
const pad = (n) => String(n).padStart(2, '0');
|
|
|
return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
|
|
}
|
|
|
|
|
|
function setPrintTime() {
|
|
|
const el = document.getElementById('printTime');
|
|
|
if (el) el.textContent = formatNow();
|
|
|
}
|
|
|
|
|
|
function toggleWatermark() {
|
|
|
const sheet = document.getElementById('sheet');
|
|
|
if (!sheet) return;
|
|
|
const has = sheet.getAttribute('data-watermark') === '1';
|
|
|
if (has) {
|
|
|
sheet.removeAttribute('data-watermark');
|
|
|
sheet.style.backgroundImage = 'none';
|
|
|
} else {
|
|
|
sheet.setAttribute('data-watermark', '1');
|
|
|
sheet.style.backgroundImage = 'repeating-linear-gradient(-30deg, rgba(17,24,39,0.06), rgba(17,24,39,0.06) 1px, transparent 1px, transparent 18px)';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
setPrintTime();
|
|
|
window.addEventListener('beforeprint', setPrintTime);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
