DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(crm/contract): 优化合同预览与导出功能

Browse Source 
1.  隐藏打印预览按钮
2.  调整合同预览页面样式间距与logo位置
3.  修改合同金额字段保留小数位数为3位
4.  优化PDF导出分页逻辑，按空白行自动分页
This commit is contained in:
砂糖
2026-06-05 10:41:33 +08:00
parent 705d929d6e
commit a5323aea76
3 changed files with 78 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
klp-ui/src/views/crm/contract/components/ContractPreview.vue
View File

@@ -4,7 +4,7 @@
<h3 style="margin-bottom: 20px; color: #303133; display: flex; justify-content: space-between; align-items: center;">
{{ contract.contractName }}
<span>
<el-button type="primary" icon="el-icon-printer" @click="printContract">打印预览</el-button>
<!-- <el-button type="primary" icon="el-icon-printer" @click="printContract">打印预览</el-button> -->
<el-select v-hasPermi="['crm:contract:status']" v-model="contract.status" placeholder="请选择合同状态" style="width: 150px; margin-left: 10px;" @change="handleStatusChange">
<el-option label="草稿" :value="0" />
<el-option label="已生效" :value="1" />
@@ -172,15 +172,14 @@ export default {
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'SimSun','宋体',serif; color: #000; background: #e8e8e8; font-size: 12px; line-height: 1.6; display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.a4-page { width: 794px; min-height: 1123px; padding: 30px 40px; background: #fff; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.company-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.contract-title { text-align: center; font-size: 22px; font-weight: bold; letter-spacing: 6px; margin-bottom: 18px; }
.info-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; line-height: 2; }
.section-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th, td { border: 1px solid #000; padding: 3px 4px; text-align: center; }
th { background-color: #f5f5f5; font-weight: bold; }
.total-row td { font-weight: bold; }
.sign-section { margin-top: 30px; font-size: 12px; line-height: 2.2; }
.company-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.contract-title { text-align: center; font-size: 20px; font-weight: bold; letter-spacing: 6px; margin-bottom: 14px; }
.info-row { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; line-height: 2; }
.section-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 3px 4px; text-align: center; font-size: 11px; }
th { font-weight: bold; }
.sign-section { margin-top: 24px; font-size: 12px; line-height: 2.2; }
.sign-section .col { width: 48%; }
.sign-row { display: flex; justify-content: space-between; }
.print-toolbar { position: fixed; top: 0; right: 20px; z-index: 100; display: flex; gap: 8px; padding: 10px; }
@@ -197,13 +196,13 @@ export default {
<body>
<div class="print-toolbar"><button class="btn-print" onclick="window.print()">打 印</button></div>
<div class="a4-page" style="position:relative;">
<img src="${contractLogo}" style="position:absolute;left:20px;top:20px;height:80px;" crossorigin="anonymous" />
<img src="${contractLogo}" style="position:absolute;left:40px;top:40px;height:80px;" crossorigin="anonymous" />
<div style="text-align:center;padding-top:10px;">
<div style="font-size:20px;font-weight:bold;letter-spacing:2px;">嘉祥科伦普重工有限公司</div>
</div>
<div style="display:flex;justify-content:center;align-items:baseline;margin:12px 0 8px 0;">
<div style="position:relative;margin:12px 0 8px 0;text-align:center;">
<div style="font-size:22px;font-weight:bold;letter-spacing:6px;">产 品 销 售 合 同</div>
<div style="font-size:11px;margin-left:40px;">合同编号：${row.contractCode || ''}</div>
<div style="position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:11px;">合同编号：${row.contractCode || ''}</div>
</div>
<div class="info-row">
<div style="width:55%;">