updated kpi list & detail

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

@@ -1,29 +1,47 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import TabMain from "@/modules/14_KPI/components/detailList/TabMain.vue";
+import TabMain from "@/modules/14_KPI/components/Tab/TabMain.vue";
+import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
-import { time } from "console";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
-// import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { FormProfile } from "@/modules/14_KPI/interface/request/index";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
+// const modalScore = 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 === "KPIDetail" ? true : false);
+const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
-const store = useKPIDataStore();
+const plannedPoint = ref<string>("");
+const rolePoint = ref<string>("");
+const specialPoint = ref<string>("");
+const capacityPoint = ref<string>("");
+
+const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
-const indicatorScore = ref<number>(0);
-const competencyScore = ref<number>(0);
-const formProfile = reactive<any>({
+const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
+
+const evaluatorIdOp = ref<DataOption[]>([]);
+const commanderIdOp = ref<DataOption[]>([]);
+const commanderHighOp = ref<DataOption[]>([]);
+
+const evaluatorIdMainOp = ref<DataOption[]>([]);
+const commanderIdMainOp = ref<DataOption[]>([]);
+const commanderHighMainOp = ref<DataOption[]>([]);
+
+const evaluatorId = ref<any>(null);
+const commanderId = ref<any>(null);
+const commanderHighId = ref<any>(null);
+
+const formProfile = reactive<FormProfile>({
   fullName: "",
   position: "",
   type: "",
@@ -36,37 +54,32 @@ const formProfile = reactive<any>({
 
 const router = useRouter();
 
-function fetchEvaluation() {
-  http
-    .get(config.API.kpiUserEvaluation + `/${id.value}`)
-    .then((res) => {
-      const data = res.data.result;
-      store.dataEvaluation = data;
+async function fetchEvaluation() {
+  await http
+    .get(config.API.kpiEvaluation + `/${id.value}`)
+    .then(async (res) => {
+      const data = await res.data.result;
+
+      store.dataEvaluation = await data;
       formProfile.status = store.convertStatus(data.evaluationStatus);
       formProfile.result = store.convertResults(data.evaluationResults);
-      fetchProfile(data.profileId);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-}
+      await store.checkCompetency();
+      await store.checkCompetencyDefaultCompetencyLevel();
 
-function getProfile() {
-  http
-    .get(config.API.profilePosition())
-    .then((res) => {
-      const data = res.data.result;
-      store.dataProfile = data;
-      store.checkCompetency();
-      store.checkCompetencyDefaultCompetencyLevel();
-      formProfile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
-      formProfile.position = data.position;
-      formProfile.type = data.posTypeName;
-      formProfile.level = data.posLevelName;
+      fetchProfile(data.profileId);
+
+      plannedPoint.value = data.plannedPoint == null ? "" : data.plannedPoint;
+      rolePoint.value = data.rolePoint == null ? "" : data.rolePoint;
+      specialPoint.value = data.specialPoint == null ? "" : data.specialPoint;
+      capacityPoint.value =
+        data.capacityPoint == null ? "" : data.capacityPoint;
     })
     .catch((e) => {
       messageError($q, e);
     });
+  // .finally(() => {
+  //   hideLoader();
+  // });
 }
 
 async function fetchProfile(id: string) {
@@ -75,20 +88,214 @@ async function fetchProfile(id: string) {
       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
     )
     .then(async (res) => {
-      formProfile.avartar = res.data.downloadUrl;
+      store.dataEvaluation.avartar = res.data.downloadUrl;
     })
     .catch(() => {
       // profilePicture.value = avatar;
     });
 }
 
-/** save */
-function onSave() {}
+function close() {
+  modalEdit.value = false;
+  evaluatorId.value = null;
+  commanderId.value = null;
+  commanderHighId.value = null;
+  getAll();
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    if (id.value) {
+      showLoader();
+      http
+        .put(config.API.kpiEvaluationCheck + `/${id.value}`, {
+          evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
+          commanderId: commanderId.value ? commanderId.value.id : null,
+          commanderHighId: commanderHighId.value
+            ? commanderHighId.value.id
+            : null,
+        })
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+          close();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  });
+}
+
+function getOrgOp() {
+  http
+    .get(config.API.Kpiorg)
+    .then((res) => {
+      const data = res.data.result;
+      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+      commanderIdMainOp.value = data.commander.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+
+      evaluatorId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.evaluatorId);
+      commanderId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.commanderId);
+      commanderHighId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.commanderHighId);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function filterOption(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "evaluatorIdOp":
+      update(() => {
+        evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "commanderIdOp":
+      update(() => {
+        commanderIdOp.value = commanderIdMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "commanderHighOp":
+      update(() => {
+        commanderHighOp.value = commanderHighMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+// function onSubmitScore() {
+//   showLoader();
+//   http
+//     .put(config.API.kpiScoreTotal() + `/${id.value}`, {
+//       plannedPoint: plannedPoint.value,
+//       rolePoint: rolePoint.value,
+//       specialPoint: specialPoint.value,
+//       capacityPoint: capacityPoint.value,
+//     })
+//     .then(async (res) => {
+//       await fetchEvaluation();
+//       success($q, "บันทึกสำเร็จ");
+//       modalScore.value = false;
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// }
+
+// async function clearScore() {
+//   modalScore.value = false;
+//   plannedPoint.value = "";
+//   rolePoint.value = "";
+//   specialPoint.value = "";
+//   capacityPoint.value = "";
+//   getAll();
+// }
+
+async function getAll() {
+  await fetchEvaluation();
+
+  await store.checkStep();
+
+  await getOrgOp();
+}
+
+function sendToEvaluatore(status: string) {
+  dialogConfirm(
+    $q,
+    () => {
+      if (id.value) {
+        showLoader();
+        http
+          .put(config.API.kpiSendToStatus(id.value), {
+            status: status,
+          })
+          .then((res) => {
+            success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
+            close();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      }
+    },
+    "ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
+    "ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
+  );
+}
+
+function requireEdit() {
+  dialogConfirm(
+    $q,
+    () => {
+      if (id.value) {
+        showLoader();
+        http
+          .put(config.API.kpiReqEdit(id.value), {
+            status: "EVALUATOR",
+          })
+          .then((res) => {
+            success($q, "ขอแก้ไขสำเร็จ");
+            close();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      }
+    },
+    "ยืนยันการขอแก้ไขข้อตกลง",
+    "ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
+  );
+}
 
 onMounted(async () => {
   showLoader();
-  fetchEvaluation();
-  getProfile();
+  await getAll();
 });
 </script>
 
@@ -103,132 +310,436 @@ onMounted(async () => {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="
-          () => {
-            store.dataEvaluation = {};
-            isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`);
-          }
-        "
+        @click="router.push(`/KPI-list`)"
       />
-      {{ id ? `รายละเอียดแบบประเมิน` : `เพิ่มแบบประเมิน` }}
-      <q-space />
+      รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล
     </div>
-    <div class="col-12">
-      <q-card bordered flat class="relative-position">
-        <div
-          class="absolute-center-left"
-          style="left: 2%; top: 50%; transform: translateY(-50%)"
-        >
-          <q-avatar size="95px">
-            <q-img
-              v-if="formProfile.avartar == null"
-              src="@/assets/avatar_user.jpg"
-              class="bg-grey-3"
-              style="object-fit: cover"
-            />
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="col-12">
+        <q-card bordered flat class="relative-position">
+          <div
+            class="absolute-center-left"
+            style="left: 2%; top: 50%; transform: translateY(-50%)"
+          >
+            <q-avatar size="95px">
+              <q-img :src="store.dataEvaluation.avartar" />
+            </q-avatar>
+          </div>
+          <div class="row col-12">
+            <div class="row items-center col-12 q-pa-sm">
+              <div class="col-12" style="padding-left: 12%">
+                <div class="row col-12 items-center">
+                  <span class="text-h6 text-weight-medium text-primary">{{
+                    `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
+                  }}</span>
+                  <q-space />
+                  <div class="q-gutter-x-sm">
+                    <span
+                      v-if="
+                        (store.dataEvaluation.posExecutiveName == null &&
+                          store.indicatorWeightTotal != 100) ||
+                        (store.dataEvaluation.posExecutiveName != null &&
+                          (store.indicatorWeight1Total != 100 ||
+                            store.indicatorWeight2Total != 20))
+                      "
+                      class="text-red"
+                      >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
+                    >
+                    <q-btn
+                      v-if="
+                        store.rolePerson == 'USER' &&
+                        store.dataEvaluation.evaluationStatus == 'NEW'
+                      "
+                      :disabled="
+                        (store.dataEvaluation.posExecutiveName == null &&
+                          store.indicatorWeightTotal != 100) ||
+                        (store.dataEvaluation.posExecutiveName != null &&
+                          (store.indicatorWeight1Total != 100 ||
+                            store.indicatorWeight2Total != 20))
+                      "
+                      unelevated
+                      round
+                      icon="mdi-send"
+                      color="grey-2"
+                      text-color="blue-6"
+                      size="md"
+                      @click="sendToEvaluatore('NEW_EVALUATOR')"
+                    >
+                      <q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
+                    </q-btn>
 
-            <q-img v-else :src="formProfile.avartar" />
-          </q-avatar>
-        </div>
-        <div class="row col-12">
-          <div class="row items-center col-12 q-pa-sm">
-            <div class="col-12" style="padding-left: 12%">
-              <div class="row col-12 items-center">
-                <span class="text-h6 text-weight-medium text-primary">{{
-                  formProfile.fullName ? formProfile.fullName : "-"
-                }}</span>
-                <q-space />
-                <div class="q-gutter-x-sm">
-                  <q-btn
-                    unelevated
-                    round
-                    icon="mdi-file-eye-outline"
-                    color="grey-2"
-                    text-color="primary"
-                    size="md"
-                  >
-                    <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    unelevated
-                    round
-                    color="grey-2"
-                    text-color="blue-5"
-                    icon="mdi-file-eye-outline"
-                    size="md"
-                  >
-                    <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
-                  </q-btn>
+                    <q-btn
+                      v-if="
+                        store.rolePerson == 'USER' &&
+                        store.dataEvaluation.evaluationStatus == 'EVALUATING'
+                      "
+                      unelevated
+                      round
+                      icon="mdi-send"
+                      color="grey-2"
+                      text-color="blue-6"
+                      size="md"
+                      @click="sendToEvaluatore('EVALUATING_EVALUATOR')"
+                    >
+                      <q-tooltip>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip>
+                    </q-btn>
+
+                    <q-btn
+                      v-if="
+                        store.rolePerson == 'USER' &&
+                        store.tabOpen < 3 &&
+                        store.dataEvaluation.evaluationStatus != 'NEW' &&
+                        (store.dataEvaluation.evaluationReqEdit == null ||
+                          store.dataEvaluation.evaluationReqEdit == 'DONE')
+                      "
+                      :disabled="store.dataEvaluation.evaluatorId == null"
+                      unelevated
+                      round
+                      icon="mdi-file-edit"
+                      color="grey-2"
+                      text-color="red-6"
+                      size="md"
+                      @click="requireEdit()"
+                    >
+                      <q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
+                    </q-btn>
+
+                    <!-- <q-btn
+                      v-if="!isReadonly"
+                      unelevated
+                      round
+                      icon="mdi-format-list-bulleted-square"
+                      color="grey-2"
+                      text-color="amber-10"
+                      size="md"
+                      @click="modalScore = true"
+                    >
+                      <q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip>
+                    </q-btn> -->
+                    <q-btn
+                      unelevated
+                      round
+                      icon="mdi-account"
+                      color="grey-2"
+                      text-color="edit"
+                      size="md"
+                      @click="modalEdit = true"
+                    >
+                      <q-tooltip>{{
+                        store.dataEvaluation.evaluationStatus === "NEW" &&
+                        store.rolePerson === "USER"
+                          ? "แก้ไขผู้ประเมิน"
+                          : "ข้อมูลผู้ประเมิน"
+                      }}</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      unelevated
+                      round
+                      icon="mdi-file-eye-outline"
+                      color="grey-2"
+                      text-color="primary"
+                      size="md"
+                    >
+                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      unelevated
+                      round
+                      color="grey-2"
+                      text-color="blue-5"
+                      icon="mdi-file-eye-outline"
+                      size="md"
+                    >
+                      <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
+                    </q-btn>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div class="row items-center bg-toolbar col-12 q-pa-sm">
-            <div class="col-12 q-py-xs" style="padding-left: 12%">
-              <div class="row no-wrap">
-                <div class="col-2">
-                  <div class="column">
-                    <span class="text-grey-6">ตำแหน่งในสายงาน</span>
-                    <span class="text-weight-medium text-dark">{{
-                      formProfile.position
-                    }}</span>
+            <div class="row items-center bg-toolbar col-12 q-pa-sm">
+              <div class="col-12 q-py-xs" style="padding-left: 12%">
+                <div class="row no-wrap">
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ตำแหน่งในสายงาน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        store.dataEvaluation.position
+                      }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="col-2">
-                  <div class="column">
-                    <span class="text-grey-6">ประเภทตำแหน่ง</span>
-                    <span class="text-weight-medium text-dark">{{
-                      formProfile.type
-                    }}</span>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ประเภทตำแหน่ง</span>
+                      <span class="text-weight-medium text-dark">{{
+                        store.dataEvaluation.posTypeName
+                      }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="col-2">
-                  <div class="column">
-                    <span class="text-grey-6">ระดับตำแหน่ง</span>
-                    <span class="text-weight-medium text-dark">{{
-                      formProfile.level
-                    }}</span>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ระดับตำแหน่ง</span>
+                      <span class="text-weight-medium text-dark">{{
+                        store.dataEvaluation.posLevelName
+                      }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="col-2">
-                  <div class="column">
-                    <span class="text-grey-6">สถานะการประเมิน</span>
-                    <span class="text-weight-medium text-dark">{{
-                      formProfile.status
-                    }}</span>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">สถานะการประเมิน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.status
+                      }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="col-2">
-                  <div class="column">
-                    <span class="text-grey-6">ผลการประเมิน</span>
-                    <span class="text-weight-medium text-dark">{{
-                      formProfile.result
-                    }}</span>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ผลการประเมิน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.result
+                      }}</span>
+                    </div>
                   </div>
-                </div>
-                <div class="col-2">
-                  <div class="column">
-                    <span class="text-grey-6">คะแนนประเมิน</span>
-                    <span class="text-weight-medium text-primary"
-                      >{{ (indicatorScore + competencyScore).toFixed(2) }}
-                    </span>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">คะแนนประเมิน</span>
+                      <span class="text-weight-medium text-primary">
+                        {{
+                          store.dataEvaluation.posExecutiveName == null
+                            ? (
+                                store.indicatorScoreVal +
+                                store.competencyScoreVal +
+                                store.devScoreVal
+                              ).toFixed(2)
+                            : (
+                                store.excusiveIndicator1ScoreVal +
+                                store.excusiveIndicator2ScoreVal +
+                                store.competencyScoreVal
+                              ).toFixed(2)
+                        }}
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </q-card>
+        </q-card>
 
-      <q-card class="q-mt-md rounded">
-        <TabMain
-          v-model:indicatorScore="indicatorScore"
-          v-model:competencyScore="competencyScore"
-        />
-      </q-card>
+        <q-card class="q-mt-md rounded">
+          <TabMain />
+        </q-card>
+      </div>
     </div>
   </div>
+
+  <q-dialog v-model="modalEdit" persistent>
+    <q-card bordered style="width: 50vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            store.dataEvaluation.evaluationStatus === 'NEW' &&
+            store.rolePerson === 'USER'
+              ? 'แก้ไขผู้ประเมิน'
+              : 'ข้อมูลผู้ประเมิน'
+          "
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="column q-gutter-sm">
+            <q-select
+              :readonly="
+                !(
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                )
+              "
+              v-model="evaluatorId"
+              outlined
+              label="ผู้ประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="evaluatorIdOp"
+              class="inputgreen"
+              map-options
+              hide-bottom-space
+              lazy-rules
+              :rules="[ (val:string) => !!val ||
+            `${'กรุณาเลือกผู้ประเมิน'}`, ]"
+              use-input
+              @filter="(inputValue:any,
+            doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
+            ) "
+            />
+            <q-select
+              :readonly="
+                !(
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                )
+              "
+              v-model="commanderId"
+              outlined
+              label="ผู้บังคับบัญชาเหนือขึ้นไป"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="commanderIdOp"
+              map-options
+              class="inputgreen"
+              use-input
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
+                    ) "
+            >
+              <template
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER' &&
+                  commanderId
+                "
+                v-slot:append
+              >
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="commanderId = null"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+            <q-select
+              :readonly="
+                !(
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                )
+              "
+              v-model="commanderHighId"
+              outlined
+              label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="commanderHighOp"
+              map-options
+              use-input
+              class="inputgreen"
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
+                    ) "
+            >
+              <template
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER' &&
+                  commanderHighId
+                "
+                v-slot:append
+              >
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="commanderHighId = null"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions
+          v-if="
+            store.dataEvaluation.evaluationStatus === 'NEW' &&
+            store.rolePerson === 'USER'
+          "
+          align="right"
+          class="bg-white text-teal"
+        >
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </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> -->
 </template>
 <style>
 .bg-toolbar {

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

@@ -9,11 +9,11 @@ import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
 const $q = useQuasar();
 const router = useRouter();
-const store = useKPIDataStore();
+const store = useKpiDataStore();
 
 const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   useCounterMixin();
@@ -22,7 +22,7 @@ const filterKeyword = ref<string>("");
 
 const rows = ref<any[]>([]);
 
-const year = ref<number>(new Date().getFullYear());
+const year = ref<number | null>(new Date().getFullYear());
 
 const round = ref<string>("");
 const roundOp = ref<DataOption[]>([]);
@@ -31,7 +31,7 @@ const visibleColumns = ref<string[]>([
   "name",
   "createdAt",
   "evaluationStatus",
-  "evaluationStatus",
+  "evaluationResults",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -65,16 +65,16 @@ const columns = ref<QTableProps["columns"]>([
     field: "evaluationStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => store.convertResults(v),
+    format: (v) => store.convertStatus(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "evaluationStatus",
+    name: "evaluationResults",
     align: "left",
     label: "ผลการประเมิน",
     sortable: true,
-    field: "evaluationStatus",
+    field: "evaluationResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertResults(v),
@@ -97,20 +97,22 @@ function fetchRoundOption() {
       config.API.kpiPeriod +
         `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
     )
-    .then((res) => {
-      const data = res.data.result.data;
-      const list = data.map((e: any) => ({
-        id: e.id,
-        name:
-          e.durationKPI === "OCT"
-            ? "รอบตุลาคม"
-            : e.durationKPI === "APR"
-            ? "รอบเมษายน"
-            : "",
-      }));
-      roundOp.value = list;
-      round.value = "";
-      fetchList();
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      if (res.data.result.data.length > 0) {
+        const list = await data.map((e: any) => ({
+          id: e.id,
+          name:
+            e.durationKPI === "OCT"
+              ? "รอบตุลาคม"
+              : e.durationKPI === "APR"
+              ? "รอบเมษายน"
+              : "",
+        }));
+        roundOp.value = list;
+        store.formQuery.round = list[0].id;
+        fetchList();
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -120,13 +122,19 @@ function fetchRoundOption() {
     });
 }
 
+// const status = ref<string>("");
 function fetchList() {
   showLoader();
+  const body = {
+    page: store.formQuery.page,
+    pageSize: store.formQuery.pageSize,
+    kpiPeriodId: store.formQuery.round,
+    keyword: store.formQuery.keyword,
+    // status: status.value,
+  };
+
   http
-    .get(
-      config.API.kpiUserEvaluation +
-        `/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}&keyword=${filterKeyword.value}`
-    )
+    .post(config.API.kpiEvaluation + `/admin`, body)
     .then((res) => {
       const data = res.data.result;
       maxPage.value = Math.ceil(data.total / formQuery.pageSize);
@@ -150,6 +158,13 @@ function redirectViewDetail(id: string) {
   router.push(`KPI-list/${id}`);
 }
 
+function clearYear() {
+  year.value = null;
+  store.formQuery.round = "";
+  roundOp.value = [];
+  fetchList();
+}
+
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
@@ -190,6 +205,7 @@ onMounted(async () => {
             <datepicker
               menu-class-name="modalfix"
               v-model="year"
+              style="width: 150px"
               :locale="'th'"
               autoApply
               year-picker
@@ -208,6 +224,8 @@ onMounted(async () => {
                   hide-bottom-space
                   :model-value="!!year ? year + 543 : null"
                   :label="`${'ปีงบประมาณ'}`"
+                  clearable
+                  @clear="clearYear"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -222,18 +240,32 @@ onMounted(async () => {
             </datepicker>
 
             <q-select
-              v-model="round"
+              v-model="store.formQuery.round"
               outlined
               label="รอบการประเมิน"
               dense
               option-label="name"
               option-value="id"
               :options="roundOp"
-              style="min-width: 200px"
+              style="min-width: 150px"
               emit-value
               map-options
               @update:model-value="changRound"
             />
+
+            <!-- <q-select
+              v-model="status"
+              outlined
+              label="สถานะการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="store.statusOptions"
+              style="min-width: 180px"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            /> -->
           </div>
 
           <q-space />