xiaoy
/
contract-business-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成表格优化

Browse Source
master
lynn 3 months ago
parent b887aff3dd
commit 0673a1a480
4 changed files with 764 additions and 12 deletions
Show Stats Download Patch File Download Diff File

459
gridPaymentForm.html
Unescape View File

@ -0,0 +1,459 @@
<!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>

216
printRegistration.html
Unescape View File

@ -0,0 +1,216 @@
<div style="background: #fff; padding: 20px;">
<div style="position: relative; width: 100%; padding: 20px;">
<h2 style="text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处报销贴单</h2>
<div style="width: 100%; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
<div style="font-size: 16px;">科室：<div style="display: inline-block;"><div style="display: block;"><input type="text" data-field="department" style="width: 120px; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);"></div><div style="display: none;">${department}</div></div></div>
<div style="font-size: 16px;"><div style="display: inline-block;"><div style="display: block;"><input type="date" data-field="date" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2); text-align: center;"></div><div style="display: none;">${date}</div></div></div>
</div>
<table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif; table-layout: fixed;">
<colgroup>
<col style="width: 32%">
<col style="width: 31%">
<col style="width: 16%">
<col style="width: 16%">
<col style="width: 5%; min-width: 40px; max-width: 40px;">
</colgroup>
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; font-weight: bold;">用途说明</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; font-weight: bold;">金额</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; font-weight: bold;" rowspan="2">报销(领款)人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; font-weight: bold;" rowspan="2">
<div style="display: block;">
<input type="text" data-field="handler" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${handler}</div>
</td>
<td style="border: 1px solid #000; padding: 4px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center; writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 8px; width: 40px !important; min-width: 40px !important; max-width: 40px !important;" rowspan="12">
<div style="font-size: 14px;">附单据 <div style="display: inline-block;"><div style="display: block;"><input type="text" data-field="receipts" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2); text-align: center;"></div><div style="display: none;">${receipts}</div></div> 张</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">
<div style="display: block;">
<input type="text" data-field="purpose1" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose1}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">
<div style="display: block;">
<input type="text" data-field="amount1" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount1}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">
<div style="display: block;">
<input type="text" data-field="purpose2" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose2}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">
<div style="display: block;">
<input type="text" data-field="amount2" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount2}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: white; text-align: center;" rowspan="2">科室负责人</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">
<div style="display: block;">
</div>
<div style="display: none;">${departmentHead}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">
<div style="display: block;">
<input type="text" data-field="purpose3" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose3}</div>
</td>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="amount3" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount3}</div>
</td>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">
<div style="display: block;">
<input type="text" data-field="purpose4" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose4}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="amount4" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount4}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: white; text-align: center;" rowspan="2">财务审计科审核</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">
<div style="display: block;">
</div>
<div style="display: none;">${financeApproval}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">
<div style="display: block;">
<input type="text" data-field="purpose5" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose5}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="amount5" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount5}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">
<div style="display: block;">
<input type="text" data-field="purpose6" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose6}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="amount6" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount6}</div>
</td>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: white; text-align: center;" rowspan="2">分管领导审核</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">
<div style="display: block;">
</div>
<div style="display: none;">${leaderApproval}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">
<div style="display: block;">
<input type="text" data-field="purpose7" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose7}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="amount7" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount7}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">
<div style="display: block;">
<input type="text" data-field="purpose8" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose8}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="amount8" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount8}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: white; text-align: center;" rowspan="2">财务分管领导审核</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">
<div style="display: block;">
</div>
<div style="display: none;">${financeLeaderApproval}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">
<div style="display: block;">
<input type="text" data-field="purpose9" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${purpose9}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="amount9" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${amount9}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; font-weight: bold; text-align: center;">合计</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">
<div style="display: block;">
<input type="text" data-field="total" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${total}</div>
</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #white; text-align: center;" rowspan="2">单位负责人审批</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">
<div style="display: block;">
</div>
<div style="display: none;">${unitLeaderApproval}</div>
</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; font-weight: bold; text-align: center;">报销金额(大写)</td>
<td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">
<div style="display: block;">
<input type="text" data-field="upperCaseAmount" style="width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2);text-align: center;">
</div>
<div style="display: none;">${upperCaseAmount}</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

