admin-erahn/resources/js/Permohonan/RekodMohon.vue

<template>
<div class="mx-auto">

    <pbmodal ref="modal" @clickEvent_="getSenaraiMohon"></pbmodal>
    <bankmodal ref="bankmodal" @clickEvent_="getSenaraiMohon"></bankmodal>

    <router-link to="/permohonan">
        <i class="fas fa-backspace text-yellow-500"></i>
    </router-link>

    <div class="mx-auto flex justify-between mb-4">

        <h1 class="font-bold flex flex-row justify-end">Rekod Permohonan</h1>

    </div>

    <table class="min-w-full leading-normal">

        <thead class="text-center">

            <tr>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    Cawangan

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    PetiBesi (RM)

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    No Permohonan

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    Tarikh Mohon

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    Jumlah Mohon (RM)

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    Jumlah Lulus (RM)

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    Semak

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    Jenis Permohonan

                </th>

                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">

                    Status

                </th>
                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Tindakan
                </th>

            </tr>

        </thead>

        <tbody>
            <tr v-if="showpermohonan.data.length === 0">
                <td colspan="9" class=" px-5 py-5 border-b border-gray-200 bg-white text-sm">
                    <p class="text-gray-900 whitespace-no-wrap text-center mx-auto">
                        Tiada Rekod Diperolehi
                    </p>
                </td>
            </tr>
            <tr v-for="(mohon,i) in showpermohonan.data" :key="i">

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <p class="text-gray-900 whitespace-no-wrap" v-text="namacawangan(mohon.kodcaw)">

                            </p>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(mohon.baki_petibesi)">

                            </p>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <p class="text-gray-900 whitespace-no-wrap" v-text="mohon.nopermohonan">

                            </p>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <p class="text-gray-900 whitespace-no-wrap" v-text="mohon.tarikh_permohonan">

                            </p>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(mohon.amaun_mohon)">

                            </p>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(mohon.jumlah_diluluskan)">

                            </p>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <router-link :to="{ name: 'permohonanstatus', params: { mohonid: mohon.mohonid }}">

                                <div class="border border-green-600 text-green-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-green-600 hover:text-white transition-all duration-300">

                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />

                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />

                                    </svg>

                                </div>

                            </router-link>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <div class="flex items-center">

                        <div class="ml-3">

                            <p :class="mohon.jenismohon == 'permohonanwang' ? 'bg-yellow-500' : 'bg-gray-500'" class="text-white whitespace-no-wrap p-2 rounded" v-text="checkjenismohon(mohon.jenismohon)">

                            </p>

                        </div>

                    </div>

                </td>

                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">

                    <span v-if="mohon.tagterima === 1 || (mohon.jenismohon == 'bayaranbalik' && mohon.tagoperasi === 1 && mohon.tagcit === 1 && mohon.tagakaun === 1)" class="p-2 bg-green-500 rounded text-white">Berjaya</span>
                    <span v-else class="p-2 bg-red-500 rounded text-white">Batal</span>

                </td>
                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                    <button @click="DownloadBukti(mohon.kelulusanpbimage)" class="border border-blue-600 text-blue-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-blue-600 hover:text-white transition-all duration-300">
                        MUAT TURUN
                    </button>
                </td>

            </tr>

        </tbody>

    </table>

    <pagination :data="paginate" @clickEvent_="getSenaraiMohon"></pagination>

</div>
</template>

<script>
import pagination from '../components/pagination.vue'
import pbmodal from '../components/util/PBmodal.vue'
import bankmodal from '../components/util/Bankmodal.vue'

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

export default {
    components: {
        pagination,
        pbmodal,
        bankmodal
    },
    data() {
        return {
            showpermohonan: {},
            currentPage: 1,
            paginate: {},
            cawangan: {},
            username: this.$username,
            userroles: this.$userroles
        }
    },
    created() {
        this.getSenaraiMohon(this.currentPage)
        this.axios.get('/api/check/cawangan').then(response => {
            this.cawangan = response.data;
        });
    },
    methods: {
        getSenaraiMohon(pageNumber) {
            this.axios.get(this.$hostname + '/admin/permohonan/rekod/admin', {
                params: {
                    page: pageNumber
                }
            }).then(response => {
                this.showpermohonan = response.data
                this.paginate = response.data
                this.currentPage = pageNumber
            });
        },
        namacawangan(cawangannama) {
            let namcaw = '';
            if (this.cawangan.length > 0) {
                this.cawangan.some(function (value, key) {

                    if (cawangannama === value.kodcaw) {
                        namcaw = value.details_caw
                    }
                });
            }

            return namcaw;
        },
        formatterfunction(value) {
            return formatter.format(value)
        },
        checkjenismohon(value) {
            if (value === 'permohonanwang') {
                return 'Permohonan Wang'
            } else {
                return 'Bayaran Balik'
            }
        },
        DownloadBukti: function (image) {
            axios.get("/api/check/muatturun?image=" + image, {
                    responseType: 'blob'
                })
                .then(response => {
                    const url = window.URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', image);
                    document.body.appendChild(link);
                    link.click();
                })
                .catch(e => {
                    console.log(e);
                });
        }
    }
}
</script>