12681

Strides-Admin/src/router/CreditLimit.js

@@ -39,6 +39,16 @@ export default {
       },
       hidden: true
     },
+    {
+      path: '/credit-limit/edit/:id',
+      component: () => import('@/views/limit/Add'),
+      name: 'credit-limit-edit',
+      meta: {
+        title: 'Edit Credit Limit',
+        activeMenu: '/credit-limit'
+      },
+      hidden: true
+    },
     {
       path: '/credit-limit/edit',
       component: () => import('@/views/limit/Edit'),

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

@@ -293,7 +293,7 @@
           </el-form-item>
         </div>
       </div>
-      <div class="card-content flexc">
+      <div class="card-content flexcr">
         <div class="buttons">
           <el-button
             type="primary"
@@ -568,7 +568,7 @@
   }
   .card-content {
     margin: 0 8px 16px;
-    padding: 15px 40px;
+    padding: 15px 50px;
     border-radius: 6px;
     background-color: white;
   }
@@ -576,7 +576,7 @@
     color: #333;
     margin-top: 20px;
     margin-bottom: 30px;
-    font-size: 16px;
+    font-size: 15px;
     user-select: none;
     line-height: 24px;
     font-weight: 700;

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

@@ -1,13 +1,13 @@
 <template>
   <div class="card-container">
-    <div class="card-content">
-      <el-form
-        :model="addForm"
-        :rules="rule"
-        v-loading="loading"
-        ref="addForm"
-        label-width="150px"
-        label-position="right">
+    <el-form
+      :model="addForm"
+      :rules="rule"
+      v-loading="loading"
+      ref="addForm"
+      label-width="150px"
+      label-position="right">
+      <div class="card-content">
         <div class="section-title">Charging Profile Information</div>
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
@@ -150,7 +150,8 @@
           </el-col>
           <el-col :xs="24" :md="12">
             <el-form-item
-              label="Start Date:">
+              label="Start Date:"
+              prop="startSchedule">
               <el-date-picker
                 class="add-text"
                 v-model="addForm.startSchedule"
@@ -187,8 +188,8 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <div class="hr"/>
-        
+      </div>
+      <div class="card-content">
         <div class="section-title">Schedule Period</div>
         <div class="rate-list-view" v-for="(item, index) in addForm.schedulePeriod" :key="index">
           <el-form-item
@@ -218,7 +219,7 @@
             <!--span class="limit-unit">A</span-->
           </el-form-item>
           <el-form-item
-            label="No. of Phase :"
+            label="No. Of Phase:"
             label-width="115px"
             :prop="'schedulePeriod.' + index + '.numberPhases'"
             :rules="rule.schedulePeriod.numberPhases">
@@ -244,7 +245,8 @@
               @click="addSchedule"/>
           </div>
         </div>
-        <div class="hr-full"/>
+      </div>
+      <div class="card-content">
         <div class="buttons">
           <el-button
             type="primary"
@@ -260,8 +262,8 @@
             Save
           </el-button>
         </div>
-      </el-form>
-    </div>
+      </div>
+    </el-form>
   </div>
 </template>
 
@@ -331,6 +333,11 @@
             trigger: 'change',
             message: 'Please select charging rate unit'
           },
+          startSchedule: {
+            required: true,
+            trigger: 'change',
+            message: 'Please select start date'
+          },
           schedulePeriod: {
             startPeriod: {
               required: true,
@@ -440,7 +447,8 @@
     background-color: #F0F5FC;
   }
   .card-content {
-    padding: 15px 80px;
+    margin: 0 8px 16px;
+    padding: 15px 50px;
     border-radius: 6px;
     background-color: white;
   }
@@ -448,10 +456,10 @@
     color: #333;
     margin-top: 20px;
     margin-bottom: 30px;
-    font-size: 16px;
+    font-size: 15px;
     user-select: none;
     line-height: 24px;
-    font-weight: 500;
+    font-weight: 700;
     font-family: sans-serif;
     text-transform: uppercase;
   }
