fifi97
102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<template>
|
|
<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-auto 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="flex items-start bg-gray-200 justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
|
|
<h3 class="text-xl font-semibold">
|
|
Laporan
|
|
</h3>
|
|
<button class="p-1 ml-auto border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
|
|
<span class=" text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
|
|
X
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<!--body-->
|
|
<div class="relative p-6 flex-auto">
|
|
|
|
<!-- <iframe name="iframe_laporan"></iframe> -->
|
|
<vue-iframe
|
|
|
|
allow="camera *; geolocation *; microphone *; autoplay *"
|
|
frame-id="frame_laporan"
|
|
@load="onLoad"
|
|
name="iframe_laporan"
|
|
width="500px"
|
|
height="500px"
|
|
/>
|
|
|
|
</div>
|
|
<!--footer-->
|
|
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
|
|
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" type="button" v-on:click="toggleModal()">
|
|
Batal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import datetime from 'vuejs-datetimepicker';
|
|
|
|
export default {
|
|
name: "modal",
|
|
components:{
|
|
datetime
|
|
},
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
referencestatus: 'PAID',
|
|
status: [
|
|
'PAID',
|
|
'UNSUCCESSFUL',
|
|
'NOT PAID'
|
|
],
|
|
statusid: 0,
|
|
datepaidat:'',
|
|
myIframe: null
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
toggleModal: function(){
|
|
this.showModal = !this.showModal;
|
|
},
|
|
onLoad(frame) {
|
|
|
|
this.$emit('clickLaporan_');
|
|
this.myIframe = frame.contentWindow
|
|
},
|
|
// async simpan(){
|
|
|
|
// let response = await this.postData()
|
|
|
|
// if(response.data === 1)
|
|
// {
|
|
// this.showModal = !this.showModal;
|
|
// this.$toast.success('Berjaya menukar status!')
|
|
// setTimeout(()=>{
|
|
// this.$emit('togtable')
|
|
// },1000);
|
|
// }
|
|
// },
|
|
// postData: function(){
|
|
|
|
// return this.axios.post(this.$hostname + '/admin/simpanStatus',
|
|
// {
|
|
// id: this.statusid,
|
|
// status: this.referencestatus,
|
|
// paidat: this.datepaidat
|
|
// });
|
|
// }
|
|
}
|
|
}
|
|
</script> |