Blame view

src/components/fee/feeDetailMeter.vue 2.91 KB
f80ea09a   wuxw   加入费用详情
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
  <template>
    <div>
      <div class="margin-top">
        <el-table
          :data="feeDetailMeterInfo.meterWaters"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="waterId"
            :label="$t('feeDetailMeter.meterId')"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="meterTypeName"
            :label="$t('feeDetailMeter.meterType')"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="objName"
            :label="$t('feeDetailMeter.objName')"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="preDegrees"
            :label="$t('feeDetailMeter.preDegrees')"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="curDegrees"
            :label="$t('feeDetailMeter.curDegrees')"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="preReadingTime"
            :label="$t('feeDetailMeter.preReadingTime')"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="curReadingTime"
            :label="$t('feeDetailMeter.curReadingTime')"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('feeDetailMeter.createTime')"
            align="center"
          ></el-table-column>
        </el-table>
  
        <el-row class="margin-top">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script>
  import { listMeterWaters } from '@/api/fee/feeDetailMeterApi'
0b0e0aab   wuxw   费用详情页面开发完成
69
  import { getCommunityId } from '@/api/community/communityApi'   
f80ea09a   wuxw   加入费用详情
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
  
  export default {
    name: 'FeeDetailMeter',
    data() {
      return {
        feeDetailMeterInfo: {
          meterWaters: [],
          feeId: ''
        },
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    methods: {
      open(params) {
        this.feeDetailMeterInfo.feeId = params.feeId
        this._loadFeeDetailMeterData(this.currentPage, this.pageSize)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this._loadFeeDetailMeterData(this.currentPage, this.pageSize)
      },
      async _loadFeeDetailMeterData(page, row) {
        try {
          const params = {
0b0e0aab   wuxw   费用详情页面开发完成
96
            communityId: getCommunityId(),
f80ea09a   wuxw   加入费用详情
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
            feeId: this.feeDetailMeterInfo.feeId,
            page,
            row
          }
          
          const res = await listMeterWaters(params)
          this.feeDetailMeterInfo.meterWaters = res.data
          this.total = res.records
        } catch (error) {
          console.error('Failed to load meter data:', error)
        }
      }
    }
  }
  </script>