From 6047660108c724dc37240f1b07b6d55dd98aa50d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 9 May 2024 11:55:37 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AD=E0=B8=9A=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=80=E0=B8=A8=E0=B8=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/KPI/api.kpis.ts                       |   3 +-
 .../Tab/Dialog/01_FormIndicator.vue           | 213 ++++++++++++++----
 .../components/Tab/Topic/01_Indicator.vue     |  49 ++--
 src/modules/08_KPI/views/form.vue             |   4 +-
 4 files changed, 203 insertions(+), 66 deletions(-)

diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index edd7f13..7dcac38 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -5,6 +5,7 @@ const kpiPeriod = `${env.API_URI}/kpi/period`;
 const kpiEvaluation = `${env.API_URI}/kpi/user/evaluation`;
 const kpiPlan = `${env.API_URI}/kpi/plan`;
 const kpiRole = `${env.API_URI}/kpi/role`;
+const kpiSpecial = `${env.API_URI}/kpi/special`;
 const KpiCapacity = `${env.API_URI}/kpi/capacity`;
 const KpiFile = `${env.API_URI}/salary/file`;
 const KpiEvaluationInfo = `${env.API_URI}/kpi/evaluation`;
@@ -17,6 +18,7 @@ export default {
   kpiEvaluation,
   kpiPlan,
   kpiRole,
+  kpiSpecial,
   KpiCapacity,
   file: KpiFile,
 
@@ -25,7 +27,6 @@ export default {
 
   kpiScoreTotal: () => `${kpiEvaluation}/point`,
 
-
   /** ผลสัมฤทธิ์ของงาน*/
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index ccd6127..c6cdf50 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import config from "@/app.config";
@@ -86,7 +86,7 @@ const roundOp = ref<DataOptions[]>([
   { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
-function fetchIndicators() {
+function fetchListPlan() {
   formFilter.nodeId = store.dataProfile.nodeId;
   formFilter.node = store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
@@ -108,7 +108,7 @@ function fetchIndicators() {
     });
 }
 
-function fetchIndicatorsByid(id: string) {
+function fetchListPlanByid(id: string) {
   showLoader();
   http
     .get(config.API.kpiAchievement("planned") + `/${id}`)
@@ -141,15 +141,13 @@ function fetchIndicatorsByid(id: string) {
 }
 
 function fetchListRole() {
-  const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
-  const position = store.dataProfile.position;
+  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+  // const position = store.dataProfile.position;
   formFilter.nodeId = store.dataProfile.nodeId;
   formFilter.node = store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
   formFilter.position = store.dataProfile.position;
 
-  console.log(formFilter);
-
   http
     .post(config.API.kpiRole + `/search`, formFilter)
     .then((res) => {
@@ -157,6 +155,9 @@ function fetchListRole() {
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
     })
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -194,9 +195,76 @@ function fetchRoleByid(id: string) {
     });
 }
 
+function fetchListSpecial() {
+  formFilter.nodeId = store.dataProfile.nodeId;
+  formFilter.node = store.dataProfile.node;
+  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
+
+  const body = {
+    keyword: formFilter.keyword,
+    period: formFilter.period,
+    year: formFilter.year,
+    pageSize: formFilter.pageSize,
+    page: formFilter.page,
+  };
+
+  showLoader();
+  http
+    .post(config.API.kpiSpecial + `/search`, body)
+    .then((res) => {
+      listTarget.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchspecialByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.including = data.including;
+      formDetail.includingName = data.includingName;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.weight = data.weight;
+      formDetail.formula = data.formula;
+      formDetail.meaning = data.meaning;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        formDetail.date = [];
+        formDetail.date[0] = data.startDate;
+        formDetail.date[1] = data.endDate;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function clickList(id: string, isData: boolean = false) {
   showLoader();
-  const url = numpage.value === 1 ? config.API.kpiPlan : config.API.kpiRole;
+  const url =
+    numpage.value === 1
+      ? config.API.kpiPlan
+      : numpage.value === 2
+      ? config.API.kpiRole
+      : config.API.kpiSpecial;
   http
     .get(`${url}/${id}`)
     .then((res) => {
@@ -276,7 +344,7 @@ function closeDialog() {
 }
 
 function onSubmit() {
-  if (!listCheckID.value) {
+  if (!listCheckID.value && numpage.value !== 3) {
     dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
   } else {
     dialogConfirm($q, async () => {
@@ -299,6 +367,15 @@ function onSubmit() {
         documentInfoEvidence: formDetail.documentInfoEvidence,
         startDate: formDetail.date ? formDetail.date[0] : undefined,
         endDate: formDetail.date ? formDetail.date[1] : undefined,
+        including: numpage.value === 3 ? formDetail.including : undefined,
+        includingName:
+          numpage.value === 3 ? formDetail.includingName : undefined,
+        period:
+          numpage.value === 3 ? store.dataEvaluation.durationKPI : undefined,
+        year:
+          numpage.value === 3
+            ? store.dataEvaluation.year.toString()
+            : undefined,
       };
       try {
         const urlPlanned = isStatusEdit.value
@@ -309,7 +386,16 @@ function onSubmit() {
           ? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
           : config.API.kpiAchievement("role");
 
-        const url = numpage.value === 1 ? urlPlanned : urlRole;
+        const urlSpecial = isStatusEdit.value
+          ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("special");
+
+        const url =
+          numpage.value === 1
+            ? urlPlanned
+            : numpage.value === 2
+            ? urlRole
+            : urlSpecial;
         const method = isStatusEdit.value ? "put" : "post";
         await http[method](url, formBody);
         closeDialog();
@@ -323,52 +409,66 @@ function onSubmit() {
   }
 }
 
-function fetchNewListIndicators() {
+function fetchNewList() {
   formFilter.page = 1;
-  numpage.value === 1 ? fetchIndicators() : fetchListRole();
+  numpage.value === 1
+    ? fetchListPlan()
+    : numpage.value === 2
+    ? fetchListRole()
+    : fetchListSpecial();
 }
 watch(
   () => modal.value,
   () => {
     if (modal.value) {
       if (numpage.value === 1) {
-        fetchIndicators();
-        isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
+        fetchListPlan();
+        isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
       } else if (numpage.value === 2) {
         fetchListRole();
         isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
+      } else if (numpage.value === 3) {
+        fetchListSpecial();
+        isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
       }
     }
   }
 );
+
+const title = computed(() => {
+  let name = "";
+  if (numpage.value === 1) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
+      : "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
+  } else if (numpage.value === 2) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
+      : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
+  } else if (numpage.value === 3) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดที่ได้รับมอบหมาย"
+      : "เพิ่มตัวชี้วัดที่ได้รับมอบหมาย";
+  }
+  return name;
+});
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 100%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="
-            numpage == 1
-              ? isStatusEdit
-                ? 'แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
-                : 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
-              : isStatusEdit
-              ? 'แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
-              : 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
-          "
-          :close="closeDialog"
-        />
+        <DialogHeader :tittle="title" :close="closeDialog" />
         <q-separator />
 
         <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
           <div class="col-12 row">
             <div class="bg-grey-1 q-pa-md col-3 row lineRight">
               <div class="col-12 fit">
-                <div class="row col-12">
+                <div class="row col-12" v-if="numpage !== 3">
                   <q-checkbox
                     v-model="formFilter.isAll"
                     label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
-                    @update:model-value="fetchNewListIndicators()"
+                    @update:model-value="fetchNewList()"
                   />
                 </div>
                 <div class="row q-col-gutter-sm col-12">
@@ -380,7 +480,7 @@ watch(
                       autoApply
                       year-picker
                       :enableTimePicker="false"
-                      @update:model-value="fetchNewListIndicators()"
+                      @update:model-value="fetchNewList()"
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
                       <template #year-overlay-value="{ value }">{{
@@ -411,8 +511,7 @@ watch(
                               name="cancel"
                               class="cursor-pointer"
                               @click.stop.prevent="
-                                (formFilter.year = null),
-                                  fetchNewListIndicators()
+                                (formFilter.year = null), fetchNewList()
                               "
                             />
                           </template>
@@ -433,7 +532,7 @@ watch(
                       input-class="text-red"
                       label="รอบการประเมิน"
                       clearable
-                      @update:model-value="fetchNewListIndicators()"
+                      @update:model-value="fetchNewList()"
                     />
                   </div>
                 </div>
@@ -444,7 +543,7 @@ watch(
                     outlined
                     dense
                     label="ค้นหา"
-                    @keydown.enter.prevent="fetchNewListIndicators()"
+                    @keydown.enter.prevent="fetchNewList()"
                   >
                     <template v-slot:append>
                       <q-icon v-if="formFilter.keyword == ''" name="search" />
@@ -452,9 +551,7 @@ watch(
                         v-if="formFilter.keyword !== ''"
                         name="clear"
                         class="cursor-pointer"
-                        @click="
-                          (formFilter.keyword = ''), fetchNewListIndicators()
-                        "
+                        @click="(formFilter.keyword = ''), fetchNewList()"
                       />
                     </template>
                   </q-input>
@@ -507,7 +604,11 @@ watch(
                         direction-links
                         :max-pages="5"
                         @update:model-value="
-                          numpage === 1 ? fetchIndicators() : fetchListRole()
+                          numpage === 1
+                            ? fetchListPlan()
+                            : numpage === 2
+                            ? fetchListRole()
+                            : fetchListSpecial()
                         "
                       ></q-pagination>
                     </div>
@@ -526,7 +627,7 @@ watch(
                 <div class="col-6">
                   <q-card bordered class="full-height q-pa-sm">
                     <div class="q-pa-sm q-col-gutter-lg">
-                      <div class="col-12 row">
+                      <div class="col-12 row" v-if="numpage !== 3">
                         <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
                         <div class="col-8">{{ formDetail.nodeName }}</div>
                       </div>
@@ -537,11 +638,43 @@ watch(
 
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
-                        <div class="col-8">{{ formDetail.including }}</div>
+                        <div class="col-8">
+                          <q-input
+                            v-if="numpage === 3"
+                            outlined
+                            v-model="formDetail.including"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+
+                          <div v-else>{{ formDetail.including }}</div>
+                        </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
-                        <div class="col-8">{{ formDetail.includingName }}</div>
+                        <div class="col-8">
+                          <q-input
+                            v-if="numpage === 3"
+                            outlined
+                            v-model="formDetail.includingName"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                          <div v-else>{{ formDetail.includingName }}</div>
+                        </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 1407b71..5d34234 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -123,11 +123,11 @@ const modalEvaluate = ref<boolean>(false);
 function onAdd(edit: boolean = false, id: string = "") {
   isStatusEdit.value = edit;
   kpiUserPlannedId.value = id;
-  if (numpage.value !== 3) {
+  // if (numpage.value !== 3) {
     modal.value = true;
-  } else if (numpage.value == 3) {
-    modalAssigned.value = true;
-  }
+  // } else if (numpage.value == 3) {
+  //   modalAssigned.value = true;
+  // }
 }
 
 function onEvaluate() {
@@ -166,23 +166,23 @@ watch(
   }
 );
 
-watch(
-  () => modalAssigned.value,
-  () => {
-    if (!modalAssigned.value) {
-      props.fetchList?.();
-    }
-  }
-);
+// watch(
+//   () => modalAssigned.value,
+//   () => {
+//     if (!modalAssigned.value) {
+//       props.fetchList?.();
+//     }
+//   }
+// );
 
-watch(
-  () => modalEvaluate.value,
-  () => {
-    if (!modalEvaluate.value) {
-      props.fetchList?.();
-    }
-  }
-);
+// watch(
+//   () => modalEvaluate.value,
+//   () => {
+//     if (!modalEvaluate.value) {
+//       props.fetchList?.();
+//     }
+//   }
+// );
 </script>
 <template>
   <q-card bordered style="border-radius: 5px" class="no-shadow">
@@ -338,18 +338,19 @@ watch(
     :isStatusEdit="isStatusEdit"
     :kpiUserPlannedId="kpiUserPlannedId"
   />
-  <Dialog03
+  
+  <!-- <Dialog03
     v-model:modal="modalAssigned"
     :numpage="numpage"
     :isStatusEdit="isStatusEdit"
     :kpiUserPlannedId="kpiUserPlannedId"
-  />
+  /> -->
 
-  <DialogEvaluate
+  <!-- <DialogEvaluate
     v-model:modal="modalEvaluate"
     :data="rows"
     :numpage="numpage"
-  />
+  /> -->
 </template>
 <style scoped>
 .custom-table2 {
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 91be026..3312a44 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -70,6 +70,7 @@ function fetchEvaluation() {
     .get(config.API.kpiEvaluation + `/${id.value}`)
     .then((res) => {
       const data = res.data.result;
+
       store.dataEvaluation = data;
       formProfile.status = store.convertStatus(data.evaluationStatus);
       formProfile.result = store.convertResults(data.evaluationResults);
@@ -94,6 +95,7 @@ function getProfile() {
     .get(config.API.profilePosition())
     .then((res) => {
       const data = res.data.result;
+
       store.dataProfile = data;
       store.checkCompetency();
       store.checkCompetencyDefaultCompetencyLevel();
@@ -281,7 +283,7 @@ async function clearScore() {
 
 async function getAll() {
   await fetchEvaluation();
-  await (store.dataProfile === null ? getProfile() : "");
+  await getProfile(); // await (store.dataProfile === null ? getProfile() : "");
   await getOrgOp();
 }