Merge branch 'develop' into devTee

# Conflicts:
#	src/modules/14_KPI/interface/request/Main.ts

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

@@ -17,42 +17,28 @@ const { showLoader, hideLoader, dialogRemove, success, messageError } =
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "indicatorNo",
-    align: "left",
-    label: "ลำดับตัวชี้วัด ",
-    sortable: true,
-    field: "indicatorNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "indicatorPass",
+    name: "including",
     align: "left",
     label: "รหัสตัวชี้วัด",
     sortable: true,
-    field: "indicatorPass",
+    field: "including",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "indicatorName",
+    name: "includingName",
     align: "left",
     label: "ชื่อตัวชี้วัด",
     sortable: true,
-    field: "indicatorName",
+    field: "includingName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 const node = ref<any>([]);
 const expanded = ref<any>([]);
-const filter = ref<string>("");
 const filterMain = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "indicatorNo",
-  "indicatorPass",
-  "indicatorName",
-]);
+const visibleColumns = ref<string[]>(["including", "includingName"]);
 
 const orgOp = ref<any[]>([
   { id: "1", name: "กลุ่มงานช่วยนักบริหาร" },
@@ -60,43 +46,46 @@ const orgOp = ref<any[]>([
 ]);
 
 const roundOp = ref<any[]>([
-  { id: "1", name: "รอบเมษายน" },
-  { id: "2", name: "รอบตุลาคม" },
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
   org: "1",
-  round: "1",
+  round: "",
   keyword: "",
 });
+const totalList = ref<number>(1);
 
 const nodeData = reactive<any>({
-  node: null,
+  page: 1,
+  pageSize: 10,
+  round: "",
   nodeId: null,
+  node: null,
+  keyword: "",
 });
 
 function fetchList() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      indicatorNo: "1",
-      indicatorPass: "1กก",
-      indicatorName: "ตัวชี้วัด 1",
-    },
-    {
-      id: "2",
-      indicatorNo: "2",
-      indicatorPass: "2กก",
-      indicatorName: "ตัวชี้วัด 2",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.kpiPlan +
+        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&round=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / nodeData.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -112,6 +101,22 @@ function onClickDelete(id: number) {
   });
 }
 
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.kpiPlan)
+    .then(async (res) => {
+      const data = res.data.result.data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchActive() {
   showLoader();
   http
@@ -150,11 +155,34 @@ function updateSelectedTreeMain(data: any) {
     nodeData.node = data.orgLevel;
     nodeData.nodeId = data.orgTreeId;
   }
+  fetchListProjectNew();
+}
+
+function fetchListProjectNew() {
+  nodeData.page = 1;
+  fetchList();
+}
+
+async function deleteData(idData: string) {
+  dialogRemove($q, () =>
+    http
+      .delete(config.API.kpiPlanById(idData))
+      .then(() => {
+        fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      })
+  );
 }
 
 onMounted(() => {
-  fetchList();
   fetchActive();
+  fetchData();
 });
 </script>
 
@@ -239,7 +267,7 @@ onMounted(() => {
             <q-select
               dense
               outlined
-              v-model="formFilter.round"
+              v-model="nodeData.round"
               :options="roundOp"
               label="รอบการประเมิน"
               option-label="name"
@@ -264,19 +292,19 @@ onMounted(() => {
             <q-input
               standout
               dense
-              v-model="formFilter.keyword"
+              v-model="nodeData.keyword"
               ref="filterRef"
               outlined
               debounce="300"
               placeholder="ค้นหา"
             >
               <template v-slot:append>
-                <q-icon v-if="formFilter.keyword == ''" name="search" />
+                <q-icon v-if="nodeData.keyword == ''" name="search" />
                 <q-icon
-                  v-if="formFilter.keyword !== ''"
+                  v-if="nodeData.keyword !== ''"
                   name="clear"
                   class="cursor-pointer"
-                  @click="formFilter.keyword = ''"
+                  @click="nodeData.keyword = ''"
                 />
               </template>
             </q-input>
@@ -305,6 +333,7 @@ onMounted(() => {
             :columns="columns"
             :rows="rows"
             row-key="subject"
+            :filter="nodeData.keyword"
             flat
             bordered
             dense
@@ -337,7 +366,7 @@ onMounted(() => {
                     round
                     icon="delete"
                     color="red"
-                    @click.stop.pervent="onClickDelete(props.rowIndex)"
+                    @click.stop.pervent="deleteData(props.row.id)"
                   >
                     <q-tooltip>ลบข้อมูล </q-tooltip>
                   </q-btn>