financial idle fee devlopment

https://dev.wormwood.com.sg/zentao/task-view-794.html

Strides-Admin/src/views/financial/idlefee/detail.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="app-container">
+    <el-table
+      :data="table.list"
+      v-loading="loading">
+      <el-table-column
+        label="Site Name"
+        align="center"
+        prop="siteName"
+        min-width="100"/>
+      <el-table-column
+        label="Station ID"
+        align="center"
+        prop="chargeBoxId"
+        min-width="100"/>
+      <el-table-column
+        label="Connector ID"
+        align="center"
+        prop="connectorId"
+        min-width="120"/>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
+      <el-table-column
+        label="Start Date/Time"
+        align="center"
+        prop="idleFeeStartTime"
+        min-width="130"/>
+      <el-table-column
+        label="End Date/Time"
+        align="center"
+        prop="idleFeeEndTime"
+        min-width="130"/>
+      <el-table-column
+        label="Rate"
+        align="center"
+        prop="idleFeeRate"
+        min-width="200"/>
+      <el-table-column
+        label="Idle Fee Total"
+        align="center"
+        prop="idleCharges"
+        min-width="150"/>
+    </el-table>
+    <div class="right">
+      <Pagination
+        v-show="table.total > 0"
+        :total="table.total"
+        :page.sync="filter.pageNum"
+        :limit.sync="filter.pageSize"
+        @pagination="getTableData" />
+    </div>
+  </div>
+</template>
+
+<script>
+import site from '@/http/api/site'
+import ocpp from '@/http/api/ocpp'
+import apiUser from '@/http/api/apiUser.js'
+import api from '@/api/apiIdle'
+import Pagination from '@/components/Pagination'
+export default {
+  data() {
+    return {
+      loading: false,
+      listLoading: false,
+      siteOptions: [],
+      stationOptions: [],
+      userTypeOptions: [],
+      table: {
+        list: [],
+        total: 0
+      },
+      filter: {
+        pageNum: 1,
+        pageSize: 10,
+        pageCriteria: {
+          criteria: "",
+          chargingPk: "",
+        }
+      },
+    }
+  },
+  components: { Pagination },
+  created() {
+    //this.getUserTypeOption();
+    //this.getSiteOptions()
+    if (this.$route.params.id) {
+      this.filter.pageCriteria.chargingPk = this.$route.params.id
+      this.getTableData()
+    }
+  },
+  methods: {
+    toSearch() {
+      this.filter.pageNum = 1;
+      this.getTableData();
+    },
+    getSiteOptions(search) {
+      site.getAllSiteList({siteName: search ?? ""}).then(res => {
+        if (res.data && res.data.length > 0) {
+          this.siteOptions = res.data
+        }
+      });
+    },
+    getStationOptions() {
+      this.listLoading = true;
+      ocpp.getStationPages({
+        pageNum: 1,
+        pageSize: 20,
+        pageCriteria: {
+          date: "",
+          sitePk: this.filter.pageCriteria.sitePk
+        }
+      }).then(res => {
+        if (res.data) {
+          this.stationOptions = res.data;
+        }
+      }).finally(() => {
+        this.listLoading = false;
+      })
+    },
+    getUserTypeOption() {
+      apiUser.getUserTypeOptions().then(res => {
+        if (res.data) {
+          this.userTypeOptions = res.data
+        }
+      }).catch(error => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
+    },
+    getTableData() {
+      this.loading = true;
+      api.getIdleFeeTransactionDetailPages(this.filter).then(res => {
+        this.loading = false;
+        if (res.data.records && res.data.totalRow) {
+          this.table.total = res.data.totalRow
+          this.table.list = res.data.records
+        } else {
+          this.table.total = 0;
+          this.table.list = [];
+        }
+      }).catch(err => {
+        this.loading = false;
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+        this.table.total = 0;
+        this.table.list = [];
+      })
+    },
+    viewTransaction(row) {
+      this.$router.push({
+        path: "/financial-management/idle-fee/" + row.chargingPk
+      });
+    }
+  }
+}
+</script>
+
+<style>
+  
+</style>