exchange/resources/assets/js/pages/settings/admin-bank-setting.vue

<template>
<div>
    <span align="center"><h4>Bank Setting</h4></span><br>
    <el-form :inline="true">
        <el-form-item>
            Active Bank Account for X1: 
            <el-select v-model="active_bank_setting.x1_bank_id" size="mini">
                <el-option
                  v-for="item in options_CIEF"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled === 0">
                </el-option>
            </el-select>
        </el-form-item>
        <br>
        <el-form-item>
            Active Bank Account for X2 : 
            <el-select v-model="active_bank_setting.x2_bank_id" size="mini">
                <el-option
                  v-for="item in options_CIEF"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled === 0">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            Active China Beneficiary Account: 
            <el-select v-model="active_bank_setting.beneficiary_id" size="mini">
                <el-option
                  v-for="item in options_china_bank"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <br>
        <el-form-item>
            <el-button type="primary" size="mini" :loading="loading_btn" @click="EditActiveBankSetting">Update</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script type="text/javascript">
import axios from 'axios'

export default {
    // TODO : update credit limit and timeout 
    data() {
        return {
            options_CIEF: [],
            options_china_bank: [],
            active_bank_setting : {
                x1_bank_id: null,
                x2_bank_id: null,
                beneficiary_id: null
            },
            loading_btn: false
        };
    },
    beforeMount(){
        this.UpdateMalaysiaBankOption();
        this.UpdateChinaBankOption();
        this.UpdateActiveBankSetting();
    },
    methods :{
        UpdateMalaysiaBankOption : function(){
            var malaysiaBankData;
            axios.get('/api/setting-malaysia-bank')
                .then((response) => {
                    malaysiaBankData = response.data;
                    this.options_CIEF = malaysiaBankData.map(function(item){
                        return {
                            value : item.id,
                            label : item.company_name + " : " + item.bank_name + " : " + item.acc_no,
                            disabled : item.active
                        };
                    });
                })
                .catch((error) => {
                    console.log(error);
                    this.$message({
                        showClose: true,
                        message: 'Fetch data fail',
                        type: 'error',
                        duration: 10000
                    });
                });
        },
        UpdateChinaBankOption : function(){
            var chinaBankData;
            axios.get('/api/setting-beneficiary')
                .then((response) => {
                    chinaBankData = response.data;
                    this.options_china_bank = chinaBankData.map(function(item){
                        return {
                            value : item.id,
                            label : item.company_name + " : " + item.bank_name + " : " + item.acc_no,
                        };
                    });
                    this.options_china_bank.unshift({
                            value : 0,
                            label : "Use Customer's Beneficiary"
                    });
                })
                .catch((error) => {
                    console.log(error);
                    this.$message({
                        showClose: true,
                        message: 'Fetch data fail',
                        type: 'error',
                        duration: 10000
                    });
                });
        },
        UpdateActiveBankSetting : function(){
            axios.get('/api/setting-active-bank')
                .then((response) => {
                    this.active_bank_setting = response.data;
                })
                .catch((error) => {
                    console.log(error);
                    this.$message({
                        showClose: true,
                        message: 'Fetch data fail',
                        type: 'error',
                        duration: 10000
                    });
                });
        },
        EditActiveBankSetting : function(){
            this.loading_btn = true;
            axios.put('/api/setting-active-bank', this.active_bank_setting)
            .then((response) => {
                this.loading_btn = false;
                this.$message({
                    showClose: true,
                    message: 'Success',
                    type: 'success',
                    duration: 5000
                });
            })
            .catch((error) => {
                this.loading_btn = false;
                console.log(error);
                this.$message({
                    showClose: true,
                    message: 'Update failed, please contact support',
                    type: 'error',
                    duration: 10000
                });
            })
        },
    }

}


</script>