fifi97
129 lines
5.6 KiB
Vue
129 lines
5.6 KiB
Vue
<template>
|
|
<div class="container">
|
|
<!-- <modal ref="modal"></modal> -->
|
|
|
|
<div class="flex w-full">
|
|
<div class="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 Imbang Duga</span>
|
|
</div>
|
|
<form method="get" ref="formimbangduga" :action="Urlredirect()" target="iframe_laporan">
|
|
<div class="rounded bg-white shadow p-6">
|
|
<div class="pb-6">
|
|
<label for="username" class="font-semibold text-gray-700 block pb-1">Tarikh</label>
|
|
<div class="flex">
|
|
<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="datetimepicker1" class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" />
|
|
<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>
|
|
<!-- <iframe class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex bg-white" name="iframe_laporan" width="500" height="500"></iframe> -->
|
|
<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;">
|
|
|
|
<vue-iframe
|
|
:src="Urlredirect()"
|
|
allow="camera *; geolocation *; microphone *; autoplay *"
|
|
frame-id="iframe_laporan"
|
|
@load="onLoad"
|
|
@iframe-load="loaded"
|
|
name="iframe_laporan"
|
|
width="500px"
|
|
height="300px"
|
|
scrolling="true"
|
|
/>
|
|
|
|
</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="showModal" 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'
|
|
}
|
|
},
|
|
methods: {
|
|
async generatepdf(){
|
|
await this.setJenis('pdf');
|
|
|
|
// Vue.swal({
|
|
// title: 'Memuatkan...',
|
|
// allowEscapeKey : false,
|
|
// allowOutsideClick: false,
|
|
// showCancelButton: false,
|
|
// showConfirmButton: false
|
|
|
|
// });
|
|
this.$refs.formimbangduga.submit()
|
|
|
|
},
|
|
async generateview(){
|
|
await this.setJenis('view');
|
|
|
|
// Vue.swal({
|
|
// title: 'Memuatkan...',
|
|
// allowEscapeKey : false,
|
|
// allowOutsideClick: false,
|
|
// showCancelButton: false,
|
|
// showConfirmButton: false
|
|
|
|
// });
|
|
|
|
this.showModal = true;
|
|
|
|
},
|
|
toggleModal: function(){
|
|
this.showModal = !this.showModal;
|
|
},
|
|
onLoad(frame) {
|
|
this.$refs.formimbangduga.submit()
|
|
this.myIframe = frame.contentWindow
|
|
},
|
|
loaded(frame){
|
|
|
|
},
|
|
Urlredirect: function() {
|
|
return window.route('cetak.imbangduga')
|
|
},
|
|
setJenis: function(value){
|
|
return this.jenisgenerate = value;
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |