API รับทุนการศึกษา/ฝึกอบรม

src/api/15_development/api.development.ts

@@ -1,17 +1,22 @@
 import env from "../index";
 const development = `${env.API_URI}/development`;
-const developmentOrg = `${env.API_URI}/org`
+const developmentOrg = `${env.API_URI}/org`;
+const devScholarship = `${env.API_URI}/development/scholarship`;
 export default {
   development,
   /** history */
-  developmentHistoryList: (type:string) => `${development}/history/${type}/`,
-  developmentHistoryAdd: (type:string) => `${development}/history/${type}`,
+  developmentHistoryList: (type: string) => `${development}/history/${type}/`,
+  developmentHistoryAdd: (type: string) => `${development}/history/${type}`,
   developmentProjectSearch: () => `${development}/main/search`,
 
   /** history employee */
-  developmentProjectSearchEmployee:()=>`${developmentOrg}/profile-employee/`,
-  
+  developmentProjectSearchEmployee: () => `${developmentOrg}/profile-employee/`,
+
   /** รายการโครงการ*/
   developmentMain: `${development}/main`,
   developmentMainById: (id: string) => `${development}/main/${id}`,
+
+  /** ทุนการศึกษา/ฝึกอบรม*/
+  devScholarship,
+  devScholarshipByid: (id: string) => `${devScholarship}/${id}`,
 };

src/modules/15_development/interface/index/Main.ts

@@ -55,6 +55,13 @@ interface DataPerson {
   [key: string]: any;
 }
 
