fifi97
138 lines
6.5 KiB
Vue
138 lines
6.5 KiB
Vue
<template>
|
|
<div class="container">
|
|
|
|
<div class="flex w-full">
|
|
<div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
|
|
<div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">
|
|
<router-link to="/akaunhome">
|
|
<i class="fas fa-backspace text-white"></i>
|
|
</router-link>
|
|
<span class="text-center mx-auto text-white font-bold">Laporan Lejer Am</span>
|
|
</div>
|
|
<form method="get" ref="formlejeram" :action="Urlredirect()" target="iframe_lejer">
|
|
<div class="rounded bg-white shadow p-6">
|
|
<div class="pb-6">
|
|
<div class="flex place-content-center mb-2">
|
|
<input :value="$hostname" name="hostname" hidden/>
|
|
<input :value="$kodcaw" name="kodcaw" hidden/>
|
|
<input :value="jenisgenerate" type="hidden" name="jenis" />
|
|
<span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
|
|
<input id="tarikhmula" name="datemula" class="border border-2 border-l-0 rounded-r px-4 py-2 mr-2" type="date" />
|
|
<span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Hingga</span>
|
|
<input id="tarikhakhir" name="datehingga" class="border border-2 border-l-0 rounded-r px-4 py-2 mr-2" type="date" />
|
|
</div>
|
|
|
|
<div class="flex justify-end mt-10">
|
|
<button @click.prevent="generateview" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-eye mr-2"></i>View</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
|
|
<div class="relative w-1/2 my-6 mx-auto max-w-6xl">
|
|
<!--content-->
|
|
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
|
<!--header-->
|
|
<div class="relative p-6" style="height: 80vh;">
|
|
|
|
<div v-if="showLoader" class="inset-0 z-30 h-full w-full" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:48% !important;top:45% !important;"></i>
|
|
</div>
|
|
|
|
<vue-friendly-iframe v-show="showLoader == false" :style="{visibility: showLoader ? 'hidden' : 'visible'}" class="h-full w-full"
|
|
:src="''"
|
|
frame-id="iframe_lejer"
|
|
@load="onLoad"
|
|
name="iframe_lejer"
|
|
@iframe-load="LoadedReady"
|
|
/>
|
|
|
|
<!-- <iframe :style="{visibility: showLoader ? 'hidden' : 'visible'}" name="iframe_lejer" loading="lazy" width="100%"
|
|
height="100%" scrolling="true" :load="onLoad()"></iframe> -->
|
|
|
|
</div>
|
|
<!--footer-->
|
|
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
|
|
<button @click.prevent="generatepdf" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-3 border border-gray-700 rounded mr-1" :disabled="pendingStatus == 'none'">{{ (pendingStatus == 'loading') ? '' : '' }}<i class="fas fa-file-pdf mr-2"></i>Cetak</button>
|
|
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-3 border border-gray-700 rounded mr-1" type="button" v-on:click="toggleModal()" :disabled="pendingStatus == 'none'">
|
|
<i class="fas fa-window-close mr-2"></i>Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-if="showCetak" class="inset-0 z-30 h-full w-full" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:50% !important;top:50% !important;"></i>
|
|
</div>
|
|
<div v-if="showModal || showCetak" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
jenisgenerate:'none',
|
|
kodcaw:'',
|
|
showModal:false,
|
|
myIframe: null,
|
|
iframesrc:'',
|
|
pendingStatus:'none',
|
|
showLoader: true,
|
|
showCetak:false
|
|
}
|
|
},
|
|
methods: {
|
|
async generatepdf(){
|
|
await this.setJenis('pdf');
|
|
this.showCetak = true;
|
|
this.showModal = false;
|
|
this.showLoader = true;
|
|
// Vue.swal({
|
|
// title: 'Memuatkan...',
|
|
// allowEscapeKey : false,
|
|
// allowOutsideClick: false,
|
|
// showCancelButton: false,
|
|
// showConfirmButton: false,
|
|
// timer: 8000,
|
|
|
|
// });
|
|
// document.getElementById("formlejeram").submit();
|
|
await this.$refs.formlejeram.submit()
|
|
await setTimeout(() => {
|
|
this.showCetak = false
|
|
}, 8000);
|
|
|
|
},
|
|
async generateview(){
|
|
await this.setJenis('view');
|
|
|
|
this.showModal = true;
|
|
},
|
|
toggleModal: function(){
|
|
this.showLoader = true
|
|
this.showModal = !this.showModal;
|
|
},
|
|
async onLoad() {
|
|
await this.$refs.formlejeram.submit()
|
|
},
|
|
async LoadedReady(){
|
|
await setTimeout(() => {
|
|
this.showLoader = false
|
|
this.pendingStatus = 'ok'
|
|
}, 10000);
|
|
},
|
|
Urlredirect: function() {
|
|
return window.route('cetak.lejeram')
|
|
},
|
|
setJenis: function(value){
|
|
return this.jenisgenerate = value;
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |