Refactoring code module 08_KPI

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

@@ -1,28 +1,26 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
-import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import DialogHeader from "@/components/DialogHeader.vue";
 import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type {
+  DataOptions,
+  EvaluatorType,
+} from "@/modules/08_KPI/interface/index/Main";
+import type { EvaOptionType } from "@/modules/08_KPI/interface/response/index";
+
+import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
 
-const modalGovernment = ref<boolean>(false);
-
-const modalEdit = ref<boolean>(false);
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
-
-const store = useKpiDataStore();
 const $q = useQuasar();
+const store = useKpiDataStore();
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -32,18 +30,25 @@ const {
   success,
   findOrgName,
 } = mixin;
+const route = useRoute();
+const router = useRouter();
+const id = ref<string>(route.params.id as string);
 
-const evaluatorIdOp = ref<DataOptions[]>([]);
-const commanderIdOp = ref<DataOptions[]>([]);
-const commanderHighOp = ref<DataOptions[]>([]);
+const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
+const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
+const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
-const evaluatorIdMainOp = ref<DataOptions[]>([]);
-const commanderIdMainOp = ref<DataOptions[]>([]);
-const commanderHighMainOp = ref<DataOptions[]>([]);
+const evaluatorIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
+const commanderIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
+const commanderHighOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
 
