ChargEco/Strides-Admin/src/views/charging/LoadBalance.vue

<template>
  <div class="app-container">
    <div class="filter-container filter-view">
      <el-select
        class="filter-view-item"
        v-model="filter.pageVo.loadBalancing"
        placeholder="Load Balancing Type"
        @change="onSearch"
        clearable>
        <el-option
          v-for="(item, index) in typeOptions"
          :key="index"
          :label="item.name"
          :value="item.value"/>
      </el-select>
      <div class="flex1" style="min-width: 200px; max-width: 350px;">
        <el-input
          v-model="filter.pageVo.criteria"
          class="filter-view-item"
          prefix-icon="el-icon-search"
          placeholder="Search by Carpark Code, Site Name"
          @keyup.enter.native="onSearch"
          @change="onSearch"
          clearable/>
      </div>
      <div>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="onSearch">
          Search
        </el-button>
      </div>
    </div>
    <el-table
      :data="table.data"
      class="no-border"
      v-loading="loading">
      <el-table-column
        label="Site Name"
        prop="sitePk"
        align="center"
        min-width="150">
        <template slot-scope="{row}">
          <span class="link-type" @click="onEditClick(row)">{{ row.siteName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="Address"
        prop="address"
        align="center"
        min-width="180"/>
      <el-table-column
        label="Service Provider"
        align="center"
        min-width="150">
        <template slot-scope="{row}">
          <div
            v-for="(item, index) in row.serviceProviders"
            :key="index">
            {{item.providerName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="Load Balancing Type"
        prop="loadBalancingType"
        align="center"
        min-width="150"/>
      <el-table-column
        v-if="!$route.meta.onlyView"
        label="Action"
        align="center"
        min-width="70">
        <template slot-scope="{row}">
          <el-dropdown
            class="action-dropdown"
            @command="(v) => handleCommand(v, row)">
            <i class="el-icon-more icon-action"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="onEditClick">
                Edit Info
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <pagination
        v-show="table.total > 0"
        :total="table.total"
        :page.sync="filter.pageNo"
        :limit.sync="filter.pageSize"
        @pagination="getTableData" />
    </div>
  </div>
</template>

<script>
import api from '@/http/api/apiBalancing.js';
import Pagination from '@/components/Pagination'
import TableAction from '@/components/TableAction.vue'
export default {
  data() {
    return {
      loading: false,
      filter: {
        pageNo: 1,
        pageSize: 10,
        pageVo: {
          criteria: "",
          loadBalancing: ""
        }
      },
      table: {
        data: [],
        total: 0
      },
      typeOptions: []
    };
  },
  components: {Pagination, TableAction},
  created() {
    this.getTypeOptions();
    this.onSearch();
  },
  methods: {
    onSearch() {
      this.filter.pageNo = 1;
      this.getTableData();
    },
    getTypeOptions() {
      api.getBalancingTypes().then(res => {
        if (res.data) {
          this.typeOptions = res.data
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
      });
    },
    getTableData() {
      this.loading = true;
      api.getBalancingPages(this.filter).then(res => {
        if (res.data && res.total) {
          this.table.data = res.data
          this.table.total = res.total
        } else {
          this.table.data = []
          this.table.total = 0
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.table.data = []
        this.table.total = 0
      }).finally(() => {
        this.loading = false;
      })
    },
    handleCommand(cb, item) {
      this[cb](item)
    },
    onEditClick(row) {
      this.$router.push({
        path: '/smart-energy-management/site-load-balancing/' + row.sitePk
      })
    }
  }
}
</script>

<style scoped>

</style>