update the search and filters and columns

Strides-Admin/src/views/posDevice/index.vue

@@ -31,7 +31,7 @@
         label="Service Provider"
         align="center"
         prop="providerName"
-        min-width="150px"/>
+        min-width="140"/>
       <el-table-column
         label="Tied Chargers"
         align="center"

Strides-Admin/src/views/provider/ServiceProviderManagement.vue

@@ -1,43 +1,39 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form
-        :model="filter"
-        v-bind:inline="true"
-        label-position="left"
-        label-width="100px"
-        style="width: 100%;">
-        <div class="filter-view">
-          <div class="flex1" style="min-width: 200px; max-width: 400px;">
-            <el-input
-              v-model="filter.criteria"
-              placeholder="Search by Provider Name/Address/Contact"
-              @keyup.enter.native="handleFilter" />
-          </div>
-          <div>
-            <el-button
-              type="primary"
-              icon="el-icon-search"
-              @click="handleFilter">
-              Search
-            </el-button>
-          </div>
-          <div class="filter-flex-button">
-            <el-button
-              v-if="!$route.meta.onlyView"
-              type="primary"
-              icon="el-icon-plus"
-              @click="addProvider">
-                Add Provider
-            </el-button>
-          </div>
+      <div class="filter-view">
+        <div class="flex1" style="min-width: 200px; max-width: 350px;">
+          <el-input
+            v-model="filter.criteria"
+            class="filter-view-item"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Provider Name"
+            @keyup.enter.native="handleFilter"
+            @change="handleFilter"
+            clearable/>
         </div>
-      </el-form>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="handleFilter">
+            Search
+          </el-button>
+        </div>
+        <div class="filter-flex-button">
+          <el-button
+            v-if="!$route.meta.onlyView"
+            type="primary"
+            icon="el-icon-plus"
+            @click="addProvider">
+            Add Provider
+          </el-button>
+        </div>
+      </div>
     </div>
     <el-table
       v-loading="listLoading"
       :data="tableList"
-      fit
       style="width: 100%;">
       <el-table-column
         label="Provider ID"
@@ -55,6 +51,11 @@
             <span>{{ row.providerName }}</span>
           </template>
       </el-table-column>
+      <el-table-column
+        label="No.of Sites"
+        align="center"
+        prop="siteCount"
+        min-width="120"/>
       <el-table-column
         label="No.of Stations"
         align="center"
@@ -67,12 +68,27 @@
         v-if="!$route.meta.onlyView"
         label="Action"
         align="center"
-        min-width="140">
-          <template slot-scope="{row}">
-            <TableAction
-              @edit="editProvider(row)"
-              @delete="deleteProvider(row)"/>
-          </template>
+        min-width="70">
+        <template slot-scope="{row}">
+          <!-- <TableAction
+            @edit="editProvider(row)"
+            @delete="deleteProvider(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="editProvider">
+                Edit
+              </el-dropdown-item>
+              <el-dropdown-item
+                command="deleteProvider">
+                Delete
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
       </el-table-column>
     </el-table>
     <div class="right">
@@ -138,6 +154,9 @@
       addProvider() {
         this.$router.push({path: '/partnership-management/service-provider-management/add'})
       },
