|
<script setup >
|
import billRecord from "@/api/financial/billRecord";
|
import TieredCharging from "@/api/configuration/waterPrice";
|
const { proxy } = getCurrentInstance();
|
import archivesApi from "@/api/archivesApi/index";
|
import setPostParams from "@/utils/searchParams.js";
|
|
/**
|
* 搜索相关
|
*/
|
const queryParams =ref({
|
name: undefined,
|
},)
|
/** 搜索按钮操作 */
|
function handleQuery() {
|
getList({keywords:queryParams.value.name})
|
}
|
|
/** 重置按钮操作 */
|
function resetQuery() {
|
proxy.resetForm("queryRef");
|
handleQuery();
|
}
|
|
/**
|
* Table表格权限数据列表相关
|
*/
|
const pageParam = ref({
|
total:0,
|
limit:0,
|
page:0,
|
})
|
const tableData = ref([]);
|
let tableHeader = ref({
|
billNo: "账单编号",
|
waterMeterSn: "所属水表",
|
userName: "所属用户",
|
waterAmount: "用水量",
|
billMoney: "账单总金额",
|
billStateView: "账单状态",
|
createTimeView: "创建时间:",
|
})
|
|
/** 获取列表 */
|
const loading = ref(false);
|
async function getList(val) {
|
loading.value = true;
|
|
let postParam = setPostParams(val)
|
await billRecord().search(postParam).then((res) =>{
|
tableData.value = res.data.list
|
tableData.value.forEach((item,index) =>{
|
if(item.payTime === 0){
|
delete item.payTime
|
}
|
if(item.billState === 100){
|
item.billStateView = '待缴费'
|
}else if(item.billState === 102){
|
item.billStateView = '部分缴费'
|
}else{
|
item.billStateView = '已缴费'
|
}
|
})
|
pageParam.value.total = res.data.total
|
pageParam.value.limit = res.data.limit
|
pageParam.value.page = res.data.page
|
})
|
loading.value = false;
|
}
|
/**
|
*
|
* 详情
|
*/
|
let detailName = ref({
|
billNo: "账单编号:",
|
waterMeterSn: "所属水表:",
|
userName: "所属用户:",
|
startDate: "起始日期:",
|
endDate: "截止日期:",
|
lastAmount: "上月抄表:",
|
currentAmount: "本月抄表:",
|
waterAmount: "用水量:",
|
tieredChargingIdName: "收费标准:",
|
waterMoney: "水费金额:",
|
otherMoney: "其他费用:",
|
overdueMoney: "滞纳金:",
|
billMoney: "总金额:",
|
needPayTime:'应付时间:',
|
totalMoney: "实际应缴:",
|
paidMoney: "实际缴费:",
|
billStateView: "账单状态:",
|
payTime: "缴费时间:",
|
createTimeView: "创建时间:",
|
})
|
const open = ref(false)
|
const detailList = ref([])
|
const toDetail = async (row) =>{
|
//水价id转name
|
await TieredCharging().search({limit:10000,page:1}).then((res) =>{
|
res.data.list.forEach((item) =>{
|
if(item.id === row.tieredChargingId){
|
row.tieredChargingIdName = item.name
|
}
|
})
|
})
|
//用户id转username
|
await archivesApi().search({limit:10000,page:1}).then((res) =>{
|
res.data.list.forEach((item) =>{
|
if(item.id === row.userId){
|
row.userName = item.userName
|
}
|
})
|
})
|
let list = []
|
Object.keys(detailName.value).forEach(key1=>{
|
Object.keys(row).forEach((key2)=>{
|
if(key1 === key2){
|
list.push({name:detailName.value[key1],value:row[key2]})
|
}
|
})
|
})
|
detailList.value = list
|
open.value = true
|
}
|
getList();
|
</script>
|
<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" :inline="true">
|
<el-form-item prop="name">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入内容"
|
clearable
|
style="width: 200px"
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<!--表格及分页-->
|
<el-table v-loading="loading" :data="tableData">
|
<el-table-column
|
v-for="(item, key, index) of tableHeader"
|
:prop="key.toString()"
|
:label="item"
|
:key="index"
|
align="center"
|
></el-table-column>
|
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed" fixed="right">
|
<template #default="scope">
|
<el-button link type="primary" icon="Document" @click="toDetail(scope.row)">详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
:total="pageParam.total"
|
v-model:page="pageParam.page"
|
v-model:limit="pageParam.limit"
|
:page-sizes="[10,20,30]"
|
@pagination="getList"
|
/>
|
<el-dialog v-model="open" title="账单详情" center>
|
<div class="detail-content">
|
<div v-for="(item,index) of detailList" :key="index">
|
<span>{{item.name}}</span>
|
<span>{{item.value}}</span>
|
</div>
|
<!-- flex布局调整-->
|
<div v-if="detailList.length % 2 !== 0"></div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
:deep(.el-dialog){
|
.el-dialog__body{
|
overflow-y: auto;
|
max-height: 80vh;
|
}
|
.detail-content{
|
background: #fff;
|
width: 98%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content:space-evenly;
|
padding:20px 50px;
|
align-items: center;
|
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
|
border-radius: 20px;
|
margin: 10px auto;
|
div{
|
width:48%;
|
margin-bottom: 20px;
|
padding-bottom: 10px;
|
span:first-child{
|
display: inline-block;
|
width: 79px;
|
font-size: 18px;
|
color: rgba(60, 59, 59, 0.93);
|
margin-right:2%;
|
text-align-last:justify;
|
}
|
span:last-child{
|
display: inline-block;
|
width:62%;
|
font-size: 18px;
|
color: #5a5a5a;
|
font-weight:600;
|
border-bottom: 1px solid rgba(168, 168, 168, 0.44);
|
}
|
}
|
}
|
}
|
|
</style>
|
|
