From 87e006415c09da723753787d984fc4486c4f9a8e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Apr 2024 11:31:13 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=8A=E0=B8=B5=E0=B9=89?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=94=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B9=81?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=99=E0=B8=AF=20=3D>=20=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=89=E0=B8=A7=E0=B8=B1=E0=B8=94=E0=B8=95=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=81=E0=B8=9C=E0=B8=99=E0=B8=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/indicatorByPlan/DetailView.vue |  39 +-
 .../indicatorByPlan/IndicatorByPlan.vue       | 397 +++++++++---------
 2 files changed, 192 insertions(+), 244 deletions(-)

diff --git a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
index 9cb5a5ad9..2bb6444c8 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
@@ -1,43 +1,14 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref } from "vue";
+
+import { useRouter, useRoute } from "vue-router";
 
-import { useCounterMixin } from "@/stores/mixin";
 import IndicatorByPlan from "@/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue";
 
-const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-  calculateDurationYmd,
-} = useCounterMixin();
+
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.kpiPlan)
-    .then(async (res) => {})
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  await fetchData();
-});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -48,7 +19,7 @@ onMounted(async () => {
       class="q-mr-sm"
       icon="mdi-arrow-left"
       color="primary"
-      @click="router.go(-1)"
+      @click="router.push(`/KPI-indicator-plan`)"
     />
     {{ `${title}ตัวชี้วัดตามแผนฯ` }}
   </div>
diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index 75d971a54..590dbfdd6 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import config from "@/app.config";
 import { QForm, useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import config from "@/app.config";
 import http from "@/plugins/http";
-import { useRoute } from "vue-router";
+
+/** importType*/
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
+/** importStore*/
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**use*/
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
 const store = usePositionEmp();
 const mixin = useCounterMixin();
-const $q = useQuasar();
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = mixin;
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
-const planData = reactive<any>({
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
+
+/**form ตัวชี้วัดตามแผนฯ*/
+const planData = reactive({
   kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
   including: "", //รหัสตัวชี้วัด
   includingName: "", //ชื่อตัวชี้วัด
@@ -34,40 +38,27 @@ const planData = reactive<any>({
   meaning: "", //นิยามหรือความหมาย
   formula: "", //สูตรคำนวณ
   node: null, //ระดับหน่วยงาน
-  nodeId: "", //id หน่วยงาน
+  nodeId: null, //id หน่วยงาน
   orgRevisionId: "", //RevisionId หน่วยงาน
   strategy: null, //ระดับยุทธศาสตร์
   strategyId: "", //id ยุทธศาสตร์
 });
 
-const filter = ref<string>("");
-const filterAgency = ref<string>("");
-const route = useRoute();
-const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
-const year = ref<number>(0);
+const year = ref<number>(0); // ปีงยประมาณ
+const roundOp = ref<DataOption[]>([]);
 
-const roundOp = ref<any[]>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
-const expandedPlan = ref<Array<string | null>>([]);
-const expandedAgency = ref<Array<string | null>>([]);
 const nodeplan = ref<any>([]);
 const nodeAgency = ref<any>([]);
-const editStatus = ref<boolean>(false);
-async function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      editStatus.value ? editData(id.value) : addData();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
+const filter = ref<string>("");
+const filterAgency = ref<string>("");
+const expandedPlan = ref<string[]>([]);
+const expandedAgency = ref<string[]>([]);
 
+const editStatus = ref<boolean>(false);
 const inputRef = ref<any>(null);
+
+/** functiopn fetch รอบการประเมิน*/
 function fetchRoundOption(isId: number | null = null) {
-  showLoader();
   http
     .get(
       config.API.kpiPeriod +
@@ -93,14 +84,29 @@ function fetchRoundOption(isId: number | null = null) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-function fetchTree() {
-  showLoader();
+/** function fetch หาโครงสร้างที่ใช้งาน*/
+function fetchOrganizationActive() {
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        store.fetchDataActive(data);
+
+        store.activeId && fetchTreeAgency(store.activeId);
+        fetchTreeStrategy();
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetchTree ยุทธศาสตร์ / แผน*/
+function fetchTreeStrategy() {
   http
     .get(config.API.devStrategy)
     .then((res) => {
@@ -109,15 +115,12 @@ function fetchTree() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-async function fetchDataTree(id: string) {
-  showLoader();
-  await http
+/** functioon fetchcTree หน่วยงาน/ส่วนราชการ*/
+function fetchTreeAgency(id: string) {
+  http
     .get(config.API.orgByid(id.toString()))
     .then(async (res) => {
       const data = res.data.result;
@@ -142,39 +145,17 @@ async function fetchDataTree(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-async function fetchOrganizationActive() {
+/** function fetch ข้อมูลตัวชี้วัด*/
+function fetchDataById(id: string) {
   showLoader();
-  await http
-    .get(config.API.activeOrganization)
+  http
+    .get(config.API.kpiPlanById(id))
     .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        store.fetchDataActive(data);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function fetchDataById(id: any) {
-  showLoader();
-  await http
-    .get(config.API.kpiPlanById(id))
-    .then(async (res) => {
       const data = res.data.result;
       year.value = data.year;
-      // planData.value = data;
-      // planData.year = data.year;
       planData.kpiPeriodId = data.kpiPeriodId;
       planData.including = data.including;
       planData.includingName = data.includingName;
@@ -193,7 +174,6 @@ async function fetchDataById(id: any) {
       planData.orgRevisionId = data.orgRevisionId;
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
-      console.log(data);
 
       fetchRoundOption();
     })
@@ -201,15 +181,19 @@ async function fetchDataById(id: any) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
     });
 }
 
+/** funtion เลือกหรืออัปดเดท ยุทธศาสตร์ / แผน*/
 function updateSelected(data: any) {
   planData.strategyId = data.id;
   planData.strategy = data.level;
 }
 
+/** funtion เลือกหรืออัปดเดท หน่วยงาน/ส่วนราชการ*/
 function updateSelectedAgency(data: any, isUpdate: boolean = false) {
   if (
     planData.node === data.orgLevel &&
@@ -218,42 +202,39 @@ function updateSelectedAgency(data: any, isUpdate: boolean = false) {
   ) {
     planData.node = null;
     planData.nodeId = null;
-    console.log("1");
   } else {
     planData.node = data.orgLevel;
     planData.nodeId = data.orgTreeId;
-    console.log("2");
   }
   planData.orgRevisionId = data.orgRevisionId;
 }
 
-async function addData() {
-  await http
-    .post(config.API.kpiPlan, planData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.kpiPlanById(id), planData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      fetchDataById(id);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+/**function ยืนยันการบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      // editStatus.value ? editData(id.value) : addData();
+      try {
+        const url = editStatus.value
+          ? config.API.kpiPlanById(id.value)
+          : config.API.kpiPlan;
+        const method = editStatus.value ? "put" : "post";
+        const res = await http[method](url, planData);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        editStatus.value
+          ? fetchDataById(id.value)
+          : router.push(`/KPI-indicator-plan/${res.data.result}`);
+      } catch (e) {
+        messageError($q, e);
+      } finally {
+        hideLoader();
+      }
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
 }
 
 /**
@@ -276,18 +257,12 @@ async function searchAndReplace(orgTreeData: any, treeId: string | null) {
   }
 }
 
-onMounted(async () => {
-  //   fetchData();
-
-  await fetchOrganizationActive();
+onMounted(() => {
+  fetchOrganizationActive();
   if (id.value) {
     editStatus.value = true;
     fetchDataById(id.value);
   }
-  setTimeout(async () => {
-    store.activeId && (await fetchDataTree(store.activeId));
-    await fetchTree();
-  }, 200);
 });
 </script>
 
@@ -377,7 +352,7 @@ onMounted(async () => {
             hide-bottom-space
           />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-input
             outlined
             v-model="planData.target"
@@ -389,7 +364,7 @@ onMounted(async () => {
             hide-bottom-space
           />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-input
             outlined
             v-model="planData.unit"
@@ -402,7 +377,7 @@ onMounted(async () => {
             hide-bottom-space
           />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-input
             outlined
             v-model="planData.weight"
@@ -417,99 +392,101 @@ onMounted(async () => {
         </div>
         <div class="col-12 row">
           <div class="col-6">
-            <q-card bordered>
-              <q-card-actions class="bg-grey-3 row">
+            <q-card flat bordered>
+              <q-card bordered>
+                <q-card-actions class="bg-grey-3 row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>ระดับคะแนน</div>
+                  </div>
+                  <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
+                </q-card-actions>
+              </q-card>
+              <div class="row">
                 <div class="col-4 flex justify-center items-center">
-                  <div>ระดับคะแนน</div>
+                  <div>5</div>
                 </div>
-                <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
-              </q-card-actions>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement5"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>4</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement4"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>3</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement3"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>2</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement2"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>1</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement1"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
             </q-card>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>5</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement5"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>4</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement4"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>3</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement3"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>2</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement2"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>1</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement1"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
           </div>
         </div>
         <div class="col-12">
@@ -567,8 +544,8 @@ onMounted(async () => {
                 label-key="labelName"
                 selected-color="primary"
                 :filter="filterAgency"
-                :no-results-label="notFound"
-                :no-nodes-label="noData"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
                 v-model:expanded="expandedAgency"
                 v-model:selected="planData.nodeId"
               >
@@ -630,8 +607,8 @@ onMounted(async () => {
                 node-key="id"
                 label-key="id"
                 :filter="filter"
-                :no-results-label="notFound"
-                :no-nodes-label="noData"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
                 v-model:expanded="expandedPlan"
                 v-model:selected="planData.strategyId"
               >