รายการตัวชี้วัดตามตำแหน่ง api

src/modules/14_KPI/components/competency/03ListLinkGroup.vue

@@ -8,12 +8,13 @@ import { useRouter } from "vue-router";
 import Header from "@/components/DialogHeader.vue";
 
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type { ListGroup } from "@/modules/14_KPI/interface/request/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const modal = ref<boolean>(false);
 const router = useRouter();
-const rows = ref<any>();
+const rows = ref<any>([]);
 const editStatus = ref<boolean>(false);
 const groupName = ref<string>("");
 const position = ref<any>(null);
@@ -207,9 +208,51 @@ async function deleteData(id: string) {
   //   });
 }
 
+/** ดึงข้อมูล */
+async function getListGroup() {
+  showLoader();
+  await http
+    .get(config.API.kpiGroup)
+    .then(async (res) => {
+      const data = res.data.result.data;
+      groupNameOp.value = data.map((item: ListGroup) => ({
+        id: item.id,
+        name: item.nameGroupKPI,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล */
+async function getCompetency() {
+  showLoader();
+  await http
+    .get(config.API.kpiCapacity + `?type=GROUP`)
+    .then(async (res) => {
+      const data = res.data.result.data;
+      competencyOp.value = data.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
 function onAdd() {
   getOptions();
+  getListGroup();
+  getCompetency();
   modal.value = true;
 }
 
@@ -416,6 +459,7 @@ onMounted(async () => {
                 label="กลุ่มงาน"
                 outlined
                 emit-value
+                class="inputgreen"
                 map-options
                 option-label="name"
                 option-value="id"

src/modules/14_KPI/interface/request/Main.ts

@@ -48,4 +48,8 @@ interface NewPagination {
   sortBy: string;
 }
 
-export type { FormQueryRound, FormRound, FormCompetency, FormDataRole,NewPagination };
+interface ListGroup{
+  id:string
+  nameGroupKPI:string
+}
+export type { FormQueryRound, FormRound, FormCompetency, FormDataRole,NewPagination,ListGroup };

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

@@ -8,11 +8,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
 
+const positionOp = ref<DataOption[]>([]);
+const positionMainOp = ref<DataOption[]>([]);
+
 const maxPage = ref<number>(1);
 const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
 
@@ -49,21 +54,11 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["no", "including", "includingName"]);
 
-const positionOp = ref<any[]>([
-  { id: "1", name: "นักจัดการทั่วไป 1" },
-  { id: "2", name: "นักจัดการทั่วไป 2" },
-]);
-
-const roundOp = ref<any[]>([
-  { id: "1", name: "รอบเมษายน" },
-  { id: "2", name: "รอบตุลาคม" },
-]);
-
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
-  position: "1",
-  round: "1",
+  position: "",
+  round: "APR",
   keyword: "",
 });
 const pagination = ref({
@@ -71,12 +66,21 @@ const pagination = ref({
   rowsPerPage: formFilter.pageSize,
 });
 
+/** Option  รอบการประเมิน*/
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  {
+    id: "OCT",
+    name: "รอบตุลาคม",
+  },
+]);
+
 function fetchList() {
   showLoader();
   http
     .get(
       config.API.kpiRoleMainList +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}`
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&round=${formFilter.round}&position=${formFilter.position}`
     )
     .then((res) => {
       console.log(res);
@@ -98,13 +102,12 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
 function onClickDelete(id: number) {
   dialogRemove($q, () => {
     http
-    .delete(config.API.kpiRoleMainList+`/${id}`)
-    .then((res)=>{
-      success($q, "ลบข้อมูลสำเร็จ");
-      fetchList()
-    }).finally(()=>{
-      
-    })
+      .delete(config.API.kpiRoleMainList + `/${id}`)
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchList();
+      })
+      .finally(() => {});
   });
 }
 
@@ -125,8 +128,45 @@ watch(
   }
 );
 
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: any, update: Function) {
+  update(() => {
+    positionOp.value = positionMainOp.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/** ดึงข้อมูลตำแหน่ง */
+function getOptions() {
+  http.get(config.API.orgSalaryPosition).then((res) => {
+    const dataOp = res.data.result;
+    const uniqueNames = new Set();
+    const filteredData = dataOp
+      .filter((item: any) => {
+        if (!uniqueNames.has(item.positionName)) {
+          uniqueNames.add(item.positionName);
+          return true;
+        }
+        return false;
+      })
+      .map((item: any) => ({
+        id: item.positionName,
+        name: item.positionName,
+      }));
+
+    positionMainOp.value = filteredData;
+  });
+}
+
 onMounted(() => {
   fetchList();
+  getOptions();
 });
 </script>
 
@@ -138,6 +178,36 @@ onMounted(() => {
     <q-toolbar class="q-pa-none">
       <div class="row q-gutter-sm">
         <q-select
+          dense
+          v-model="formFilter.position"
+          label="ตำแหน่ง"
+          outlined
+          emit-value
+          map-options
+          hide-bottom-space
+          option-label="name"
+          option-value="id"
+          class="inputgreen"
+          :options="positionOp"
+          use-input
+          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+          @update:model-value="fetchList"
+          >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+          <template v-if="formFilter.position" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="formFilter.position = '';fetchList()"
+              class="cursor-pointer"
+            />
+          </template>
+        </q-select>
+
+        <!-- <q-select
           dense
           outlined
           v-model="formFilter.position"
@@ -147,17 +217,18 @@ onMounted(() => {
           option-value="id"
           emit-value
           map-options
-        />
+        /> -->
         <q-select
           dense
           outlined
           v-model="formFilter.round"
-          :options="positionOp"
+          :options="roundOp"
           label="รอบการประเมิน"
           option-label="name"
           option-value="id"
           emit-value
           map-options
+          @update:model-value="fetchList"
         />
       </div>
       <q-toolbar-title>
@@ -250,15 +321,12 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="onClickAddOrView(true, props.row.id)"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name === 'no'">
                 {{
-                  (formFilter.page - 1) * Number(pagination.rowsPerPage) + props.rowIndex + 1
+                  (formFilter.page - 1) * Number(pagination.rowsPerPage) +
+                  props.rowIndex +
+                  1
                 }}
               </div>
 
@@ -267,6 +335,15 @@ onMounted(() => {
               </div>
             </q-td>
             <q-td>
+              <q-btn
+                flat
+                round
+                icon="edit"
+                color="edit"
+                @click.stop.pervent="onClickAddOrView(true, props.row.id)"
+              >
+                <q-tooltip>แก้ไข </q-tooltip>
+              </q-btn>
               <q-btn
                 flat
                 round