ปรับ code รายการลงเวลาปฏิบัติงาน

src/modules/09_leave/components/1_Work/DialogDetail.vue

@@ -48,13 +48,6 @@ const formData = reactive<FormDetail>({
   fullName: "",
   checkOutDescription: "",
 });
-watch(props, () => {
-  if (props.modal) {
-    if (props.detail) {
-      fetchDetailByid(props.detail.id);
-    }
-  }
-});
 
 /**
  * function เรียกรายการลงเวลาตาม
@@ -105,6 +98,13 @@ async function fetchDetailByid(id: string) {
 function colsePopup() {
   props.colse ? props.colse() : false;
 }
+
+watch(
+  () => props.modal,
+  () => {
+    props.modal === true && props.detail && fetchDetailByid(props.detail.id);
+  }
+);
 </script>
 
 <template>

src/modules/09_leave/components/1_Work/Tab1.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -10,7 +10,6 @@ import type {
   DataResTime,
   TableRowsTime,
 } from "@/modules/09_leave/interface/response/work";
-import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
 /** importComponents */
 import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
@@ -26,13 +25,14 @@ const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
 
 const $q = useQuasar(); //ใช้ noti quasar
 
+/** ตัวแปร querySting*/
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(3);
+const rowsPerPage = ref<number>(10);
 const maxPage = ref<number>(1);
-const filetStatus = ref<string>("LATE");
+const filetStatus = ref<string>("ALL");
 
-/** ข้อมูลหัวตาราง*/
+/** ข้อมูลตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -119,6 +119,7 @@ const visibleColumns = ref<string[]>([
 ]);
 const rows = ref<TableRowsTime[]>([]);
 
+/** function เรียกข้อมูล รายการลงเวลาที่ประมวลผลแล้ว*/
 async function fetchListTimeRecord() {
   const date = new Date(workStore.selectDate as string | Date);
   const querySting = {
@@ -168,6 +169,13 @@ async function fetchListTimeRecord() {
     });
 }
 
