updated

src/modules/14_KPI/components/results/tableResults.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,6 +9,7 @@ import config from "@/app.config";
  */
 import type { QTableProps } from "quasar";
 import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 /**
  * importStore
@@ -29,6 +30,7 @@ const {
   date2Thai,
 } = useCounterMixin();
 const { convertResults, convertStatus } = useKpiDataStore();
+const store = useKpiDataStore();
 
 /**
  * props
@@ -105,6 +107,51 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงาน/ส่วนราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "root",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "root",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
@@ -112,6 +159,11 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "evaluationStatus",
   "evaluationResults",
+  "organization",
+  "position",
+  "posTypeName",
+  "posLevelName",
+  "root",
 ]);
 const pagination = ref({
   page: page.value,
@@ -149,6 +201,49 @@ function onAnnounce() {
   );
 }
 
+const year = ref<number | null>(new Date().getFullYear());
+const roundOp = ref<DataOption[]>([]);
+function fetchRoundOption() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      if (res.data.result.data.length > 0) {
+        const list = await data.map((e: any) => ({
+          id: e.id,
+          name:
+            e.durationKPI === "OCT"
+              ? "รอบที่ 2 ตุลาคม"
+              : e.durationKPI === "APR"
+              ? "รอบที่ 1 เมษายน"
+              : "",
+        }));
+
+        roundOp.value = list;
+        store.formQuery.round = list[0].id;
+        porps.fetchData();
+      } else {
+        roundOp.value = [];
+        store.formQuery.round = "";
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function changRound() {
+  store.formQuery.page = 1;
+  porps.fetchData();
+}
+
 /**
  * ค้นหาข้อมูล
  */
@@ -157,6 +252,12 @@ function onSearchData() {
   porps.fetchData();
 }
 
+function clearYear() {
+  year.value = null;
+  store.formQuery.round = "";
+  roundOp.value = [];
+  porps.fetchData();
+}
 /**
  * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
  */
@@ -164,11 +265,81 @@ watch(pagination, () => {
   page.value = 1;
   pageSize.value = pagination.value.rowsPerPage;
 });
+
+onMounted(() => {
+  fetchRoundOption();
+});
 </script>
 
 <template>
   <q-card-section>
     <div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
+      <div class="row q-gutter-sm">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="year"
+          style="width: 150px"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          @update:model-value="fetchRoundOption()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              :model-value="!!year ? year + 543 : null"
+              :label="`${'ปีงบประมาณ'}`"
+              clearable
+              @clear="clearYear"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-select
+          v-model="store.formQuery.round"
+          outlined
+          label="รอบการประเมิน"
+          dense
+          option-label="name"
+          option-value="id"
+          :options="roundOp"
+          style="min-width: 150px"
+          emit-value
+          map-options
+          @update:model-value="changRound"
+        />
+
+        <!-- <q-select
+              v-model="status"
+              outlined
+              label="สถานะการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="store.statusOptions"
+              style="min-width: 180px"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            /> -->
+      </div>
+
       <q-space />
 
       <q-input