Refactoring code module 03_recruiting

src/modules/03_recruiting/views/02_qualify/Manage.vue

@@ -1,57 +1,11 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดการรายชื่อคัดเลือก
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
-    <data-table
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      :pagination="initialPagination"
-      :nornmalData="true"
-      :paging="true"
-    >
-      <template #columns="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="checkPermission($route)?.attrIsGet && viewDetail(props.row)"
-          >
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'yearly'">
-              {{ props.row.round }}/{{ col.value + 543 }}
-            </div>
-            <div
-              v-else-if="
-                col.name == 'dateRegister' ||
-                col.name == 'datePayment' ||
-                col.name == 'dateAnnouncement'
-              "
-            >
-              {{ dateThaiRange(col.value) }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </data-table>
-  </q-card>
-</template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { checkPermission } from "@/utils/permissions";
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import http from "@/plugins/http";
@@ -59,13 +13,12 @@ import config from "@/app.config";
 
 import type { RequestPeriodExam } from "@/modules/03_recruiting/interface/request/Period";
 import type { ResponsePeriodExam } from "@/modules/03_recruiting/interface/response/Period";
-import { useQuasar } from "quasar";
 
 const $q = useQuasar();
-
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+
 const rows = ref<ResponsePeriodExam[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -162,12 +115,8 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-onMounted(async () => {
-  hideLoader();
-  await fetchData();
-});
-
-const fetchData = async () => {
+/** ดึงข้อมูลรายการ */
+async function fetchData() {
   showLoader();
   await http
     .get(config.API.periodExamType("exam"))
@@ -225,17 +174,18 @@ const fetchData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const viewDetail = (row: any) => {
+/** ไปหน้ารายละเอียด */
+function viewDetail(row: any) {
   router.push(`/qualify/manage/${row.id}`);
-};
+}
 
 /**
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
     return "-";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
@@ -243,7 +193,60 @@ const dateThaiRange = (val: [Date, Date]) => {
   } else {
     return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
   }
-};
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchData();
+});
 </script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดการรายชื่อคัดเลือก
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
+    <data-table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      :pagination="initialPagination"
+      :nornmalData="true"
+      :paging="true"
+    >
+      <template #columns="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="checkPermission($route)?.attrIsGet && viewDetail(props.row)"
+          >
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'yearly'">
+              {{ props.row.round }}/{{ col.value + 543 }}
+            </div>
+            <div
+              v-else-if="
+                col.name == 'dateRegister' ||
+                col.name == 'datePayment' ||
+                col.name == 'dateAnnouncement'
+              "
+            >
+              {{ dateThaiRange(col.value) }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </data-table>
+  </q-card>
+</template>
 
 <style></style>