รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => ผูก API

src/modules/08_KPI/components/Evaluator/01_TabAll.vue

@@ -3,13 +3,20 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 import type { QTableProps } from "quasar";
+import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
+import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
+
 const router = useRouter();
-const visibleColumns = defineModel<string[]>("visibleColumns", {});
+const visibleColumns = defineModel<string[]>("visibleColumns", {
-const columns = defineModel<QTableProps["columns"]>("columns", {});
+  required: true,
-const rows = defineModel<any[]>("rows", {});
+});
-const formQuery = defineModel<any>("formQuery", {});
+const columns = defineModel<QTableProps["columns"]>("columns", {
-const total = defineModel<number>("total", {});
+  required: true,
-const maxPage = defineModel<number>("maxPage", {});
+});
+const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
+const formQuery = defineModel<FormQuery>("formQuery", { required: true });
+const total = defineModel<number>("total", { required: true });
+const maxPage = defineModel<number>("maxPage", { required: true });
 
 const props = defineProps({
   updatePagination: { type: Function },

src/modules/08_KPI/components/Evaluator/02_TabOther.vue

@@ -1,23 +1,45 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import type { QTableProps } from "quasar";
+import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
+import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+
+const $q = useQuasar();
 const router = useRouter();
-const visibleColumns = defineModel<string[]>("visibleColumns", {});
+const store = useKpiDataStore();
-const columns = defineModel<QTableProps["columns"]>("columns", {});
+const {
-const rows = defineModel<any[]>("rows", {});
+  showLoader,
-const formQuery = defineModel<any>("formQuery", {});
+  hideLoader,
-const total = defineModel<number>("total", {});
+  messageError,
-const maxPage = defineModel<number>("maxPage", {});
+  dialogConfirm,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+const visibleColumns = defineModel<string[]>("visibleColumns", {
+  required: true,
+});
+const columns = defineModel<QTableProps["columns"]>("columns", {
+  required: true,
+});
+const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
+const formQuery = defineModel<FormQuery>("formQuery", { required: true });
+const total = defineModel<number>("total", { required: true });
+const maxPage = defineModel<number>("maxPage", { required: true });
 
 const props = defineProps({
   updatePagination: { type: Function },
   fetchList: { type: Function },
 });
 
-const selected = ref([]);
-
 function redirectViewDetail(id: string) {
   router.push(`/KPI-evaluator/${id}`);
 }
@@ -29,13 +51,60 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-function test() {
+function onClickApprove(type: string = "") {
-  console.log(selected.value);
+  if (store.selected.length !== 0) {
+    const userIds = store.selected.map((user: ResEvaluatorAssessor) => user.id);
+    dialogConfirm(
+      $q,
+      () => {
+        showLoader();
+        const url =
+          store.tabMainevaluator === "2" || store.tabMainevaluator === "4"
+            ? "change-status"
+            : store.tabMainevaluator === "3"
+            ? "req-edit"
+            : "result-status";
+        const body = {
+          status:
+            store.tabMainevaluator === "2"
+              ? "APPROVE"
+              : store.tabMainevaluator === "3"
+              ? "DONE"
+              : store.tabMainevaluator === "4"
+              ? "EVALUATING"
+              : store.tabMainevaluator === "5"
+              ? type
+              : undefined,
+          id: userIds,
+        };
+        http
+          .post(config.API.kpiEvaluation + `/admin/${url}`, body)
+          .then(() => {
+            store.selected = [];
+            props.fetchList?.();
+            success(
+              $q,
+              store.tabMainevaluator === "5"
+                ? "ยืนยันการประเมินสำเร็จ"
+                : "อนุมัติสำเร็จ"
+            );
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      store.tabMainevaluator === "5" ? "ยืนยันการประเมิน" : "ยืนยันการอนุมัติ"
+    );
+  } else {
+    dialogMessageNotify($q, "เลือกอย่างน้อย 1 รายการ");
+  }
 }
 </script>
 
 <template>
-  <!-- <q-btn @click="test" /> -->
   <div class="col-12">
     <d-table
       ref="table"
@@ -51,7 +120,7 @@ function test() {
       v-model:pagination="pagination"
       @update:pagination="props.updatePagination"
       selection="multiple"
-      v-model:selected="selected"
+      v-model:selected="store.selected"
     >
       <template v-slot:header-selection="scope">
         <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
@@ -99,6 +168,20 @@ function test() {
       </template>
     </d-table>
   </div>
+
+  <div class="row justify-end q-mt-md q-gutter-sm">
+    <q-btn
+      v-if="store.tabMainevaluator === '5'"
+      color="orange"
+      label="ไม่ผ่านการประเมิน"
+      @click="onClickApprove('NOTPASSED')"
+    />
+    <q-btn
+      :color="store.tabMainevaluator === '5' ? 'green' : 'public'"
+      :label="store.tabMainevaluator === '5' ? 'ผ่านการประเมิน' : 'อนุมัติ'"
+      @click="onClickApprove('PASSED')"
+    />
+  </div>
 </template>
 
 <style scoped></style>

src/modules/08_KPI/interface/index/Main.ts

@@ -1,8 +1,12 @@
 interface DataOptions {
-    id:string
+  id: string;
-    name:string
+  name: string;
+}
+interface Pagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
 }
 
-export type {
+export type { DataOptions, Pagination };
-    DataOptions
-}

src/modules/08_KPI/interface/request/index.ts

@@ -53,6 +53,13 @@ interface FormComment {
   reason: string;
 }
 
+interface FormQuery {
+  page: number;
+  pageSize: number;
+  round: string;
+  keyword: string;
+}
+
 export type {
   FormProfile,
   FormDataAssigned,
@@ -60,4 +67,5 @@ export type {
   ListCriteria,
   ListCapacity,
   FormComment,
+  FormQuery,
 };

src/modules/08_KPI/interface/response/index.ts

@@ -12,4 +12,33 @@ interface ResEvaluator {
   type: string;
 }
 
-export type { ResEvaluator };
+interface ResRound {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  durationKPI: string;
+  endDate: string;
+  id: string;
+  isActive: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  startDate: string;
+  year: number;
+}
+interface ResEvaluatorAssessor {
+  commanderHighId: string | null;
+  commanderId: string | null;
+  createdAt: string;
+  evaluationResults: string;
+  evaluationStatus: string;
+  evaluatorId: string;
+  firstname: string;
+  id: string;
+  kpiPeriodId: string;
+  lastname: string;
+  prefix: string;
+  profileId: string;
+}
+
+export type { ResEvaluator, ResRound, ResEvaluatorAssessor };

src/modules/08_KPI/store.ts

@@ -1,16 +1,19 @@
 import { defineStore } from "pinia";
 import { ref, reactive } from "vue";
 import type { DataOptions } from "./interface/index/Main";
+import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
   const tabMainevaluator = ref<string>("1");
   const yearRound = ref<number>(new Date().getFullYear());
-  const formQuery = reactive({
+  const formQuery = reactive<FormQuery>({
     page: 1,
     pageSize: 10,
     round: "",
     keyword: "",
   });
+  const selected = ref([]);
+
   const tabMain = ref<string>("1");
   const dataProfile = ref<any>({
     profileId: null,
@@ -339,5 +342,6 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     tabMainevaluator,
     formQuery,
     yearRound,
+    selected,
   };
 });

src/modules/08_KPI/views/mainEvaluator.vue

@@ -5,8 +5,15 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import type { QTableProps } from "quasar";
+import type {
+  DataOptions,
+  Pagination,
+} from "@/modules/08_KPI/interface/index/Main";
+import type {
+  ResRound,
+  ResEvaluatorAssessor,
+} from "@/modules/08_KPI/interface/response/index";
 
 import TabAll from "@/modules/08_KPI/components/Evaluator/01_TabAll.vue";
 import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
@@ -19,9 +26,7 @@ const router = useRouter();
 const store = useKpiDataStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-const dataListMain = ref<any>();
+const dataListMain = ref<ResEvaluatorAssessor[]>([]);
-
-const year = ref<number>(new Date().getFullYear());
 
 const roundOp = ref<DataOptions[]>([]);
 
@@ -93,7 +98,7 @@ function fetchRoundOption(type: boolean = false) {
     )
     .then((res) => {
       const data = res.data.result.data;
-      const list = data.map((e: any) => ({
+      const list = data.map((e: ResRound) => ({
         id: e.id,
         name:
           e.durationKPI === "OCT"
@@ -118,36 +123,21 @@ function fetchRoundOption(type: boolean = false) {
 
 function fetchList() {
   showLoader();
-  const formTab1 = {
+  const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
     kpiPeriodId: store.formQuery.round,
     keyword: store.formQuery.keyword,
+    status:
+      store.tabMainevaluator === "2"
+        ? "NEW"
+        : store.tabMainevaluator === "4"
+        ? "APPROVE"
+        : store.tabMainevaluator === "5"
+        ? "EVALUATING"
+        : undefined,
+    reqedit: store.tabMainevaluator === "3" ? "NEW" : undefined,
   };
-  const formTab2 = {
-    page: store.formQuery.page,
-    pageSize: store.formQuery.pageSize,
-    kpiPeriodId: store.formQuery.round,
-    keyword: store.formQuery.keyword,
-    status: "NEW_EVALUATOR",
-  };
-
-  const formTab3 = {
-    page: store.formQuery.page,
-    pageSize: store.formQuery.pageSize,
-    kpiPeriodId: store.formQuery.round,
-    keyword: store.formQuery.keyword,
-    reqedit: "EVALUATOR",
-  };
-
-  const body =
-    store.tabMainevaluator === "1"
-      ? formTab1
-      : store.tabMainevaluator === "2"
-      ? formTab2
-      : store.tabMainevaluator === "3"
-      ? formTab3
-      : "";
 
   http
     .post(config.API.kpiEvaluation + `/admin`, body)
@@ -174,7 +164,7 @@ function changRound() {
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   store.formQuery.page = 1;
   store.formQuery.pageSize = newPagination.rowsPerPage;
 }
@@ -189,6 +179,7 @@ watch(
 function onChangTab() {
   store.formQuery.page = 1;
   fetchList();
+  store.selected = [];
 }
 
 onMounted(async () => {
@@ -316,7 +307,7 @@ onMounted(async () => {
                 <q-tab name="1" label="รายการทั้งหมด" @click="onChangTab" />
                 <q-tab
                   name="2"
-                  label="รออนุมัติการจัดทำข้อตกลง"
+                  label="อนุมัติเพื่อเริ่มประเมิน"
                   @click="onChangTab"
                 />
                 <q-tab
@@ -324,6 +315,16 @@ onMounted(async () => {
                   label="รออนุมัติแก้ไขข้อตกลง"
                   @click="onChangTab"
                 />
+                <q-tab
+                  name="4"
+                  label="อนุมัติเพื่อเริ่มประเมิน"
+                  @click="onChangTab"
+                />
+                <q-tab
+                  name="5"
+                  label="ตรวจสอบผลการประเมิน"
+                  @click="onChangTab"
+                />
               </q-tabs>
               <q-separator />
 
@@ -366,6 +367,32 @@ onMounted(async () => {
                     :fetchList="fetchList"
                   />
                 </q-tab-panel>
+
+                <q-tab-panel name="4">
+                  <TabOther
+                    :columns="columns"
+                    :visibleColumns="visibleColumns"
+                    :rows="dataListMain"
+                    :formQuery="store.formQuery"
+                    :total="totalList"
+                    :maxPage="maxPage"
+                    :updatePagination="updatePagination"
+                    :fetchList="fetchList"
+                  />
+                </q-tab-panel>
+
+                <q-tab-panel name="5">
+                  <TabOther
+                    :columns="columns"
+                    :visibleColumns="visibleColumns"
+                    :rows="dataListMain"
+                    :formQuery="store.formQuery"
+                    :total="totalList"
+                    :maxPage="maxPage"
+                    :updatePagination="updatePagination"
+                    :fetchList="fetchList"
+                  />
+                </q-tab-panel>
               </q-tab-panels>
             </q-card>
           </div>