web
2025-03-17 56d13900e2d74eeb9e22a9d86dc929640a676f6f
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!--
 * @Author: elkers
 * @Date: 2024-08-06 16:17:39
 * @LastEditors: Liuyi candymxq888@outlook.com
 * @LastEditTime: 2024-10-22 16:47:01
 * @FilePath: \water-qinghe-web\src\views\meterReading\meterReadingRecord\index.vue
 * @Description: 自动抄表 数据上报
-->
 
 <script setup>
 import  meterReadingRecordApi from "@/api/meterReadingApi/meterReadingRecord";
 import setPostParams from "@/utils/searchParams.js";
 const { proxy } = getCurrentInstance();
 
/**
 * 搜索相关
 */
 /** 搜索按钮操作 */
 function handleQuery() {
   getList({keywords:queryParam.value.name})
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
 /**
  *  Table表格权限数据列表相关
  */
const queryParam = ref({
    name:''
})
const pageParam = ref({
    total:0,
    limit:0,
    page:1,
})
const tableData = ref([]);
const inpTip= '请输入',selTip = '请输入';
let  tableHeader = ref({
        userName:"所属用户",
        waterMeterSn: '表号',
        atData: '累计用水量',
        deductAmount: '扣除金额',
        useData:'本次使用水量',
        usableData:'剩余水量',
        comment:"备注",
        createTimeView:'上传时间'
   })
 /** 获取列表 */
 const loading = ref(false)
 async function getList(val) {
      loading.value = true;
      let postParam = setPostParams(val)
      await meterReadingRecordApi().search(postParam).then((res) =>{
        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="queryParam" ref="queryRef" :inline="true">
          <el-form-item label="" prop="">
             <el-input
                v-model="queryParam.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"
            :sortable="key.toString() == 'deductAmount' ? true : false"
          >
            <template #default="scope">
                <div v-if="key.toString() == 'headImg'">
                    <img :src="scope.row.headImg" class="table-headImg"/>
                </div>
            </template>
        </el-table-column>
          <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
                <el-button link type="primary" icon="Edit" v-has="['update',route]" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button link type="primary" icon="Delete" v-has="['delete',route]" @click="handleDelete(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"
        />
    </div>
 </template>