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

4
src/styles/iconfont.css
Unescape View File

@ -1,8 +1,6 @@
@font-face { @font-face {
font-family: 'iconfont'; /* project id 3315535 */ font-family: 'iconfont'; /* project id 3315535 */
src: url(''); src: url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.woff2') format('woff2'),
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.woff') format('woff'),
url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.ttf') format('truetype'), url('//at.alicdn.com/t/font_3315535_plfy9kf0sp.ttf') format('truetype'),
url('#iconfont') format('svg'); url('#iconfont') format('svg');

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

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