|
<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";
|
import waterMeterTask from "@/api/financial/waterMeterTask/index.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({
|
waterMeterSn: "水表编号",
|
userName: "所属用户",
|
taskType: "任务类型",
|
rechargeAmount: "账单总金额",
|
isExecute: "执行状态",
|
createTimeView: "创建时间:",
|
})
|
/** 获取列表 */
|
const loading = ref(false);
|
async function getList(val) {
|
loading.value = true;
|
|
const params = setPostParams({...val},["limit","page","taskType"]);
|
params.taskType=1;
|
await waterMeterTask().search(params).then((res) =>{
|
tableData.value = res.data.list
|
tableData.value.forEach((item,index) =>{
|
if(item.isExecute === 0){
|
item.isExecute = '充值中'
|
}else if(item.isExecute === 1){
|
item.isExecute = '已到账'
|
}else if(item.isExecute === 2){
|
item.isExecute = '执行失败'
|
}
|
if(item.taskType === 1){
|
item.taskType = '充值'
|
}else if(item.taskType === 2){
|
item.taskType = '开关阀'
|
}else if(item.taskType === 3){
|
item.taskType = '设置阶梯价'
|
}
|
})
|
pageParam.value.total = res.data.total
|
pageParam.value.limit = res.data.limit
|
pageParam.value.page = res.data.page
|
})
|
loading.value = false;
|
}
|
const open = ref(false)
|
const detailList = ref([])
|
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>
|
<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>
|
|
