leo
/
LAPP_MY_WEBFRONT
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

收据打印

pull/18/head
liwei 3 years ago
parent
998b1c6458
commit
7333c42914
2 changed files with 518 additions and 191 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +209
    -0
      src/components/receiptPrinting.vue
  2. +309
    -191
      src/views/property/pay.vue

+ 209
- 0
src/components/receiptPrinting.vue View File

@ -0,0 +1,209 @@
<template>
<div id="app">
<p id="title"><e>物业费收款收据</e></p>
<p class="serialnumber">{{ data.contracttab.serialnumber }}</p>
<p id="details-wrap">
<span style="width: 181px"
><e>小区楼名称：</e>{{ data.cidName }}</span
>
<span style="width: 113px"
><e>楼楼号：</e>{{ data.propertyid }}</span
>
<span><e>面楼积：</e>{{ data.constructionarea }}</span>
</p>
<table border="0" style="width: 100%; border-collapse: collapse">
<tr>
<td style="width: 98px"><e>收费项目</e></td>
<td style="width: 53px"><e>单位</e></td>
<td style="width: 53px"><e>数量</e></td>
<td><e>收费标准(m/月)</e></td>
<td style="width: 84px"><e>金额</e></td>
<td style="width: 147px"><e>缴费起止日期</e></td>
</tr>
<tr>
<td style="padding: 0 10px">
{{ data.contact }}
<br />
{{
data.chargetype === 2
? "电梯卡费"
: data.chargetype === 3
? "车位费"
: "物业费"
}}
</td>
<td style="padding: 0 10px">月</td>
<td style="padding: 0 10px">{{data.contracttab.lengthdate}}</td>
<td style="padding: 0 10px">{{ data.unitprice }}</td>
<td style="padding: 0 10px">
{{ data.contracttab.chargableexpense }}
</td>
<td>
<p style="text-align: right; padding: 27px 9px 0 0">
{{ data.begindate.slice(0, 4) }} <e>年</e>
{{ data.begindate.slice(5, 7) }} <e>月</e>
{{ data.begindate.slice(8, 11) }} <e>日</e>
</p>
<p style="text-align: right; padding: 16px 46px 10px 0"><e>至</e></p>
<p style="text-align: right; padding: 0 9px 22px 0">
{{ data.enddate.slice(0, 4) }} <e>年</e>
{{ data.enddate.slice(5, 7) }} <e>月</e>
{{ data.enddate.slice(8, 11) }} <e>日</e>
</p>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: left; padding-left: 5px">
<e>合计收款收款 ￥：</e
>{{ data.contracttab.chargableexpense }}
</td>
<td><e>收款方式</e></td>
<td>{{ data.contracttab.chargeway }}</td>
</tr>
<tr>
<td colspan="6" style="text-align: left; padding-left: 5px">
<e>合计人民币收款（大写）：</e>{{digitUppercase(data.contracttab.chargableexpense)}}
</td>
</tr>
</table>
<p id="bottom-wrap">
<span style="width: 285px; float: left"
><e>收款单位单位（盖章）：</e></span
>
<span style="width: 132px; float: left"
><e>收款3人：</e>{{ data.contracttab.createby }}</span
>
<span style="float: right; padding-right: 7px"
>{{ data.contracttab.chargetime.slice(0, 4) }} <e>年</e>
{{ data.contracttab.chargetime.slice(5, 7) }} <e>月</e>
{{ data.contracttab.chargetime.slice(8, 11) }} <e>日</e></span
>
</p>
</div>
</template>
<script>
export default {
props:{
data:{
default:{
contracttab:{}
}
}
},
watch:{
data: {
handler(newData) {
console.log(JSON.stringify(newData));
},
immediate: true,
deep: true
}
},
methods:{
digitUppercase(n) {
var fraction = ['角', '分'];
var digit = [
'零', '壹', '贰', '叁', '肆',
'伍', '陆', '柒', '捌', '玖'
];
var unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟']
];
var IsNum = Number(n);
if (!isNaN(IsNum)) {
var head = n < 0 ? '欠' : '';
n = Math.abs(n);
var s = '';
for (var i = 0; i < fraction.length; i++) {
s += (digit[Math.floor(n * 100/10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
}
s = s || '整';
n = Math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++) {
var p = '';
for (var j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
}
return head + s.replace(/(零.)*零元/, '元')
.replace(/(零.)+/g, '零')
.replace(/^整$/, '零元整');
}
else {
return "";
}
}
}
}
</script>
<style scoped>
e {
opacity: 0;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: fangsong;
font-size: 12px;
}
span {
display: inline-block;
font-size: 12px;
}
#app {
position: relative;
width: 714px;
height: 382px;
padding-left: 65px;
padding-right: 76px;
padding-top: 30px;
}
#title {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 31px;
text-align: center;
}
#title e {
line-height: 30px;
font-size: 31px;
font-weight: bold;
}
.serialnumber {
position: absolute;
top: 70px;
left: 70px;
}
#details-wrap {
margin-top: 37px;
margin-bottom: 5px;
}
#details-wrap span {
padding-left: 7px;
}
tr,
td,
th {
text-align: center;
line-height: 30px;
font-size: 14px;
height: 35px;
}
td p {
line-height: 13px;
}
#bottom-wrap {
margin-top: 6px;
width: 100%;
}
#bottom-wrap span {
padding-left: 5px;
font-size: 12px;
}
</style>

