รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => ผูก 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 columns = defineModel<QTableProps["columns"]>("columns", {});
-const rows = defineModel<any[]>("rows", {});
-const formQuery = defineModel<any>("formQuery", {});
-const total = defineModel<number>("total", {});
-const maxPage = defineModel<number>("maxPage", {});
+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 },

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 columns = defineModel<QTableProps["columns"]>("columns", {});
-const rows = defineModel<any[]>("rows", {});
-const formQuery = defineModel<any>("formQuery", {});
-const total = defineModel<number>("total", {});
-const maxPage = defineModel<number>("maxPage", {});
+const store = useKpiDataStore();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  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() {
-  console.log(selected.value);
+function onClickApprove(type: string = "") {
+  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>