27
src/views/contract/components/paymentRegistration.vue
Unescape View File

@ -455,6 +455,11 @@ import { replaceControls } from './printPaymentForm.vue'
// 添加金额转大写的工具函数
function numberToChinese(num) {
// 特殊处理：当金额为0时，直接返回"零元"
if (num === 0) {
return '零元'
}
const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟', '万']
const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
const [integer, decimal] = num.toString().split('.')
@ -490,6 +495,7 @@ function numberToChinese(num) {
result = result.replace(/零+$/, '')
result = result.replace(/零+/, '零')
}
if (decimal) {
const decimalNum = parseInt(decimal)
if (decimalNum > 0) {
@ -499,6 +505,7 @@ function numberToChinese(num) {
}
}
}
if (!decimal || parseInt(decimal) === 0) {
result += '整'
}
@ -1690,7 +1697,7 @@ export default {
}
this.otherTotal = wanTotal * 10000 + qianTotal * 1000 + baiTotal * 100 + shiTotal * 10 + yuanTotal + jiaoTotal * 0.1 + fenTotal * 0.01
this.otherTotal = this.otherTotal.toFixed(2)
this.otherTotal = parseFloat(this.otherTotal.toFixed(2))
// console.log('this.otherTotal', this.otherTotal)
this.total = 0
// 只计算以 amount 开头的输入框
@ -1704,22 +1711,24 @@ export default {
const totalInput = dom.querySelector('input[data-field="total"]')
if (totalInput) {
if (this.total===0) {
this.total = parseFloat(totalInput.value) || 0
this.total = parseFloat(totalInput.value.replace(/￥/g, '')) || 0
} else {
totalInput.value = this.total.toFixed(2)
totalInput.value = "￥"+this.total.toFixed(2)
}
}
// 更新大写金额
const upperCaseInput = dom.querySelector('input[data-field="upperCaseAmount"]')
if (upperCaseInput) {
if (this.total !== 0) {
upperCaseInput.value = numberToChinese(this.total)
}
upperCaseInput.value = numberToChinese(this.total)
console.log('更新大写金额:', upperCaseInput.value, this.total)
}
if (this.otherTotal !== 0) {
if (this.otherTotal !== 0) {
upperCaseInput.value = numberToChinese(this.otherTotal)
}
console.log('更新大写金额2:', upperCaseInput.value, this.otherTotal)
}
},
@ -1730,7 +1739,7 @@ export default {
const upperCaseInput = dom.querySelector('input[data-field="upperCaseAmount"]')
if (totalInput && upperCaseInput) {
this.total = parseFloat(totalInput.value) || 0
this.total = parseFloat(totalInput.value.replace(/￥/g, '')) || 0
upperCaseInput.value = numberToChinese(this.total)
}
},

74
src/views/contract/components/printPaymentForm.vue
Unescape View File

@ -79,6 +79,10 @@ import * as printJS from 'print-js'
// 添加金额转大写的工具函数
function numberToChinese(num) {
if (num === 0) {
return '零元'
}
const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟', '万']
const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
const [integer, decimal] = num.toString().split('.')
@ -123,6 +127,7 @@ function numberToChinese(num) {
}
}
}
if (!decimal || parseInt(decimal) === 0) {
result += '整'
}
@ -153,6 +158,12 @@ export default {
if (newVal) {
this.$nextTick(() => {
this.setupAmountListeners()
// 如果是差旅报销单，默认设置为横向打印
if (newVal.includes('差旅报销单')) {
this.printOrientation = 'landscape'
}else{
this.printOrientation = 'portrait'
}
})
}
},
@ -537,7 +548,7 @@ export default {
// 更新总金额输入框
const totalInput = dom.querySelector('input[data-field="total"]')
if (totalInput) {
totalInput.value = total.toFixed(2)
totalInput.value = "￥"+total.toFixed(2)
console.log('更新总金额输入框:', totalInput.value)
}
@ -560,7 +571,7 @@ export default {
const upperCaseInput = dom.querySelector('input[data-field="upperCaseAmount"]')
if (totalInput && upperCaseInput) {
const total = parseFloat(totalInput.value) || 0
const total = parseFloat(totalInput.value.replace(/￥/g, '')) || 0
upperCaseInput.value = numberToChinese(total)
console.log('从总金额更新大写金额:', total, upperCaseInput.value)
}
@ -702,6 +713,12 @@ export default {
const originalContent = this.$refs['printtable'].cloneNode(true)
tempContainer.appendChild(originalContent)
// 移除财务审核表
const financeTable = tempContainer.querySelector('.finance-review-table')
if (financeTable) {
financeTable.remove()
}
this.replaceControls(tempContainer)
const canvas = await html2canvas(tempContainer, {
@ -804,7 +821,7 @@ export default {
const hasTravelExpense = this.getForms && this.getForms.includes('差旅报销单');
const hasUtilityBill = this.getForms && this.getForms.includes('水电费结算单');
const hasReimbursementForm2 = this.getForms && this.getForms.includes('报销贴单2');
const scale = hasTravelExpense ? 0.66 : 0.9;
const scale = hasTravelExpense ? 1 : 1;
const offset = hasTravelExpense ? 62 : 5;
const translateX = ((pageWidth - pageWidth * scale) / 2 + offset).toFixed(2) + 'mm';
@ -878,6 +895,33 @@ export default {
table tr { height: 80px !important; min-height: 60px !important; }
` : ''}
/* 所有打印表格字体放大1.5倍 */
table td[style*="font-size: 16px"] { font-size: 24px !important; }
table span[style*="font-size: 16px"] { font-size: 24px !important; }
table div[style*="font-size: 16px"] { font-size: 24px !important; }
table h2[style*="font-size: 20px"] { font-size: 30px !important; }
table h3[style*="font-size: 18px"] { font-size: 27px !important; }
table h4[style*="font-size: 16px"] { font-size: 24px !important; }
/* 覆盖所有可能的字体大小 */
table * { font-size: 24px !important; }
table td { font-size: 24px !important; }
table span { font-size: 24px !important; }
table div { font-size: 24px !important; }
table input { font-size: 24px !important; }
table th { font-size: 24px !important; }
/* 表格外的标题和申请日期字体放大 */
h2[style*="font-size: 20px"] { font-size: 30px !important; }
h3[style*="font-size: 18px"] { font-size: 27px !important; }
h4[style*="font-size: 16px"] { font-size: 24px !important; }
div[style*="font-size: 16px"] { font-size: 24px !important; }
span[style*="font-size: 16px"] { font-size: 24px !important; }
p[style*="font-size: 16px"] { font-size: 24px !important; }
/* 覆盖所有元素 */
* { font-size: 24px !important; }
h2 { font-size: 30px !important; }
h3 { font-size: 27px !important; }
h4 { font-size: 24px !important; }
/* 报销贴单2特殊行高控制 */
${hasReimbursementForm2 ? `
table td { height: 80px !important; min-height: 80px !important; line-height: 2.0 !important; }
@ -898,6 +942,30 @@ export default {
transform-origin: top left;
display: inline-block;
}
/* 打印时所有表格字体放大1.5倍 */
table td[style*="font-size: 16px"] { font-size: 24px !important; }
table span[style*="font-size: 16px"] { font-size: 24px !important; }
table div[style*="font-size: 16px"] { font-size: 24px !important; }
table h2[style*="font-size: 20px"] { font-size: 30px !important; }
table h3[style*="font-size: 18px"] { font-size: 27px !important; }
table h4[style*="font-size: 16px"] { font-size: 24px !important; }
table * { font-size: 24px !important; }
table td { font-size: 24px !important; }
table span { font-size: 24px !important; }
table div { font-size: 24px !important; }
table input { font-size: 24px !important; }
table th { font-size: 24px !important; }
/* 打印时表格外的标题和申请日期字体放大 */
h2[style*="font-size: 20px"] { font-size: 30px !important; }
h3[style*="font-size: 18px"] { font-size: 27px !important; }
h4[style*="font-size: 16px"] { font-size: 24px !important; }
div[style*="font-size: 16px"] { font-size: 24px !important; }
span[style*="font-size: 16px"] { font-size: 24px !important; }
p[style*="font-size: 16px"] { font-size: 24px !important; }
* { font-size: 24px !important; }
h2 { font-size: 30px !important; }
h3 { font-size: 27px !important; }
h4 { font-size: 24px !important; }
}
</style>
</head>

Write Preview
Loading…
Cancel
Save