Merge branch 'develop' into devTee

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

@@ -20,8 +20,7 @@ const {
 } = mixin;
 
 const planData = reactive<any>({
-  year: 0, //ปีงบประมาณ
-  round: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
   including: "", //รหัสตัวชี้วัด
   includingName: "", //ชื่อตัวชี้วัด
   target: "", //ค่าเป้าหมาย
@@ -44,12 +43,10 @@ const planData = reactive<any>({
 const filter = ref<string>("");
 const filterAgency = ref<string>("");
 const route = useRoute();
-const id = ref<string | string[]>(route.params.id);
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
+const year = ref<number>(0);
 
-const roundOp = ref<any[]>([
-  { id: "APR", name: "เมษายน" },
-  { id: "OCT", name: "ตุลาคม" },
-]);
+const roundOp = ref<any[]>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
 const expandedPlan = ref<Array<string | null>>([]);
@@ -68,6 +65,40 @@ async function onSubmit() {
   );
 }
 
+const inputRef = ref<any>(null);
+function fetchRoundOption(isId: number | null = null) {
+  showLoader();
+  http
+    .get(
+      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;
+
+      if (isId) {
+        planData.kpiPeriodId = "";
+        inputRef.value.resetValidation();
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchTree() {
   showLoader();
   http
@@ -88,11 +119,26 @@ async function fetchDataTree(id: string) {
   showLoader();
   await http
     .get(config.API.orgByid(id.toString()))
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       nodeAgency.value = data;
-
       store.treeId = "";
+
+      if (nodeAgency.value && planData.nodeId) {
+        const nodeTree = await searchAndReplace(
+          nodeAgency.value,
+          planData.nodeId
+        );
+        if (nodeTree) {
+          expandedAgency.value = [];
+          const parts = nodeTree?.orgName.split("/");
+          for (let i = 1; i < parts.length; i++) {
+            const arrangedParts = parts[i];
+            expandedAgency.value.push(arrangedParts);
+          }
+          updateSelectedAgency(nodeTree, true);
+        }
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -126,9 +172,10 @@ async function fetchDataById(id: any) {
     .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.round = data.round;
+      // planData.year = data.year;
+      planData.kpiPeriodId = data.kpiPeriodId;
       planData.including = data.including;
       planData.includingName = data.includingName;
       planData.target = data.target;
@@ -146,6 +193,9 @@ async function fetchDataById(id: any) {
       planData.orgRevisionId = data.orgRevisionId;
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
+      console.log(data);
+
+      fetchRoundOption();
     })
     .catch((err) => {
       messageError($q, err);
@@ -159,13 +209,20 @@ function updateSelected(data: any) {
   planData.strategyId = data.id;
   planData.strategy = data.level;
 }
-function updateSelectedAgency(data: any) {
-  if (planData.node === data.orgLevel && planData.nodeId === data.orgTreeId) {
+
+function updateSelectedAgency(data: any, isUpdate: boolean = false) {
+  if (
+    planData.node === data.orgLevel &&
+    planData.nodeId === data.orgTreeId &&
+    !isUpdate
+  ) {
     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;
 }
@@ -184,11 +241,12 @@ async function addData() {
     });
 }
 
-async function editData(id: any) {
+async function editData(id: string) {
   await http
     .put(config.API.kpiPlanById(id), planData)
     .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
+      fetchDataById(id);
     })
     .catch((err) => {
       messageError($q, err);
@@ -198,16 +256,37 @@ async function editData(id: any) {
     });
 }
 
+/**
+ * function หาหน่วยงานที่รับผิดชอบ
+ * @param orgTreeData ข้อมูล  nodeTree
+ * @param treeId tree ID
+ */
+async function searchAndReplace(orgTreeData: any, treeId: string | null) {
+  if (orgTreeData) {
+    for (let orgTree of orgTreeData) {
+      if (orgTree.orgTreeId === treeId) {
+        return orgTree;
+      }
+      let foundOrg: any = await searchAndReplace(orgTree.children, treeId);
+      if (foundOrg) {
+        return foundOrg;
+      }
+    }
+    return false;
+  }
+}
+
 onMounted(async () => {
   //   fetchData();
-  await fetchTree();
+
   await fetchOrganizationActive();
-  if (id.value !== undefined) {
+  if (id.value) {
     editStatus.value = true;
     fetchDataById(id.value);
   }
   setTimeout(async () => {
     store.activeId && (await fetchDataTree(store.activeId));
+    await fetchTree();
   }, 200);
 });
 </script>
@@ -219,12 +298,12 @@ onMounted(async () => {
         <div class="col-2">
           <datepicker
             menu-class-name="modalfix"
-            v-model="planData.year"
+            v-model="year"
             :locale="'th'"
             autoApply
             year-picker
             :enableTimePicker="false"
-            @update:modelValue="planData.year"
+            @update:modelValue="fetchRoundOption"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -237,9 +316,8 @@ onMounted(async () => {
                 outlined
                 class="inputgreen"
                 hide-bottom-space
-                :model-value="!!planData.year ? planData.year + 543 : null"
+                :model-value="!!year ? year + 543 : null"
                 :label="`${'ปีงบประมาณ'}`"
-                @update:modelValue="planData.year = null"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -255,9 +333,11 @@ onMounted(async () => {
         </div>
         <div class="col-2">
           <q-select
+            ref="inputRef"
+            :readonly="roundOp.length === 0"
             dense
             outlined
-            v-model="planData.round"
+            v-model="planData.kpiPeriodId"
             :options="roundOp"
             label="รอบการประเมิน"
             hide-bottom-space
@@ -483,7 +563,7 @@ onMounted(async () => {
                 style="height: 350px; overflow: scroll"
                 dense
                 :nodes="nodeAgency"
-                node-key="orgTreeId"
+                node-key="orgTreeName"
                 label-key="labelName"
                 selected-color="primary"
                 :filter="filterAgency"
@@ -593,4 +673,12 @@ onMounted(async () => {
   </q-form>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>