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,
  },
  fetcthDataTable: {
    type: Function,
    require: true,
  },
})

const data = ref<any>()
function clickClosePopup() {
  props.clickClose()
}

watch(
  () => props.modal,
  () => {
    data.value = props.modal ? props.dataById : null
  }
)
</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"
        :fetcthDataTable="props.fetcthDataTable"
      />
    </q-card>
  </q-dialog>
</template>

<style scoped></style>