Scenario description: As shown in the figure below, we need to click the 'Bill Generation' button, and then a form like the figure below should be displayed inside.
The most important thing is how to display the content in the table, let's take a look!
<template>
<!-- 水费 欠费-->
<el-dialog title="水费欠费账单生成" :visible.sync="dialogVisiblePrint">
<div id="printTest">
<div style="text-align: center;">
<h3>水费付款通知单</h3>
</div>
<div style="margin: 22px;">
<el-descriptions title="" :column="2" style="font-size: 15px;">
<el-descriptions-item label="业主/住户名称">{
{waterInfo.lodgerName}}</el-descriptions-item>
<el-descriptions-item label="通知书编号Invoice No"></el-descriptions-item>
<el-descriptions-item label="客户单元Unit No">
{
{getLocationName(waterInfo.locationId)}}/
{
{getTowerName(waterInfo.towerId)}}/
{
{getFloorName(waterInfo.floorId)}}层
</el-descriptions-item>
<el-descriptions-item label="发单日期Lssue Date">{
{waterInfo.yearToMonth}}</el-descriptions-item>
<el-descriptions-item label="计费面积Charge Area(m²)"></el-descriptions-item>
<el-descriptions-item label="收款终止日期Due Date">{
{waterInfo.yearToMonth}}</el-descriptions-item>
</el-descriptions>
</div>
<div style="margin: 18px;">
<el-table :data="waterData" border>
<el-table-column prop="feeName" label="收费项目" align="center"></el-table-column>
<el-table-column prop="yearToMonth" label="缴费期间" align="center"></el-table-column>
<el-table-column prop="unitPrice" label="单价(元)" align="center"></el-table-column>
<el-table-column prop="meterReading" label="上期读数" align="center"></el-table-column>
<el-table-column prop="readingAccuracy" label="本期读数" align="center"></el-table-column>
<el-table-column prop="totalMoney" label="本期应交金额" width="120px" align="center"></el-table-column>
</el-table>
</div>
<div style="margin: 22px;">
<h4>物业服务中心盖章(Seal of Property Service Center)</h4>
</div>
</div>
<div style="text-align: center;">
<el-button type="success" v-print="'#printTest'">打印</el-button>
<el-button type="primary" @click="dialogVisiblePrint = false">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import API from "@/components/common/newApi";
export default {
data() {
return {
/* data:[]后端获取到的数据列表。option表格配置项.form 表单*/
form: {},
query: {},
areaList: [], //所属区域
towerList: [], //所属楼栋
floorList: [], //所属楼层
dialogVisiblePrint: false,
waterInfo: {}, //水费对象
waterData: [],
}
},
mounted() {
//获取所属区域
this.getLocationList()
//获取所属楼层
this.getFloorList()
//获取所属楼栋
this.getTowerList()
},
methods: {
//水费欠费账单生成
async printOpen(row) {
this.dialogVisiblePrint = true
let data = {
waterBillId: row.waterBillId,
type: "1",
}
//在接口访问之前给 水费 赋值为空
this.waterData = []
await API.arrearsNoteInfo(data).then(res => {
if (res.data.code == 0) {
//水费绑值
this.waterInfo = res.data.data.ctyWaterBillInfo
//水费欠费表格数据
let waterList = res.data.data.ctyWaterBillInfo;
this.waterData.push(waterList)
}
});
},
// 获取所属区域
getLocationList() {
API.getAreaList().then((res) => {
if (res.data.code == 0) {
this.areaList = res.data.data;
}
});
},
//根据区域id获取对应的中文
getLocationName(id) {
let name
this.areaList.map(item => {
if (item.id == id) {
name = item.locationName
}
})
return name
},
// 获取所属楼栋
getTowerList(locationId = "") {
let params = {
data: {
locationId: locationId,
},
pageNum: 1,
pageSize: 1000,
};
API.getTowerList(params).then((res) => {
if (res.data.code == 0) {
this.towerList = res.data.data.list;
}
});
},
//根据楼栋id获取对应的中文
getTowerName(towerId) {
let towerName
this.towerList.map(item => {
if (item.towerId == towerId) {
towerName = item.name
}
})
return towerName
},
// 获取所属楼层
getFloorList(towerId = "") {
let params = {
data: {
towerId: towerId,
},
pageNum: 1,
pageSize: 1000,
};
API.getFloorList(params).then((res) => {
if (res.data.code == 0) {
this.floorList = res.data.data.list;
}
});
},
//根据楼层id获取对应的中文
getFloorName(floorId) {
let floorName
this.floorList.map(item => {
if (item.floorId == floorId) {
floorName = item.floorNo
}
})
return floorName
},
}
}
</script>
<style>
</style>
el-descriptions tag (description list): display multiple fields in list form.
column: the number of a row
DescriptionsItem
(ie: how many columns a row), number typekey code