financial idle fee devlopment

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

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

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container filter-view">
+      <el-select
+        class="filter-view-item"
+        v-model="filter.pageCriteria.userType"
+        placeholder="User Type"
+        @change="toSearch"
+        v-if="false"
+        clearable>
+        <el-option
+          v-for="item in userTypeOptions"
+          :key="item"
+          :label="item"
+          :value="item" />
+      </el-select>
+      <div style="flex: 1; max-width: 420px;">
+        <el-input
+          clearable
+          prefix-icon="el-icon-search"
+          v-model="filter.pageCriteria.criteria"
+          placeholder="Station ID, Vehicle, Transaction ID, Email, Carpark Code"
+          @keyup.enter.native="toSearch"
+          @change="toSearch"/>
+      </div>
+      <!-- <el-form-item>
+        <el-date-picker
+          v-model="filter.pageCriteria.date"
+          type="month"
+          format="yyyy-MM"
+          value-format="yyyy-MM"
+          placeholder="Filter Date"/>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          filterable
+          remote
+          clearable
+          v-model="filter.pageCriteria.sitePk"
+          :remote-method="(s) => getSiteOptions(s)"
+          placeholder="Filter by site"
+          @change="getStationOptions">
+          <el-option
+            v-for="(item, index) in siteOptions"
+            :key="index"
+            :label="item.siteName"
+            :value="item.sitePk"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          clearable
+          v-model="filter.pageCriteria.chargeBoxId"
+          placeholder="Filter by Station ID"
+          v-loading="listLoading">
+          <el-option
+            v-for="(item, index) in stationOptions"
+            :key="index"
+            :label="item.stationId"
+            :value="item.stationId"/>
+        </el-select>
+      </el-form-item> -->
+      <div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getTableData">
+          Search
+        </el-button>
+      </div>
+    </div>
+    <el-table
+      :data="table.list"
+      v-loading="loading">
+      <el-table-column
+        label="Transaction ID"
+        align="center"
+        prop="transactionPk"
+        min-width="120">
+        <template slot-scope="{row}">
+          <a class="link-type" href="javascript:void(0);" @click="viewTransaction(row)">{{ row.transactionPk }}</a>
+        </template>
+      </el-table-column>
+      <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="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: {
+          date: "",
+          sitePk: "",
+          criteria: "",
+          userType: "",
+          chargeBoxId: ""
+        }
+      },
+    }
+  },
+  components: { Pagination },
+  created() {
+    //this.getUserTypeOption();
+    //this.getSiteOptions()
+    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.getIdleFeeTransactionPages(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>