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

表格打印优化

Browse Source
master
lynn 5 months ago
parent 4af4a3bdb6
commit 36772a5700
2 changed files with 545 additions and 14 deletions
Show Stats Download Patch File Download Diff File

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

@ -983,9 +983,149 @@ export default {
// 使用setTimeout确保DOM完全加载
setTimeout(() => {
const sdateAmountInputs = dom.querySelectorAll('input[data-field^="sdate"]')
// 移除旧的监听器
sdateAmountInputs.forEach(input => {
input.removeEventListener('input', this.caculateRoadDay)
input.removeEventListener('change', this.caculateRoadDay)
input.removeEventListener('blur', this.caculateRoadDay)
})
// 添加新的监听器
sdateAmountInputs.forEach(input => {
input.addEventListener('input', this.caculateRoadDay)
input.addEventListener('change', this.caculateRoadDay)
input.addEventListener('blur', this.caculateRoadDay)
})
const edateAmountInputs = dom.querySelectorAll('input[data-field^="edate"]')
// 移除旧的监听器
edateAmountInputs.forEach(input => {
input.removeEventListener('input', this.caculateRoadDay)
input.removeEventListener('change', this.caculateRoadDay)
input.removeEventListener('blur', this.caculateRoadDay)
})
// 添加新的监听器
edateAmountInputs.forEach(input => {
input.addEventListener('input', this.caculateRoadDay)
input.addEventListener('change', this.caculateRoadDay)
input.addEventListener('blur', this.caculateRoadDay)
})
// 获取所有以 wan 开头的输入框
const wanAmountInputs = dom.querySelectorAll('input[data-field^="wan"]')
// 移除旧的监听器
wanAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
wanAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 qian 开头的输入框
const qianAmountInputs = dom.querySelectorAll('input[data-field^="qian"]')
// 移除旧的监听器
qianAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
qianAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 bai 开头的输入框
const baiAmountInputs = dom.querySelectorAll('input[data-field^="bai"]')
// 移除旧的监听器
baiAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
baiAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 shi 开头的输入框
const shiAmountInputs = dom.querySelectorAll('input[data-field^="shi"]')
// 移除旧的监听器
shiAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
shiAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 yuan 开头的输入框
const yuanAmountInputs = dom.querySelectorAll('input[data-field^="yuan"]')
// 移除旧的监听器
yuanAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
yuanAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 jiao 开头的输入框
const jiaoAmountInputs = dom.querySelectorAll('input[data-field^="jiao"]')
// 移除旧的监听器
jiaoAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
jiaoAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 fen 开头的输入框
const fenAmountInputs = dom.querySelectorAll('input[data-field^="fen"]')
// 移除旧的监听器
fenAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
fenAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 amount 开头的输入框
const amountInputs = dom.querySelectorAll('input[data-field^="amount"]')
console.log('找到的金额输入框:', amountInputs.length, dom)
// 移除旧的监听器
amountInputs.forEach(input => {
@ -1005,6 +1145,41 @@ export default {
this.calculateTotal()
}, 100)
},
caculateRoadDay() {
const sdateInput = this.$refs.mainTable.querySelector('input[data-field^="sdate"]')
const edateInput = this.$refs.mainTable.querySelector('input[data-field^="edate"]')
const sdate = sdateInput.value
const edate = edateInput.value
if (sdate && edate) {
const s = new Date(sdate)
const e = new Date(edate)
// 计算天数差
const roadDay = Math.floor((e - s) / (1000 * 60 * 60 * 24))
console.log('roadDay', sdate, edate, roadDay)
const roadDayInput = this.$refs.mainTable.querySelector('input[data-field="roadDay"]')
if (roadDayInput) {
roadDayInput.value = roadDay
}
}
if (this.$refs.zoomedTable) {
const sdateZoomedInput = this.$refs.zoomedTable.querySelector('input[data-field^="sdate"]')
const edateZoomedInput = this.$refs.zoomedTable.querySelector('input[data-field^="edate"]')
const sdateZoomed = sdateZoomedInput.value
const edateZoomed = edateZoomedInput.value
if (sdateZoomed && edateZoomed) {
const s = new Date(sdateZoomed)
const e = new Date(edateZoomed)
// 计算天数差
const roadDay = Math.floor((e - s) / (1000 * 60 * 60 * 24))
console.log('roadDay', sdateZoomed, edateZoomed, roadDay)
const roadDayInput = this.$refs.zoomedTable.querySelector('input[data-field="roadDay"]')
if (roadDayInput) {
roadDayInput.value = roadDay
}
}
}
},
calculateTotal() {
// 计算原始表格的总金额
@ -1016,6 +1191,92 @@ export default {
calculateTableTotal(dom) {
if (!dom) return
let wanTotal = 0
const wanAmountInputs = dom.querySelectorAll('input[data-field^="wan"]')
wanAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
wanTotal += value
})
const wanInput = dom.querySelector('input[data-field="wTotal"]')
if (wanInput) {
wanInput.value = wanTotal===0?'':wanTotal
}
let qianTotal = 0
const qianAmountInputs = dom.querySelectorAll('input[data-field^="qian"]')
qianAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
qianTotal += value
})
const qianInput = dom.querySelector('input[data-field="qTotal"]')
if (qianInput) {
qianInput.value = qianTotal===0?'':qianTotal
}
let baiTotal = 0
const baiAmountInputs = dom.querySelectorAll('input[data-field^="bai"]')
baiAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
baiTotal += value
})
const baiInput = dom.querySelector('input[data-field="bTotal"]')
if (baiInput) {
baiInput.value = baiTotal===0?'':baiTotal
}
let shiTotal = 0
const shiAmountInputs = dom.querySelectorAll('input[data-field^="shi"]')
shiAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
shiTotal += value
})
const shiInput = dom.querySelector('input[data-field="sTotal"]')
if (shiInput) {
shiInput.value = shiTotal===0?'':shiTotal
}
let yuanTotal = 0
const yuanAmountInputs = dom.querySelectorAll('input[data-field^="yuan"]')
yuanAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
yuanTotal += value
})
const yuanInput = dom.querySelector('input[data-field="yTotal"]')
if (yuanInput) {
yuanInput.value = yuanTotal===0?'':yuanTotal
}
let jiaoTotal = 0
const jiaoAmountInputs = dom.querySelectorAll('input[data-field^="jiao"]')
jiaoAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
jiaoTotal += value
})
const jiaoInput = dom.querySelector('input[data-field="jTotal"]')
if (jiaoInput) {
jiaoInput.value = jiaoTotal===0?'':jiaoTotal
}
let fenTotal = 0
const fenAmountInputs = dom.querySelectorAll('input[data-field^="fen"]')
fenAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
fenTotal += value
})
const fenInput = dom.querySelector('input[data-field="fTotal"]')
if (fenInput) {
fenInput.value = fenTotal===0?'':fenTotal
}
let otherTotal = wanTotal * 10000 + qianTotal * 1000 + baiTotal * 100 + shiTotal * 10 + yuanTotal + jiaoTotal * 0.1 + fenTotal * 0.01
let total = 0
// 只计算以 amount 开头的输入框
const amountInputs = dom.querySelectorAll('input[data-field^="amount"]')
@ -1032,9 +1293,7 @@ export default {
// 更新总金额输入框
const totalInput = dom.querySelector('input[data-field="total"]')
if (totalInput) {
if (total !== 0) {
totalInput.value = total.toFixed(2)
}
totalInput.value = total.toFixed(2)
console.log('更新总金额输入框:', totalInput.value)
// 监听 total 输入框的变化
@ -1053,6 +1312,10 @@ export default {
if (total !== 0) {
upperCaseInput.value = numberToChinese(total)
}
if (otherTotal !== 0) {
upperCaseInput.value = numberToChinese(otherTotal)
}
console.log('更新大写金额:', upperCaseInput.value)
}
},
@ -1068,6 +1331,13 @@ export default {
upperCaseInput.value = numberToChinese(total)
console.log('从总金额更新大写金额:', total, upperCaseInput.value)
}
let wanTotal = 0
const wanInput = dom.querySelector('input[data-field="wTotal"]')
if (wanInput) {
wanTotal = parseFloat(wanInput.value) || 0
upperCaseInput.value = numberToChinese(wanTotal)
}
}
}
}

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

