|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>苏州市河道管理处资金划拨审批单</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: "Microsoft YaHei", SimSun, serif;
|
|
|
background: #f5f5f5;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.form-container {
|
|
|
background: #fff;
|
|
|
padding: 20px;
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
|
}
|
|
|
|
|
|
.form-title {
|
|
|
text-align: center;
|
|
|
font-size: 28px;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.print-table1-grid {
|
|
|
font-size: 18px;
|
|
|
border: 1px #000 solid;
|
|
|
display: grid;
|
|
|
grid-template-rows: repeat(14, minmax(65px, auto));
|
|
|
grid-template-columns: repeat(6, 1fr);
|
|
|
grid-template-areas:
|
|
|
"tb1-1 tb1-1 tb1-1 tb1-2 tb1-2 tb1-2"
|
|
|
"tb2-1 tb2-1 tb2-1 tb2-2 tb2-2 tb2-2"
|
|
|
"tb3-1 tb3-1 tb3-2 tb3-2 tb3-3 tb3-3"
|
|
|
"tb4-1 tb4-2 tb4-3 tb4-3 tb4-4 tb4-4"
|
|
|
"tb5-1 tb5-2 tb5-3 tb5-3 tb5-4 tb5-4"
|
|
|
"tb6-1 tb6-2 tb6-3 tb6-3 tb6-4 tb6-4"
|
|
|
"tb7-1 tb7-2 tb7-3 tb7-3 tb7-4 tb7-4"
|
|
|
"tb8-1 tb8-2 tb8-3 tb8-3 tb8-4 tb8-4"
|
|
|
"tb9-1 tb9-2 tb9-3 tb9-3 tb9-4 tb9-4"
|
|
|
"tb10-1 tb10-2 tb10-3 tb10-3 tb10-4 tb10-4"
|
|
|
"tb11-1 tb11-2 tb11-3 tb11-3 tb11-3 tb11-3"
|
|
|
"tb12 tb12 tb12 tb12 tb12 tb12"
|
|
|
"tb13-1 tb13-1 tb13-2 tb13-2 tb13-3 tb13-3"
|
|
|
"tb14-1 tb14-1 tb14-2 tb14-2 tb14-3 tb14-3";
|
|
|
}
|
|
|
|
|
|
.print-table1-grid > div {
|
|
|
border: 1px #000 solid;
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 去掉外边框 */
|
|
|
.form-grid {
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
/* 顶部样式 */
|
|
|
.print-table1-grid-top {
|
|
|
padding: 12px 0 60px 5px;
|
|
|
}
|
|
|
|
|
|
/* 标题样式 */
|
|
|
.print-table1-grid-title1 {
|
|
|
text-align: center;
|
|
|
justify-content: center;
|
|
|
padding: 12px 0;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
/* 居中对齐样式 */
|
|
|
.print-table1-grid-center {
|
|
|
text-align: center;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
|
|
|
/* 底部样式 */
|
|
|
|
|
|
.print-table1-grid-bottom1 {
|
|
|
padding: 12px 0 65px 5px;
|
|
|
}
|
|
|
|
|
|
.print-table1-grid-bottom2 {
|
|
|
padding: 12px 0 65px 5px;
|
|
|
}
|
|
|
|
|
|
.print-table1-grid-bottom3 {
|
|
|
padding: 12px 0 90px 5px;
|
|
|
}
|
|
|
|
|
|
/* 输入框样式 */
|
|
|
.form-input {
|
|
|
width: 100%;
|
|
|
height: 42px;
|
|
|
padding: 6px 10px;
|
|
|
border: 1px solid #DCDFE6;
|
|
|
border-radius: 4px;
|
|
|
background: #fff;
|
|
|
color: #333;
|
|
|
font-size: 18px;
|
|
|
line-height: 1.5;
|
|
|
box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
/* 表头样式 */
|
|
|
.header-cell {
|
|
|
text-align: center;
|
|
|
background-color: #f5f5f5;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
/* 标签单元格 */
|
|
|
.label-cell {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
/* 居中对齐 */
|
|
|
.center-cell {
|
|
|
text-align: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
/* 付款信息特殊样式 */
|
|
|
.payment-info {
|
|
|
text-align: right;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.payment-number {
|
|
|
display: inline-block;
|
|
|
width: 50px;
|
|
|
border-bottom: 1px solid #000;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
/* 付款类型样式 */
|
|
|
.payment-type {
|
|
|
padding-left: 8px;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.payment-type-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.payment-type-item {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
.payment-type-other {
|
|
|
height: 32px;
|
|
|
min-width: 80px;
|
|
|
border-bottom: 2px #000 solid;
|
|
|
margin-left: 24px;
|
|
|
font-size: 18px;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
/* 单选按钮组 */
|
|
|
.radio-group {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.radio-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.radio-item input[type="radio"] {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
/* 质保金行特殊样式 */
|
|
|
.warranty-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.warranty-input {
|
|
|
width: 100px;
|
|
|
}
|
|
|
|
|
|
/* 资金列支渠道 */
|
|
|
.fund-channel {
|
|
|
height: 100px;
|
|
|
vertical-align: top;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
/* 签名区域 */
|
|
|
.signature-area {
|
|
|
height: 100px;
|
|
|
vertical-align: top;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
.signature-label {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.signature-input {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 打印样式 */
|
|
|
@media print {
|
|
|
body {
|
|
|
background: white;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.form-container {
|
|
|
box-shadow: none;
|
|
|
padding: 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="form-container">
|
|
|
<h2 class="form-title">苏州市河道管理处资金划拨审批单</h2>
|
|
|
|
|
|
<div class="print-table1-grid">
|
|
|
<!-- 第1行：项目名称和付款次数 -->
|
|
|
<div style="grid-area: tb1-1" class="print-table1-grid-top">
|
|
|
<div>项目名称：</div>
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="projectName" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${projectName}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb1-2;justify-content: right;align-items: right;">
|
|
|
<div>本次为第 <span style="display: inline-block; width: 50px; border-bottom: 1px solid #000; text-align: center;">
|
|
|
<div style="display: block;">
|
|
|
<input type="number" data-field="paymentTimes" class="form-input" style="width: 100%;">
|
|
|
</div>
|
|
|
<div style="display: none;">${paymentTimes}</div>
|
|
|
</span> 次付款</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第2行：承包商和合同时间 -->
|
|
|
<div style="grid-area: tb2-1" class="print-table1-grid-top">
|
|
|
<div>承包商/供货商：</div>
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="contractor" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${contractor}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb2-2" class="print-table1-grid-top">
|
|
|
<div>合同服务时间：</div>
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="serviceTime" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${serviceTime}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第3行：表头 -->
|
|
|
<div style="grid-area: tb3-1" class="print-table1-grid-title1">付款情形</div>
|
|
|
<div style="grid-area: tb3-2" class="print-table1-grid-title1">金额（单位：元）</div>
|
|
|
<div style="grid-area: tb3-3" class="print-table1-grid-title1">备注</div>
|
|
|
|
|
|
<!-- 第4行：A - 合同金额 -->
|
|
|
<div style="grid-area: tb4-1" class="print-table1-grid-center">A</div>
|
|
|
<div style="grid-area: tb4-2" class="print-table1-grid-center">合同金额</div>
|
|
|
<div style="grid-area: tb4-3" class="print-table1-grid-center">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="contractAmount" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${contractAmount}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb4-4; justify-content: center; align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="contractRemark" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${contractRemark}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第5行：B - 审计金额 -->
|
|
|
<div style="grid-area: tb5-1" class="print-table1-grid-center">B</div>
|
|
|
<div style="grid-area: tb5-2" class="print-table1-grid-center">审计金额</div>
|
|
|
<div style="grid-area: tb5-3" class="print-table1-grid-center">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="auditAmount" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${auditAmount}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb5-4; justify-content: center; align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="auditRemark" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${auditRemark}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第6行：C - 前期累计已付款 -->
|
|
|
<div style="grid-area: tb6-1" class="print-table1-grid-center">C</div>
|
|
|
<div style="grid-area: tb6-2" class="print-table1-grid-center">前期累计已付款</div>
|
|
|
<div style="grid-area: tb6-3" class="print-table1-grid-center">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="previousPayment" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${previousPayment}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb6-4; justify-content: center; align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="previousPaymentRemark" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${previousPaymentRemark}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第7行：D - 本期扣款 -->
|
|
|
<div style="grid-area: tb7-1" class="print-table1-grid-center">D</div>
|
|
|
<div style="grid-area: tb7-2" class="print-table1-grid-center">本期扣款</div>
|
|
|
<div style="grid-area: tb7-3" class="print-table1-grid-center">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="currentPayment" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${currentPayment}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb7-4; justify-content: center; align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="paymentType" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${paymentType}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第8行：E - 本期应付款 -->
|
|
|
<div style="grid-area: tb8-1" class="print-table1-grid-center">E</div>
|
|
|
<div style="grid-area: tb8-2;font-weight: 600" class="print-table1-grid-center">本期应付款</div>
|
|
|
<div style="grid-area: tb8-3;font-weight: 600" class="print-table1-grid-center">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="currentDuePayment" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${currentDuePayment}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb8-4; justify-content: center; align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<div class="radio-group">
|
|
|
<label class="radio-item">
|
|
|
<input type="radio" name="currentPaymentRemark" data-field="currentPaymentRemark" value="预付款">
|
|
|
预付款
|
|
|
</label>
|
|
|
<label class="radio-item">
|
|
|
<input type="radio" name="currentPaymentRemark" data-field="currentPaymentRemark" value="进度款">
|
|
|
进度款
|
|
|
</label>
|
|
|
<label class="radio-item">
|
|
|
<input type="radio" name="currentPaymentRemark" data-field="currentPaymentRemark" value="结算款">
|
|
|
结算款
|
|
|
</label>
|
|
|
<label class="radio-item">
|
|
|
<input type="radio" name="currentPaymentRemark" data-field="currentPaymentRemark" value="质保金">
|
|
|
质保金
|
|
|
</label>
|
|
|
<label class="radio-item">
|
|
|
<input type="radio" name="currentPaymentRemark" data-field="currentPaymentRemark" value="其他">
|
|
|
其他
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: none;">${currentPaymentRemark}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第9行：F - 累计支付 -->
|
|
|
<div style="grid-area: tb9-1" class="print-table1-grid-center">F</div>
|
|
|
<div style="grid-area: tb9-2" class="print-table1-grid-center">累计支付</div>
|
|
|
<div style="grid-area: tb9-3" class="print-table1-grid-center">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="totalPaid" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${totalPaid}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb9-4; justify-content: center; align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="totalPaidRemark" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${totalPaidRemark}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第10行：G - 累计扣款 -->
|
|
|
<div style="grid-area: tb10-1" class="print-table1-grid-center">G</div>
|
|
|
<div style="grid-area: tb10-2" class="print-table1-grid-center">累计扣款</div>
|
|
|
<div style="grid-area: tb10-3" class="print-table1-grid-center">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="totalPlanned" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${totalPlanned}</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb10-4; justify-content: center; align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<input type="text" data-field="totalPlannedRemark" class="form-input">
|
|
|
</div>
|
|
|
<div style="display: none;">${totalPlannedRemark}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第11行：H - 质保金 -->
|
|
|
<div style="grid-area: tb11-1" class="print-table1-grid-center">H</div>
|
|
|
<div style="grid-area: tb11-2" class="print-table1-grid-center">质保金</div>
|
|
|
<div style="grid-area: tb11-3;align-items: center;">
|
|
|
<div style="display: block;">
|
|
|
<div class="warranty-row">
|
|
|
<input type="text" data-field="percent" class="form-input warranty-input">
|
|
|
<span>%，质保期</span>
|
|
|
<input type="text" data-field="zbYear" class="form-input warranty-input">
|
|
|
<span>年，需审计的以审计价为计费依据。</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: none;">
|
|
|
<span style="text-decoration: underline;">${percent}</span>%，质保期<span style="text-decoration: underline;">${zbYear}</span>年，需审计的以审计价为计费依据。
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第12行：资金列支渠道 -->
|
|
|
<div style="grid-area: tb12" class="print-table1-grid-bottom1">
|
|
|
<div>资金列支渠道：</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 第13行：业务科室签名 -->
|
|
|
<div style="grid-area: tb13-1;" class="print-table1-grid-bottom2">
|
|
|
<div>
|
|
|
<div>业务科室：</div>
|
|
|
<div style="padding-top: 32px;"> 经办人：</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="grid-area: tb13-2;" class="print-table1-grid-bottom2">业务科室负责人：</div>
|
|
|
<div style="grid-area: tb13-3;" class="print-table1-grid-bottom2">业务科室分管领导：</div>
|
|
|
|
|
|
<!-- 第14行：财务和单位负责人 -->
|
|
|
<div style="grid-area: tb14-1;" class="print-table1-grid-bottom3">财务审计科：</div>
|
|
|
<div style="grid-area: tb14-2;" class="print-table1-grid-bottom3">财务审计科分管领导：</div>
|
|
|
<div style="grid-area: tb14-3;" class="print-table1-grid-bottom3">单位负责人：</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html> |
