API รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ

2024-04-05 17:54:56 +07:00 · 2024-04-05 17:54:56 +07:00 · 5c3c18dd5c
commit 5c3c18dd5c
parent 872d2db544
5 changed files with 146 additions and 71 deletions
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@ -1,6 +1,10 @@
 import env from "../index";
-const KPI = `${env.API_URI}/KPI`;
+const KPI = `${env.API_URI}/kpi`;
+const kpiPeriod = `${env.API_URI}/kpi/period`;

 export default {
  KPI,
+  /** รอบการประเมินผล*/
+  kpiPeriod: `${kpiPeriod}`,
+  kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
 };
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@ -19,4 +19,5 @@ export default {
  /** ทุนการศึกษา/ฝึกอบรม*/
  devScholarship,
  devScholarshipByid: (id: string) => `${devScholarship}/${id}`,
+ 
 };
--- a/src/modules/14_KPI/views/round.vue
+++ b/src/modules/14_KPI/views/round.vue
@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";

 import DialogHeader from "@/components/DialogHeader.vue";

@ -12,51 +14,53 @@ import { useCounterMixin } from "@/stores/mixin";

 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, date2Thai, dialogConfirm, dialogRemove } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogConfirm,
+  dialogRemove,
+} = useCounterMixin();

 /** หัวตาราง */
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
  {
-    name: "round",
+    name: "durationKPI",
    align: "left",
    label: "รอบการประเมิน ",
    sortable: true,
-    field: "round",
+    field: "durationKPI",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format: (val) => connvertName(val),
  },
  {
-    name: "dateStart",
+    name: "startDate",
    align: "left",
    label: "วันเริ่มต้น",
    sortable: true,
-    field: "dateStart",
+    field: "startDate",
    format: (val) => date2Thai(val),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
-    name: "dateEnd",
+    name: "endDate",
    align: "left",
    label: "วันสิ้นสุด",
    sortable: true,
-    field: "dateEnd",
+    field: "endDate",
    format: (val) => date2Thai(val),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
 ]);
-const visibleColumns = ref<string[]>(["round", "dateStart", "dateEnd"]);
+const visibleColumns = ref<string[]>(["durationKPI", "startDate", "endDate"]);