@ -1,13 +1,23 @@
<template>
<div>
<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">事后支付表格</Radio>
</RadioGroup>
<div style="position: relative; margin-bottom: 16px; min-height: 40px;">
<div style="width: fit-content; margin: 0 auto;">
<RadioGroup v-model="currentForm" type="button">
<!-- <Radio label="pre" :disabled="!getBeforeForms">事前审批表格</Radio> -->
<!-- <Radio label="finance" :disabled="!fundLog">财务审核表</Radio> -->
<Radio label="post" :disabled="!getForms">事后支付表格</Radio>
</RadioGroup>
</div>
<div style="position: absolute; right: 0; top: 0;">
<label>打印方向：</label>
<select v-model="printOrientation" style="margin-right: 16px;">
<option value="portrait">纵向</option>
<option value="landscape">横向</option>
</select>
</div>
</div>
<div class="white-container">
<div class="form-container">
@ -125,7 +135,8 @@ export default {
return {
isShow: false,
currentForm: 'post',
fundLog: null
fundLog: null,
printOrientation: 'portrait' // 默认横向
}
},
computed: {
@ -172,6 +183,146 @@ export default {
const dom = this.$refs.printtable
if (!dom) return
const sdateAmountInputs = dom.querySelectorAll('input[data-field^="sdate"]')
// 移除旧的监听器
sdateAmountInputs.forEach(input => {
input.removeEventListener('input', this.caculateRoadDay)
input.removeEventListener('change', this.caculateRoadDay)
input.removeEventListener('blur', this.caculateRoadDay)
})
// 添加新的监听器
sdateAmountInputs.forEach(input => {
input.addEventListener('input', this.caculateRoadDay)
input.addEventListener('change', this.caculateRoadDay)
input.addEventListener('blur', this.caculateRoadDay)
})
const edateAmountInputs = dom.querySelectorAll('input[data-field^="edate"]')
// 移除旧的监听器
edateAmountInputs.forEach(input => {
input.removeEventListener('input', this.caculateRoadDay)
input.removeEventListener('change', this.caculateRoadDay)
input.removeEventListener('blur', this.caculateRoadDay)
})
// 添加新的监听器
edateAmountInputs.forEach(input => {
input.addEventListener('input', this.caculateRoadDay)
input.addEventListener('change', this.caculateRoadDay)
input.addEventListener('blur', this.caculateRoadDay)
})
// 获取所有以 wan 开头的输入框
const wanAmountInputs = dom.querySelectorAll('input[data-field^="wan"]')
// 移除旧的监听器
wanAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
wanAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 qian 开头的输入框
const qianAmountInputs = dom.querySelectorAll('input[data-field^="qian"]')
// 移除旧的监听器
qianAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
qianAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 bai 开头的输入框
const baiAmountInputs = dom.querySelectorAll('input[data-field^="bai"]')
// 移除旧的监听器
baiAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
baiAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 shi 开头的输入框
const shiAmountInputs = dom.querySelectorAll('input[data-field^="shi"]')
// 移除旧的监听器
shiAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
shiAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 yuan 开头的输入框
const yuanAmountInputs = dom.querySelectorAll('input[data-field^="yuan"]')
// 移除旧的监听器
yuanAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
yuanAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 jiao 开头的输入框
const jiaoAmountInputs = dom.querySelectorAll('input[data-field^="jiao"]')
// 移除旧的监听器
jiaoAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
jiaoAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 fen 开头的输入框
const fenAmountInputs = dom.querySelectorAll('input[data-field^="fen"]')
// 移除旧的监听器
fenAmountInputs.forEach(input => {
input.removeEventListener('input', this.calculateTotal)
input.removeEventListener('change', this.calculateTotal)
input.removeEventListener('blur', this.calculateTotal)
})
// 添加新的监听器
fenAmountInputs.forEach(input => {
input.addEventListener('input', this.calculateTotal)
input.addEventListener('change', this.calculateTotal)
input.addEventListener('blur', this.calculateTotal)
})
// 获取所有以 amount 开头的输入框
const amountInputs = dom.querySelectorAll('input[data-field^="amount"]')
console.log('找到的金额输入框:', amountInputs.length)
@ -205,9 +356,111 @@ export default {
// 初始计算一次
this.calculateTotal()
},
caculateRoadDay() {
const sdateInput = this.$refs.printtable.querySelector('input[data-field^="sdate"]')
const edateInput = this.$refs.printtable.querySelector('input[data-field^="edate"]')
const sdate = sdateInput.value
const edate = edateInput.value
if (sdate && edate) {
const s = new Date(sdate)
const e = new Date(edate)
// 计算天数差
const roadDay = Math.floor((e - s) / (1000 * 60 * 60 * 24))
console.log('roadDay', sdate, edate, roadDay)
const roadDayInput = this.$refs.printtable.querySelector('input[data-field="roadDay"]')
if (roadDayInput) {
roadDayInput.value = roadDay
}
}
},
calculateTotal() {
const dom = this.$refs.printtable
if (!dom) return
let wanTotal = 0
const wanAmountInputs = dom.querySelectorAll('input[data-field^="wan"]')
wanAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
wanTotal += value
})
const wanInput = dom.querySelector('input[data-field="wTotal"]')
if (wanInput) {
wanInput.value = wanTotal===0?'':wanTotal
}
let qianTotal = 0
const qianAmountInputs = dom.querySelectorAll('input[data-field^="qian"]')
qianAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
qianTotal += value
})
const qianInput = dom.querySelector('input[data-field="qTotal"]')
if (qianInput) {
qianInput.value = qianTotal===0?'':qianTotal
}
let baiTotal = 0
const baiAmountInputs = dom.querySelectorAll('input[data-field^="bai"]')
baiAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
baiTotal += value
})
const baiInput = dom.querySelector('input[data-field="bTotal"]')
if (baiInput) {
baiInput.value = baiTotal===0?'':baiTotal
}
let shiTotal = 0
const shiAmountInputs = dom.querySelectorAll('input[data-field^="shi"]')
shiAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
shiTotal += value
})
const shiInput = dom.querySelector('input[data-field="sTotal"]')
if (shiInput) {
shiInput.value = shiTotal===0?'':shiTotal
}
let yuanTotal = 0
const yuanAmountInputs = dom.querySelectorAll('input[data-field^="yuan"]')
yuanAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
yuanTotal += value
})
const yuanInput = dom.querySelector('input[data-field="yTotal"]')
if (yuanInput) {
yuanInput.value = yuanTotal===0?'':yuanTotal
}
let jiaoTotal = 0
const jiaoAmountInputs = dom.querySelectorAll('input[data-field^="jiao"]')
jiaoAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
jiaoTotal += value
})
const jiaoInput = dom.querySelector('input[data-field="jTotal"]')
if (jiaoInput) {
jiaoInput.value = jiaoTotal===0?'':jiaoTotal
}
let fenTotal = 0
const fenAmountInputs = dom.querySelectorAll('input[data-field^="fen"]')
fenAmountInputs.forEach(input => {
const value = parseFloat(input.value) || 0
fenTotal += value
})
const fenInput = dom.querySelector('input[data-field="fTotal"]')
if (fenInput) {
fenInput.value = fenTotal===0?'':fenTotal
}
let otherTotal = wanTotal * 10000 + qianTotal * 1000 + baiTotal * 100 + shiTotal * 10 + yuanTotal + jiaoTotal * 0.1 + fenTotal * 0.01
let total = 0
// 只计算以 amount 开头的输入框
@ -235,6 +488,10 @@ export default {
upperCaseInput.value = numberToChinese(total)
console.log('更新大写金额:', upperCaseInput.value)
}
if (otherTotal !== 0) {
upperCaseInput.value = numberToChinese(otherTotal)
}
},
updateUpperCaseFromTotal() {
const dom = this.$refs.printtable
@ -410,21 +667,25 @@ export default {
upperCaseInput.value = numberToChinese(total)
}
const orientation = this.printOrientation || 'portrait';
const margin = orientation === 'portrait'
? '2mm 10mm 10mm 2mm'
: '10mm 10mm 10mm 10mm';
const win = window.open('', '_blank')
win.document.write(`
<html>
<head>
<title>打印</title>
<style>
@page { size: A4; margin: 2mm 10mm 10mm 10mm; }
@page { size: A4 ${orientation}; margin: ${margin}; }
body {
margin: 0;
padding: 0;
}
.white-container {
width: 794px !important;
width: 100% !important;
margin: 0 auto;
margin-left: -30px;
margin-left: 0px;
background: #fff;
padding: 0px;
box-sizing: border-box;

Write Preview
Loading…
Cancel
Save