ตัวชี้วัดตามแผน ต่อAPI

src/modules/14_KPI/components/indicatorByPlan/DetailView.vue

@@ -26,10 +26,7 @@ async function fetchData() {
   showLoader();
   await http
     .get(config.API.kpiPlan)
-    .then(async (res) => {
-      console.log(res.data.result);
-      console.log("test");
-    })
+    .then(async (res) => {})
     .catch((err) => {
       messageError($q, err);
     })

src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue

@@ -4,6 +4,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
+import { useRoute } from "vue-router";
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 const store = usePositionEmp();
 const mixin = useCounterMixin();
@@ -19,15 +20,35 @@ const {
 } = mixin;
 
 const planData = reactive<any>({
-  year: null,
+  year: 0, //ปีงบประมาณ
+  round: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  including: "", //รหัสตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: null, //หน่วยนับ
+  weight: null, //น้ำหนัก
+  achievement1: "", //ผลสำเร็จของงาน 1
+  achievement2: "", //ผลสำเร็จของงาน 2
+  achievement3: "", //ผลสำเร็จของงาน 3
+  achievement4: "", //ผลสำเร็จของงาน 4
+  achievement5: "", //ผลสำเร็จของงาน 5
+  meaning: "", //นิยามหรือความหมาย
+  formula: "", //สูตรคำนวณ
+  node: null, //ระดับหน่วยงาน
+  nodeId: "", //id หน่วยงาน
+  orgRevisionId: "", //RevisionId หน่วยงาน
+  strategy: null, //ระดับยุทธศาสตร์
+  strategyId: "", //id ยุทธศาสตร์
 });
 
 const filter = ref<string>("");
 const filterAgency = ref<string>("");
+const route = useRoute();
+const id = ref<string | string[]>(route.params.id);
 
 const roundOp = ref<any[]>([
-  { id: "APRIL", name: "เมษายน" },
-  { id: "OCTOBER", name: "ตุลาคม" },
+  { id: "APR", name: "เมษายน" },
+  { id: "OCT", name: "ตุลาคม" },
 ]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
@@ -35,11 +56,13 @@ const expandedPlan = ref<Array<string | null>>([]);
 const expandedAgency = ref<Array<string | null>>([]);
 const nodeplan = ref<any>([]);
 const nodeAgency = ref<any>([]);
-const nodeId = ref<string>("");
+const editStatus = ref<boolean>(false);
 async function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {},
+    async () => {
+      editStatus.value ? editData(id.value) : addData();
+    },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
@@ -97,19 +120,92 @@ async function fetchOrganizationActive() {
     });
 }
 
