ประกาศผล

src/modules/14_KPI/views/resultsMain.vue

@@ -8,6 +8,7 @@ import config from "@/app.config";
  * import type
  */
 import type { ItemsTab } from "@/modules/14_KPI/interface/index/Main";
+import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
 
 /**
  * import components
@@ -23,8 +24,7 @@ import { useCounterMixin } from "@/stores/mixin";
  *  use
  */
 const $q = useQuasar();
-const { dialogRemove, messageError, showLoader, hideLoader, success } =
-  useCounterMixin();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
 
 /**
  * ตัวแปร
@@ -34,19 +34,31 @@ const tabItems = ref<ItemsTab[]>([
   { name: "COMPLETE", label: " รอประกาศผล" },
   { name: "KP7", label: "ประกาศผลแล้ว" },
 ]);
-
+const dataList = ref<ResResults[]>([]); // ข่อมูลรายการ
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
+const maxPage = ref<number>(1);
+const total = ref<number>(1);
+const keyword = ref<string>("");
 
-function fetcDatahList() {
+/**
+ * function fetch รายการประกาศผล
+ */
+function fetcDataList() {
   showLoader();
   http
     .post(config.API.evaluationUser, {
       status: tab.value,
       page: page.value,
       pageSize: pageSize.value,
+      keyword: keyword.value,
+    })
+    .then((res) => {
+      const data = res.data.result;
+      dataList.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(total.value / pageSize.value);
     })
-    .then((res) => {})
     .catch((err) => {
       messageError($q, err);
     })
@@ -55,14 +67,27 @@ function fetcDatahList() {
     });
 }
 
+/**
+ * ทำงานเมื่อมีการเปลี่ยน Tab
+ */
 watch(tab, () => {
   page.value = 1;
-  pageSize.value = 10;
-  fetcDatahList();
+  keyword.value = "";
+  fetcDataList();
 });
 
+/**
+ * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
+ */
+watch(pageSize, () => {
+  fetcDataList();
+});
+
+/**
+ * HooK
+ */
 onMounted(() => {
-  fetcDatahList();
+  fetcDataList();
 });
 </script>
 
@@ -85,12 +110,30 @@ onMounted(() => {
     </q-tabs>
     <q-separator />
     <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
-      <q-tab-panel name="COMPLETE">
-        <TableResults :tab="tab" />
+      <q-tab-panel name="COMPLETE" style="padding: 0px">
+        <TableResults
+          :tab="tab"
+          :row="dataList"
+          v-model:page="page"
+          v-model:pageSize="pageSize"
+          v-model:maxPage="maxPage"
+          v-model:total="total"
+          v-model:keyword="keyword"
+          :fetchData="fetcDataList"
+        />
       </q-tab-panel>
 
-      <q-tab-panel name="KP7">
-        <TableResults :tab="tab" />
+      <q-tab-panel name="KP7" style="padding: 0px">
+        <TableResults
+          :tab="tab"
+          :row="dataList"
+          v-model:page="page"
+          v-model:pageSize="pageSize"
+          v-model:maxPage="maxPage"
+          v-model:total="total"
+          v-model:keyword="keyword"
+          :fetchData="fetcDataList"
+        />
       </q-tab-panel>
     </q-tab-panels>
   </q-card>