layout ทดลองปฏิบัติหน้าที่ราชการ

src/modules/05_placement/components/probation/MainAppoint.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -173,7 +173,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-card flat class="q-pa-sm">
+  <q-card flat>
     <div class="row q-col-gutter-sm">
       <div class="col-12">
         <div class="row q-col-gutter-sm">

src/modules/05_placement/components/probation/MainProbation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 

src/modules/05_placement/components/probation/MainSurvey.vue

@@ -5,8 +5,8 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
-import { checkPermission } from "@/utils/permissions";
 
+import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 import type { MainData } from "@/modules/05_placement/interface/index/Survey";
 
 const $q = useQuasar();
@@ -19,22 +19,6 @@ const rows = ref<MainData[]>([]);
 const filterKeyword = ref<string>("");
 const total = ref<number>(0);
 const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 10,
-  rowsPerPage: 10,
-});
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "answer1",
-  "answer2",
-  "answer3",
-  "createdAt",
-]);
 /** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -104,35 +88,50 @@ const columns = ref<QTableProps["columns"]>([
     },
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "answer1",
+  "answer2",
+  "answer3",
+  "createdAt",
+]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 10,
+  rowsPerPage: 10,
+});
 
 async function getData() {
   showLoader();
-  let query = {
-    year: year.value,
-    keyword: filterKeyword.value,
-    page: pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
-  };
   await http
-    .get(config.API.probationSurvey, { params: query })
+    .get(config.API.probationSurvey, {
+      params: {
+        year: year.value,
+        keyword: filterKeyword.value,
+        page: pagination.value.page,
+        pageSize: pagination.value.rowsPerPage,
+      },
+    })
     .then(async (res) => {
       const data = await res.data.result.data;
       totalList.value = Math.ceil(
         res.data.result.total / pagination.value.rowsPerPage
       );
       total.value = res.data.result.total;
-
       rows.value = data;
-      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
@@ -153,8 +152,9 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
-  <q-card flat class="q-pa-sm">
+  <q-card flat>
     <div class="row q-col-gutter-sm">
       <div class="col-12">
         <div class="row q-col-gutter-sm">

src/modules/05_placement/components/probation/MainTabs.vue

@@ -39,16 +39,16 @@ const tabsManu = ref<ItemTabs[]>([
     </q-tabs>
     <q-separator />
     <q-tab-panels v-model="store.tabsMain" animated>
-      <q-tab-panel name="probation" class="q-pa-sm">
+      <q-tab-panel name="probation">
         <!-- รายการผู้ทดลองปฏิบัติหน้าที่ราชการ -->
         <ProbationPage />
       </q-tab-panel>
 
-      <q-tab-panel name="appoint" class="q-pa-none">
+      <q-tab-panel name="appoint">
         <!-- แต่งตั้งคณะกรรมการฯ -->
         <AppointPage />
       </q-tab-panel>
-      <q-tab-panel name="survey" class="q-pa-sm">
+      <q-tab-panel name="survey">
         <!-- ผลสํารวจความคิดเห็น -->
         <SurveyPage />
       </q-tab-panel>