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

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

import type { DataRows } from "@/modules/09_leave/interface/response/leave";
// importStroe
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
// importComponets
import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
const leaveStore = useLeavelistDataStore();
const { fetchList, clearFilter } = leaveStore;

onMounted(() => {
  fecthLeaveList();
});
// เรียกข้อมูลจาก API
function fecthLeaveList() {
  const data: DataRows = [
    {
      leaveType: "ลาป่วย",
      name: "นายกัณฐิมา  กาฬสินธ์ุ",
      Date: "",
      status: "1",
    },
    {
      leaveType: "ลากิจส่วนตัว",
      name: "นายนครชัย วันดี",
      Date: "",
      status: "3",
    },
    {
      leaveType: "ลากิจส่วนตัว",
      name: "นายกัณฐิมา  กาฬสินธ์ุ",
      Date: "",
      status: "2",
    },
    {
      leaveType: "ลาป่วย",
      name: "นายปิยรมย์ ศิริธาราฟ",
      Date: "",
      status: "2",
    },
  ];
  fetchList(data); // ส่งข้อมูลไป stores
}
//เปลี่ยน Tab
function changTab() {
  clearFilter();
  fecthLeaveList();
}
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
  <div>
    <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
    <q-card bordered flat>
      <q-tabs
        v-model="leaveStore.tab"
        dense
        align="left"
        inline-label
        class="rounded-borders"
        indicator-color="primary"
        active-bg-color="teal-1"
        active-class="text-primary"
      >
        <q-tab
          @click="changTab"
          name="1"
          label="รายการลาที่อยู่ระหว่างดำเนินการ"
        >
          <q-badge
            color="grey-4"
            :class="
              leaveStore.tab == '1'
                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
                : 'q-px-sm text-weight-medium text-black q-ml-xl'
            "
            :label="leaveStore.amounttab1"
            rounded
          />
        </q-tab>
        <q-tab @click="changTab" name="2" label="รายการลาทั้งหมด">
          <q-badge
            color="grey-4"
            :class="
              leaveStore.tab == '2'
                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
                : 'q-px-sm text-weight-medium text-black q-ml-xl'
            "
            :label="leaveStore.amounttab2"
            rounded
          />
        </q-tab>
      </q-tabs>
      <q-separator />

      <q-tab-panels v-model="leaveStore.tab" animated>
        <q-tab-panel name="1">
          <!-- <TableList1 /> -->
          <ToolBar />
          <TableList />
        </q-tab-panel>

        <q-tab-panel name="2">
          <!-- <TabList2Vue /> -->
          <ToolBar />
          <TableList />
        </q-tab-panel>
      </q-tab-panels>
      <!-- </q-card> -->
    </q-card>
  </div>
</template>

<style scoped></style>