77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import type { PropType } from 'vue'
|
|
|
|
import type { DataCheckIn } from '@/interface/index/Main'
|
|
|
|
import HeaderPopup from '@/components/HeaderPopup.vue' // หัว popup
|
|
import FormTime from '@/components/FormTime.vue' //
|
|
|
|
/**
|
|
* props จาก components TableHistory
|
|
*/
|
|
const props = defineProps({
|
|
modal: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
clickClose: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
dataById: {
|
|
type: Object as PropType<DataCheckIn>,
|
|
default: null,
|
|
},
|
|
fetchData: {
|
|
type: Function,
|
|
default: () => console.log('not function'),
|
|
},
|
|
action: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const data = ref<DataCheckIn>() // ข้อมูลลงเวลา
|
|
|
|
/**
|
|
* ปิด popup
|
|
* เรียกใช้ฟังก์ชัน props.clickClose()
|
|
*/
|
|
function clickClosePopup() {
|
|
props.clickClose()
|
|
}
|
|
|
|
/**
|
|
* watch การเปลี่ยนแปลงของ props.modal
|
|
*/
|
|
watch(
|
|
() => props.modal,
|
|
() => {
|
|
if (props.modal) {
|
|
data.value = props?.dataById
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="props.modal" persistent m>
|
|
<q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'min-width: 80vh;'">
|
|
<HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
|
|
|
|
<FormTime
|
|
:data-byId="data"
|
|
:close-popup="clickClosePopup"
|
|
:fetch-data="props.fetchData"
|
|
:action="props.action"
|
|
/>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|