hrms-checkin/src/components/PopUp.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import HeaderPopup from '@/components/HeaderPopup.vue'
import FormTime from '@/components/FormTime.vue'

const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  clickClose: {
    type: Function,
    default: null,
  },
  dataById: {
    type: Object,
    default: null,
  },
})

// -ข้อมูล
const data = ref<any>()
function clickClosePopup() {
  props.clickClose()
}
watch(props, () => {
  if (props.modal === true) {
    data.value = props.dataById
  }
})
</script>
<template>
  <q-dialog v-model="props.modal">
    <q-card class="column" style="width: 300px; min-height: 600px;">
      <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
      <FormTime :dataById="data" :closePopup="clickClosePopup" />
    </q-card>
  </q-dialog>
</template>

<style scoped></style>