+/**
+ * function updatePaging และเรียกข้อมูลอีกรอบ
+ * @param params pagin
+ * @param currentPage page
+ * @param key คำค้นหา
+ * @param status สถานะ
+ */
 async function updatePaging(
   params: any,
   currentPage: number,
@@ -183,13 +191,10 @@ async function updatePaging(
 
 /** Hook*/
 onMounted(async () => {
-  console.log("TAB1");
   workStore.columns = columns.value;
   workStore.visibleColumns = visibleColumns.value;
   await fetchListTimeRecord();
 });
-
-onUnmounted(() => {});
 </script>
 <template>
   <ToolBar :filetStatus="filetStatus" @update:pagination="updatePaging" />

src/modules/09_leave/components/1_Work/Tab2.vue

@@ -5,7 +5,6 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-/** import Type */
 import type {
   DataResLog,
   TableRows,
@@ -23,7 +22,7 @@ const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
 const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
 
-/** ข้อมูลหัวตาราง*/
+/** ข้อมูลตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -88,16 +87,15 @@ const visibleColumns = ref<string[]>([
   "checkOutTime",
   "checkOutLocation",
 ]);
-
 const rows = ref<TableRows[]>([]);
 
-/** QueryString*/
+/** ตัวแปร QueryString*/
 const keyword = ref<string>("");
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(2);
 const maxPage = ref<number>(1);
 
-/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
+/** function เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
 async function fetchListLogRecord() {
   showLoader();
   const date = new Date(workStore.selectDate as string | Date);

src/modules/09_leave/components/1_Work/TableList.vue

@@ -37,18 +37,29 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:pagination"]);
-const updateProp = (newPagination: any, page: number) => {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-};
-
-/** Hook */
-onMounted(() => {});
 
 /** ข้อมูล popup */
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
 
+/** pagination */
+const currentPage = ref<number>(1);
+const pagination = ref({
+  descending: false,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
+/**
+ * function อัปเดท props
+ * @param newPagination paging
+ * @param page หน้าปัจุบัน
+ */
+function updateProp(newPagination: any, page: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+}
+
 /**
  * Function openPopup และแสดงรายละเอียด
  * @param data ข้อมูลรายละเอียด
@@ -63,14 +74,7 @@ function colseDeyail() {
   modal.value = false;
 }
 
-/** pagination */
+/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
-const pagination = ref({
-  descending: false,
-  page: Number(props.page),
-  rowsPerPage: props.rowsPerPage,
-});
-
-const currentPage = ref<number>(1);
 watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   updateProp(pagination.value, currentPage.value);
 });

src/modules/09_leave/components/1_Work/ToolBar.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+/** importType*/
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@@ -9,6 +12,7 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
+/** props จาก Tab 1*/
 const props = defineProps({
   filetStatus: {
     type: String,
@@ -17,32 +21,49 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:pagination"]);
-const updateProp = (newPagination: any, keyword: string, status: string) => {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, 1, keyword, status);
-};
 
-const option = ref<any[]>([
+/** ตัแปร filter**/
+const filetStatus = ref<string>(
+  props.filetStatus?.toString() || "default-value"
+);
+const keyword = ref<string>("");
+const optionMain = ref<DataOption[]>([
   { id: "ALL", name: "ทั้งหมด" },
   { id: "NORMAL", name: "ปกติ" },
   { id: "LATE", name: "สาย" },
   { id: "ABSENT", name: "ขาดราชการ" },
 ]);
+const option = ref<DataOption[]>(optionMain.value);
 
-// const filetStatus = ref<string>(
+/**
-//   props.filetStatus?.toString() || "default-value"
+ * function updateProps
-// );
+ * @param newPagination paging
-
+ * @param keyword คำค้น
-// const filetStatus = ref<string>(props.filetStatus.toString());
+ * @param status สถานะ
-const filetStatus = ref<string>(
+ */
-  props.filetStatus?.toString() || "default-value"
+function updateProp(newPagination: any, keyword: string, status: string) {
-);
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-const keyword = ref<string>("");
+  emit("update:pagination", newPagination, 1, keyword, status);
+}
 
+/** function ค้นหาข้อมูลแล้วไปอัปเดท props*/
 function filterFn() {
   updateProp([], keyword.value, filetStatus.value);
 }
 
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = optionMain.value.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
@@ -104,6 +125,7 @@ function calculateMaxDate() {
         v-model="filetStatus"
         :options="option"
         @update:model-value="filterFn"
+        @filter="filterOptionFn"
       >
         <template v-slot:no-option>
           <q-item>

src/modules/09_leave/components/1_Work/ToolBarDate.vue

@@ -9,14 +9,23 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-/** คำค้นหา*/
-const keyword = ref<string>("");
-
 const emit = defineEmits(["update:pagination"]);
-const updateProp = (newPagination: any, keyword: string) => {
+
+/** ตัวแปร filter*/
+const keyword = ref<string>("");
+const pagination = ref({
+  page: 1,
+});
+
+/**
+ * function updateProps
+ * @param newPagination paging
+ * @param keyword คำค้นหา
+ */
+function updateProp(newPagination: any, keyword: string) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit("update:pagination", newPagination, 1, keyword);
-};
+}
 
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
@@ -25,10 +34,7 @@ function calculateMaxDate() {
   return today;
 }
 
-/** pagination */
+/** function ค้นหาข้อมูล แล้ว อัปเดท Props*/
-const pagination = ref({
-  page: 1,
-});
 function filterFn() {
   updateProp(pagination.value, keyword.value);
 }

src/modules/09_leave/stores/WorkStore.ts

@@ -33,11 +33,11 @@ export const useWorklistDataStore = defineStore("work", () => {
    */
   function convertSatatus(val: string) {
     switch (val) {
-      case "normal":
+      case "NORMAL ":
         return "ปกติ";
-      case "late":
+      case "LATE":
         return "สาย";
-      case "absent":
+      case "ABSENT":
         return "ขาดราชการ";
     }
   }