@@ -489,7 +497,7 @@
   }
   .buttons {
     padding-top: 15px;
-    padding-bottom: 30px;
+    padding-bottom: 15px;
   }
   .form-unit ::v-deep .el-form-item__label {
     line-height: 30px;

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

@@ -1,13 +1,13 @@
 <template>
   <div class="card-container">
-    <div class="card-content">
-      <el-form
-        :model="editForm"
-        :rules="rule"
-        v-loading="loading"
-        ref="editForm"
-        label-width="150px"
-        label-position="right">
+    <el-form
+      :model="editForm"
+      :rules="rule"
+      v-loading="loading"
+      ref="editForm"
+      label-width="150px"
+      label-position="right">
+      <div class="card-content">
         <div class="section-title">Charging Profile Information</div>
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
@@ -150,7 +150,8 @@
           </el-col>
           <el-col :xs="24" :md="12">
             <el-form-item
-              label="Start Date:">
+              label="Start Date:"
+              prop="startSchedule">
               <el-date-picker
                 class="add-text"
                 v-model="editForm.startSchedule"
@@ -187,8 +188,9 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <div class="hr"/>
-        
+      </div>
+      
+      <div class="card-content">
         <div class="section-title">Schedule Period</div>
         <div class="rate-list-view" v-for="(item, index) in editForm.schedulePeriod" :key="index">
           <el-form-item
@@ -218,7 +220,7 @@
             <!-- <span class="limit-unit">A</span> -->
           </el-form-item>
           <el-form-item
-            label="No. of Phase :"
+            label="No. Of Phase:"
             label-width="115px"
             :prop="'schedulePeriod.' + index + '.numberPhases'"
             :rules="rule.schedulePeriod.numberPhases">
@@ -244,7 +246,9 @@
               @click="addSchedule"/>
           </div>
         </div>
-        <div class="hr-full"/>
+      </div>
+      
+      <div class="card-content flexcr">
         <div class="buttons">
           <el-button
             type="primary"
@@ -260,8 +264,17 @@
             Save
           </el-button>
         </div>
-      </el-form>
-    </div>
+        <div
+          class="flex1"
+          style="margin-left: 20px;">
+          <span
+            class="add-text"
+            :title='"CREATED BY " + editForm.createdBy + " ON " + editForm.createdOn'>
+            LAST UPDATED BY {{editForm.updatedBy}} TIMESTAMP: {{editForm.updatedOn}}
+          </span>
+        </div>
+      </div>
+    </el-form>
   </div>
 </template>
 
@@ -332,6 +345,11 @@
             trigger: 'change',
             message: 'Please select charging rate unit'
           },
