|
|
@@ -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 {
|