+async function fetchDataById(id: any) {
+  showLoader();
+  await http
+    .get(config.API.kpiPlanById(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      // planData.value = data;
+      planData.year = data.year;
+      planData.round = data.round;
+      planData.including = data.including;
+      planData.includingName = data.includingName;
+      planData.target = data.target;
+      planData.unit = data.unit;
+      planData.weight = data.weight;
+      planData.achievement1 = data.achievement1;
+      planData.achievement2 = data.achievement2;
+      planData.achievement3 = data.achievement3;
+      planData.achievement4 = data.achievement4;
+      planData.achievement5 = data.achievement5;
+      planData.meaning = data.meaning;
+      planData.formula = data.formula;
+      planData.node = data.node;
+      planData.nodeId = data.nodeId;
+      planData.orgRevisionId = data.orgRevisionId;
+      planData.strategy = data.strategy;
+      planData.strategyId = data.strategyId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function updateSelected(data: any) {
-  planData.strategyChildPlannedId = data.id;
-  planData.strategyChildPlannedNode = data.level;
+  planData.strategyId = data.id;
+  planData.strategy = data.level;
 }
 function updateSelectedAgency(data: any) {
-  planData.agencyId = data.orgTreeId;
-  planData.agencyLevel = data.orgLevel;
+  if (planData.node === data.orgLevel && planData.nodeId === data.orgTreeId) {
+    planData.node = null;
+    planData.nodeId = null;
+  } else {
+    planData.node = data.orgLevel;
+    planData.nodeId = data.orgTreeId;
+  }
+  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: any) {
+  await http
+    .put(config.API.kpiPlanById(id), planData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
   //   fetchData();
   await fetchTree();
   await fetchOrganizationActive();
+  if (id.value !== undefined) {
+    editStatus.value = true;
+    fetchDataById(id.value);
+  }
   setTimeout(async () => {
     store.activeId && (await fetchDataTree(store.activeId));
   }, 200);
@@ -140,13 +236,19 @@ onMounted(async () => {
                 lazy-rules
                 outlined
                 class="inputgreen"
-                clearable
-                @clear="() => (planData.year = null)"
                 hide-bottom-space
                 :model-value="!!planData.year ? planData.year + 543 : null"
                 :label="`${'ปีงบประมาณ'}`"
                 @update:modelValue="planData.year = null"
               >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
               </q-input>
             </template>
           </datepicker>
@@ -174,7 +276,7 @@ onMounted(async () => {
         <div class="col-2">
           <q-input
             outlined
-            v-model="planData.Data1"
+            v-model="planData.including"
             label="รหัสตัวชี้วัด"
             bg-color="white"
             dense
@@ -186,7 +288,7 @@ onMounted(async () => {
         <div class="col-6">
           <q-input
             outlined
-            v-model="planData.Data2"
+            v-model="planData.includingName"
             label="ชื่อตัวชี้วัด"
             bg-color="white"
             dense
@@ -198,7 +300,7 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data3"
+            v-model="planData.target"
             label="ค่าเป้าหมาย"
             bg-color="white"
             dense
@@ -210,9 +312,10 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data4"
+            v-model="planData.unit"
             label="หน่วยนับ"
             bg-color="white"
+            type="number"
             dense
             class="inputgreen"
             :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
@@ -222,8 +325,9 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data5"
+            v-model="planData.weight"
             label="น้ำหนัก"
+            type="number"
             bg-color="white"
             dense
             class="inputgreen"
@@ -248,7 +352,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point5"
+                  v-model="planData.achievement5"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -265,7 +369,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point4"
+                  v-model="planData.achievement4"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -282,7 +386,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point3"
+                  v-model="planData.achievement3"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -299,7 +403,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point2"
+                  v-model="planData.achievement2"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -316,7 +420,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point1"
+                  v-model="planData.achievement1"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -331,7 +435,7 @@ onMounted(async () => {
         <div class="col-12">
           <q-input
             outlined
-            v-model="planData.Data7"
+            v-model="planData.meaning"
             label="นิยามหรือความหมาย"
             type="textarea"
             bg-color="white"
@@ -344,7 +448,7 @@ onMounted(async () => {
         <div class="col-12">
           <q-input
             outlined
-            v-model="planData.Data8"
+            v-model="planData.formula"
             label="สูตรคำนวณ"
             bg-color="white"
             type="textarea"
@@ -386,12 +490,13 @@ onMounted(async () => {
                 :no-results-label="notFound"
                 :no-nodes-label="noData"
                 v-model:expanded="expandedAgency"
+                v-model:selected="planData.nodeId"
               >
                 <template v-slot:default-header="prop">
                   <q-item
                     clickable
                     @click.stop="updateSelectedAgency(prop.node)"
-                    :active="nodeId == prop.node.orgTreeId"
+                    :active="planData.nodeId == prop.node.orgTreeId"
                     active-class="my-list-link text-primary text-weight-medium"
                     class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                   >
@@ -448,12 +553,13 @@ onMounted(async () => {
                 :no-results-label="notFound"
                 :no-nodes-label="noData"
                 v-model:expanded="expandedPlan"
+                v-model:selected="planData.strategyId"
               >
                 <template v-slot:default-header="prop">
                   <q-item
                     clickable
                     @click.stop="updateSelected(prop.node)"
-                    :active="planData.strategyChildPlannedId == prop.node.id"
+                    :active="planData.strategyId == prop.node.id"
                     active-class="my-list-link text-primary text-weight-medium"
                     class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                   >