+      handleCommand(cb, item) {
+        this[cb](item)
+      },
       editProvider(row) {
         //this.$store.commit('provider/SET_ProviderInfo', row)
         this.$router.push({

Strides-Admin/src/views/rfid/index.vue

@@ -1,12 +1,41 @@
 <template>
   <div class="app-container">
-    <div class="filter-container right">
+    <div class="filter-container">
       <div class="filter-view">
-        <div style="flex: 1; min-width: 180px; max-width: 350px;">
+        <el-select
+          class="filter-view-item"
+          v-model="params.pageVo.dataStatus"
+          placeholder="Status"
+          @change="toSearch"
+          clearable>
+          <el-option
+            label="Active"
+            value="A" />
+          <el-option
+            label="Inactive"
+            value="I" />
+        </el-select>
+        <el-select
+          class="filter-view-item"
+          v-model="params.pageVo.userType"
+          placeholder="User Type"
+          @change="toSearch"
+          clearable>
+          <el-option
+            v-for="item in userTypes"
+            :key="item"
+            :label="item"
+            :value="item" />
+        </el-select>
+        <div style="flex: 1; max-width: 350px;">
           <el-input
             v-model="params.pageVo.criteria"
-            placeholder="Search by Name, Email, Contact or Login ID"
-            @keyup.enter.native="getList" />
+            class="filter-view-item"
+            prefix-icon="el-icon-search"
+            placeholder="Search by E-mail, User ID, RFID number"
+            @keyup.enter.native="toSearch"
+            @change="toSearch"
+            clearable/>
         </div>
         <div>
           <el-button
@@ -21,7 +50,7 @@
             type="primary"
             icon="el-icon-plus"
             @click="addRfid">
-              Add
+            Add Card
           </el-button>
         </div>
       </div>
@@ -101,6 +130,7 @@
 import Pagination from '@/components/Pagination'
 import TableAction from '@/components/TableAction.vue'
 import api from '../../http/api/rfid.js'
+import apiUser from '@/http/api/apiUser'
 export default {
   data() {
     return {
@@ -113,16 +143,36 @@ export default {
         pageNo: 1,
         pageSize: 10,
         pageVo: {
-          criteria: ""
+          criteria: "",
+          dataStatus: "",
+          userType: ""
         }
-      }
+      },
+      userTypes: []
     }
   },
   components: { Pagination, TableAction },
   created() {
+    this.getUserTypeOption();
     this.getList();
   },
   methods: {
+    toSearch() {
+      this.params.pageNo = 1;
+      this.getList();
+    },
+    getUserTypeOption() {
+      apiUser.getUserTypeOptions().then(res => {
+        if (res.data) {
+          this.userTypes = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
+    },
     getList() {
       this.table.loading = true;
       api.getRfidPages(this.params).then(res => {

Strides-Admin/src/views/site/DynamicRates.vue

@@ -5,7 +5,8 @@
         <el-input
           class="filter-input"
           v-model="filters.pageVo.criteria"
-          placeholder="Search by Rate Name or Service Provider"
+          placeholder="Search by Rate Name"
+          prefix-icon="el-icon-search"
           clearable/>
         <div>
           <el-button
@@ -68,7 +69,7 @@
       <el-table-column
         align="center"
         label="Action"
-        min-width="100"
+        min-width="70"
         v-if="!$route.meta.onlyView">
         <template v-slot="{ row }">
           <el-dropdown

Strides-Admin/src/views/site/SiteManagement.vue

@@ -1,40 +1,48 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form
-        ref="filter-form"
-        :model="filter"
-        v-bind:inline="true"
-        label-position="left"
-        label-width="70px"
-        style="width: 100%;">
-        <div class="filter-view">
-          <div class="flex1" style="min-width: 200px; max-width: 350px;">
-            <el-input
-              v-model="filter.criteria"
-              placeholder="Search by Site Name or Address"
-              @keyup.enter.native="handleFilter" />
-          </div>
-          <div>
-            <el-button
-              v-waves
-              type="primary"
-              icon="el-icon-search"
-              @click="handleFilter">
-              Search
-            </el-button>
-          </div>
-          <div class="filter-flex-button">
-            <el-button
-              v-if="visible.addButton"
-              type="primary"
-              icon="el-icon-plus"
-              @click="handleClickAddSiteButton">
-                Add Site
-            </el-button>
-          </div>
+      <div class="filter-view">
+        <el-select
+          class="filter-view-item"
+          v-model="filter.pageVo.providerPk"
+          placeholder="Service Provider"
+          @change="handleFilter"
+          clearable>
+          <el-option
+            v-for="(item, index) in providerOptions"
+            :key="index"
+            :label="item.providerName"
+            :value="item.providerPk"/>
+        </el-select>
+        <div class="flex1" style="max-width: 350px;">
+          <el-input
+            class="filter-view-item"
+            v-model="filter.pageVo.criteria"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Site Name, Address, Carpark Code"
+            @keyup.enter.native="handleFilter"
+            @change="handleFilter"
+            clearable/>
         </div>
-      </el-form>
+        <div>
+          <el-button
+            v-waves
+            type="primary"
+            icon="el-icon-search"
+            @click="handleFilter">
+            Search
+          </el-button>
+        </div>
+        <div class="filter-flex-button">
+          <el-button
+            v-if="visible.addButton"
+            type="primary"
+            icon="el-icon-plus"
+            @click="handleClickAddSiteButton">
+              Add Site
+          </el-button>
+        </div>
+      </div>
     </div>
     <el-table
       :key="tableKey"
@@ -59,6 +67,11 @@
             <span>{{ row.siteName }}</span>
           </template>
       </el-table-column>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="125"/>
       <el-table-column
         label="Address"
         prop="siteAddress"
@@ -107,14 +120,6 @@
             <span>{{ row.stationInUse || "0" }}/{{ row.stationNo || "0" }}</span>
           </template>
       </el-table-column>
-      <!--el-table-column
-        label="Stations in Use"
-        prop="stationNo"
-        align="center">
-          <template slot-scope="{row}">
-            <span>{{ row.stationInUse || "0" }}</span>
-          </template>
-      </el-table-column-->
       <el-table-column
         label="Total Connectors"
         prop="connectorNo"
@@ -142,7 +147,7 @@
         v-if="visible.actions"
         label="Action"
         align="center"
-        min-width="140">
+        min-width="120">
           <template slot-scope="{row, $index}">
             <TableAction
               :showDel="visible.actionDelete"
@@ -155,9 +160,9 @@
       <pagination
         v-show="total > 0"
         :total="total"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
-        @pagination="handlePageChange" />
+        :page.sync="filter.pageNo"
+        :limit.sync="filter.pageSize"
+        @pagination="getList" />
     </div>
   </div>
 </template>
@@ -169,15 +174,10 @@ import waves from '@/directive/waves'
 // secondary package based on el-pagination
 import Pagination from '@/components/Pagination'
 import TableAction from '@/components/TableAction.vue'
-
 import site from '../../http/api/site'
+import provider from '../../http/api/provider'
 import { getRoleName } from '@/utils/auth'
 
-const {
-  deleteSite,
-  getSiteList
-} = site;
-
 export default {
   name: 'SiteManagement',
   components: { Pagination, TableAction },
@@ -189,12 +189,14 @@ export default {
       total: 0,
       listLoading: true,
       filter: {
-        criteria: '',
-      },
-      listQuery: {
-        page: 1,
-        limit: 10,
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          criteria: '',
+          providerPk: ''
+        }
       },
+      providerOptions: [],
       visible: {
         actions: true,
         actionDelete: true,
@@ -203,8 +205,9 @@ export default {
     }
   },
   created() {
-    this.getList()
-    this.setVisible()
+    this.getAllProvider();
+    this.getList();
+    this.setVisible();
   },
   methods: {
     setVisible() {
@@ -217,15 +220,16 @@ export default {
         this.visible.addButton = false
       }
     },
+    getAllProvider() {
+      provider.getAllServiceProvider().then(res => {
+        if (res.data && res.data.length > 0) {
+          this.providerOptions = res.data
+        }
+      });
+    },
     getList() {
       this.listLoading = true
-      getSiteList({
-        pageSize: this.listQuery.limit,
-        pageNo: this.listQuery.page,
-        pageVo: {
-          criteria: this.filter.criteria,
-        }
-      }).then((response) => {
+      site.getSiteList(this.filter).then((response) => {
         this.list = response.data
         this.total = response.total
       }).catch(err => {
@@ -237,14 +241,8 @@ export default {
         this.listLoading = false
       })
     },
-    handlePageChange(value) {
-      const {limit, page} = value;
-      this.listQuery.limit = limit;
-      this.listQuery.page = page;
-      this.getList();
-    },
     handleFilter() {
-      this.listQuery.page = 1
+      this.filter.pageNo = 1
       this.getList()
     },
     handleClickAddSiteButton() {
@@ -259,14 +257,12 @@ export default {
     handleDeleteSite(row, index) {
       this.$confirm(
         'Are you sure you want to delete this site ?',
-        'Delete',
-        {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        },
-      ).then(res => {
-        deleteSite({ sitePk: row.sitePk }).then(() => {
+        'Delete', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(res => {
+        site.deleteSite({ sitePk: row.sitePk }).then(() => {
           this.$message({
             message: `delete site success ${row.siteName}`,
             type: "success",

Strides-Admin/src/views/transaction/reservations.vue

@@ -1,34 +1,28 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form
-        :model="filter"
-        v-bind:inline="true"
-        label-position="left"
-        label-width="100px"
-        style="width: 100%;">
-        <div class="filter-view">
-          <div style="flex: 1; max-width: 350px;">
-            <el-input
-              v-model="filter.chargeBoxId"
-              placeholder="Search by User ID, Email, Phone or Licence Plate"
-              @keyup.enter.native="handleFilter" />
-          </div>
-          <div>
-            <el-button
-              type="primary"
-              icon="el-icon-search"
-              @click="handleFilter">
-              Search
-            </el-button>
-          </div>
+      <div class="filter-view">
+        <div style="flex: 1; max-width: 350px;">
+          <el-input
+            class="filter-view-item"
+            v-model="filter.chargeBoxId"
+            placeholder="Search by Email"
+            prefix-icon="el-icon-search"
+            @keyup.enter.native="handleFilter" />
         </div>
-      </el-form>
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="handleFilter">
+            Search
+          </el-button>
+        </div>
+      </div>
     </div>
     <el-table
       v-loading="listLoading"
       :data="tableList"
-      fit
       style="width: 100%;">
       <el-table-column
         label="User ID"

Strides-Admin/src/views/transaction/transactions.vue

@@ -8,11 +8,27 @@
         label-width="0px"
         style="width: 100%;">
         <div class="filter-view">
-          <div style="flex: 1; min-width: 200px; max-width: 350px;">
+          <el-select
+            class="filter-view-item"
+            v-model="filter.pageVo.userType"
+            placeholder="User Type"
+            @change="handleFilter"
+            clearable>
+            <el-option
+              v-for="item in userTypeOptions"
+              :key="item"
+              :label="item"
+              :value="item" />
+          </el-select>
+          <div style="flex: 1; max-width: 500px;">
             <el-input
-              v-model="filter.criteria"
-              placeholder="Search by User ID or Station ID"
-              @keyup.enter.native="handleFilter" />
+              class="filter-view-item"
+              v-model="filter.pageVo.criteria"
+              prefix-icon="el-icon-search"
+              placeholder="Search by Station ID, Vehicle, Transaction ID, Email, Carpark Code"
+              @keyup.enter.native="handleFilter"
+              @change="handleFilter"
+              clearable/>
           </div>
           <div>
             <el-button
@@ -22,20 +38,7 @@
               Search
             </el-button>
           </div>
-          <div class="filter-flex-button"></div>
-          <div>
-            <el-select
-              v-model="filter.filter"
-              placeholder="Select"
-              @change="handleFilter">
-              <el-option
-                v-for="(item, index) in filterOPtions"
-                :key="index"
-                :label="item.name"
-                :value="item.value"/>
-            </el-select>
-          </div>
-          <div>
+          <!-- <div>
             <el-date-picker
               v-model="filter.dateRange"
               type="daterange"
@@ -45,7 +48,7 @@
               value-format="yyyy-MM-dd"
               @change="handleFilter">
             </el-date-picker>
-          </div>
+          </div> -->
         </div>
       </el-form>
     </div>
@@ -57,8 +60,7 @@
       <el-table-column
         min-width="120"
         label="Transaction ID"
-        align="center"
-        class-name="fixed-width">
+        align="center">
         <template slot-scope="{row}">
           <span
             class="link-type"
@@ -126,6 +128,11 @@
           </div>
         </template>
       </el-table-column>
+      <el-table-column
+        label="Carpark Code"
+        prop="carParkCode"
+        align="center"
+        min-width="120"/>
       <el-table-column
         min-width="90"
         label="Connector"
@@ -196,7 +203,7 @@
           <span :title="row.charges">{{ row.charges }}</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         label="Invoice"
         align="center"
         min-width="80">
@@ -206,15 +213,15 @@
             title="Download"
             @click="downloadPdf(row.transactionPk)"></i>
         </template>
-      </el-table-column>
+      </el-table-column> -->
     </el-table>
     <div class="right">
       <pagination
         v-show="total > 0"
         :total="total"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
-        @pagination="handlePageChange" />
+        :page.sync="filter.pageNo"
+        :limit.sync="filter.pageSize"
+        @pagination="getList" />
     </div>
   </div>
 </template>
@@ -222,17 +229,23 @@
 <script>
 import Pagination from '@/components/Pagination'
 import api from '../../http/api/transaction'
+import apiUser from '../../http/api/apiUser.js'
 
 export default {
   components: { Pagination },
   data() {
     return {
       filter: {
-        filter: "",
-        criteria: "",
-        dateRange: []
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          filter: "",
+          criteria: "",
+          userType: "",
+          dateRange: [],
+        }
       },
-      filterOPtions: [],
+      userTypeOptions: [],
       listLoading: true,
       tableList: [],
       total: 0,
@@ -243,34 +256,29 @@ export default {
     }
   },
   created() {
-    this.getFilters();
+    this.getUserTypeOption();
+    this.handleFilter();
   },
   methods: {
     handleFilter() {
-      this.listLoading = true;
-      this.listQuery.page = 1;
+      this.filter.pageNo = 1;
       this.getList();
     },
-    handlePageChange() {
-      this.listLoading = true;
-      this.getList();
-    },
-    async getFilters() {
-      const data = await api.getTransactionFilters()
-      if (data.success && data.data) {
-        this.filterOPtions = data.data
-        this.filter.filter = data.data[0].value
-        this.getList()
-      } else {
-        this.listLoading = false
-      }
+    getUserTypeOption() {
+      apiUser.getUserTypeOptions().then(res => {
+        if (res.data) {
+          this.userTypeOptions = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
     },
     async getList() {
-      api.getTransactionPages({
-        pageSize: this.listQuery.limit,
-        pageNo: this.listQuery.page,
-        pageVo: this.filter
-      }).then(res => {
+      this.listLoading = true;
+      api.getTransactionPages(this.filter).then(res => {
         if (res.data && res.total) {
           this.tableList = res.data
           this.total = res.total

Strides-Admin/src/views/transaction/view_transaction.vue

@@ -139,9 +139,19 @@
             type="primary"
             style="margin: 0 10px;"
             v-if="!details.endDateTime"
-            @click="endTransaction">
+            @click="endTransaction"
+            :loading="endLoading">
             End Transaction
           </el-button>
+          <el-button
+            v-else
+            type="primary"
+            style="margin: 0 10px;"
+            icon="el-icon-download"
+            @click="downloadInvoice"
+            :loading="endLoading">
+            Download Invoice
+          </el-button>
           <div class="flex1"></div>
           <el-select v-model="measurand" @change="getDeatil">
             <el-option
@@ -154,12 +164,12 @@
               :label="item"/>
           </el-select>
         </div>
-        <el-table fit :data="listData">
+        <el-table :data="listData">
           <el-table-column
             label="Timestamp"
             align="center"
             class-name="fixed-width"
-            width="130">
+            min-width="130">
               <template slot-scope="{row}">
                 <span>{{ row.timestamp }}</span>
               </template>
@@ -167,7 +177,7 @@
           <el-table-column
             label="Value"
             align="center"
-            class-name="fixed-width">
+            min-width="80">
               <template slot-scope="{row}">
                 <span>{{ row.value }}</span>
               </template>
@@ -176,7 +186,7 @@
             label="Reading Context"
             align="center"
             class-name="fixed-width"
-            width="130">
+            min-width="130">
               <template slot-scope="{row}">
                 <span>{{ row.readingContext }}</span>
               </template>
@@ -184,7 +194,7 @@
           <el-table-column
             label="Format"
             align="center"
-            class-name="fixed-width">
+            min-width="100">
               <template slot-scope="{row}">
                 <span>{{ row.format }}</span>
               </template>
@@ -193,7 +203,7 @@
             label="Measureand"
             align="center"
             class-name="fixed-width"
-            width="250">
+            min-width="250">
               <template slot-scope="{row}">
                 <span>{{ row.measureand }}</span>
               </template>
@@ -201,7 +211,7 @@
           <el-table-column
             label="Location"
             align="center"
-            class-name="fixed-width">
+            min-width="100">
               <template slot-scope="{row}">
                 <span>{{ row.location }}</span>
               </template>
@@ -209,14 +219,15 @@
           <el-table-column
             label="Unit"
             align="center"
-            class-name="fixed-width">
+            min-width="80">
               <template slot-scope="{row}">
                 <span>{{ row.unit }}</span>
               </template>
           </el-table-column>
           <el-table-column
             label="Phase"
-            align="center">
+            align="center"
+            min-width="80">
               <template slot-scope="{row}">
                 <span>{{ row.phase }}</span>
               </template>
@@ -313,6 +324,44 @@
           this.endLoading = false
         })
       },
+      downloadInvoice() {
+        this.endLoading = true;
+        api.downloadInvoice(this.$route.params.id).then(res => {
+          if (res && res.size > 0) {
+            const name = 'T' + this.$route.params.id + '-' + new Date().getTime() + '.pdf'
+            this.downloadFile(res, name);
+          } else {
+            this.$message.error('Empty files');
+          }
+        }).catch(err => {
+          this.$message({
+            type: 'error',
+            message: err
+          })
+        }).finally(() => {
+          this.endLoading = false
+        })
+      },
+      downloadFile(res, fileName) {
+        const blob = new Blob([res], {
+          type: 'application/pdf;charset=utf-8'
+        })
+        // let href = window.URL.createObjectURL(blob)
+        if ('download' in document.createElement('a')) {
+          // 非IE下载
+          const elink = document.createElement('a')
+          elink.download = fileName
+          elink.style.display = 'none'
+          elink.href = URL.createObjectURL(blob)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href) // 释放URL 对象
+          document.body.removeChild(elink)
+        } else {
+          // IE10+下载
+          navigator.msSaveBlob(blob, fileName)
+        }
+      },
       handlePageChange() {
         this.listData = []
         var i = (this.page - 1) * this.pageSize

Strides-Admin/src/views/user/index.vue

@@ -30,6 +30,7 @@
         <el-input
           class="filter-input"
           v-model="filters.pageVo.criteria"
+          prefix-icon="el-icon-search"
           placeholder="Email, Name, License Plate"
           @change="onClickSearch"
           clearable/>
@@ -129,14 +130,20 @@
       </el-table-column>
       <el-table-column
         align="center"
-        label="Group Name"
+        label="Group"
         prop="fleetName"
-        min-width="120"/>
-      <el-table-column
+        min-width="120">
+        <template slot-scope="{row}">
+          <div v-if="row.fleetName">
+            <span :class='"status-" + row.fleetStatus' :title="row.fleetName + ' (' +row.fleetStatus+ ')'">{{row.fleetName}}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
         align="center"
         label="Group Status"
         prop="fleetStatus"
-        min-width="120"/>
+        min-width="120"/> -->
       <el-table-column
         width="150"
         align="center"
@@ -145,7 +152,7 @@
         min-width="120">
         <template slot-scope="{row}">
           <div v-for="(item,index) in row.memberships" :key="index">
-            <span :class='"status-" + item.membershipStatus'>{{item.membershipName}}</span>
+            <span :class='"status-" + item.membershipStatus' :title="item.membershipName + ' (' +item.membershipStatus+ ')'">{{item.membershipName}}</span>
           </div>
         </template>
       </el-table-column>
@@ -157,7 +164,7 @@
       <el-table-column
         align="center"
         label="Action"
-        min-width="80"
+        min-width="70"
         v-if="!$route.meta.onlyView">
         <template slot-scope="{ row }" v-if="row.accountStatus != 'Inactive'">
           <el-dropdown