+          startSchedule: {
+            required: true,
+            trigger: 'change',
+            message: 'Please select start date'
+          },
           schedulePeriod: {
             startPeriod: {
               required: true,
@@ -459,7 +477,8 @@
     background-color: #F0F5FC;
   }
   .card-content {
-    padding: 15px 80px;
+    margin: 0 8px 16px;
+    padding: 15px 50px;
     border-radius: 6px;
     background-color: white;
   }
@@ -467,15 +486,16 @@
     color: #333;
     margin-top: 20px;
     margin-bottom: 30px;
-    font-size: 16px;
+    font-size: 15px;
     user-select: none;
     line-height: 24px;
-    font-weight: 500;
+    font-weight: 700;
     font-family: sans-serif;
     text-transform: uppercase;
   }
   .add-text {
     width: 100% !important;
+    font-size: 14px;
     max-width: 300px;
   }
   .add-text ::v-deep .el-textarea__inner {
@@ -508,7 +528,7 @@
   }
   .buttons {
     padding-top: 15px;
-    padding-bottom: 30px;
+    padding-bottom: 15px;
   }
   .form-unit ::v-deep .el-form-item__label {
     line-height: 30px;

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

@@ -1,13 +1,13 @@
 <template>
   <div class="card-container">
-    <div class="card-content">
-      <el-form
-        :model="addForm"
-        :rules="rule"
-        v-loading="loading"
-        ref="addForm"
-        label-position="right"
-        label-width="180px">
+    <el-form
+      :model="addForm"
+      :rules="rule"
+      v-loading="loading"
+      ref="addForm"
+      label-position="right"
+      label-width="180px">
+      <div class="card-content">
         <div class="section-title">Monthly Credit Limit:</div>
         <el-row :gutter="20">
           <el-col :xs="24" :md="12">
@@ -20,7 +20,8 @@
                 filterable
                 :remote-method="filterCompany"
                 v-model="addForm.fleetCompanyId"
-                placeholder="Select with search">
+                placeholder="Select with search"
+                @blur="clearWords">
                 <el-option
                   v-for="(item, index) in companyOptions"
                   :key="index"
@@ -59,8 +60,6 @@
                 maxlength="10"/>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row :gutter="20">
           <el-col :xs="24" :md="12">
             <el-form-item
               label="Effective Start Date:"
@@ -74,6 +73,20 @@
                 placeholder="Select date"/>
             </el-form-item>
           </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :md="12">
+            <el-form-item
+              label="Used Credit Limit:">
+              <span class="item-unit">(S$)</span>
+              <el-input
+                class="add-text"
+                v-model="addForm.usedCreditLimitAmount"
+                placeholder="Add text"
+                maxlength="10"
+                readonly/>
+            </el-form-item>
+          </el-col>
           <el-col :xs="24" :md="12">
             <el-form-item
               label="Effective End Date:"
@@ -89,6 +102,18 @@
           </el-col>
         </el-row>
         <el-row :gutter="20">
+          <el-col :xs="24" :md="12">
+            <el-form-item
+              label="Remaining Credit Limit:">
+              <span class="item-unit">(S$)</span>
+              <el-input
+                class="add-text"
+                v-model="addForm.creditLimitRemainingAmount"
+                placeholder="Add text"
+                readonly
+                maxlength="10"/>
+            </el-form-item>
+          </el-col>
           <el-col :xs="24" :md="12">
             <el-form-item
               label="Deposit Received:"
@@ -102,7 +127,26 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <div class="hr-full"/>
+        <el-row :gutter="20">
+          <el-col :xs="24" :md="12">
+            <el-form-item
+              label="Service Provider:"
+              prop="providerPk">
+              <el-select
+                class="add-text"
+                v-model="addForm.providerPk"
+                placeholder="Select">
+                <el-option
+                  v-for="(item, index) in providerOptions"
+                  :key="index"
+                  :label="item.providerName"
+                  :value="''+item.providerPk"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="card-content flexcr">
         <div class="buttons">
           <el-button
             type="primary"
@@ -118,13 +162,24 @@
             Save
           </el-button>
         </div>
-      </el-form>
-    </div>
+        <div
+          class="flex1"
+          style="margin-left: 20px;"
+          v-if="isEdit">
+          <span
+            class="add-text"
+            :title='"CREATED BY " + addForm.createdBy + " ON " + addForm.createdOn'>
+            LAST UPDATED BY {{addForm.updatedBy}} TIMESTAMP: {{addForm.updatedOn}}
+          </span>
+        </div>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
   import limit from '../../http/api/limit.js'
+  import provider from '../../http/api/provider'
   import { fetchFleetCompanyPages } from '../../http/api/fleetCompany';
   export default {
     data() {
@@ -132,6 +187,7 @@
         loading: false,
         companyOptions: [],
         statusOptions: [],
+        providerOptions: [],
         rule: {
           "fleetCompanyId": {
             required: true,
@@ -171,6 +227,11 @@
             trigger: 'blur',
             message: 'Please type a number of amount'
           }],
+          "providerPk": {
+            required: true,
+            trigger: 'change',
+            message: 'Please select a provider'
+          },
         },
         addForm: {
           fleetCompanyId: '',
@@ -178,7 +239,10 @@
           depositReceivedAmount: '',
           effectiveStartDate: "",
           effectiveEndDate: "",
-          creditLimitStatus: ""
+          creditLimitStatus: "",
+          providerPk: "",
+          usedCreditLimitAmount: "0",
+          creditLimitRemainingAmount: '0'
         },
         companyParams: {
           "pageSize": 20,
@@ -186,48 +250,83 @@
           "pageVo": {
             "criteria": ""
           }
-        }
+        },
+        isEdit: false
       }
     },
     created() {
       this.loading = true;
       this.getCompanyList()
+      if (this.$route.params.id) {
+        this.isEdit = true;
+        this.getLimitInfo()
+      }
     },
     methods: {
+      clearWords() {
+        this.companyParams.pageVo.criteria = "";
+        this.getCompanyList();
+      },
       filterCompany(word) {
         this.companyParams.pageVo.criteria = word;
         this.getCompanyList();
       },
+      getLimitInfo() {
+        limit.viewCreditLimit(this.$route.params.id).then(res => {
+          if (res.data) {
+            this.addForm = res.data
+          }
+        }).catch(err => {
+          this.loading = false;
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        });
+      },
       getCompanyList() {
         fetchFleetCompanyPages(this.companyParams).then(res => {
           if (res.data) {
             this.companyOptions = res.data
           }
-          this.getLimitStatus();
         }).catch(err => {
-          this.loading = false;
           this.$message({
             message: err,
             type: 'error'
           })
+        }).finally(() => {
+          this.getLimitStatus();
         });
       },
       getLimitStatus() {
         limit.getLimitStatus().then(res => {
-          this.loading = false;
           if (res.data) {
             this.statusOptions = res.data
           }
         }).catch(err => {
-          this.loading = false;
           this.$message({
             message: err,
             type: 'error'
           })
+        }).finally(() => {
+          this.getAllProvider()
+        });
+      },
+      getAllProvider() {
+        provider.getAllServiceProvider().then(res => {
+          if (res.data && res.data.length > 0) {
+            this.providerOptions = res.data
+            if (!this.addForm.providerPk)
+              this.addForm.providerPk = res.data[0].providerPk
+          }
+        }).finally(() => {
+          this.loading = false;
         });
       },
       handleClickCancleButton() {
-        this.$router.go(-1)
+        this.$router.push({
+          path: "/credit-limit"
+        })
       },
       handleClickSaveButton() {
         this.$refs['addForm'].validate(result => {
@@ -244,7 +343,24 @@
             message: 'Add credit limit successfully',
             type: 'success'
           })
-          this.$router.go(-1);
+          this.handleClickCancleButton();
+        }).catch(err => {
+          this.loading = false;
+          this.$message({
+            message: err,
+            type: 'error'
+          })
+        });
+      },
+      updateLimites() {
+        this.loading = true;
+        limit.updateCreditLimit(this.editForm).then(res => {
+          this.loading = false;
+          this.$message({
+            message: 'Update credit limit successfully',
+            type: 'success'
+          })
+          this.handleClickCancleButton();
         }).catch(err => {
           this.loading = false;
           this.$message({
@@ -267,7 +383,8 @@
     background-color: #F0F5FC;
   }
   .card-content {
-    padding: 15px 80px;
+    margin: 0 8px 16px;
+    padding: 15px 50px;
     border-radius: 6px;
     background-color: white;
   }
@@ -275,15 +392,16 @@
     color: #333;
     margin-top: 20px;
     margin-bottom: 30px;
-    font-size: 16px;
+    font-size: 15px;
     user-select: none;
     line-height: 24px;
-    font-weight: 500;
+    font-weight: 700;
     font-family: sans-serif;
     text-transform: uppercase;
   }
   .add-text {
     width: 100%;
+    font-size: 14px;
     max-width: 300px;
   }
   .add-text ::v-deep .el-textarea__inner {
@@ -315,7 +433,7 @@
   }
   .buttons {
     padding-top: 15px;
-    padding-bottom: 30px;
+    padding-bottom: 15px;
   }
   @media screen and (max-width: 500px) {
     .card-container {

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

@@ -60,7 +60,7 @@
         class-name="fixed-width">
         <template slot-scope="{row}">
           <TableAction
-            :showEdit="!$route.meta.onlyView"
+            :showEdit="$route.meta.onlyView"
             @edit="editLimit(row)"
             @delete="deleteLimit(row)"/>
         </template>
@@ -124,8 +124,8 @@
         this.$router.push('credit-limit/add');
       },
       editLimit(row) {
-        this.$store.commit('provider/SET_CreditLimit', row);
-        this.$router.push('/credit-limit/edit');
+        //this.$store.commit('provider/SET_CreditLimit', row);
+        this.$router.push('/credit-limit/edit/' + row.creditLimitId);
       },
       viewCreditLimit(row) {
         this.$store.commit('provider/SET_CreditLimit', row);

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

@@ -88,6 +88,27 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :md="12">
+            <el-form-item
+              label="Service Provider:">
+              <el-input
+                class="add-text"
+                v-model="creditLimitInfo.providerPk"
+                readonly/>
+              <!-- <el-select
+                class="add-text"
+                v-model="addForm.providerPk"
+                placeholder="Select">
+                <el-option
+                  v-for="(item, index) in providerOptions"
+                  :key="index"
+                  :label="item.providerName"
+                  :value="''+item.providerPk"/>
+              </el-select> -->
+            </el-form-item>
+          </el-col>
+        </el-row>
         <div class="hr-full"/>
         <div class="buttons">
           <el-button
@@ -146,7 +167,9 @@
         });
       },
       handleClickCancleButton() {
-        this.$router.go(-1)
+        this.$router.push({
+          path: "/credit-limit"
+        })
       }
     }
   }