+ 309
- 191
src/views/property/pay.vue View File

@ -2,258 +2,367 @@
<div class="app-container">
<el-form ref="queryForm" :model="queryParams" :inline="true">
<el-form-item label="户号:" v-if="queryParams.chargetype !== 3">
<el-input v-model="queryParams.buildingid"
size="small"
placeholder="楼号"
style="display: inline-block; width:60px" />
<el-input
v-model="queryParams.buildingid"
size="small"
placeholder="楼号"
style="display: inline-block; width: 60px"
/>
<span> 幢 </span>
<el-input v-model="queryParams.unit"
size="small"
placeholder="单元号"
style="display: inline-block; width:80px" />
<el-input
v-model="queryParams.unit"
size="small"
placeholder="单元号"
style="display: inline-block; width: 80px"
/>
<span> 单元 </span>
<el-input v-model="queryParams.room"
placeholder="房间号"
size="small"
style="display: inline-block; width:80px" />
<el-input
v-model="queryParams.room"
placeholder="房间号"
size="small"
style="display: inline-block; width: 80px"
/>
<span> 室 </span>
</el-form-item>
<el-form-item v-if="queryParams.chargetype === 2" label="卡号">
<el-input v-model="queryParams.accesscardid"
size="small"
placeholder="请输入"
style="width:120px" />
<el-input
v-model="queryParams.accesscardid"
size="small"
placeholder="请输入"
style="width: 120px"
/>
</el-form-item>
<el-form-item v-if="queryParams.chargetype === 3" label="车位号">
<el-input v-model="queryParams.carportid"
size="small"
placeholder="请输入"
style="width:120px" />
<el-input
v-model="queryParams.carportid"
size="small"
placeholder="请输入"
style="width: 120px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery">搜索</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
</el-form-item>
<br>
<el-form-item v-if="queryParams.chargetype === 1" label="面积:" class="word property">
<br />
<el-form-item
v-if="queryParams.chargetype === 1"
label="面积:"
class="word property"
>
<div>{{ queryParams.constructionarea }}</div>
</el-form-item>
<el-form-item label="收费标准:" class="word property">
<div v-show="queryParams.unitprice > 0">{{ `${queryParams.unitprice}${queryParams.chargetype === 1 ? '元/㎡·月' : queryParams.chargetype === 2 ? '元/卡·月' : queryParams.chargetype === 3 ? '/车·月' : '' }` }}</div>
<div v-show="queryParams.unitprice > 0">
{{
`${queryParams.unitprice}${
queryParams.chargetype === 1
? "元/㎡·月"
: queryParams.chargetype === 2
? "元/卡·月"
: queryParams.chargetype === 3
? "/车·月"
: ""
}`
}}
</div>
</el-form-item>
<el-form-item label="费用已缴至:" class="word property">
<div>{{ queryParams.contracttab.enddate }}</div>
</el-form-item>
<br>
<br />
<el-form-item class="property">
<el-input v-model="queryParams.contact"
size="small"
placeholder="请输入内容">
<template slot="prepend" v-if="queryParams.chargetype !== 3"><span class="word">户主:</span></template>
<template slot="prepend" v-if="queryParams.chargetype === 3"><span class="word">联系人:</span></template>
<el-input
v-model="queryParams.contact"
size="small"
placeholder="请输入内容"
>
<template slot="prepend" v-if="queryParams.chargetype !== 3"
><span class="word">户主:</span></template
>
<template slot="prepend" v-if="queryParams.chargetype === 3"
><span class="word">联系人:</span></template
>
</el-input>
</el-form-item>
<el-form-item class="property">
<el-input v-model="queryParams.phone1"
size="small"
placeholder="请输入内容">
<template slot="prepend"><span class="word">联系电话:</span></template>
<el-input
v-model="queryParams.phone1"
size="small"
placeholder="请输入内容"
>
<template slot="prepend"
><span class="word">联系电话:</span></template
>
</el-input>
</el-form-item>
<el-form-item class="property" label="户号:" v-if="queryParams.chargetype === 3">
<el-input v-model="queryParams.buildingid"
size="small"
placeholder="楼号"
style="display: inline-block; width:60px" />
<el-form-item
class="property"
label="户号:"
v-if="queryParams.chargetype === 3"
>
<el-input
v-model="queryParams.buildingid"
size="small"
placeholder="楼号"
style="display: inline-block; width: 60px"
/>
<span> 幢 </span>
<el-input v-model="queryParams.unit"
size="small"
placeholder="单元号"
style="display: inline-block; width:80px" />
<el-input
v-model="queryParams.unit"
size="small"
placeholder="单元号"
style="display: inline-block; width: 80px"
/>
<span> 单元 </span>
<el-input v-model="queryParams.room"
placeholder="房间号"
size="small"
style="display: inline-block; width:80px" />
<el-input
v-model="queryParams.room"
placeholder="房间号"
size="small"
style="display: inline-block; width: 80px"
/>
<span> 室 </span>
</el-form-item>
</el-form>
<div style="width:54%; float:left; margin-top:-10px">
<div style="width: 54%; float: left; margin-top: -10px">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="物业费" name="1">
<ul class="ul">
<li v-for="item in fees"
:key="item.key"
class="li"
:class="{liClick: item.key === fewMonths && item.key > 0 }"
@click="liEvent(item.value,item.key)">
<li
v-for="item in fees"
:key="item.key"
class="li"
:class="{ liClick: item.key === fewMonths && item.key > 0 }"
@click="liEvent(item.value, item.key)"
>
<div>{{ item.key }}个月</div>
<div>{{ item.value }}元</div>
</li>
<br>
<br>
<br />
<br />
</ul>
</el-tab-pane>
<el-tab-pane label="电梯卡费" name="2">
<ul class="ul">
<li v-for="item in fees"
:key="item.key"
class="li"
:class="{liClick: item.value === queryParams.contracttab.chargedexpense && item.value > 0}"
@click="liEvent(item.value)">
<li
v-for="item in fees"
:key="item.key"
class="li"
:class="{
liClick:
item.value === queryParams.contracttab.chargedexpense &&
item.value > 0,
}"
@click="liEvent(item.value)"
>
<div>{{ item.key }}个月</div>
<div>{{ item.value }}元</div>
</li>
<br>
<br>
<br />
<br />
</ul>
</el-tab-pane>
<el-tab-pane label="车位费" name="3">
<ul class="ul">
<li v-for="item in fees"
:key="item.key"
class="li"
:class="{liClick: item.value === queryParams.contracttab.chargedexpense && item.value > 0 }"
@click="liEvent(item.value)">
<li
v-for="item in fees"
:key="item.key"
class="li"
:class="{
liClick:
item.value === queryParams.contracttab.chargedexpense &&
item.value > 0,
}"
@click="liEvent(item.value)"
>
<div>{{ item.key }}个月</div>
<div>{{ item.value }}元</div>
</li>
<br>
<br>
<br />
<br />
</ul>
</el-tab-pane>
</el-tabs>
<br>
<div style="text-align:center;" v-if="queryParams.chargetype === 1">
<span class="word-title">缴费月数:</span>
<el-input-number
v-model="fewMonths"
style="width:26%;"
@change="monthNumChange"
size="small" :min="0" label="描述文字"></el-input-number>
<span class="word-title">补缴天数:</span>
<el-input-number
v-model="fewDays"
style="width:26%;"
:step="1"
step-strictly
:min="0"
:max="31"
@change="daysNumChange"
size="small"></el-input-number>
<br>
<br>
</div>
<div style="text-align:center;">
<br />
<div style="text-align: center" v-if="queryParams.chargetype === 1">
<span class="word-title">缴费月数:</span>
<el-input-number
v-model="fewMonths"
style="width: 26%"
@change="monthNumChange"
size="small"
:min="0"
label="描述文字"
></el-input-number>
<span class="word-title">补缴天数:</span>
<el-input-number
v-model="fewDays"
style="width: 26%"
:step="1"
step-strictly
:min="0"
:max="31"
@change="daysNumChange"
size="small"
></el-input-number>
<br />
<br />
</div>
<div style="text-align: center">
<span class="word-title">缴费方式:</span>
<el-select v-model="queryParams.contracttab.chargeway"
size="small"
placeholder="请选择"
style="width:26%;">
<el-option v-for="item in wayArray"
:key="item"
:label="item"
:value="item" />
<el-select
v-model="queryParams.contracttab.chargeway"
size="small"
placeholder="请选择"
style="width: 26%"
>
<el-option
v-for="item in wayArray"
:key="item"
:label="item"
:value="item"
/>
</el-select>
<span class="word-title">缴费金额:</span>
<el-input v-model="queryParams.contracttab.chargedexpense"
size="small"
placeholder="请输入"
style="width:26%;" />
<br>
<br>
<el-input
v-model="queryParams.contracttab.chargedexpense"
size="small"
placeholder="请输入"
style="width: 26%"
/>
<br />
<br />
<span class="word-title">开始日期:</span>
<el-date-picker v-model="queryParams.begindate"
type="date"
placeholder="选择日期"
@change="handleBeginChange"
value-format="yyyy-MM-dd"
style="width:26%"
size="small" />
<span class="word-title" v-if="queryParams.chargetype === 1">结束日期:</span>
<el-date-picker v-model="queryParams.enddate"
disabled
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
style="width:26%"
v-if="queryParams.chargetype === 1"
size="small" />
<span class="word-title" v-if="queryParams.chargetype !== 1">收款人员:</span>
<el-input v-model="queryParams.contracttab.createby"
size="small"
v-if="queryParams.chargetype !== 1"
placeholder="请输入"
style="width:26%;" />
<br>
<br>
<el-date-picker
v-model="queryParams.begindate"
type="date"
placeholder="选择日期"
@change="handleBeginChange"
value-format="yyyy-MM-dd"
style="width: 26%"
size="small"
/>
<span class="word-title" v-if="queryParams.chargetype === 1"
>结束日期:</span
>
<el-date-picker
v-model="queryParams.enddate"
disabled
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
style="width: 26%"
v-if="queryParams.chargetype === 1"
size="small"
/>
<span class="word-title" v-if="queryParams.chargetype !== 1"
>收款人员:</span
>
<el-input
v-model="queryParams.contracttab.createby"
size="small"
v-if="queryParams.chargetype !== 1"
placeholder="请输入"
style="width: 26%"
/>
<br />
<br />
<span class="word-title">缴费日期:</span>
<el-date-picker v-model="queryParams.chargetime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
style="width:26%"
size="small" />
<span class="word-title" v-if="queryParams.chargetype === 1">收款人员:</span>
<span class="word-title" v-if="queryParams.chargetype === 2">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
<span class="word-title" v-if="queryParams.chargetype === 3">车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</span>
<el-input v-model="queryParams.contracttab.createby"
size="small"
v-if="queryParams.chargetype === 1"
placeholder="请输入"
style="width:26%;" />
<el-select v-if="queryParams.chargetype === 2"
v-model="queryParams.accesscardid"
size="small"
placeholder="请选择"
style="width:26%;">
<el-option v-for="item in accesscardlist"
:key="item"
:label="item"
:value="item" />
<el-date-picker
v-model="queryParams.chargetime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
style="width: 26%"
size="small"
/>
<span class="word-title" v-if="queryParams.chargetype === 1"
>收款人员:</span
>
<span class="word-title" v-if="queryParams.chargetype === 2"
>卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span
>
<span class="word-title" v-if="queryParams.chargetype === 3"
>车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</span
>
<el-input
v-model="queryParams.contracttab.createby"
size="small"
v-if="queryParams.chargetype === 1"
placeholder="请输入"
style="width: 26%"
/>
<el-select
v-if="queryParams.chargetype === 2"
v-model="queryParams.accesscardid"
size="small"
placeholder="请选择"
style="width: 26%"
>
<el-option
v-for="item in accesscardlist"
:key="item"
:label="item"
:value="item"
/>
</el-select>
<el-input v-model="queryParams.carportid"
v-if="queryParams.chargetype === 3"
disabled
placeholder=""
style="width:26%;" />
<!-- <el-select v-if="queryParams.chargetype === 3"
v-model="queryParams.carportid"
size="small"
disabled
placeholder="请选择"
style="width:26%;">
<el-option v-for="item in carportidlist"
:key="item"
:label="item"
:value="item" />
</el-select> -->
<br>
<br>
<el-button type="primary"
:disabled="!queryParams.contracttab.chargedexpense > 0"
:loading="loading"
@click="payEvent">缴费</el-button>
<el-button v-print="'#print'"
style="margin-left:80px"
type="primary"> 打印 </el-button>
<el-input
v-model="queryParams.carportid"
v-if="queryParams.chargetype === 3"
disabled
placeholder=""
style="width: 26%"
/>
<br />
<br />
<el-button
type="primary"
:disabled="!queryParams.contracttab.chargedexpense > 0"
:loading="loading"
@click="payEvent"
>缴费</el-button
>
<el-button v-print="'#data'" style="margin-left: 80px" :disabled="!receiptDetails.contracttab || !receiptDetails.contracttab.serialnumber" type="primary">
打印
</el-button>
</div>
</div>
<div id="print"
style="display:inline-block; width:42%; margin-left:4%">
<div style="width:480px;text-align:center; margin: 0 0 10px 0 ">收款凭证</div>
<div style=" margin: 0 0 8px 0;font-size:16px ">编号: {{ serialnumber }}</div>
<mailTable :table-data="tableData"
:table-style="{ width:'480px' }"
style="margin-top: -10px"> />
</mailtable>
<div
id="print"
style="
display: inline-block;
width: 42%;
margin-left: 4%;
margin-bottom: 200px;
"
>
<div style="width: 480px; text-align: center; margin: 0 0 10px 0">
收款凭证
</div>
<div style="margin: 0 0 8px 0; font-size: 16px">
编号: {{ serialnumber }}
</div>
<mailTable
:table-data="tableData"
:table-style="{ width: '480px' }"
style="margin-top: -10px"
>
/>
</mailTable>
</div>
<div id="data">
<ReceiptPrinting :data="receiptDetails" />
</div>
</div>
</template>
<script>
import mailTable from '@/components/ColumnTable/tableComponent'
import mailTable from '@/components/ColumnTable/tableComponent';
import ReceiptPrinting from '@/components/receiptPrinting.vue';
import moment from 'moment'
import {
getPropertyTab,
@ -265,7 +374,8 @@ import {
export default {
name: 'Pay',
components: {
mailTable
mailTable,
ReceiptPrinting
},
data() {
return {
@ -348,6 +458,7 @@ export default {
serialnumber: '',
accesscardlist: [],
carportidlist: [],
receiptDetails:{}
}
},
methods: {
@ -534,7 +645,9 @@ export default {
}
},
getTableData(arg) {
this.queryParams = arg
this.receiptDetails=arg;
this.queryParams = arg;
this.queryParams.cidName=this.getValue(arg.cid);
this.queryParams.contracttab.chargedexpense = undefined
this.queryParams.begindate = arg.contracttab.enddate
this.queryParams.carportid = arg.carportid
@ -615,6 +728,11 @@ export default {
</script>
<style lang="scss" scoped>
.app-container {
overflow-y: hidden;
min-width: 720px;
height: calc(100vh - 86px);
}
.word {
color: black;
font-weight: 550;


Write Preview
Loading…
Cancel
Save