-const options = ref<any>([
-  "การศึกษาในประเทศ",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
-]);
 const itemMenu = ref<any>([
  {
    label: "เปิดรอบ",
@ -79,46 +83,45 @@ const itemMenu = ref<any>([
 ]);

 const roundOp = ref<any>([
-  { id: "1", label: "รอบเมษายน" },
+  { id: "APR", name: "รอบเมษายน" },
  {
-    id: "2",
-    label: "รอบตุลาคม",
+    id: "OCT",
+    name: "รอบตุลาคม",
  },
 ]);

-const formFilter = reactive({
+const formQuery = reactive({
  page: 1,
  pageSize: 10,
  year: new Date().getFullYear(),
  keyword: "",
 });
+const totalList = ref<number>(1);

 const formData = reactive({
-  round: "",
-  dateStart: null,
-  dateEnd: null,
+  durationKPI: "",
+  startDate: null,
+  endDate: null,
 });

 function fetchList() {
  showLoader();
-  const data = [
-    {
-      id: "1",
-      round: "รอบเมษายน",
-      dateStart: new Date("2024-4-12"),
-      dateEnd: new Date("2024-4-12"),
-    },
-    {
-      id: "2",
-      round: "รอบตุลาคม",
-      dateStart: new Date("2024-4-12"),
-      dateEnd: new Date("2024-4-12"),
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }

 const modalDialog = ref<boolean>(false);
@ -134,28 +137,41 @@ function closeDialog() {
 }

 function changeDateStart() {
-  if (formData?.dateStart !== null && formData?.dateEnd !== null) {
-    const startDate = new Date(formData.dateStart);
-    const endDate = new Date(formData?.dateEnd);
+  if (formData?.startDate !== null && formData?.endDate !== null) {
+    const startDate = new Date(formData.startDate);
+    const endDate = new Date(formData?.endDate);
    if (startDate > endDate) {
-      formData.dateEnd = null;
+      formData.endDate = null;
    }
  }
 }

 function clearFormData() {
-  formData.round = "";
-  formData.dateStart = null;
-  formData.dateEnd = null;
+  formData.durationKPI = "";
+  formData.startDate = null;
+  formData.endDate = null;
 }

 function onSubmit() {
-  dialogConfirm($q, () => {
-    closeDialog();
+  dialogConfirm($q, async () => {
+    try {
+      const url = isStatusEdit.value
+        ? config.API.kpiPeriodById("12")
+        : config.API.kpiPeriod;
+      const method = isStatusEdit.value ? "put" : "post";
+      await http[method](url, formData);
+      fetchList();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (e) {
+      messageError($q, e);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
  });
 }

-function onClickAction(action: string) {
+function onClickAction(action: string, id: string) {
  switch (action) {
    case "open":
      onOpenRounde();
@ -164,7 +180,7 @@ function onClickAction(action: string) {
      onCloseRounde();
      break;
    case "delete":
-      onDeleteRound();
+      onDeleteRound(id);
      break;
    default:
      break;
@ -187,10 +203,45 @@ function onCloseRounde() {
    "ต้องการยืนยันการปิดรอบนี้หรือไม่ ?"
  );
 }
-function onDeleteRound() {
-  dialogRemove($q, () => {});
+function onDeleteRound(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiPeriodById(id))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchList();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }

+function connvertName(val: string) {
+  const findData = roundOp.value.find((e: any) => e.id === val);
+  return findData.name;
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(() => {
  fetchList();
 });
@ -205,11 +256,12 @@ onMounted(() => {
      <div class="row q-gutter-sm">
        <datepicker
          menu-class-name="modalfix"
-          v-model="formFilter.year"
+          v-model="formQuery.year"
          :locale="'th'"
          autoApply
          year-picker
          :enableTimePicker="false"
+          @update:model-value="(formQuery.page = 1), fetchList()"
        >
          <template #year="{ year }">{{ year + 543 }}</template>
          <template #year-overlay-value="{ value }">{{
@ -220,7 +272,7 @@ onMounted(() => {
              dense
              lazy-rules
              outlined
-              :model-value="Number(formFilter.year) + 543"
+              :model-value="Number(formQuery.year) + 543"
              :label="`${'ปีงบประมาณ'}`"
            >
              <template v-slot:prepend>
@ -272,19 +324,22 @@ onMounted(() => {
        <q-input
          standout
          dense
-          v-model="formFilter.keyword"
+          v-model="formQuery.keyword"
          ref="filterRef"
          outlined
          debounce="300"
          placeholder="ค้นหา"
+          @keyup.enter="(formQuery.page = 1), fetchList()"
        >
          <template v-slot:append>
-            <q-icon v-if="formFilter.keyword == ''" name="search" />
+            <q-icon v-if="formQuery.keyword == ''" name="search" />
            <q-icon
-              v-if="formFilter.keyword !== ''"
+              v-if="formQuery.keyword !== ''"
              name="clear"
              class="cursor-pointer"
-              @click="formFilter.keyword = ''"
+              @click="
+                (formQuery.keyword = ''), (formQuery.page = 1), fetchList()
+              "
            />
          </template>
        </q-input>
@ -318,6 +373,8 @@ onMounted(() => {
        dense
        class="custom-header-table"
        :visible-columns="visibleColumns"
+        :rows-per-page-options="[2, 10, 25, 50, 100]"
+        @update:pagination="updatePagination"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
@ -342,7 +399,7 @@ onMounted(() => {
                      clickable
                      v-close-popup
                      v-for="items in itemMenu"
-                      @click="onClickAction(items.value)"
+                      @click="onClickAction(items.value, props.row.id)"
                    >
                      <q-item-section avatar>
                        <q-icon :color="items.color" :name="items.icon" />
@ -356,6 +413,19 @@ onMounted(() => {
            </q-td>
          </q-tr>
        </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formQuery.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(totalList)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="fetchList"
+          ></q-pagination>
+        </template>
      </d-table>
    </div>
  </q-card>
@ -377,9 +447,9 @@ onMounted(() => {
                outlined
                hide-bottom-space
                lazy-rules
-                v-model="formData.round"
+                v-model="formData.durationKPI"
                :options="roundOp"
-                option-label="label"
+                option-label="name"
                option-value="id"
                emit-value
                map-options
@ -395,7 +465,7 @@ onMounted(() => {
            <div class="col-12">
              <datepicker
                menu-class-name="modalfix"
-                v-model="formData.dateStart"
+                v-model="formData.startDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
@ -411,7 +481,7 @@ onMounted(() => {
                    dense
                    outlined
                    :model-value="
-                      formData.dateStart ? date2Thai(formData.dateStart) : null
+                      formData.startDate ? date2Thai(formData.startDate) : null
                    "
                    :label="`${'วันเริ่มต้น'}`"
                    hide-bottom-space
@ -436,12 +506,12 @@ onMounted(() => {
            <div class="col-12">
              <datepicker
                menu-class-name="modalfix"
-                v-model="formData.dateEnd"
+                v-model="formData.endDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
-                :min-date="formData.dateStart"
+                :min-date="formData.startDate"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
@ -452,7 +522,7 @@ onMounted(() => {
                    dense
                    outlined
                    :model-value="
-                      formData.dateEnd ? date2Thai(formData.dateEnd) : null
+                      formData.endDate ? date2Thai(formData.endDate) : null
                    "
                    :label="`${'วันสิ้นสุด'}`"
                    class="inputgreen"
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@ -227,7 +227,7 @@ function fetchDataDetail(id: string) {
 }

 function onSubmit() {
-  console.log(formBody);
+ 
  dialogConfirm($q, async () => {
    showLoader();
    formBody.budgetApprove =
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@ -332,7 +332,7 @@ onMounted(() => {
        dense
        class="custom-header-table"
        :visible-columns="visibleColumns"
-        :rows-per-page-options="[2, 10, 25, 50, 100]"
+        :rows-per-page-options="[10, 25, 50, 100]"
        @update:pagination="updatePagination"
      >
        <template v-slot:header="props">