|
|
@@ -0,0 +1,321 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="VIEW APPROVAL"
|
|
|
+ :visible="visible"
|
|
|
+ :before-close="e => hideDialog(false)"
|
|
|
+ :close-on-click-modal="!isApproval"
|
|
|
+ class="approval-limit-dialog">
|
|
|
+ <el-form
|
|
|
+ ref="apvForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="190px"
|
|
|
+ label-position="right"
|
|
|
+ v-loading="loading.initial">
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="Credit Limit Amount:">
|
|
|
+ <label class="flex-item">{{data.creditLimitAmount}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="Approved users:">
|
|
|
+ <label class="flex-item">{{data.approvedUsers}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="No. of Group Plan Users:">
|
|
|
+ <label class="flex-item">{{data.approvedUsers}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="Individual Plan Amount:">
|
|
|
+ <label class="flex-item">{{data.individualCredit}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="No. of Individual Plan Users:">
|
|
|
+ <label class="flex-item">{{data.individualApprovedUsers}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="Status:">
|
|
|
+ <label class="flex-item" :class="'status-' + data.creditLimitAudit.auditStatusName">{{data.creditLimitAudit.auditStatusName}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="Requester:">
|
|
|
+ <label class="flex-item">{{data.requester}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="userName"
|
|
|
+ class="form-item"
|
|
|
+ label="Role:">
|
|
|
+ <label class="flex-item">{{data.requesterRoleName}}</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="auditRemark"
|
|
|
+ class="form-item"
|
|
|
+ label-width="0">
|
|
|
+ <div>
|
|
|
+ <label>Remarks:</label>
|
|
|
+ <el-input
|
|
|
+ class="input-text"
|
|
|
+ v-model="form.auditRemark"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="1000"
|
|
|
+ :readonly="!isApproval"
|
|
|
+ :autosize="autoSize"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div
|
|
|
+ class="flexcc"
|
|
|
+ style="padding-top: 20px;"
|
|
|
+ v-if="isApproval">
|
|
|
+ <el-button
|
|
|
+ class="cancel-button button-reject"
|
|
|
+ @click="onClickApprove(false)"
|
|
|
+ :loading="loading.reject">
|
|
|
+ REJECT
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="accent"
|
|
|
+ @click="onClickApprove(true)"
|
|
|
+ :disabled="loading.approve">
|
|
|
+ APPROVE
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flexcc"
|
|
|
+ style="padding-top: 20px;"
|
|
|
+ v-else>
|
|
|
+ <el-button
|
|
|
+ class="cancel-button"
|
|
|
+ @click="hideDialog(false)">
|
|
|
+ CLOSE
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import limit from '@/api/limit';
|
|
|
+export default {
|
|
|
+ name: "LimitApproval",
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ type: Number|String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: {
|
|
|
+ initial: false,
|
|
|
+ approve: false,
|
|
|
+ reject: false
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ creditLimitAudit: {}
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ groupCreditPk: undefined,
|
|
|
+ auditRemark: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ auditRemark: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please input remarks'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isApproval: false,
|
|
|
+ autoSize: {
|
|
|
+ minRows: 3,
|
|
|
+ maxRows: 8
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ id(n, o) {
|
|
|
+ if (this.visible && n) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.groupCreditPk = this.id;
|
|
|
+ this.getLimitInfo();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hideDialog(success) {
|
|
|
+ this.init();
|
|
|
+ this.$emit("hide", success || false);
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.form = {
|
|
|
+ groupCreditPk: undefined,
|
|
|
+ auditRemark: ""
|
|
|
+ }
|
|
|
+ this.isApproval = false;
|
|
|
+ this.loading.initial = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs['apvForm']) {
|
|
|
+ this.$refs['apvForm'].clearValidate();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLimitInfo() {
|
|
|
+ this.loading.initial = true;
|
|
|
+ limit.viewCreditLimit(this.id).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.data = res.data
|
|
|
+ this.data.auditStatusName
|
|
|
+ if (this.data.creditLimitAudit) {
|
|
|
+ this.isApproval = (this.data.creditLimitAudit.auditStatusName == 'Pending')
|
|
|
+ if (this.data.creditLimitAudit.auditRemark) {
|
|
|
+ this.form.auditRemark = this.data.creditLimitAudit.auditRemark
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.initial = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onClickApprove(Approved) {
|
|
|
+ this.$refs.apvForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$confirm("Confirm operation?", status, {
|
|
|
+ confirmButtonText: 'Confirm',
|
|
|
+ cancelButtonText: 'Cancel',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(res => {
|
|
|
+ Approved
|
|
|
+ ? this.onApprove()
|
|
|
+ : this.onReject()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onApprove() {
|
|
|
+ this.loading.approve = true;
|
|
|
+ limit.approveCreditLimit(this.form).then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.hideDialog(true);
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err);
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.approve = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onReject() {
|
|
|
+ this.loading.reject = true;
|
|
|
+ limit.rejectCreditLimit(this.form).then(res => {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.hideDialog(true);
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err);
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.reject = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.approval-limit-dialog {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.approval-limit-dialog >>> .el-dialog {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 600px;
|
|
|
+ margin-top: 0 !important;
|
|
|
+}
|
|
|
+.approval-limit-dialog >>> .el-dialog__body {
|
|
|
+ padding: 10px 20px 30px;
|
|
|
+}
|
|
|
+.approval-limit-dialog >>> .el-form {
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+.form-row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 5px;
|
|
|
+}
|
|
|
+.form-item {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.form-item >>> label {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.flex-item {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 200px;
|
|
|
+ max-width: 270px;
|
|
|
+}
|
|
|
+.flex-item2 {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 200px;
|
|
|
+}
|
|
|
+label.flex-item {
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ max-width: none;
|
|
|
+ padding-left: 15px;
|
|
|
+}
|
|
|
+.input-text >>> .el-textarea__inner {
|
|
|
+ font-family: sans-serif;
|
|
|
+}
|
|
|
+@media screen and (max-width: 500px) {
|
|
|
+ .flex-item {
|
|
|
+ width: 100%;
|
|
|
+ max-width: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+label.status-Pending {
|
|
|
+ color: #ffa028;
|
|
|
+}
|
|
|
+label.status-Approved {
|
|
|
+ color: #07a378;
|
|
|
+}
|
|
|
+label.status-Rejected {
|
|
|
+ color: #ed3f3f;
|
|
|
+}
|
|
|
+.cancel-button.button-reject {
|
|
|
+ border-color: #ED3F3F;
|
|
|
+}
|
|
|
+.cancel-button.button-reject >>> span {
|
|
|
+ color: #ED3F3F;
|
|
|
+}
|
|
|
+</style>
|
