web
2025-07-03 a02a7acbcebc5ed668114087ea4256a44361a0c0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script setup >
import  record from "@/api/financial/record.js";
import setPostParams from "../../../utils/searchParams.js";
const { proxy } = getCurrentInstance();
 
/**
* 搜索相关
*/
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({
        userName: '用户名称',
        paymentAmount:'消费金额',
        payStatusLabel: '缴费状态',//payStatus
        waterAmount: '本次出水量',
        waterSeconds: '本次出水秒数',
        balance: '剩余水量',
        payTime: '支付时间',
        facilityCode: '设备编号',
        comment: '备注',
  })
 
/** 获取列表 */
 
const loading = ref(false);
async function getList(val) {
     loading.value = true;
 
let postParam = setPostParams(val)
     await record().paySearch(postParam).then((res) =>{
       res.data.list.forEach(item => {
         item.payStatusLabel = item.payStatus == 200 ? '缴费成功' : (item.payStatus == 102 ? '缴费中' : (item.payStatus == 100 ) ? '待缴费' : '')
       });
       tableData.value = res.data.list
       pageParam.value.total = res.data.total
       pageParam.value.limit = res.data.limit
       pageParam.value.page = res.data.page
   })
   loading.value = false;
}
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"
      />
  </div>
</template>