admin-erahn/resources/js/WTD/SelectWTD.vue

<template>
<div>

    <router-link to="/wtd/rekod">
        <i class="fas fa-backspace fa-3x text-yellow-500"></i>
    </router-link>

    <div v-if="arraybakilelong.length > 0" class="relative bg-white overflow-x-auto shadow-md sm:rounded-lg px-8 py-6">

        <div class="flex justify-between">

            <div class="p-4">
                <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-br from-gray-500 to-gray-700">JUMLAH = RM {{ formattext(this.totalbaki) }}</h1>
            </div>
            <div class="p-4">
                <button @click.prevent="promptdeletewtd" :disabled="aktif == 1" :class="{'hover:bg-red-600 bg-red-600 border-red-600': aktif == 0}" class="border border-red-300 text-white bg-red-300 font-montserrat py-2 px-8 font-medium rounded-xl transition-all duration-300"><i class="fas fa-trash-alt"></i></button>
                <button @click.prevent="promptwtd" :disabled="aktif == 1" :class="{'hover:bg-yellow-600 bg-yellow-600 border-yellow-600': aktif == 0}" class="border border-yellow-300 text-white bg-yellow-300 font-montserrat py-2 px-8 font-medium rounded-xl transition-all duration-300">Proses WTD</button>
                <span v-if="batchno != 0" class="text-lg font-bold ml-3">Batchno: {{ this.batchno }}</span>
            </div>
        </div>

        <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 rounded-lg border w-full sm:h-96 p-6 overflow-x-auto overflow-y-scroll scrollbar">
            <thead class="text-xs text-gray-700 uppercase bg-yellow-200 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="p-4">
                        <div class="flex items-center">
                            <span>Bil</span>
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Norujukan
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Tarikh Lelong
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Pembiayaan
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Baki
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(bl,i) in arraybakilelong" :key="i" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                    <td class="w-4 p-4">
                        <div class="flex items-center">
                            <span>{{ i+1 }}</span>

                        </div>
                    </td>
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                        {{ bl.norujukan }}
                    </th>
                    <td class="px-6 py-4">
                        {{ bl.t_lelong }}
                    </td>
                    <td class="px-6 py-4">
                        {{ formattext(bl.pinjaman) }}
                    </td>
                    <td class="px-6 py-4">
                        {{ formattext(bl.baki) }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</template>

<script>
const formatter = new Intl.NumberFormat('en-US', {
    minimumFractionDigits: 2
});

export default {
    data() {
        return {
            mula: null,
            hingga: null,
            totalbaki: 0.00,
            arraybakilelong: [],
            allSelected: false,
            boolblocksag: false,
            cawangan: '',
            batchno: 0,
            aktif: 0
        }
    },
    mounted() {

        this.batchno = this.$route.params.batchno;
        this.aktif = this.$route.query.aktif;
        this.totalbaki = this.$route.query.totalbaki;

        this.axios.get(this.$hostname + '/admin/wtd/rekod/' + this.batchno, {
            params: {
                kodcaw: this.$kodcaw,
            }
        }).then(response => {
            this.arraybakilelong = response.data;
        })
    },
    methods: {
        async promptdeletewtd() {
            await this.$swal({
                title: 'Padam daripada block WTD?',
                text: "anda tidak boleh ulang kembali setelah di padam!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya',
                allowOutsideClick: false,
            }).then((result) => {

                if (result.isConfirmed) {
                    this.deletewtd();
                }
            });
        },
        async promptwtd() {
            let boolkatalaluan = 0;
            const {
                value: katalaluan
            } = await this.$swal({
                title: 'Masukkan Katalaluan Semula',
                input: 'password',
                inputPlaceholder: 'Katalaluan',
                confirmButtonText: 'Hantar',
                showCancelButton: true,
                cancelButtonText: 'Batal',
                allowOutsideClick: false
            })

            await this.axios.get('/mintasemulakelulusan', {
                params: {
                    passsemula: katalaluan
                }
            }).then(response => {
                if (response.data === 0) {
                    boolkatalaluan = 0;
                } else {
                    boolkatalaluan = 1;
                }
            });

            if (boolkatalaluan == 1) {
                await this.$swal({
                    title: 'Proses WTD?',
                    text: "anda tidak boleh ulang kembali setelah di proses!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya',
                    allowOutsideClick: false,
                }).then((result) => {

                    if (result.isConfirmed) {

                        this.$swal({
                            title: "Masukkan No Cek:",
                            // text: "Write something interesting:",
                            input: 'text',
                            showCancelButton: true
                        }).then((result) => {
                            if (result.value) {
                                this.proseswtd(result.value);
                            }
                        });
                    }
                });
            } else {
                this.$swal('Kata laluan salah', '', 'error')
            }

        },
        deletewtd: function () {
            this.axios.post(this.$hostname + '/admin/wtd/delete', {
                kodcaw: this.$kodcaw,
                batchno: this.batchno
            }).then(response => {

                if (response.data == 1) {
                    this.$swal(
                        'Berjaya!',
                        'Berjaya Padam WTD!',
                        'success'
                    )
                }
            });
        },
        proseswtd: function (nocek) {
            this.axios.post(this.$hostname + '/admin/wtd/process', {
                kodcaw: this.$kodcaw,
                batch: this.batchno,
                nocek: nocek
            }).then(response => {

                if (response.data == 'success') {
                    this.$swal(
                        'Berjaya!',
                        'Berjaya Simpan Wang Tak Dituntut!',
                        'success'
                    )

                    this.aktif = 1;
                }
            });
        },
        formattext: function (value) {
            return formatter.format(value);
        }
    }
}
</script>