Enhance CSMS system

Strides-Admin/src/components/TableAction.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="table-actions">
+  <div class="vbe-table-actions">
     <div class="table-action action-edit" @click="handleView" v-if="showView">
-      <i v-if="showIcon" class="el-icon el-icon-view"></i>
+      <i v-if="showIcon" class="el-icon-view"></i>
       <span>{{viewText}}</span>
     </div>
     <div class="table-action action-edit" @click="handleEdit" v-if="showEdit">
-      <img v-if="showIcon" src="../assets/ic-update.png"/>
+      <i v-if="showIcon" class="el-icon-edit-outline"/>
       <span>{{editText}}</span>
     </div>
     <div class="table-action action-delete" @click="handleDelete" v-if="showDel">
-      <img v-if="showIcon" src="../assets/ic-delete.png" />
+      <i v-if="showIcon" class="el-icon-delete"/>
       <span>{{deleteText}}</span>
     </div>
   </div>
@@ -63,11 +63,11 @@
 </script>
 
 <style lang="scss">
-  .table-actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.vbe-table-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
   .table-action {
     padding: 0 8px;
     font-size: 14px;
@@ -75,34 +75,45 @@
     display: flex;
     align-items: center;
     position: relative;
-    & span {
+    i {
+      font-size: 15px;
+      margin-right: 3px;
+    }
+    span {
       white-space: nowrap;
     }
-    & + .table-action::before {
+    & + .table-action::after {
       left: 0;
       height: 14px;
       content: " ";
-      margin-left: 1px;
       position: absolute;
       border-left: 1px solid #999;
     }
+    &::before {
+      top: auto;
+      left: 6px;
+      right: 5px;
+      bottom: 1px;
+      height: 1px;
+      content: " ";
+      position: absolute;
+      transform: scaleX(0);
+      transition: all .2s;
+      background-color: #3179E4;
+      backface-visibility: hidden;
+    }
+    &:hover::before {
+      transform: scaleX(1);
+    }
   }
   .action-edit {
     color: #3179E4;
-    img {
-      width: 15px;
-      margin-right: 5px;
-    }
-    .el-icon {
-      font-size: 16px;
-      font-weight: bold;
-      margin-right: 5px;
-    }
   }
   .action-delete {
     color: #ED3F3F;
-    img {
-      width: 20px;
+    &::before {
+      background-color: #ED3F3F;
     }
   }
+}
 </style>

Strides-Admin/src/http/api/group.js

@@ -35,7 +35,7 @@ const group = {
     return put('groups/users', data)
   },
   deleteGroupUser(data) {
-    return del('groups/users', data)
+    return del('groups/users/' + data)
   },
   approveGroupUser(data) {
     return get('groups/user-pass', data)

Strides-Admin/src/http/http.js

@@ -4,7 +4,7 @@ import router from '@/router'
 import { getToken } from '@/utils/auth'
 
 export const baseURL = process.env.VUE_APP_BASE_API
-console.log('---CONFIG---', process.env)
+//console.log('---CONFIG---', process.env)
 // 设置接口响应时间
 axios.defaults.timeout = 50000
 axios.defaults.baseURL = baseURL + process.env.VUE_APP_API_PREFIX

Strides-Admin/src/styles/btn.scss

@@ -104,13 +104,16 @@
 
 .el-button.el-button--accent {
   color: $buttonText;
+  border-color: $--color-accent;
   background: $--color-accent;
   &.is-disabled {
     color: $buttonText;
-    background-color: rgba($--color-accent, .5);
+    border-color: rgba($--color-accent, 0);
+    background: rgba($--color-accent, .5);
   }
   &:not(.is-disabled):hover {
     color: $buttonText;
-    background-color: rgba($--color-accent, .7);
+    border-color: rgba($--color-accent, .7);
+    background: rgba($--color-accent, .7);
   }
 }

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

@@ -66,7 +66,7 @@
       <el-table-column
         label="Action"
         align="center"
-        width="200">
+        min-width="140">
         <template slot-scope="{row}">
           <TableAction
             @edit="updateUser(row)"

Strides-Admin/src/views/charge/AddStation.vue

@@ -483,7 +483,9 @@
         const res = await station.getRegistrationStatusList();
         if (res.data && res.data.length > 0) {
           this.registerOptions = res.data;
-          this.addForm.registrationStatus = res.data[0];
+          if (!this.isEdit) {
+            this.addForm.registrationStatus = res.data[0];
+          }
         }
         this.getAllSite();
       },
@@ -526,7 +528,9 @@
         provider.getAllServiceProvider().then(res => {
           if (res.data && res.data.length > 0) {
             this.providerOptions = res.data
-            this.addForm.providerPk = res.data[0].providerPk
+            if (!this.isEdit) {
+              this.addForm.providerPk = res.data[0].providerPk
+            }
           }
         }).finally(() => {
           this.loading = false;

Strides-Admin/src/views/charging/ChargingProfiles.vue

@@ -21,7 +21,7 @@
         class-name="fixed-width"
         v-for="(item, index) in columns"
         :key="index"
-        :width="item.width">
+        :min-width="item.width">
         <template slot-scope="{row}">
           <TableAction
             @edit="editProfile(row)"
@@ -62,26 +62,31 @@
         columns: [{
           key: 'chargingProfilePk',
           label: 'Charging Profile ID',
-          width: 160,
+          width: 140
         },{
-          width: 160,
+          width: 100,
           key: 'stackLevel',
           label: 'Stack Level'
         },{
           key: 'description',
-          label: 'Description'
+          label: 'Description',
+          width: 130
         },{
           key: 'profileKind',
-          label: 'Profile Kind'
+          label: 'Profile Kind',
+          width: 140
         },{
           key: 'recurrencyKind',
-          label: 'Recurrency Kind'
+          label: 'Recurrency Kind',
+          width: 140
         },{
           key: 'validFrom',
-          label: 'Valid From'
+          label: 'Valid From',
+          width: 140
         },{
           key: 'validTo',
-          label: 'Valid To'
+          label: 'Valid To',
+          width: 140
         },{
           action: true,
           label: 'Action',

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

@@ -60,7 +60,8 @@
       <el-table-column
         align="center"
         label="Name"
-        prop="userPk">
+        prop="userPk"
+        min-width="100">
         <template slot-scope="{row}" >
           <!-- <span
             class="link-type"
@@ -77,36 +78,39 @@
         </template>
       </el-table-column>
       <el-table-column
-        width="200"
+        min-width="140"
         align="center"
         label="User Type"
-        prop="nickName">
+        prop="userType">
         <template slot-scope="{row}">
-          <span>Membership</span>
+          <span>{{row.userType || "Membership"}}</span>
         </template>
       </el-table-column>
       <el-table-column
         align="center"
         label="Email"
-        prop="email"/>
+        prop="email"
+        min-width="140"/>
       <el-table-column
         width="150"
         align="center"
         label="Phone"
-        prop="phone"/>
+        prop="phone"
+        min-width="120"/>
       <el-table-column
         align="center"
         label="Group"
-        prop="groupName"/>
+        prop="groupName"
+        min-width="140"/>
       <el-table-column
         align="center"
         label="Status"
         prop="membershipStatus"
-        width="150"/>
+        min-width="120"/>
       <el-table-column
         align="center"
         label="Action"
-        width="210"
+        min-width="140"
         v-if="!$route.meta.onlyView">
         <template slot-scope="{ row }">
           <TableAction
@@ -221,9 +225,7 @@ export default {
     },
     deleteUser(id) {
       this.loading.table = true;
-      api.deleteGroupUser({
-        membershipId: id
-      }).then(res => {
+      api.deleteGroupUser(id).then(res => {
         this.$message({
           type: 'success',
           message: "Delete success."

Strides-Admin/src/views/limit/CreditLimit.vue

@@ -27,38 +27,37 @@
       <el-table-column
         label="Group"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
         <template slot-scope="{row}">{{ row.groupName }}</template>
       </el-table-column>
       <el-table-column
         label="Monthly Credit Limit"
         align="center"
-        class-name="fixed-width">
+        min-width="140">
         <template slot-scope="{row}">{{ row.creditLimitAmount }}</template>
       </el-table-column>
       <el-table-column
         label="Remaining Credit Limit"
         align="center"
-        class-name="fixed-width">
+        min-width="140">
         <template slot-scope="{row}">{{ row.creditLimitRemainingAmount }}</template>
       </el-table-column>
       <el-table-column
         label="Effective Date"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
         <template slot-scope="{row}">{{ row.effectiveStartDate }}</template>
       </el-table-column>
       <el-table-column
         label="Status"
         align="center"
-        class-name="fixed-width">
+        min-width="100">
         <template slot-scope="{row}">{{ row.dataStatus }}</template>
       </el-table-column>
       <el-table-column
         label="Action"
         align="center"
-        width="180"
-        class-name="fixed-width">
+        min-width="140">
         <template slot-scope="{row}">
           <TableAction
             :showEdit="!$route.meta.onlyView"

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

@@ -20,7 +20,7 @@
       <el-table-column
         align="center"
         label="Notificaiton ID"
-        width="200">
+        min-width="180">
         <template v-slot="{row}">
           <div
             class="link-type"
@@ -32,12 +32,13 @@
       <el-table-column
         align="center"
         label="Notification Title"
-        prop="title"/>
+        prop="title"
+        min-width="150"/>
       <el-table-column
         align="center"
         label="Notification Message"
         prop="message"
-        width="300">
+        min-width="280">
         <template v-slot="{row}">
           <div class="message" :title="row.message">
             {{ row.message }}
@@ -48,10 +49,11 @@
         align="center"
         label="Time Sent"
         prop="createdOn"
-        width="150"/>
+        min-width="150"/>
       <el-table-column
         align="center"
-        label="Target">
+        label="Target"
+        min-width="100">
         <template v-slot="{row}">
           <div class="flexcc">
             <img
@@ -66,17 +68,17 @@
         align="center"
         label="Status"
         prop="status"
-        width="100"/>
+        min-width="100"/>
       <el-table-column
         label="Action"
         align="center"
-        class-name="fixed-width">
+        min-width="100">
           <template slot-scope="{row}">
             <TableAction
               :showDel="false"
-              :showIcon="false"
-              editText="View"
-              @edit="viewNotification(row)"/>
+              :showView="true"
+              :showEdit="false"
+              @view="viewNotification(row)"/>
           </template>
       </el-table-column>
     </el-table>

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

@@ -17,7 +17,7 @@
       <el-table-column
         label="Device Serial No."
         align="center"
-        class-name="fixed-width">
+        min-width="150px">
         <template slot-scope="{row}">
           <a class="link-type" href="javascript:void(0);" @click="viewDevice(row)">{{ row.deviceSerialNo }}</a>
         </template>
@@ -26,18 +26,16 @@
         label="Site Name"
         align="center"
         prop="siteName"
-        class-name="fixed-width">
-      </el-table-column>
+        min-width="150px"/>
       <el-table-column
         label="Service Provider"
         align="center"
         prop="providerName"
-        class-name="fixed-width">
-      </el-table-column>
+        min-width="150px"/>
       <el-table-column
         label="Tied Chargers"
         align="center"
-        class-name="fixed-width">
+        min-width="120px">
         <template slot-scope="{row}">
           <div class="flexl">
             <span v-for="(item, index) in row.chargeBoxIds">{{ item }}</span>
@@ -48,13 +46,11 @@
         label="Status"
         align="center"
         prop="deviceStatus"
-        width="100px"
-        class-name="fixed-width">
-      </el-table-column>
+        min-width="80px"/>
       <el-table-column
         label="Action"
         align="center"
-        class-name="fixed-width">
+        min-width="140">
         <template slot-scope="{row}">
           <TableAction
             @edit="viewDevice(row)"

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

@@ -42,7 +42,7 @@
       <el-table-column
         label="Provider ID"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.providerPk }}</span>
           </template>
@@ -50,7 +50,7 @@
       <el-table-column
         label="Provider Name"
         align="center"
-        class-name="fixed-width">
+        min-width="150">
           <template slot-scope="{row}">
             <span>{{ row.providerName }}</span>
           </template>
@@ -58,7 +58,7 @@
       <el-table-column
         label="No.of Stations"
         align="center"
-        class-name="fixed-width">
+        min-width="120">
           <template slot-scope="{row}">
             <span>{{ row.boxCount }}</span>
           </template>
@@ -67,7 +67,7 @@
         v-if="!$route.meta.onlyView"
         label="Action"
         align="center"
-        class-name="fixed-width">
+        min-width="140">
           <template slot-scope="{row}">
             <TableAction
               @edit="editProvider(row)"

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

@@ -42,39 +42,43 @@
       <el-table-column
         label="RFID No."
         align="center"
-        prop="rfidNumber">
+        prop="rfidNumber"
+        min-width="140">
       </el-table-column>
       <el-table-column
         label="Email Address"
         align="center"
         prop="email"
-        class-name="fixed-width">
+        min-width="140">
       </el-table-column>
       <el-table-column
         label="User ID"
         align="center"
-        prop="userPk">
+        prop="userPk"
+        min-width="100">
       </el-table-column>
       <el-table-column
         label="User Type"
         align="center"
-        prop="userType">
+        prop="userType"
+        min-width="140">
       </el-table-column>
       <el-table-column
         label="Group"
         align="center"
-        prop="groupName">
+        prop="groupName"
+        min-width="140">
       </el-table-column>
       <el-table-column
         label="Status"
         align="center"
         prop="status"
-        width="100px">
+        min-width="100px">
       </el-table-column>
       <el-table-column
         label="Action"
         align="center"
-        class-name="fixed-width">
+        min-width="140">
         <template slot-scope="{row}">
           <TableAction
             @edit="viewDevice(row)"

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

@@ -40,7 +40,6 @@
       :key="tableKey"
       v-loading="listLoading"
       :data="list"
-      fit
       style="width: 100%;">
       <!--el-table-column
         label="Site ID"
@@ -55,7 +54,7 @@
         label="Site Name"
         prop="siteName"
         align="center"
-        width="260">
+        min-width="260">
           <template slot-scope="{row}">
             <span>{{ row.siteName }}</span>
           </template>
@@ -72,16 +71,34 @@
       <el-table-column
         label="Service Provider"
         prop="siteName"
-        align="center">
+        align="center"
+        min-width="180">
         <template slot-scope="{row}">
-          <div v-for="item in row.serviceProviders" :key="item">{{item}}</div>
+          <div
+            v-for="item in row.serviceProviders"
+            :key="item">
+            {{item}}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="Rates"
+        prop="siteName"
+        align="center"
+        min-width="200">
+        <template slot-scope="{row}" v-if="row.dynamicRates">
+          <div
+            v-for="(item,index) in row.dynamicRates"
+            :key="index">
+            {{item}}
+          </div>
         </template>
       </el-table-column>
       <el-table-column
         label="Total Stations"
         prop="stationNo"
         align="center"
-        width="100">
+        min-width="100">
           <template slot="header" slot-scope="scope">
             <div>Stations</div>
             <div style="font-size: 0.8em; margin-top: -5px;">(In Use/Total)</div>
@@ -102,7 +119,7 @@
         label="Total Connectors"
         prop="connectorNo"
         align="center"
-        width="100"
+        min-width="100"
         class-name="fixed-width">
           <template slot="header" slot-scope="scope">
             <div>Connectors</div>
@@ -125,7 +142,7 @@
         v-if="visible.actions"
         label="Action"
         align="center"
-        width="200">
+        min-width="140">
           <template slot-scope="{row, $index}">
             <TableAction
               :showDel="visible.actionDelete"

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

@@ -42,7 +42,8 @@
       <el-table-column
         label="Name"
         prop="userId"
-        align="center">
+        align="center"
+        min-width="150">
         <template slot-scope="{row}">
           <div
             class="link-type"
@@ -60,25 +61,27 @@
       <el-table-column
         label="Credit"
         prop="credit"
-        align="center"/>
+        align="center"
+        min-width="120"/>
       <el-table-column
         label="Email"
         prop="email"
-        align="center"/>
+        align="center"
+        min-width="150"/>
       <el-table-column
-        width="200"
+        min-width="150"
         label="Phone"
         prop="phone"
         align="center"/>
       <el-table-column
-        width="150"
+        min-width="120"
         label="Status"
         prop="status"
         align="center"/>
       <el-table-column
         label="Action"
         align="center"
-        width="210"
+        min-width="140"
         v-if="!$route.meta.onlyView">
         <template slot-scope="{row, $index}">
           <TableAction