+interface ItemsDownload {
+  label: string;
+  value: string;
+  icon: string;
+  color: string;
+}
+
 export type {
   DataOption,
   DataOptionCheckBox,
@@ -62,4 +69,5 @@ export type {
   NewPagination,
   FormFilter,
   DataPerson,
+  ItemsDownload
 };

src/modules/15_development/interface/request/Main.ts

@@ -63,7 +63,7 @@ interface FormFollowOther {
 
 interface FormAddHistory {
   id: string;
-  name: string|null;
+  name: string | null;
   prefix: string;
   rank: string;
   firstName: string;
@@ -82,7 +82,7 @@ interface FormAddHistory {
 
 interface FormAddHistoryEmployee {
   id: string;
-  name: string|null;
+  name: string | null;
   prefix: string;
   rank: string;
   firstName: string;

src/modules/15_development/interface/request/Scholarship.ts

@@ -0,0 +1,53 @@
+interface FormsSholarship {
+  rank: string; //ยศ
+  prefix: string; //คำนำหน้าชื่อ
+  firstName: string; //ชื่อ
+  lastName: string; //นามสกุล
+  citizenId: string; //เลขประจำตัวประชาชน
+  position: string; //ตำแหน่ง
+  posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+  posLevelId: string | null; //ไอดีระดับตำแหน่ง
+  posTypeId: string | null; //ไอดีประเภทตำแหน่ง
+  guarantorRank: string; //ยศ(ผู้ค้ำ)
+  guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+  guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+  guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+  guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+  guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+  guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+  posLevelguarantorId: string | null; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorId: string | null; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  scholarshipYear: number | null; //ปีงบประมาณที่ได้รับทุน
+  budgetSource: string; //แหล่งงบประมาณ
+  budgetApprove: number | string | null; //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+  bookNo: string; //เลขที่หนังสืออนุมัติ
+  bookNoDate: Date | null; //ลงวันที่(หนังสือ)
+  bookApproveDate: Date | null; //หนังสืออนุมัติเมื่อวันที่
+  useOfficialTime: boolean; //ใช้เวลาราชการ
+  changeDetail: string; //เปลี่ยนแปลงรายละเอียด
+  scholarshipType: string; //เลือกประเภททุน
+  fundType: string; //ประเภททุน
+  contractNo: string; //เลขที่สัญญา
+  contractDate: Date | null; //ลงวันที่(เลขที่สัญญา)
+  reportBackNo: string; //เลขที่หนังสือรายงานตัวกลับ
+  reportBackNoDate: Date | null; //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+  reportBackDate: Date | null; //รายงานตัวกลับวันที่
+  degreeLevel: string; //ระดับปริญญา
+  course: string; //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+  field: string; //สาขาวิชา/สาขา
+  faculty: string; //คณะ
+  educationalInstitution: string; //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+  startDate: Date | null; //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+  endDate: Date | null; //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+  studyPlace: string; //สถานที่ไปศึกษาดูงาน
+  studyTopic: string; //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+  studyStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงาน
+  studyEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงาน
+  studyCountry: string; //ประเทศที่เดินทางไปศึกษาดูงาน
+  studyAbroadTopic: string; //หัวข้อการไปศึกษาดูงานต่างประเทศ
+  studyAbroadStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+  studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+  totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+}
+
+export type { FormsSholarship };

src/modules/15_development/interface/response/Scholarship.ts

@@ -0,0 +1,67 @@
+interface ListSholarship {
+  citizenId: string;
+  fullName: string;
+  id: string;
+  posExecutive: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+}
+
+interface DataSholarship {
+  rank: string; //ยศ
+  prefix: string; //คำนำหน้าชื่อ
+  firstName: string; //ชื่อ
+  lastName: string; //นามสกุล
+  citizenId: string; //เลขประจำตัวประชาชน
+  position: string; //ตำแหน่ง
+  posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+  posLevelId: string; //ไอดีระดับตำแหน่ง
+  posTypeId: string; //ไอดีประเภทตำแหน่ง
+  posTypeName: string; //ไอดีระดับตำแหน่ง
+  posLevelName: string; //ไอดีประเภทตำแหน่ง
+  guarantorRank: string; //ยศ(ผู้ค้ำ)
+  guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+  guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+  guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+  guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+  guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+  guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+  posLevelguarantorId: string; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorId: string; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorName: string; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posLevelguarantorName: string; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  scholarshipYear: number | null; //ปีงบประมาณที่ได้รับทุน
+  budgetSource: string; //แหล่งงบประมาณ
+  budgetApprove: number | null; //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+  bookNo: string; //เลขที่หนังสืออนุมัติ
+  bookNoDate: Date | null; //ลงวันที่(หนังสือ)
+  bookApproveDate: Date | null; //หนังสืออนุมัติเมื่อวันที่
+  useOfficialTime: boolean; //ใช้เวลาราชการ
+  changeDetail: string; //เปลี่ยนแปลงรายละเอียด
+  scholarshipType: string; //เลือกประเภททุน
+  fundType: string; //ประเภททุน
+  contractNo: string; //เลขที่สัญญา
+  contractDate: Date | null; //ลงวันที่(เลขที่สัญญา)
+  reportBackNo: string; //เลขที่หนังสือรายงานตัวกลับ
+  reportBackNoDate: Date | null; //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+  reportBackDate: Date | null; //รายงานตัวกลับวันที่
+  degreeLevel: string; //ระดับปริญญา
+  course: string; //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+  field: string; //สาขาวิชา/สาขา
+  faculty: string; //คณะ
+  educationalInstitution: string; //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+  startDate: Date | null; //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+  endDate: Date | null; //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+  studyPlace: string; //สถานที่ไปศึกษาดูงาน
+  studyTopic: string; //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+  studyStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงาน
+  studyEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงาน
+  studyCountry: string; //ประเทศที่เดินทางไปศึกษาดูงาน
+  studyAbroadTopic: string; //หัวข้อการไปศึกษาดูงานต่างประเทศ
+  studyAbroadStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+  studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+  totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+}
+
+export type { DataSholarship, ListSholarship };

src/modules/15_development/views/MainPage.vue

@@ -230,7 +230,11 @@ onMounted(() => {
                 v-if="formQuery.keyword !== ''"
                 name="clear"
                 class="cursor-pointer"
-                @click="(formQuery.keyword = ''), fetchListProject()"
+                @click="
+                  (formQuery.keyword = ''),
+                    fetchListProject(),
+                    (formQuery.page = 1)
+                "
               />
             </template>
           </q-input>
@@ -253,19 +257,6 @@ onMounted(() => {
         </div>
       </div>
     </q-toolbar>
-    <!-- <q-toolbar class="q-gutter-x-sm" style="padding: 0px">
-      <div>
-      
-      </div>
-
-      <q-space />
-
-      <div class="row q-gutter-md">
-       
-       
-       
-      </div>
-    </q-toolbar> -->
 
     <div class="col-12">
       <d-table

src/modules/15_development/views/Scholarship.vue

@@ -1,18 +1,26 @@
 <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 type {
+  DataOption,
+  ItemsDownload,
+  NewPagination,
+} from "@/modules/15_development/interface/index/Main";
+import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 /** หัวตาราง */
-const rows = ref<any>([]);
+const rows = ref<ListSholarship[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "citizenId",
@@ -24,11 +32,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -43,49 +51,61 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "type",
+    name: "posType",
     align: "left",
     label: "ประเภทตำแหน่ง",
     sortable: true,
-    field: "type",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevel",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: "level",
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionPath",
+    name: "posExecutive",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
-    field: "positionPath",
+    field: "posExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 const visibleColumns = ref<string[]>([
   "citizenId",
-  "name",
+  "fullName",
   "position",
-  "type",
-  "level",
-  "positionPath",
+  "posType",
+  "posLevel",
+  "posExecutive",
 ]);
 
-const options = ref<any>([
-  "การศึกษาในประเทศ",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+const scholarshipTypeOp = ref<DataOption[]>([
+  {
+    id: "DOMESTICE",
+    name: "การศึกษาในประเทศ",
+  },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
 ]);
-const itemDownload = ref<any>([
+const itemDownload = ref<ItemsDownload[]>([
   {
     label: "ดาวน์โหลด 1",
     value: "",
@@ -106,40 +126,38 @@ const itemDownload = ref<any>([
   },
 ]);
 
-const formFilter = reactive({
+const formQuery = reactive({
   page: 1,
   pageSize: 10,
   year: new Date().getFullYear(),
-  type: "การศึกษาในประเทศ",
+  type: "DOMESTICE",
   keyword: "",
 });
+const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
 
 function fetchList() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      citizenId: "123XXXXXXXXXXX",
-      name: "นางสาวสาวิตรี ศรีสมัย",
-      position: "นักทรัพยากรบุคคล",
-      type: "ทั่วไป",
-      level: "ปฏิบัติงาน",
-      positionPath: "นักทรัพยากรบุคคล",
-    },
-    {
-      id: "2",
-      citizenId: "1234XXXXXXXXXX",
-      name: "นายณัฐพงศ์ ดิษยบุตร",
-      position: "นักทรัพยากรบุคคล",
-      type: "ทั่วไป",
-      level: "ปฏิบัติงาน",
-      positionPath: "",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.devScholarship +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&scholarshipType=${formQuery.type}`
+    )
+    .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();
+    });
+}
+
+function fetchNewList() {
+  formQuery.page = 1;
+  fetchList();
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -148,6 +166,22 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
     : router.push("/development/scholarship/add");
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchNewList();
+  }
+);
+
 onMounted(() => {
   fetchList();
 });
@@ -163,11 +197,12 @@ onMounted(() => {
         <div>
           <datepicker
             menu-class-name="modalfix"
-            v-model="formFilter.year"
+            v-model="formQuery.year"
             :locale="'th'"
             autoApply
             year-picker
             :enableTimePicker="false"
+            @update:model-value="fetchNewList"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -178,7 +213,7 @@ onMounted(() => {
                 dense
                 lazy-rules
                 outlined
-                :model-value="Number(formFilter.year) + 543"
+                :model-value="Number(formQuery.year) + 543"
                 :label="`${'ปีงบประมาณ'}`"
               >
                 <template v-slot:prepend>
@@ -197,9 +232,14 @@ onMounted(() => {
           <q-select
             dense
             outlined
-            v-model="formFilter.type"
-            :options="options"
+            v-model="formQuery.type"
+            :options="scholarshipTypeOp"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
             label="เลือกประเภททุน"
+            @update:model-value="fetchNewList"
           />
         </div>
       </div>
@@ -244,18 +284,19 @@ onMounted(() => {
           <q-input
             standout
             dense
-            v-model="formFilter.keyword"
+            v-model="formQuery.keyword"
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
+            @keyup.enter="fetchNewList()"
           >
             <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 = ''), fetchNewList()"
               />
             </template>
           </q-input>
@@ -291,6 +332,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">
@@ -313,6 +356,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>