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

update bug

Browse Source
master
lynn 6 months ago
parent 56246d3f77
commit c23824bc5a
2 changed files with 121 additions and 100 deletions
Show Stats Download Patch File Download Diff File

10
src/styles/iconfont.css
Unescape View File

@ -1,11 +1,9 @@
@font-face {
font-family: 'iconfont'; /* project id 3315535 */
src: url('');
src: url('?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.woff2') format('woff2'),
url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.woff') format('woff'),
url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.ttf') format('truetype'),
url('#iconfont') format('svg');
src: url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.woff2') format('woff2'),
url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.woff') format('woff'),
url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.ttf') format('truetype'),
url('#iconfont') format('svg');
}

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

@ -1,27 +1,26 @@
<template>
<div>
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="printHtml" ok-text="打印">
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" ok-text="打印" @on-ok="printHtml">
<template v-slot:normalContent>
<div class="form-switch">
<RadioGroup v-model="currentForm" type="button">
<!-- <Radio label="pre" :disabled="!getBeforeForms">事前审批表格</Radio> -->
<!-- <Radio label="finance" :disabled="!fundLog">财务审核表</Radio> -->
<Radio label="post" :disabled="!getForms">事后支付表格2</Radio>
<Radio label="post" :disabled="!getForms">事后支付表格</Radio>
</RadioGroup>
</div>
<div class="white-container">
<div class="form-container">
<!-- Pre-payment Form -->
<div v-if="currentForm === 'pre'" class="payment-form">
<div v-if="getBeforeForms" v-html="getBeforeForms"></div>
<div v-if="getBeforeForms" v-html="getBeforeForms" />
<div v-else class="no-form-message">暂无事前审批表格内容</div>
</div>
<!-- Post-payment Form -->
<div v-else-if="currentForm === 'post'" class="payment-form">
<div v-else-if="currentForm === 'post'" class="payment-form" ref="printtable">
<!-- 财务审核表内容放到事后支付表头部 -->
<table class="finance-review-table">
<table class="finance-review-table no-print">
<tr>
<th colspan="2" class="finance-header-row">合同信息</th>
<th colspan="5" class="finance-header-row">付款信息</th>
@ -53,11 +52,9 @@
<td colspan="2">{{ fundLog && fundLog.remark || '-' }}</td>
</tr>
</table>
<div v-if="getForms" v-html="getForms"></div>
<div v-if="getForms" v-html="getForms" />
<div v-else class="no-form-message">暂无事后支付表格内容</div>
</div>
</div>
</div>
</template>
@ -66,9 +63,9 @@
</template>
<script>
import { detailFundLog } from "@/api/paymentRegistration/fundLog"
import { detailFundLog } from '@/api/paymentRegistration/fundLog'
import html2canvas from 'html2canvas'
import * as printJS from "print-js"
import * as printJS from 'print-js'
export default {
name: 'PrintPaymentForm',
@ -92,113 +89,131 @@ export default {
try {
const res = await detailFundLog({ id })
this.fundLog = res
// 移除自动设置 currentForm 的逻辑，让外部控制
// if (!this.getBeforeForms) {
// this.currentForm = 'post'
// }
} catch (error) {
console.error('获取付款详情失败:', error)
this.$Message.error('获取付款详情失败')
}
},
replaceControls(element) {
// 替换所有输入框（文本、数字、日期）为纯文本
const inputs = element.getElementsByTagName('input');
const inputs = element.getElementsByTagName('input')
Array.from(inputs).forEach(input => {
const span = document.createElement('span');
let displayText = input.value || '';
const span = document.createElement('span')
let displayText = input.value || ''
if (input.type === 'checkbox' || input.type === 'radio') {
const checkedInput = element.querySelector(`input[name="${input.name}"]:checked`);
const checkedInput = element.querySelector(`input[name="${input.name}"]:checked`)
if (checkedInput) {
const label = element.querySelector(`label[for="${checkedInput.id}"]`);
displayText = label ? label.textContent : checkedInput.value || '';
const label = element.querySelector(`label[for="${checkedInput.id}"]`)
displayText = label ? label.textContent : checkedInput.value || ''
} else {
displayText = '';
displayText = ''
}
} else if (input.type === 'date') {
displayText = input.value ? new Date(input.value).toLocaleDateString() : '';
displayText = input.value ? new Date(input.value).toLocaleDateString() : ''
}
span.textContent = displayText;
// 继承所有关键样式
const style = window.getComputedStyle(input);
span.style.cssText = style.cssText;
[
'width', 'height', 'padding', 'margin', 'font', 'fontSize', 'fontFamily',
'lineHeight', 'verticalAlign', 'border', 'background', 'color',
span.textContent = displayText
const style = window.getComputedStyle(input)
span.style.cssText = style.cssText
;[
'width',
'height',
'padding',
'margin',
'font',
'fontSize',
'fontFamily',
'lineHeight',
'verticalAlign',
'border',
'background',
'color',
'boxSizing'
].forEach(key => {
span.style[key] = style[key];
});
// 全部居中对齐，充满td
span.style.width = '100%';
span.style.display = 'block';
span.style.textAlign = 'center';
input.parentNode.replaceChild(span, input);
});
// 替换所有下拉框为纯文本
const selects = element.getElementsByTagName('select');
span.style[key] = style[key]
})
span.style.width = '100%'
span.style.display = 'block'
span.style.textAlign = 'center'
input.parentNode.replaceChild(span, input)
})
const selects = element.getElementsByTagName('select')
Array.from(selects).forEach(select => {
const span = document.createElement('span');
span.textContent = select.options[select.selectedIndex]?.text || '';
const style = window.getComputedStyle(select);
span.style.cssText = style.cssText;
[
'width', 'height', 'padding', 'margin', 'font', 'fontSize', 'fontFamily',
'lineHeight', 'verticalAlign', 'border', 'background', 'color',
const span = document.createElement('span')
span.textContent = select.options[select.selectedIndex]?.text || ''
const style = window.getComputedStyle(select)
span.style.cssText = style.cssText
;[
'width',
'height',
'padding',
'margin',
'font',
'fontSize',
'fontFamily',
'lineHeight',
'verticalAlign',
'border',
'background',
'color',
'boxSizing'
].forEach(key => {
span.style[key] = style[key];
});
span.style.width = '100%';
span.style.display = 'block';
span.style.textAlign = 'center';
select.parentNode.replaceChild(span, select);
});
// 替换所有文本域为纯文本
const textareas = element.getElementsByTagName('textarea');
span.style[key] = style[key]
})
span.style.width = '100%'
span.style.display = 'block'
span.style.textAlign = 'center'
select.parentNode.replaceChild(span, select)
})
const textareas = element.getElementsByTagName('textarea')
Array.from(textareas).forEach(textarea => {
const span = document.createElement('span');
span.textContent = textarea.value || '';
const style = window.getComputedStyle(textarea);
span.style.cssText = style.cssText;
[
'width', 'height', 'padding', 'margin', 'font', 'fontSize', 'fontFamily',
'lineHeight', 'verticalAlign', 'border', 'background', 'color',
const span = document.createElement('span')
span.textContent = textarea.value || ''
const style = window.getComputedStyle(textarea)
span.style.cssText = style.cssText
;[
'width',
'height',
'padding',
'margin',
'font',
'fontSize',
'fontFamily',
'lineHeight',
'verticalAlign',
'border',
'background',
'color',
'boxSizing'
].forEach(key => {
span.style[key] = style[key];
});
span.style.width = '100%';
span.style.display = 'block';
span.style.textAlign = 'center';
textarea.parentNode.replaceChild(span, textarea);
});
span.style[key] = style[key]
})
span.style.width = '100%'
span.style.display = 'block'
span.style.textAlign = 'center'
textarea.parentNode.replaceChild(span, textarea)
})
},
async print() {
try {
// 创建临时打印容器
const tempContainer = document.createElement('div')
tempContainer.style.position = 'absolute'
tempContainer.style.left = '-9999px'
tempContainer.style.top = '-9999px'
document.body.appendChild(tempContainer)
// 复制原始内容到临时容器
const originalContent = this.$refs['printtable'].cloneNode(true)
tempContainer.appendChild(originalContent)
// 在临时容器中替换控件
this.replaceControls(tempContainer)
// 使用临时容器进行打印
const canvas = await html2canvas(tempContainer, {
backgroundColor: null,
useCORS: true,
useCORS: true
})
// 打印完成后移除临时容器
document.body.removeChild(tempContainer)
printJS({
printable: canvas.toDataURL(),
type: 'image',
@ -215,12 +230,16 @@ export default {
return Number(val).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
},
printHtml() {
// 克隆打印区域
const printNode = this.$refs.printtable.cloneNode(true);
const printNode = this.$refs.printtable.cloneNode(true)
// 移除财务审核表
const financeTable = printNode.querySelector('.finance-review-table')
if (financeTable) {
financeTable.remove()
}
// 替换控件为纯文本（保留样式）
this.replaceControls(printNode);
this.replaceControls(printNode)
const win = window.open('', '_blank');
const win = window.open('', '_blank')
win.document.write(`
<html>
<head>
@ -239,11 +258,11 @@ export default {
</div>
</body>
</html>
`);
win.document.close();
win.focus();
win.print();
win.close();
`)
win.document.close()
win.focus()
win.print()
win.close()
}
}
}
@ -310,15 +329,18 @@ export default {
.finance-review-header {
margin-bottom: 16px;
}
.payment-registration-row {
display: flex;
margin-bottom: 4px;
}
.payment-registration-row-title {
width: 100px;
font-weight: bold;
color: #333;
}
.payment-registration-row-content {
flex: 1;
color: #666;
@ -328,13 +350,14 @@ export default {
.white-container {
padding: 0;
}
.form-container {
padding: 0;
}
.payment-form {
border: 1px solid #000;
}
.no-print {
display: none !important;
}
}
</style>
</style>

Write Preview
Loading…
Cancel
Save