admin-erahn/resources/js/Tetapan/index.vue

<template>
<div>

    <!-- <ul class="flex hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 mb-4">
        <li class="w-full">
            <button id="profile" type="button" :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showprofile}" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 rounded-l-lg focus:z-20 active hover:bg-gray-50 dark:bg-gray-700 dark:text-white" aria-current="page" @click="TabsAndPills($event)">Barcode Scanned</button>
        </li>
        <li class="w-full">
            <button id="senaraisag" type="button" :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showsag}" class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:z-20 dark:text-gray-400 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white" @click="TabsAndPills($event)">Senarai Lelong</button>
        </li>
    </ul> -->

    <h1 class="font-bold  p-2">Tetapan Semakan Barcode</h1>

    <div id="tabs-1" v-if="this.showprofile">

        <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">
                        Bil
                    </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">
                        Norujukan
                    </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">
                        Pembiayaan (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">
                        Tarikh Pembiayaan
                    </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">
                        Cetakan Penilai
                    </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 Barcode
                    </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="databarcode.from === null">
                    <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
                        <div class="flex items-center mx-auto">
                            <div class="ml-3">
                                <p class="text-gray-900 whitespace-no-wrap">
                                    Tiada data yang diperolehi dalam carian
                                </p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr v-for="(barcode,i) in databarcode.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="(databarcode.from + i)">
                                </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="barcode.norujukan">
                                </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="formatexchange(barcode.pinjaman)">
                                </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="barcode.t_gadai">
                                </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="font-bold whitespace-no-wrap p-2 rounded-lg" :class="{ 'text-green-600 bg-green-200': barcode.cetak == 1, 'text-red-600 bg-red-200': barcode.cetak == 0 }" v-text="(barcode.cetak == 1) ? 'Telah Dicetak' : 'Belum Dicetak'">
                                </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="font-bold whitespace-no-wrap p-2 rounded-lg" :class="{ 'text-green-600 bg-green-200': barcode.semakbarcode == 'Lulus', 'text-red-600 bg-red-200': barcode.semakbarcode == 'Tidak Lulus' }" v-text="(barcode.semakbarcode == 'Lulus') ? 'Telah Scan' : 'Belum Scan'">
                                </p>
                            </div>
                        </div>
                    </td>
                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                        <div class="flex items-center ml-3">

                            <button @click="funcsetuju(barcode.norujukan)" 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 mr-1">
                                <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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
                                </svg>
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <pagination :data="databarcode" @clickEvent_="getBarcodeData"></pagination>
    </div>

    <div id="tabs-2" v-if="this.showsag">

        testshowsag
    </div>

</div>
</template>

<script>
import pagination from '../components/pagination.vue'

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

export default {
    components: {
        pagination,
    },
    data() {
        return {
            showprofile: true,
            showsag: false,
            databarcode: {},
            currentPage: 1,
        }
    },
    mounted() {
        this.getBarcodeData(this.currentPage);
    },
    methods: {
        formatexchange: function(value){
            return formatter.format(value)
        },
        getBarcodeData: function (pageNumber) {
            this.axios.get(this.$hostname + '/admin/tetapan/listbarcode/', {
                params: {
                    kodcaw: this.$kodcaw,
                    page: pageNumber
                }
            }).then(response => {
                this.databarcode = response.data;
                this.currentPage = pageNumber;
            });
        },
        TabsAndPills: function (event) {
            let targetId = event.currentTarget.id;

            event.preventDefault();
            if (targetId === 'profile' && this.showprofile === false) {
                this.showprofile = true;
                this.showsag = false;
            }

            if (targetId === 'senaraisag' && this.showsag === false) {
                // this.getDataSenaraiSAG(this.currentPage);
                this.showprofile = false;
                this.showsag = true;
            }
        },
        async funcsetuju(noruj) {

            let refer = this;
            const {
                value: katalaluan
            } = await this.$swal({
                title: 'Masukkan Katalaluan Semula',
                input: 'password',
                inputPlaceholder: 'Katalaluan',
                confirmButtonText: 'Hantar',
                showCancelButton: true,
                cancelButtonText: 'Batal',
                allowOutsideClick: false,
                inputValidator: (value) => {
                    if (!value) {
                        return 'Isikan tempat kosong diatas!'
                    }
                }
            });

            if (katalaluan !== undefined) {
                await this.axios.get('/mintasemulakelulusan', {
                    params: {
                        passsemula: katalaluan
                    }
                }).then(response => {

                    if (response.data === 1) {
                        this.axios.put(this.$hostname + '/admin/tetapan/listbarcode/update', {
                            norujukan: noruj,
                            kodcaw: this.$kodcaw
                        }).then(response => {

                            if (response.data == 1) {
                                this.$swal({
                                    icon: 'success',
                                    title: 'Berjaya',
                                    text: 'Berjaya mengemaskini',
                                    allowOutsideClick: false
                                }).then(function () {
                                    refer.getBarcodeData(refer.currentPage);
                                });
                            }

                        });
                    } else {
                        this.$swal({
                            icon: 'error',
                            title: 'Tidak Berjaya',
                            text: 'Kata Laluan dimasukkan Salah!',
                            allowOutsideClick: false
                        }).then(function () {
                            refer.getBarcodeData(refer.currentPage);
                        });
                    }
                });
            }
        },
    }

}
</script>