รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => ผูก API

src/modules/08_KPI/views/mainEvaluator.vue

@@ -5,8 +5,15 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import type { QTableProps } from "quasar";
+import type {
+  DataOptions,
+  Pagination,
+} from "@/modules/08_KPI/interface/index/Main";
+import type {
+  ResRound,
+  ResEvaluatorAssessor,
+} from "@/modules/08_KPI/interface/response/index";
 
 import TabAll from "@/modules/08_KPI/components/Evaluator/01_TabAll.vue";
 import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
@@ -19,9 +26,7 @@ const router = useRouter();
 const store = useKpiDataStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-const dataListMain = ref<any>();
-
-const year = ref<number>(new Date().getFullYear());
+const dataListMain = ref<ResEvaluatorAssessor[]>([]);
 
 const roundOp = ref<DataOptions[]>([]);
 
@@ -93,7 +98,7 @@ function fetchRoundOption(type: boolean = false) {
     )
     .then((res) => {
       const data = res.data.result.data;
-      const list = data.map((e: any) => ({
+      const list = data.map((e: ResRound) => ({
         id: e.id,
         name:
           e.durationKPI === "OCT"
@@ -118,36 +123,21 @@ function fetchRoundOption(type: boolean = false) {
 
 function fetchList() {
   showLoader();
-  const formTab1 = {
+  const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
     kpiPeriodId: store.formQuery.round,
     keyword: store.formQuery.keyword,
+    status:
+      store.tabMainevaluator === "2"
+        ? "NEW"
+        : store.tabMainevaluator === "4"
+        ? "APPROVE"
+        : store.tabMainevaluator === "5"
+        ? "EVALUATING"
+        : undefined,
+    reqedit: store.tabMainevaluator === "3" ? "NEW" : undefined,
   };
-  const formTab2 = {
-    page: store.formQuery.page,
-    pageSize: store.formQuery.pageSize,
-    kpiPeriodId: store.formQuery.round,
-    keyword: store.formQuery.keyword,
-    status: "NEW_EVALUATOR",
-  };
-
-  const formTab3 = {
-    page: store.formQuery.page,
-    pageSize: store.formQuery.pageSize,
-    kpiPeriodId: store.formQuery.round,
-    keyword: store.formQuery.keyword,
-    reqedit: "EVALUATOR",
-  };
-
-  const body =
-    store.tabMainevaluator === "1"
-      ? formTab1
-      : store.tabMainevaluator === "2"
-      ? formTab2
-      : store.tabMainevaluator === "3"
-      ? formTab3
-      : "";
 
   http
     .post(config.API.kpiEvaluation + `/admin`, body)
@@ -174,7 +164,7 @@ function changRound() {
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   store.formQuery.page = 1;
   store.formQuery.pageSize = newPagination.rowsPerPage;
 }
@@ -189,6 +179,7 @@ watch(
 function onChangTab() {
   store.formQuery.page = 1;
   fetchList();
+  store.selected = [];
 }
 
 onMounted(async () => {
@@ -316,7 +307,7 @@ onMounted(async () => {
                 <q-tab name="1" label="รายการทั้งหมด" @click="onChangTab" />
                 <q-tab
                   name="2"
-                  label="รออนุมัติการจัดทำข้อตกลง"
+                  label="อนุมัติเพื่อเริ่มประเมิน"
                   @click="onChangTab"
                 />
                 <q-tab
@@ -324,6 +315,16 @@ onMounted(async () => {
                   label="รออนุมัติแก้ไขข้อตกลง"
                   @click="onChangTab"
                 />
+                <q-tab
+                  name="4"
+                  label="อนุมัติเพื่อเริ่มประเมิน"
+                  @click="onChangTab"
+                />
+                <q-tab
+                  name="5"
+                  label="ตรวจสอบผลการประเมิน"
+                  @click="onChangTab"
+                />
               </q-tabs>
               <q-separator />
 
@@ -366,6 +367,32 @@ onMounted(async () => {
                     :fetchList="fetchList"
                   />
                 </q-tab-panel>
+
+                <q-tab-panel name="4">
+                  <TabOther
+                    :columns="columns"
+                    :visibleColumns="visibleColumns"
+                    :rows="dataListMain"
+                    :formQuery="store.formQuery"
+                    :total="totalList"
+                    :maxPage="maxPage"
+                    :updatePagination="updatePagination"
+                    :fetchList="fetchList"
+                  />
+                </q-tab-panel>
+
+                <q-tab-panel name="5">
+                  <TabOther
+                    :columns="columns"
+                    :visibleColumns="visibleColumns"
+                    :rows="dataListMain"
+                    :formQuery="store.formQuery"
+                    :total="totalList"
+                    :maxPage="maxPage"
+                    :updatePagination="updatePagination"
+                    :fetchList="fetchList"
+                  />
+                </q-tab-panel>
               </q-tab-panels>
             </q-card>
           </div>