-const evaluatorId = ref<any>(null);
-const commanderId = ref<any>(null);
-const commanderHighId = ref<any>(null);
+const evaluatorIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
+const commanderIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
+const commanderHighMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
+
+const evaluatorId = ref<any>(null); // ตัวแปรเก็บ id ผู้ประเมิน
+const commanderId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชา
+const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชาเหนือไปอีกขั้น
 
 const formProfile = reactive<FormProfile>({
   fullName: "",
@@ -56,8 +61,7 @@ const formProfile = reactive<FormProfile>({
   avartar: "",
 });
 
-const router = useRouter();
-
+/** ฟังชั่นดึงข้อมูล ผู้ประเมิน */
 async function fetchEvaluation() {
   await http
     .get(config.API.kpiEvaluation + `/${id.value}`)
@@ -66,7 +70,6 @@ async function fetchEvaluation() {
       store.dataEvaluation = res.data.result;
       formProfile.status = await store.convertStatus(data.evaluationStatus);
       formProfile.result = await store.convertResults(data.evaluationResults);
-      // store.checkCompetency();
       store.checkCompetencyDefaultCompetencyLevel();
     })
     .catch((e) => {
@@ -74,6 +77,7 @@ async function fetchEvaluation() {
     });
 }
 
+/** ดึงข้อมูลโปรไฟล์ */
 async function getProfile() {
   await http
     .get(config.API.profilePosition())
@@ -92,6 +96,7 @@ async function getProfile() {
     });
 }
 
+/** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
 async function fetchProfile(id: string, avatarName: string) {
   http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
@@ -100,11 +105,13 @@ async function fetchProfile(id: string, avatarName: string) {
     });
 }
 
+/** เปิด dialog แก้ไขผู้ประเมิน */
 function openEvaluator() {
   modalEdit.value = true;
   getOrgOp();
 }
 
+/** ปิด dialog */
 function close() {
   modalEdit.value = false;
   evaluatorId.value = null;
@@ -112,6 +119,7 @@ function close() {
   commanderHighId.value = null;
 }
 
+/** บันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm($q, () => {
     if (id.value) {
@@ -139,42 +147,45 @@ function onSubmit() {
   });
 }
 
+/** ดึงข้อมูล ผู้ประเมิน */
 async function getOrgOp() {
   http
     .get(config.API.Kpiorg)
     .then((res) => {
       const data = res.data.result;
-      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+      evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix}${i.firstName} ${i.lastName}`,
       }));
-      commanderIdMainOp.value = data.commander.map((i: any) => ({
+      commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix}${i.firstName} ${i.lastName}`,
       }));
-      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+      commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix}${i.firstName} ${i.lastName}`,
       }));
 
       evaluatorId.value = data.caregiver
-        .map((i: any) => ({
+        .map((i: EvaOptionType) => ({
           id: i.id,
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
-        .find((i: any) => i.id == store.dataEvaluation.evaluatorId);
+        .find((i: EvaOptionType) => i.id == store.dataEvaluation.evaluatorId);
       commanderId.value = data.commander
-        .map((i: any) => ({
+        .map((i: EvaOptionType) => ({
           id: i.id,
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
-        .find((i: any) => i.id == store.dataEvaluation.commanderId);
+        .find((i: EvaOptionType) => i.id == store.dataEvaluation.commanderId);
       commanderHighId.value = data.chairman
-        .map((i: any) => ({
+        .map((i: EvaOptionType) => ({
           id: i.id,
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
-        .find((i: any) => i.id == store.dataEvaluation.commanderHighId);
+        .find(
+          (i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
+        );
     })
     .catch((e) => {
       messageError($q, e);
@@ -182,26 +193,27 @@ async function getOrgOp() {
     .finally(() => {});
 }
 
-function filterOption(val: any, update: Function, refData: string) {
+/** ฟิลเตอร์ input */
+function filterOption(val: string, update: Function, refData: string) {
   switch (refData) {
     case "evaluatorIdOp":
       update(() => {
         evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderIdOp":
       update(() => {
         commanderIdOp.value = commanderIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderHighOp":
       update(() => {
         commanderHighOp.value = commanderHighMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -210,10 +222,12 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
+/** ดึงข้อมูลทั้งหมดในหน้า */
 async function getAll() {
   await Promise.all([fetchEvaluation(), getProfile(), getOrgOp()]);
 }
 
+/** ส่งให้ผู้ประเมิน */
 function sendToEvaluatore() {
   dialogConfirm(
     $q,
@@ -301,14 +315,17 @@ function requireEdit() {
   );
 }
 
+/** เปิด dialog ช่วยราชการ */
 function openGovernment() {
   modalGovernment.value = true;
 }
 
+/** เช็ค สถานะการทดลองงาน */
 function openStatus() {
   router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
 }
 
+/** ส่งให้ผู้ประเมิน */
 function sendToEvauator() {
   dialogConfirm($q, () => {
     showLoader();
@@ -387,8 +404,14 @@ async function goToSummary() {
   );
 }
 
+/**
+ * เปิด dialog ข้อมูลผู้ประเมิน
+ * @param profileId id ผู้ประเมิน
+ * @param type ประเภท
+ */
 const modalEvaluatorDetail = ref<boolean>(false);
 const topic = ref<string>("");
+
 function viewEvaluatorDetail(profileId: string, type: string) {
   modalEvaluatorDetail.value = true;
   topic.value =
@@ -400,17 +423,22 @@ function viewEvaluatorDetail(profileId: string, type: string) {
   fetchProfileEvaluator(profileId);
 }
 
-const evaluator = ref<any>({
+const evaluator = ref<EvaluatorType>({
   fullName: "",
   position: "",
   avartar: "",
   posTypeName: "",
   posLevelName: "",
   org: "",
+  posExecutiveName: "",
   isPosmasterAct: false,
   posmasterAct: [],
 });
 
+/**
+ * ข้อมูลของผู้ประเมิน
+ * @param id ข้อมูลของผู้ประเมิน
+ */
 async function fetchProfileEvaluator(id: string) {
   showLoader();
   http
@@ -796,7 +824,7 @@ onMounted(async () => {
                   :rules="[ (val:string) => !!val ||
             `${'กรุณาเลือกผู้ประเมิน'}`, ]"
                   use-input
-                  @filter="(inputValue:any,
+                  @filter="(inputValue:string,
             doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
             ) "
                 />
@@ -833,7 +861,7 @@ onMounted(async () => {
                   map-options
                   class="inputgreen"
                   use-input
-                  @filter="(inputValue:any,
+                  @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                     ) "
                 >
@@ -885,7 +913,7 @@ onMounted(async () => {
                   map-options
                   use-input
                   class="inputgreen"
-                  @filter="(inputValue:any,
+                  @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                     ) "
                 >
@@ -989,7 +1017,7 @@ onMounted(async () => {
             <div class="row">
               <div class="col-12" v-if="evaluator.isPosmasterAct">
                 {{
-                  `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
+                  `${evaluator.posmasterAct[0].prefix}${evaluator.posmasterAct[0].firstName} ${evaluator.posmasterAct[0].lastName} (${evaluator.posmasterAct[0].posNo})`
                 }}
               </div>
               <div class="col-12" v-else>-</div>
