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

fix(crm/contract): 优化合同预览与导出的样式及重复渲染问题

Browse Source 
1.  为产品内容组件添加值相等判断，避免重复解析内容
2.  统一合同预览和导出弹窗的表格边框样式为2px粗边框
3.  将合同预览的字体改为黑体并调整字重，优化显示效果
4.  调整表格字体粗细的配置标准
This commit is contained in:
砂糖
2026-06-08 16:31:17 +08:00
parent fac59f4346
commit 59ceeed4a4
3 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
klp-ui/src/views/crm/contract/components/ContractExportDialog.vue
View File

@@ -143,32 +143,32 @@ export default {
const hasCol = (key) => activeCols.some(c => c.key === key); const hasCol = (key) => activeCols.some(c => c.key === key);
const hasRow = (key) => activeRows.some(r => r.key === key); const hasRow = (key) => activeRows.some(r => r.key === key);
let headerCells = '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:30px;">序号</th>'; let headerCells = '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:30px;">序号</th>';
if (hasCol('spec')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:80px;">规格(mm)</th>'; if (hasCol('spec')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:80px;">规格(mm)</th>';
if (hasCol('material')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:60px;">材质</th>'; if (hasCol('material')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:60px;">材质</th>';
if (hasCol('quantity')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:55px;">数量(吨)</th>'; if (hasCol('quantity')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:55px;">数量(吨)</th>';
if (hasCol('taxPrice')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:70px;">含税单价(元/吨)</th>'; if (hasCol('taxPrice')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:70px;">含税单价(元/吨)</th>';
if (hasCol('taxDivisor')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:45px;">税率除数</th>'; if (hasCol('taxDivisor')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:45px;">税率除数</th>';
if (hasCol('noTaxPrice')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:70px;">无税单价(元/吨)</th>'; if (hasCol('noTaxPrice')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:70px;">无税单价(元/吨)</th>';
if (hasCol('taxTotal')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:70px;">含税总额(元)</th>'; if (hasCol('taxTotal')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:70px;">含税总额(元)</th>';
if (hasCol('noTaxTotal')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:70px;">无税总额(元)</th>'; if (hasCol('noTaxTotal')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:70px;">无税总额(元)</th>';
if (hasCol('taxAmount')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:55px;">税额(元)</th>'; if (hasCol('taxAmount')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:55px;">税额(元)</th>';
if (hasCol('remark')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:80px;">备注</th>'; if (hasCol('remark')) headerCells += '<th style="border:2px solid #000;padding:4px 4px;font-weight:bold;width:80px;">备注</th>';
const colCount = activeCols.length + 1; const colCount = activeCols.length + 1;
let bodyRows = ''; let bodyRows = '';
products.forEach((product, index) => { products.forEach((product, index) => {
let cells = `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${index + 1}</td>`; let cells = `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${index + 1}</td>`;
if (hasCol('spec')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${product.spec || ''}</td>`; if (hasCol('spec')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${product.spec || ''}</td>`;
if (hasCol('material')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${product.material || ''}</td>`; if (hasCol('material')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${product.material || ''}</td>`;
if (hasCol('quantity')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${product.quantity || ''}</td>`; if (hasCol('quantity')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${product.quantity || ''}</td>`;
if (hasCol('taxPrice')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${product.taxPrice || ''}</td>`; if (hasCol('taxPrice')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${product.taxPrice || ''}</td>`;
if (hasCol('taxDivisor')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${product.taxDivisor || '1.13'}</td>`; if (hasCol('taxDivisor')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${product.taxDivisor || '1.13'}</td>`;
if (hasCol('noTaxPrice')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${(product.noTaxPrice || 0).toFixed(3)}</td>`; if (hasCol('noTaxPrice')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${(product.noTaxPrice || 0).toFixed(3)}</td>`;
if (hasCol('taxTotal')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${(product.taxTotal || 0).toFixed(3)}</td>`; if (hasCol('taxTotal')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${(product.taxTotal || 0).toFixed(3)}</td>`;
if (hasCol('noTaxTotal')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${(product.noTaxTotal || 0).toFixed(3)}</td>`; if (hasCol('noTaxTotal')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${(product.noTaxTotal || 0).toFixed(3)}</td>`;
if (hasCol('taxAmount')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${(product.taxAmount || 0).toFixed(3)}</td>`; if (hasCol('taxAmount')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${(product.taxAmount || 0).toFixed(3)}</td>`;
if (hasCol('remark')) cells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;max-width:100px;word-wrap:break-word;">${product.remark || ''}</td>`; if (hasCol('remark')) cells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;max-width:100px;word-wrap:break-word;">${product.remark || ''}</td>`;
bodyRows += `<tr>${cells}</tr>`; bodyRows += `<tr>${cells}</tr>`;
}); });
@@ -183,7 +183,7 @@ export default {
activeCols.forEach((col) => { activeCols.forEach((col) => {
if (cellIdx < 2) { if (cellIdx < 2) {
if (cellIdx === 0) { if (cellIdx === 0) {
totalCells += `<td colspan="3" style="border:1px solid #000;padding:4px 4px;font-weight:bold;text-align:center;">合&nbsp;&nbsp;计</td>`; totalCells += `<td colspan="3" style="border:2px solid #000;padding:4px 4px;font-weight:bold;text-align:center;">合&nbsp;&nbsp;计</td>`;
} }
} else { } else {
let val = ''; let val = '';
@@ -191,7 +191,7 @@ export default {
else if (col.key === 'taxTotal') val = totalTax.toFixed(3); else if (col.key === 'taxTotal') val = totalTax.toFixed(3);
else if (col.key === 'noTaxTotal') val = totalNoTax.toFixed(3); else if (col.key === 'noTaxTotal') val = totalNoTax.toFixed(3);
else if (col.key === 'taxAmount') val = totalTaxAmt.toFixed(3); else if (col.key === 'taxAmount') val = totalTaxAmt.toFixed(3);
totalCells += `<td style="border:1px solid #000;padding:3px 4px;text-align:center;">${val}</td>`; totalCells += `<td style="border:2px solid #000;padding:3px 4px;text-align:center;">${val}</td>`;
} }
cellIdx++; cellIdx++;
}); });
@@ -199,14 +199,14 @@ export default {
const html = ` const html = `
<table style="width:100%;border-collapse:collapse;font-size:11px;margin-bottom:6px;"> <table style="width:100%;border-collapse:collapse;font-size:11px;margin-bottom:6px;">
<tr> <tr>
<td colspan="4" style="border:1px solid #000;padding:3px 6px;font-weight:bold;text-align:left;">产品名称：${productData.productName || ''}</td> <td colspan="4" style="border:2px solid #000;padding:3px 6px;font-weight:bold;text-align:left;">产品名称：${productData.productName || ''}</td>
<td colspan="${colCount - 4 > 0 ? colCount - 4 : 1}" style="border:1px solid #000;padding:3px 6px;font-weight:bold;text-align:left;">生产厂家：嘉祥科伦普重工有限公司</td> <td colspan="${colCount - 4 > 0 ? colCount - 4 : 1}" style="border:2px solid #000;padding:3px 6px;font-weight:bold;text-align:left;">生产厂家：嘉祥科伦普重工有限公司</td>
</tr> </tr>
<tr>${headerCells}</tr> <tr>${headerCells}</tr>
${bodyRows} ${bodyRows}
${hasRow('totalRow') ? `<tr>${totalCells}</tr>` : ''} ${hasRow('totalRow') ? `<tr>${totalCells}</tr>` : ''}
${hasRow('amountWordsRow') ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;font-weight:bold;text-align:left;">合计人民币（大写）：${totalAmountInWords}</td></tr>` : ''} ${hasRow('amountWordsRow') ? `<tr><td colspan="${colCount}" style="border:2px solid #000;padding:4px 6px;font-weight:bold;text-align:left;">合计人民币（大写）：${totalAmountInWords}</td></tr>` : ''}
${hasRow('remarkRow') && productData.remark ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;text-align:left;">备注：${productData.remark}</td></tr>` : ''} ${hasRow('remarkRow') && productData.remark ? `<tr><td colspan="${colCount}" style="border:2px solid #000;padding:4px 6px;text-align:left;">备注：${productData.remark}</td></tr>` : ''}
</table>`; </table>`;
return html; return html;
}, },
@@ -293,15 +293,15 @@ export default {
<head><meta charset="utf-8"><title>合同预览</title> <head><meta charset="utf-8"><title>合同预览</title>
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * { 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; } body { font-family: 'SimHei','黑体',sans-serif; font-weight: 600; 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); } .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: 6px; } .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; } .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; } .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; } .section-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; } table { width: 100%; border-collapse: separate; border-spacing: 0; border-top: 2px solid #000; border-left: 2px solid #000; }
th, td { border: 1px solid #000; padding: 3px 4px; text-align: center; font-size: 11px; } th, td { border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 3px 4px; text-align: center; font-size: 11px; }
th { font-weight: bold; } th { font-weight: 700; }
.sign-section { margin-top: 24px; font-size: 12px; line-height: 2.2; } .sign-section { margin-top: 24px; font-size: 12px; line-height: 2.2; }
.sign-section .col { width: 48%; } .sign-section .col { width: 48%; }
.sign-row { display: flex; justify-content: space-between; } .sign-row { display: flex; justify-content: space-between; }

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

@@ -170,15 +170,15 @@ export default {
<style> <style>
@page { size: A4; margin: 15mm; } @page { size: A4; margin: 15mm; }
* { margin: 0; padding: 0; box-sizing: border-box; } * { 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; } body { font-family: 'SimHei','黑体',sans-serif; font-weight: 600; 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); } .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: 6px; } .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; } .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; } .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; } .section-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; } table { width: 100%; border-collapse: separate; border-spacing: 0; border-top: 2px solid #000; border-left: 2px solid #000; }
th, td { border: 1px solid #000; padding: 3px 4px; text-align: center; font-size: 11px; } th, td { border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 3px 4px; text-align: center; font-size: 11px; }
th { font-weight: bold; } th { font-weight: 700; }
.sign-section { margin-top: 24px; font-size: 12px; line-height: 2.2; } .sign-section { margin-top: 24px; font-size: 12px; line-height: 2.2; }
.sign-section .col { width: 48%; } .sign-section .col { width: 48%; }
.sign-row { display: flex; justify-content: space-between; } .sign-row { display: flex; justify-content: space-between; }

3
klp-ui/src/views/crm/contract/components/ProductContent.vue
View File

@@ -216,6 +216,9 @@ export default {
this.productName = ''; this.productName = '';
return; return;
} }
if (newValue === this.jsonContent) {
return;
}
this.parseContent(newValue); this.parseContent(newValue);
}, },
immediate: true immediate: true