hrms-mgt/src/modules/09_leave/views/WorkingMain.vue

<script setup lang="ts">
import { ref } from "vue";

/** import Components */
import Tab1 from "@/modules/09_leave/components/1_Work/Tab1.vue";
import Tab2 from "@/modules/09_leave/components/1_Work/Tab2.vue";
import DialogReport from "@/modules/09_leave/components/1_Work/DialogReport.vue";

const tab = ref("1");

const modalReport = ref<boolean>(false);

function onClickOpenDialog() {
  modalReport.value = !modalReport.value;
}
</script>
<template>
  <div class="row">
    <span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
    <q-space />
    <q-btn
      dense
      flat
      class="text-blue"
      label="รายงานสถิติการลงเวลา"
      @click="onClickOpenDialog"
    >
      <q-tooltip>รายงานสถิติการลงเวลา</q-tooltip>
    </q-btn>
  </div>

  <div>
    <q-card bordered flat>
      <q-tabs
        v-model="tab"
        dense
        align="left"
        inline-label
        class="rounded-borders"
        indicator-color="primary"
        active-bg-color="teal-1"
        active-class="text-primary"
      >
        <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
        <q-tab name="2" label="รายการลงเวลา" />
      </q-tabs>

      <q-separator />
      <div class="q-pa-sm">
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="1">
            <Tab1 />
          </q-tab-panel>

          <q-tab-panel name="2">
            <Tab2 />
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </q-card>
  </div>

  <DialogReport :modal="modalReport" :close="onClickOpenDialog" />
</template>

<style scoped></style>