|
|
<template>
|
|
|
<div>
|
|
|
|
|
|
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" ok-text="打印" @on-ok="printHtml">
|
|
|
<template v-slot:normalContent>
|
|
|
<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">
|
|
|
<!-- Pre-payment Form -->
|
|
|
<div v-if="currentForm === 'pre'" class="payment-form">
|
|
|
<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'" ref="printtable" class="payment-form">
|
|
|
<!-- 财务审核表内容放到事后支付表头部 -->
|
|
|
<table class="finance-review-table no-print">
|
|
|
<tr>
|
|
|
<th colspan="2" class="finance-header-row">合同信息</th>
|
|
|
<th colspan="5" class="finance-header-row">付款信息</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="sub-header">受款单位</td>
|
|
|
<td>{{ fundLog && fundLog.contract && fundLog.contract.supply || '-' }}</td>
|
|
|
<td class="sub-header">申请付款金额</td>
|
|
|
<td>{{ fundLog && fundLog.apply_money || '-' }}</td>
|
|
|
<td class="sub-header">实际支付金额</td>
|
|
|
<td>{{ fundLog && fundLog.act_money || '-' }}</td>
|
|
|
<td class="sub-header">款项类型</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="sub-header">合同名称</td>
|
|
|
<td>{{ fundLog && fundLog.contract && fundLog.contract.name || '-' }}</td>
|
|
|
<td class="sub-header">审计金额</td>
|
|
|
<td>{{ fundLog && fundLog.audit_money || '-' }}</td>
|
|
|
<td class="sub-header">本期扣款金额</td>
|
|
|
<td>{{ fundLog && fundLog.discount_money || '-' }}</td>
|
|
|
<td>{{ fundLog && fundLog.type || '-' }}</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="sub-header">合同金额</td>
|
|
|
<td>{{ fundLog && fundLog.contract && moneyFormat(fundLog.contract.money) || '-' }} （元）</td>
|
|
|
<td class="sub-header">是否为最后一笔</td>
|
|
|
<td>{{ fundLog && fundLog.is_end === 1 ? '是' : '否' }}</td>
|
|
|
<td class="sub-header">备注</td>
|
|
|
<td colspan="2">{{ fundLog && fundLog.remark || '-' }}</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<div v-if="getForms" v-html="getForms" />
|
|
|
<div v-else class="no-form-message">暂无事后支付表格内容</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { detailFundLog } from '@/api/paymentRegistration/fundLog'
|
|
|
import html2canvas from 'html2canvas'
|
|
|
import * as printJS from 'print-js'
|
|
|
|
|
|
// 添加金额转大写的工具函数
|
|
|
function numberToChinese(num) {
|
|
|
const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟', '万']
|
|
|
const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
|
|
|
const [integer, decimal] = num.toString().split('.')
|
|
|
let result = ''
|
|
|
let intNum = parseInt(integer)
|
|
|
if (intNum === 0) {
|
|
|
result = '零'
|
|
|
} else {
|
|
|
let i = 0
|
|
|
let lastDigit = null
|
|
|
let hasZero = false
|
|
|
while (intNum > 0) {
|
|
|
const digit = intNum % 10
|
|
|
if (digit === 0) {
|
|
|
if (!hasZero && lastDigit !== 0) {
|
|
|
result = '零' + result
|
|
|
hasZero = true
|
|
|
}
|
|
|
} else {
|
|
|
let unit = units[i]
|
|
|
if (i === 4 && result.startsWith('零')) {
|
|
|
unit = '万'
|
|
|
} else if (i === 8 && result.startsWith('零')) {
|
|
|
unit = '亿'
|
|
|
}
|
|
|
result = digits[digit] + unit + result
|
|
|
hasZero = false
|
|
|
}
|
|
|
lastDigit = digit
|
|
|
intNum = Math.floor(intNum / 10)
|
|
|
i++
|
|
|
}
|
|
|
result = result.replace(/零+$/, '')
|
|
|
result = result.replace(/零+/, '零')
|
|
|
}
|
|
|
if (decimal) {
|
|
|
const decimalNum = parseInt(decimal)
|
|
|
if (decimalNum > 0) {
|
|
|
result += '点'
|
|
|
for (let i = 0; i < decimal.length; i++) {
|
|
|
result += digits[parseInt(decimal[i])]
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
if (!decimal || parseInt(decimal) === 0) {
|
|
|
result += '整'
|
|
|
}
|
|
|
return result + '元'
|
|
|
}
|
|
|
|
|
|
export default {
|
|
|
name: 'PrintPaymentForm',
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
currentForm: 'post',
|
|
|
fundLog: null,
|
|
|
printOrientation: 'portrait' // 默认横向
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
getBeforeForms() {
|
|
|
return this.fundLog && this.fundLog.contract && this.fundLog.contract.before_forms
|
|
|
},
|
|
|
getForms() {
|
|
|
return this.fundLog && this.fundLog.contract && this.fundLog.contract.forms
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
getForms: {
|
|
|
handler(newVal) {
|
|
|
if (newVal) {
|
|
|
this.$nextTick(() => {
|
|
|
this.setupAmountListeners()
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
},
|
|
|
isShow: {
|
|
|
handler(newVal) {
|
|
|
if (newVal) {
|
|
|
this.$nextTick(() => {
|
|
|
this.setupAmountListeners()
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async getDetailFundLog(id) {
|
|
|
try {
|
|
|
const res = await detailFundLog({ id })
|
|
|
this.fundLog = res
|
|
|
} catch (error) {
|
|
|
console.error('获取付款详情失败:', error)
|
|
|
this.$Message.error('获取付款详情失败')
|
|
|
}
|
|
|
},
|
|
|
setupAmountListeners() {
|
|
|
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)
|
|
|
|
|
|
// 移除旧的监听器
|
|
|
amountInputs.forEach(input => {
|
|
|
input.removeEventListener('input', this.calculateTotal)
|
|
|
input.removeEventListener('change', this.calculateTotal)
|
|
|
input.removeEventListener('blur', this.calculateTotal)
|
|
|
})
|
|
|
|
|
|
// 添加新的监听器
|
|
|
amountInputs.forEach(input => {
|
|
|
input.addEventListener('input', this.calculateTotal)
|
|
|
input.addEventListener('change', this.calculateTotal)
|
|
|
input.addEventListener('blur', this.calculateTotal)
|
|
|
})
|
|
|
|
|
|
// 监听 total 输入框的变化
|
|
|
const totalInput = dom.querySelector('input[data-field="total"]')
|
|
|
if (totalInput) {
|
|
|
totalInput.removeEventListener('input', this.updateUpperCaseFromTotal)
|
|
|
totalInput.removeEventListener('change', this.updateUpperCaseFromTotal)
|
|
|
totalInput.removeEventListener('blur', this.updateUpperCaseFromTotal)
|
|
|
|
|
|
totalInput.addEventListener('input', this.updateUpperCaseFromTotal)
|
|
|
totalInput.addEventListener('change', this.updateUpperCaseFromTotal)
|
|
|
totalInput.addEventListener('blur', this.updateUpperCaseFromTotal)
|
|
|
}
|
|
|
|
|
|
// 初始计算一次
|
|
|
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)) + 1
|
|
|
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?'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?'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?'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?'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?'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?'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?'0':fenTotal
|
|
|
}
|
|
|
|
|
|
// 统计各位后，进行进位处理
|
|
|
if (fenTotal >= 10) {
|
|
|
jiaoTotal += Math.floor(fenTotal / 10);
|
|
|
fenTotal = fenTotal % 10;
|
|
|
}
|
|
|
if (jiaoTotal >= 10) {
|
|
|
yuanTotal += Math.floor(jiaoTotal / 10);
|
|
|
jiaoTotal = jiaoTotal % 10;
|
|
|
}
|
|
|
if (yuanTotal >= 10) {
|
|
|
shiTotal += Math.floor(yuanTotal / 10);
|
|
|
yuanTotal = yuanTotal % 10;
|
|
|
}
|
|
|
if (shiTotal >= 10) {
|
|
|
baiTotal += Math.floor(shiTotal / 10);
|
|
|
shiTotal = shiTotal % 10;
|
|
|
}
|
|
|
if (baiTotal >= 10) {
|
|
|
qianTotal += Math.floor(baiTotal / 10);
|
|
|
baiTotal = baiTotal % 10;
|
|
|
}
|
|
|
if (qianTotal >= 10) {
|
|
|
wanTotal += Math.floor(qianTotal / 10);
|
|
|
qianTotal = qianTotal % 10;
|
|
|
}
|
|
|
|
|
|
// 进位后同步更新input显示
|
|
|
// 通用解决方案：根据实际数值决定是否显示前导零
|
|
|
const totalAmount = wanTotal * 10000 + qianTotal * 1000 + baiTotal * 100 + shiTotal * 10 + yuanTotal + jiaoTotal * 0.1 + fenTotal * 0.01;
|
|
|
|
|
|
if (wanInput) {
|
|
|
// 如果总金额小于10000，不显示万位
|
|
|
wanInput.value = totalAmount >= 10000 ? (wanTotal === 0 ? '0' : wanTotal) : '';
|
|
|
}
|
|
|
if (qianInput) {
|
|
|
// 如果总金额小于1000，不显示千位
|
|
|
qianInput.value = totalAmount >= 1000 ? (qianTotal === 0 ? '0' : qianTotal) : '';
|
|
|
}
|
|
|
if (baiInput) {
|
|
|
// 如果总金额小于100，不显示百位
|
|
|
baiInput.value = totalAmount >= 100 ? (baiTotal === 0 ? '0' : baiTotal) : '';
|
|
|
}
|
|
|
if (shiInput) {
|
|
|
// 如果总金额小于10，不显示十位
|
|
|
shiInput.value = totalAmount >= 10 ? (shiTotal === 0 ? '0' : shiTotal) : '';
|
|
|
}
|
|
|
if (yuanInput) {
|
|
|
// 如果总金额小于1，不显示元位
|
|
|
yuanInput.value = totalAmount >= 1 ? (yuanTotal === 0 ? '0' : yuanTotal) : '';
|
|
|
}
|
|
|
if (jiaoInput) {
|
|
|
// 如果总金额小于0.1，不显示角位
|
|
|
jiaoInput.value = totalAmount >= 0.1 ? (jiaoTotal === 0 ? '0' : jiaoTotal) : '';
|
|
|
}
|
|
|
if (fenInput) {
|
|
|
// 如果总金额小于0.01，不显示分位
|
|
|
fenInput.value = totalAmount >= 0.01 ? (fenTotal === 0 ? '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"]')
|
|
|
console.log('计算总金额，找到输入框数量:', amountInputs.length)
|
|
|
|
|
|
amountInputs.forEach(input => {
|
|
|
const value = parseFloat(input.value) || 0
|
|
|
console.log('输入框值:', input.getAttribute('data-field'), value)
|
|
|
total += value
|
|
|
})
|
|
|
|
|
|
console.log('计算得到的总金额:', total)
|
|
|
|
|
|
// 更新总金额输入框
|
|
|
const totalInput = dom.querySelector('input[data-field="total"]')
|
|
|
if (totalInput) {
|
|
|
totalInput.value = total.toFixed(2)
|
|
|
console.log('更新总金额输入框:', totalInput.value)
|
|
|
}
|
|
|
|
|
|
// 更新大写金额
|
|
|
const upperCaseInput = dom.querySelector('input[data-field="upperCaseAmount"]')
|
|
|
if (upperCaseInput) {
|
|
|
upperCaseInput.value = numberToChinese(total)
|
|
|
console.log('更新大写金额:', upperCaseInput.value)
|
|
|
}
|
|
|
|
|
|
if (otherTotal !== 0) {
|
|
|
upperCaseInput.value = numberToChinese(otherTotal)
|
|
|
}
|
|
|
},
|
|
|
updateUpperCaseFromTotal() {
|
|
|
const dom = this.$refs.printtable
|
|
|
if (!dom) return
|
|
|
|
|
|
const totalInput = dom.querySelector('input[data-field="total"]')
|
|
|
const upperCaseInput = dom.querySelector('input[data-field="upperCaseAmount"]')
|
|
|
|
|
|
if (totalInput && upperCaseInput) {
|
|
|
const total = parseFloat(totalInput.value) || 0
|
|
|
upperCaseInput.value = numberToChinese(total)
|
|
|
console.log('从总金额更新大写金额:', total, upperCaseInput.value)
|
|
|
}
|
|
|
},
|
|
|
replaceControls(element) {
|
|
|
const inputs = element.getElementsByTagName('input')
|
|
|
Array.from(inputs).forEach(input => {
|
|
|
if (input.type === 'checkbox' || input.type === 'radio') {
|
|
|
if (input.type === 'radio') {
|
|
|
// 找到同组radio中被选中的
|
|
|
const name = input.name
|
|
|
const checkedRadio = element.querySelector(`input[type="radio"][name="${name}"]:checked`)
|
|
|
if (checkedRadio) {
|
|
|
// 找到包含radio组的td
|
|
|
const td = checkedRadio.closest('td')
|
|
|
if (td) {
|
|
|
// 找到隐藏的div
|
|
|
const hiddenDiv = td.querySelector('div[style*="display: none"]')
|
|
|
if (hiddenDiv) {
|
|
|
hiddenDiv.textContent = checkedRadio.value
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
const span = document.createElement('span')
|
|
|
let displayText = input.value || ''
|
|
|
if (input.type === 'date') {
|
|
|
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',
|
|
|
'boxSizing'
|
|
|
].forEach(key => {
|
|
|
span.style[key] = style[key]
|
|
|
})
|
|
|
// 确保width和height与Input控件保持一致
|
|
|
span.style.width = style.width//'100%'
|
|
|
span.style.height = style.height
|
|
|
span.style.whiteSpace = 'normal'
|
|
|
span.style.wordBreak = 'break-all'
|
|
|
span.style.overflowWrap = 'break-word'
|
|
|
span.style.display = 'block'
|
|
|
span.style.textAlign = 'center'
|
|
|
span.style.verticalAlign = 'middle'
|
|
|
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',
|
|
|
'boxSizing'
|
|
|
].forEach(key => {
|
|
|
span.style[key] = style[key]
|
|
|
})
|
|
|
// 确保width和height与select控件保持一致
|
|
|
span.style.width = style.width
|
|
|
span.style.height = style.height
|
|
|
span.style.display = 'block'
|
|
|
span.style.textAlign = 'center'
|
|
|
span.style.whiteSpace = 'pre-line' // 关键：自动换行
|
|
|
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',
|
|
|
'boxSizing'
|
|
|
].forEach(key => {
|
|
|
span.style[key] = style[key]
|
|
|
})
|
|
|
// 确保width和height与textarea控件保持一致
|
|
|
span.style.width = style.width
|
|
|
span.style.height = style.height
|
|
|
span.style.display = 'block'
|
|
|
span.style.textAlign = 'center'
|
|
|
span.style.whiteSpace = 'pre-line' // 关键：自动换行
|
|
|
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
|
|
|
})
|
|
|
|
|
|
document.body.removeChild(tempContainer)
|
|
|
|
|
|
printJS({
|
|
|
printable: canvas.toDataURL(),
|
|
|
type: 'image',
|
|
|
documentTitle: `苏州市河道管理处${this.currentForm === 'pre' ? '事前审批表格' : this.currentForm === 'post' ? '事后支付表格' : '财务审核表'}`,
|
|
|
style: '@page{margin:auto;}'
|
|
|
})
|
|
|
} catch (error) {
|
|
|
console.error('打印失败:', error)
|
|
|
this.$Message.error('打印失败')
|
|
|
}
|
|
|
},
|
|
|
moneyFormat(val) {
|
|
|
if (!val && val !== 0) return '-'
|
|
|
return Number(val).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
|
|
|
},
|
|
|
printHtml() {
|
|
|
// 先同步用户输入到HTML
|
|
|
const dom = this.$refs.printtable
|
|
|
if (dom) {
|
|
|
// 获取所有输入控件
|
|
|
const inputs = dom.querySelectorAll('input, select, textarea')
|
|
|
inputs.forEach(input => {
|
|
|
const fieldName = input.getAttribute('data-field')
|
|
|
if (fieldName) {
|
|
|
if (input.type === 'checkbox' || input.type === 'radio') {
|
|
|
// 对于复选框和单选框，需要找到选中的值
|
|
|
const checkedInput = dom.querySelector(`[data-field="${fieldName}"]:checked`)
|
|
|
if (checkedInput) {
|
|
|
// 找到同组的所有radio
|
|
|
const name = checkedInput.name
|
|
|
const radioGroup = dom.querySelectorAll(`input[type="radio"][name="${name}"]`)
|
|
|
radioGroup.forEach(radio => {
|
|
|
// 移除所有radio的checked属性
|
|
|
radio.removeAttribute('checked')
|
|
|
})
|
|
|
// 设置选中radio的checked属性
|
|
|
checkedInput.setAttribute('checked', 'checked')
|
|
|
}
|
|
|
} else {
|
|
|
// 对于其他类型的输入，直接设置value
|
|
|
input.setAttribute('value', input.value)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 使用同步后的HTML数据
|
|
|
const printNode = document.createElement('div')
|
|
|
printNode.innerHTML = dom.innerHTML
|
|
|
|
|
|
// 移除财务审核表
|
|
|
const financeTable = printNode.querySelector('.finance-review-table')
|
|
|
if (financeTable) {
|
|
|
financeTable.remove()
|
|
|
}
|
|
|
|
|
|
// 替换控件为纯文本（保留样式）
|
|
|
this.replaceControls(printNode)
|
|
|
console.log('printNode', printNode.innerHTML)
|
|
|
|
|
|
// 计算并更新总金额
|
|
|
const amountInputs = printNode.querySelectorAll('input[data-field^="amount"]')
|
|
|
let total = 0
|
|
|
amountInputs.forEach(input => {
|
|
|
const value = parseFloat(input.value) || 0
|
|
|
total += value
|
|
|
})
|
|
|
|
|
|
// 更新总金额显示
|
|
|
const totalInput = printNode.querySelector('input[data-field="total"]')
|
|
|
if (totalInput) {
|
|
|
totalInput.value = total.toFixed(2)
|
|
|
}
|
|
|
|
|
|
// 更新大写金额
|
|
|
const upperCaseInput = printNode.querySelector('input[data-field="upperCaseAmount"]')
|
|
|
if (upperCaseInput) {
|
|
|
upperCaseInput.value = numberToChinese(total)
|
|
|
}
|
|
|
|
|
|
const orientation = this.printOrientation || 'portrait';
|
|
|
const margin = orientation === 'portrait'
|
|
|
? '5mm 5mm 10mm 2mm' // 减少左右边距
|
|
|
: '5mm 5mm 10mm 5mm'; // 减少左右边距
|
|
|
const win = window.open('', '_blank')
|
|
|
// 动态计算宽高、缩放和平移
|
|
|
const isPortrait = orientation === 'portrait';
|
|
|
const pageWidth = isPortrait ? 290 : 297;
|
|
|
|
|
|
// 根据内容动态调整缩放和偏移
|
|
|
const hasTravelExpense = this.getForms && this.getForms.includes('差旅报销单');
|
|
|
const hasUtilityBill = this.getForms && this.getForms.includes('水电费结算单');
|
|
|
const hasReimbursementForm2 = this.getForms && this.getForms.includes('报销贴单2');
|
|
|
const scale = hasTravelExpense ? 0.66 : 0.9;
|
|
|
const offset = hasTravelExpense ? 62 : 5;
|
|
|
const translateX = ((pageWidth - pageWidth * scale) / 2 + offset).toFixed(2) + 'mm';
|
|
|
|
|
|
// 居中打印.
|
|
|
// table { width: 100%; border-collapse: collapse;table-layout: fixed; text-align: center; margin: 0 auto; }
|
|
|
// td { border: 1px solid #000; padding: 8px; min-width: 100px; word-break: break-all; text-align: center; vertical-align: middle; }
|
|
|
// th { text-align: center; vertical-align: middle; }
|
|
|
win.document.write(`
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>打印</title>
|
|
|
<style>
|
|
|
@page { size: A4 ${orientation}; margin: ${margin}; }
|
|
|
body {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
width: ${pageWidth}mm;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
.white-container {
|
|
|
display: inline-block;
|
|
|
background: #fff;
|
|
|
box-sizing: border-box;
|
|
|
transform: scale(${scale}) translateX(${translateX});
|
|
|
transform-origin: top left;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.form-container { width: 100% !important; margin: 0 auto; }
|
|
|
table { width: 100%; border-collapse: collapse;table-layout: fixed; margin: 0 auto; }
|
|
|
td { border: 1px solid #000; padding: 8px; min-width: 100px; word-break: break-all; vertical-align: middle; }
|
|
|
th { vertical-align: middle; }
|
|
|
|
|
|
/* 资金划拨单最后一列宽度调整 */
|
|
|
${this.getForms && this.getForms.includes('资金划拨审批单') ? `
|
|
|
/* 改变表格布局方式 */
|
|
|
table {
|
|
|
table-layout: auto !important;
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
|
|
|
/* 设置各列宽度比例 */
|
|
|
table td:nth-child(1) { width: 20% !important; }
|
|
|
table td:nth-child(2) { width: 20% !important; }
|
|
|
table td:nth-child(3) { width: 20% !important; }
|
|
|
table td:nth-child(4) {
|
|
|
width: 40% !important;
|
|
|
min-width: 500px !important;
|
|
|
max-width: none !important;
|
|
|
word-break: break-all !important;
|
|
|
white-space: normal !important;
|
|
|
overflow-wrap: break-word !important;
|
|
|
}
|
|
|
|
|
|
/* 处理跨列情况 */
|
|
|
table td[colspan] { width: auto !important; min-width: auto !important; }
|
|
|
|
|
|
/* 确保所有文本内容正常换行 */
|
|
|
table td * {
|
|
|
white-space: normal !important;
|
|
|
word-break: break-all !important;
|
|
|
overflow-wrap: break-word !important;
|
|
|
}
|
|
|
` : ''}
|
|
|
|
|
|
/* 水电费结算单特殊行高控制 */
|
|
|
${hasUtilityBill ? `
|
|
|
table td { height: 80px !important; min-height: 60px !important; line-height: 1.8 !important; }
|
|
|
table tr { height: 80px !important; min-height: 60px !important; }
|
|
|
` : ''}
|
|
|
|
|
|
/* 报销贴单2特殊行高控制 */
|
|
|
${hasReimbursementForm2 ? `
|
|
|
table td { height: 80px !important; min-height: 80px !important; line-height: 2.0 !important; }
|
|
|
table tr { height: 80px !important; min-height: 80px !important; }
|
|
|
` : ''}
|
|
|
|
|
|
@media print {
|
|
|
body {
|
|
|
width: ${pageWidth}mm;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
.white-container {
|
|
|
transform: scale(${scale}) translateX(${translateX});
|
|
|
transform-origin: top left;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="white-container">
|
|
|
<div class="form-container">
|
|
|
${printNode.innerHTML}
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
|
|
`)
|
|
|
win.document.close()
|
|
|
win.focus()
|
|
|
win.print()
|
|
|
win.close()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.form-switch {
|
|
|
margin-bottom: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.white-container {
|
|
|
background: #fff;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.form-container {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
padding: 20px;
|
|
|
font-family: SimSun, serif;
|
|
|
}
|
|
|
|
|
|
.payment-form {
|
|
|
border: 1px solid #000;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.no-form-message {
|
|
|
text-align: center;
|
|
|
padding: 40px;
|
|
|
color: #999;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.finance-review-table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
margin: 20px 0;
|
|
|
font-size: 15px;
|
|
|
background: #fff;
|
|
|
|
|
|
th, td {
|
|
|
border: 1px solid #e0e0e0;
|
|
|
padding: 10px 8px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
th.finance-header-row {
|
|
|
background: #eaf3ff;
|
|
|
color: #2d8cf0;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.sub-header {
|
|
|
background: #f5f7fa;
|
|
|
color: #333;
|
|
|
font-weight: 600;
|
|
|
width: 120px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
|
|
|
@media print {
|
|
|
.white-container {
|
|
|
padding: 0;
|
|
|
}
|
|
|
.form-container {
|
|
|
padding: 0;
|
|
|
}
|
|
|
.payment-form {
|
|
|
border: 1px solid #000;
|
|
|
}
|
|
|
.no-print {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
