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

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

@@ -1,18 +1,44 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type {
+  DataOption,
+  FormFilter,
+} from "@/modules/15_development/interface/index/Main";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
+const maxPage = ref<number>(1);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 20,
+  keyword: "",
+  year: new Date().getFullYear(),
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: null,
+  isProbation: null,
+});
+
 /** use*/
-const router = useRouter()
+const router = useRouter();
 const store = useDevelopmentDataStore();
 const $q = useQuasar();
-const { showLoader, hideLoader } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const rows = ref<any>([]);
 const agency = ref<string>("");
@@ -108,17 +134,58 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onAdd(){
-    router.push(`/development/history/add`)
-
+function onAdd() {
+  router.push(`/development/history/add`);
 }
-function onDownload(){
+function onDownload() {}
 
+function onEdit(id:string) {
+  router.push(`/development/history/${id}`);
 }
 
-function onEdit(){
+function getData() {
+  let queryParams: any = {
+    page: formFilter.page,
+    pageSize: formFilter.pageSize,
+    keyword: formFilter.keyword,
+    year: formFilter.year,
+  };
 
+  showLoader();
+  http
+    .get(config.API.developmentHistoryList("officer"), { params: queryParams })
+    .then((res) => {
+      console.log(res.data.result.data);
+      const data = res.data.result.data
+      rows.value = data.map((item:any)=>({
+        id:item.id ? item.id : null,
+        citizenId:item.citizenId ? item.citizenId :null,
+        name:item.firstName ? `${item.prefix}${item.firstName} ${item.lastName}` :null,
+        prefix:item.prefix ? item.prefix : null,
+        firstName:item.firstName ? item.firstName : null,
+        lastName:item.lastName ? item.lastName : null,
+        position:item.position ? item.position :null,
+        type:item.type ? item.type :null,
+        level:item.level ? item.level :null,
+        positionSide:item.posExecutive ? item.posExecutive :null,
+        projectName:item.projectName ? item.projectName :null,
+      }))
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
+
+function yearAll() {
+  formFilter.year = 0;
+  getData();
+}
+onMounted(() => {
+  getData();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -129,11 +196,12 @@ function onEdit(){
       <div class="row q-gutter-sm">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formFilter.year"
+          v-model="formFilter.year"
           :locale="'th'"
           autoApply
           year-picker
           :enableTimePicker="false"
+          @update:model-value="getData()"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -144,9 +212,20 @@ function onEdit(){
               dense
               lazy-rules
               outlined
-              :model-value="Number(store.formFilter.year) + 543"
+              :model-value="
+                formFilter.year === 0
+                  ? null
+                  : Number(formFilter.year) + 543
+              "
               :label="`${'ปีงบประมาณ'}`"
             >
+              <template v-if="formFilter.year" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="yearAll"
+                  class="cursor-pointer"
+                />
+              </template>
               <template v-slot:prepend>
                 <q-icon
                   name="event"
@@ -170,14 +249,7 @@ function onEdit(){
         />
       </div>
 
-      <q-btn
-        flat
-        round
-        dense
-        icon="add"
-        color="primary"
-        @click="onAdd()"
-      >
+      <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
         <q-tooltip>เพิ่ม</q-tooltip>
       </q-btn>
       <q-space />
@@ -191,42 +263,45 @@ function onEdit(){
       >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
       </q-btn>
-      <div class="row q-gutter-sm">
-        <q-input
-          standout
-          dense
-          v-model="store.formFilter.keyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="store.formFilter.keyword == ''" name="search" />
-            <q-icon
-              v-if="store.formFilter.keyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="store.formFilter.keyword = ''"
-            />
-          </template>
-        </q-input>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-      </div>
+      <q-input
+        standout
+        dense
+        v-model="formFilter.keyword"
+        ref="filterRef"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        @keydown.enter.prevent="getData()"
+      >
+        <template v-slot:append>
+          <q-icon v-if="formFilter.keyword == ''" name="search" />
+          <q-icon
+            v-if="formFilter.keyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="
+              formFilter.keyword = '';
+              getData();
+            "
+          />
+        </template>
+      </q-input>
+
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
     </q-toolbar>
 
     <div class="col-12">
@@ -241,7 +316,21 @@ function onEdit(){
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
+        :rows-per-page-options="[10, 25, 50, 100]"
       >
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></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">
@@ -255,7 +344,7 @@ function onEdit(){
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="onEdit()"
+              @click="onEdit(props.row.id)"
             >
               <div class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}