@@ -999,88 +1027,8 @@ onMounted(async () => {
       </q-card-section>
     </q-card>
   </q-dialog>
-  <!-- <q-dialog v-model="modalScore" persistent>
-    <q-card bordered style="width: 50vh">
-      <q-form greedy @submit.prevent @validation-success="onSubmitScore">
-        <DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
-        <q-separator />
-        <q-card-section>
-          <div class="column q-gutter-sm">
-            <q-input
-              v-model="plannedPoint"
-              label="งานตามแผนปฏิบัติราชการประจำปี"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[
-                (val) =>
-                  !!val ||
-                  val == '0' ||
-                  'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
-              ]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="rolePoint"
-              label="งานตามหน้าที่ความรับผิดชอบหลัก"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="specialPoint"
-              label="งานที่ได้รับมอบหมายพิเศษ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="capacityPoint"
-              label="สมรรถนะ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="bg-white row justify-between">
-          <div class="col-8 text-red q-px-sm">
-            <span v-if="scoreTotal == true"
-              >คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
-            >
-          </div>
-          <q-btn
-            label="บันทึก"
-            color="secondary"
-            type="submit"
-            :disable="totalScore !== 100"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog> -->
 
   <DialogGovernment v-model:modal="modalGovernment" />
-  <!-- <DialogStatus
-    v-model:modal="modalStatus"
-    v-model:is-probation="store.dataProfile.isProbation"
-  /> -->
 </template>
 <style>
 .bg-toolbar {

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

@@ -2,17 +2,25 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 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 DialogHeader from "@/components/DialogHeader.vue";
-
+import config from "@/app.config";
+import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type {
+  DataOptions,
+  MainListKpi,
+  PaginationType,
+} from "@/modules/08_KPI/interface/index/Main";
+import type {
+  RoundKpiResponse,
+  EvaOptionType,
+} from "@/modules/08_KPI/interface/response/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@@ -21,7 +29,7 @@ const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   mixin;
 
 /** Table*/
-const rows = ref<any[]>([]);
+const rows = ref<MainListKpi[]>([]);
 const visibleColumns = ref<string[]>([
   "createdAt",
   "year",
@@ -134,6 +142,17 @@ const total = ref<number>(0);
 const totalList = ref<number>(1);
 const isRoundClose = ref<boolean>(false);
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/**
+ * ดึงข้อมูลรอบการประเมิน
+ * @param type 
+ */
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
   showLoader();
@@ -143,7 +162,7 @@ async function fetchRoundOption(type: string) {
     )
     .then(async (res) => {
       const data = res.data.result.data;
-      const list = data.map((e: any) => ({
+      const list = data.map((e: RoundKpiResponse) => ({
         id: e.id,
         name:
           e.durationKPI === "OCT"
@@ -194,28 +213,32 @@ async function fetchList() {
     });
 }
 
+/** เลือกรอบการประเมิน */
 function changRound() {
   formQuery.page = 1;
   fetchList();
 }
 
+/** ไปหน้ารายละเอียด */
 function redirectViewDetail(id: string) {
   store.tabMain = "1";
-
   router.push(`/KPI/${id}`);
 }
 
+/** สร้างแบบประเมิน */
 async function onClickAddList() {
   await getProfile();
   modalDialog.value = true;
 }
 
+/** ปิด Dialog  */
 function onCloseDialog() {
   modalDialog.value = false;
   formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
   yearDialog.value = null;
 }
 
+/** บันทึกข้อมูลที่สร้าง */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -250,6 +273,7 @@ function onSubmit() {
   });
 }
 
+/** ดึงข้อมูล */
 function getProfile() {
   http
     .get(config.API.profilePosition())
@@ -268,57 +292,43 @@ function getProfile() {
     })
     .catch((e) => {
       messageError($q, e);
-    });
-  // .finally(() => {
-  //   hideLoader();
-  // });
+    })
+    .finally(() => {});
 }
 
+/** เช็ครอบการประเมิน ปิด */
 function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: PaginationType) {
   formQuery.page = 1;
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
+/** ดึงข้อมูล option */
 function getOrgOp() {
   http
     .get(config.API.Kpiorg)
     .then((res) => {
       const data = res.data.result;
-      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+      evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
         }`,
       }));
-      commanderIdMainOp.value = data.commander.map((i: any) => ({
+      commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
         }`,
       }));
-      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+      commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
@@ -330,26 +340,32 @@ function getOrgOp() {
     });
 }
 
-function filterOption(val: any, update: Function, refData: string) {
+/**
+ * ฟังชั่น ฟิลเตอร์ จาก ค่า input
+ * @param val ค่าที่รับมาจาก input
+ * @param update
+ * @param refData
+ */
+function filterOption(val: string, update: Function, refData: string) {
   switch (refData) {
     case "evaluatorIdOp":
       update(() => {
         evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderIdOp":
       update(() => {
         commanderIdOp.value = commanderIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderHighOp":
       update(() => {
         commanderHighOp.value = commanderHighMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -358,6 +374,13 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(async () => {
   await Promise.all([fetchRoundOption("main"), getOrgOp()]);
 });
@@ -508,10 +531,7 @@ onMounted(async () => {
                 <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                   <q-card bordered flat>
                     <q-list @click="redirectViewDetail(props.row.id)">
-                      <q-item
-                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
-                        :key="col.name"
-                      >
+                      <q-item v-for="col in props.cols" :key="col.name">
                         <q-item-section>
                           <q-item-label caption>{{ col.label }}</q-item-label>
 
@@ -607,7 +627,7 @@ onMounted(async () => {
                 :options="roundDialgOp"
                 hide-bottom-space
                 lazy-rules
-                :rules="[(val:any) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
+                :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
             </div>
@@ -636,7 +656,7 @@ onMounted(async () => {
                     !!val || `${'กรุณาเลือกผู้ประเมิน'}`,
                 ]"
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
                     ) "
               >
@@ -667,7 +687,7 @@ onMounted(async () => {
                 emit-value
                 map-options
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                     ) "
               >
@@ -705,7 +725,7 @@ onMounted(async () => {
                 emit-value
                 map-options
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                     ) "
               >

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

@@ -2,10 +2,13 @@
 import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import type { QTableProps } from "quasar";
 import type {
   DataOptions,
   Pagination,
@@ -18,9 +21,6 @@ import type {
 import TabAll from "@/modules/08_KPI/components/Evaluator/01_TabAll.vue";
 import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
@@ -89,6 +89,10 @@ const columns = ref<QTableProps["columns"]>([
 const totalList = ref<number>(0);
 const maxPage = ref<number>(1);
 
+/**
+ * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
+ * @param type
+ */
 async function fetchRoundOption(type: boolean = false) {
   showLoader();
   await http
@@ -121,6 +125,7 @@ async function fetchRoundOption(type: boolean = false) {
     });
 }
 
+/** ดึงข้อมูล list */
 async function fetchList() {
   showLoader();
   const body = {
@@ -157,6 +162,7 @@ async function fetchList() {
     });
 }
 
+/** เลือกรอบการประเมิน */
 function changRound() {
   store.formQuery.page = 1;
   fetchList();
@@ -171,13 +177,7 @@ function updatePagination(newPagination: Pagination) {
   store.formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-watch(
-  () => store.formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
+/** เปลี่ยน tab */
 async function onChangTab() {
   store.formQuery.page = 1;
   dataListMain.value = [];
@@ -185,6 +185,13 @@ async function onChangTab() {
   await fetchList();
 }
 
+watch(
+  () => store.formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(async () => {
   await fetchRoundOption();
 });
@@ -313,19 +320,8 @@ onMounted(async () => {
                   label="รออนุมัติแก้ไขข้อตกลง"
                   @click="onChangTab"
                 />
-                <!-- <q-tab
-                  name="4"
-                  label="อนุมัติเพื่อเริ่มประเมิน"
-                  @click="onChangTab"
-                /> -->
                 <q-tab name="5" label="รายงานผลสำเร็จ" @click="onChangTab" />
                 <q-tab name="6" label="สรุปผลการประเมิน" @click="onChangTab" />
-                <!-- <q-tab
-                  name="6"
-                  label="รายงานผลสำเร็จ"
-                  onChangTab
-                  @click="onChangTab"
-                /> -->
               </q-tabs>
               <q-separator />
 
@@ -369,19 +365,6 @@ onMounted(async () => {
                   />
                 </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"