UI หน้ารายการการลา (Admin)

src/modules/09_leave/views/LeaveListMain.vue

@@ -1,72 +1,43 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-
-/**importType*/
-import type {
-  QuerySting,
-  DateFilter,
-} from "@/modules/09_leave/interface/request/leave";
-import type { DataRows } from "@/modules/09_leave/interface/response/leave";
-
 /**importStroe*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 
 /**importComponets*/
-import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
-import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
+import Tab1 from "@/modules/09_leave/components/2_Leave/Tab1.vue";
+import Tab2 from "@/modules/09_leave/components/2_Leave/Tab2.vue";
 
 const leaveStore = useLeavelistDataStore();
-const APIDATA = useLeavelistDataStoreTest();
-const { fetchList } = leaveStore;
-
-/** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
-  const data = APIDATA.data;
-  maxPage.value = Math.ceil(data.length / querySting.pageSize);
-  fetchList(data); /** ส่งข้อมูลไป stores*/
-}
-
-function updatePaging(
-  newPage: number,
-  pageSize: number,
-  dateFilter: DateFilter
-) {
-  querySting.year = dateFilter ? dateFilter.year : querySting.year;
-  querySting.type = dateFilter ? dateFilter.type : querySting.type;
-  querySting.status = dateFilter ? dateFilter.status : querySting.status;
-  querySting.page = newPage;
-  querySting.pageSize = pageSize;
-  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
-
-  console.log(querySting);
-}
-
-const maxPage = ref<number>(1);
-const querySting = reactive<QuerySting>({
-  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
-  status: "ALL", //*สถานะการของลา
-  page: 1, //*หน้า
-  pageSize: 5, //*จำนวนแถวต่อหน้า
-  keyword: "", //keyword ค้นหา
-});
-
-onMounted(() => {
-  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-pt-sm q-pa-md">
-      <ToolBar @update:querySting="updatePaging" />
+      <q-tabs
+        v-model="leaveStore.tabMenu"
+        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 />
+      <q-tab-panels v-model="leaveStore.tabMenu" animated>
+        <q-tab-panel name="1"> <Tab1 /> </q-tab-panel>
+
+        <q-tab-panel name="2"> <Tab2 /> </q-tab-panel>
+      </q-tab-panels>
+      <!-- <ToolBar @update:querySting="updatePaging" />
       <TableList
         :page="querySting.page"
         :rowsPerPage="querySting.pageSize"
         :maxPage="maxPage"
         @update:querySting="updatePaging"
-      />
+      /> -->
     </q-card>
   </div>
 </template>