รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ => เพิ่ม interface

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

@@ -1,5 +1,5 @@
 interface DataOption {
-  id: string;
+  id: string | null;
   name: string;
 }
 
@@ -89,6 +89,18 @@ interface FormProjectDetail {
   strategyChildActualNode: number | null; //node ยุทธศาสตร์เป้าหมายตามจริง
 }
 
+interface DataHistory {
+  citizenId: string;
+  id: string;
+  level: string;
+  name: string;
+  position: string;
+  positionSide: string;
+  projectName: string;
+  type: string;
+  year: number;
+}
+
 export type {
   DataOption,
   DataOptionCheckBox,
@@ -99,4 +111,5 @@ export type {
   ItemsDownload,
   FormProjectDetail,
   DataOptionTechnique,
+  DataHistory,
 };

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

@@ -165,6 +165,19 @@ interface DataTree {
   children: DataTree;
 }
 
+interface ResHistory {
+  citizenId: string;
+  fullName: string;
+  id: string;
+  posExecutive: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+  projectName: string;
+  root: string;
+  year: number;
+}
+
 export type {
   ResGroup,
   ResLevel,
@@ -176,4 +189,5 @@ export type {
   ResRecord,
   DataStrategic,
   DataTree,
+  ResHistory,
 };

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

@@ -5,18 +5,30 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
-import genReport from "@/plugins/genreport";
 
-/**importType*/
+/**
+ * importType
+ */
 import type {
+  DataOption,
+  DataHistory,
   NewPagination,
   ItemsMenu,
 } from "@/modules/15_development/interface/index/Main";
+import type { ResHistory } from "@/modules/15_development/interface/response/Main";
 
-/** importStore*/
+/**
+ * importStore
+ */
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
+const router = useRouter();
+const store = useDevelopmentDataStore();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
 const formFilter = reactive({
   root: null,
   page: 1,
@@ -24,34 +36,15 @@ const formFilter = reactive({
   keyword: "",
   year: new Date().getFullYear(),
 });
+const agencyOp = ref<DataOption[]>([]); // หน่วยงาน
 
+/**
+ * ข้อมูล Table
+ */
+
+const rows = ref<DataHistory[]>([]);
 const maxPage = ref<number>(1);
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
-
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
-/** use*/
-const router = useRouter();
-const store = useDevelopmentDataStore();
-const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-const agencyOp = ref<any[]>([]);
-const rows = ref<any[]>([]);
-
-const visibleColumns = ref<string[]>([
-  "year",
-  "citizenId",
-  "name",
-  "position",
-  "type",
-  "level",
-  "positionSide",
-  "projectName",
-]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -128,7 +121,22 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+const visibleColumns = ref<string[]>([
+  "year",
+  "citizenId",
+  "name",
+  "position",
+  "type",
+  "level",
+  "positionSide",
+  "projectName",
+]);
 
+/** menuDownload*/
 const itemMenu = ref<ItemsMenu[]>([
   {
     label: "ไฟล์ .xlsx",
@@ -144,13 +152,14 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-/** ดึงข้อมูลหน่วยงาน */
+/**
+ * function เรียกข้อมูหน่วยงาน
+ */
 function fetchListOrg() {
   showLoader();
   http
     .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then(async (res) => {
-      console.log(res);
       formFilter.root = null;
       formFilter.page = 1;
       rows.value = [];
@@ -161,27 +170,26 @@ function fetchListOrg() {
       }));
       option.push(...optionNew);
       agencyOp.value = option;
-      await getData();
+      getData();
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
       hideLoader();
     });
 }
 
-/** ดึงข้อมูลรายการ */
+/**
+ * function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ
+ */
 function getData() {
   showLoader();
   http
     .post(config.API.developmentHistoryList("officer"), formFilter)
     .then((res) => {
-      console.log(res.data.result.data);
       const data = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
-      rows.value = data.map((item: any) => ({
+      rows.value = data.map((item: ResHistory) => ({
         id: item.id ? item.id : null,
         citizenId: item.citizenId ? item.citizenId : null,
         name: item.fullName ? item.fullName : null,
@@ -201,7 +209,8 @@ function getData() {
     });
 }
 
-/** download file
+/**
+ * function download file
  * @param type ประเภทของไฟล์ xlsx pdf
  */
 function onDownload(type: string) {
@@ -228,7 +237,8 @@ function onDownload(type: string) {
     });
 }
 
-/** edit page
+/**
+ * function redirect รายละเอียด
  * @param id id ของ row
  */
 function onEdit(id: string) {
@@ -245,7 +255,9 @@ function updatePagination(newPagination: NewPagination) {
   formFilter.pageSize = newPagination.rowsPerPage;
 }
 
-/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+/**
+ * callbackFunction ทำเมื่อมีการอัปเดท pageSize
+ */
 watch(
   () => formFilter.pageSize,
   () => {
@@ -354,6 +366,7 @@ onMounted(() => {
                   <q-icon :color="items.color" :name="items.icon" />
                 </q-item-section>
                 <q-item-section>{{ items.label }}</q-item-section>
+                <q-tooltip>{{ items.label }}</q-tooltip>
               </q-item>
             </q-list>
           </q-menu>
@@ -416,20 +429,6 @@ onMounted(() => {
         :rows-per-page-options="[10, 25, 50, 100]"
         @update:pagination="updatePagination"
       >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -437,6 +436,7 @@ onMounted(() => {
             </q-th>
           </q-tr>
         </template>
+
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
             <q-td
@@ -451,6 +451,21 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
+
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            @update:model-value="getData"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>