Refactoring code module 03_retire

src/modules/03_retire/views/addRetire.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import type { QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
 import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const routeName = router.currentRoute.value.name;
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -18,21 +24,15 @@ const {
   hideLoader,
   dialogConfirm,
 } = mixin;
-const router = useRouter();
-const route = useRoute();
-const $q = useQuasar();
-const routeName = router.currentRoute.value.name;
 
-/**
- * ตัวแปรที่ใช้งาน
- */
-const id = ref<string>("");
-const myform = ref<QForm | null>(null);
-const tranferOrg = ref("");
-const dateCommand = ref<Date>(new Date());
-const dateLeave = ref<Date>(new Date());
-const noteReason = ref("");
-const modal = ref<boolean>(false);
+const id = ref<string>(""); //เก็บ id path
+const myform = ref<QForm | null>(null); //form
+const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
+const dateCommand = ref<Date>(new Date()); //วันที่ยื่นขอลาออกจากราชการ
+const dateLeave = ref<Date>(new Date()); //วันที่ขอลาออกจากราชการ
+const noteReason = ref(""); //เหตุผลที่ลาออกจากราชการ
+const modal = ref<boolean>(false); //ตัวแปร dialog
+
 /** ข้อมูล v-model ของฟอร์ม */
 const dataDetail = ref<any>({
   datetext: "",
@@ -57,40 +57,23 @@ const dataDetail = ref<any>({
   fullname: "",
 });
 
-/**
- * ฟังก์ชั่นย้อนกลับไปยังหน้ารายการลาออก
- */
-const clickBack = () => {
-  router.push(`/retire`);
-};
-
 /**
  * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
  * @param val value ของ status true/false
  */
-const statusOrder = (val: boolean) => {
+function statusOrder(val: boolean) {
   switch (val) {
     case true:
       return "ยับยั้ง";
     case false:
       return "อนุญาต";
   }
-};
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
-  if (route.params.id !== undefined) {
-    id.value = route.params.id.toString();
-    fectDataresign(id.value);
-  }
-});
+}
 
 /**
  * บันทึกข้อมูลการลาออก
  */
-const onSubmit = async () => {
+async function onSubmit() {
   dialogConfirm(
     $q,
     () => {
@@ -119,21 +102,21 @@ const onSubmit = async () => {
     "ยืนยันการยื่นข้อมูลลาออก",
     "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่"
   );
-};
+}
 
 const files = ref<any>();
+const checkCancleLeave = ref<boolean>(false);
 
 //ยกเลิกการลาออก
-const cancelResing = () => {
+function cancelResing() {
   modal.value = true;
-};
+}
 
-const checkCancleLeave = ref<boolean>(false);
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
-const fectDataresign = async (id: string) => {
+async function fectDataresign(id: string) {
   showLoader();
   await http
     .get(config.API.resingByid(id))
@@ -158,11 +141,24 @@ const fectDataresign = async (id: string) => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
+/**
+ * เปิด tab ใหม่
+ * @param data path file
+ */
 function downloadFile(data: string) {
   window.open(data, "_blank");
 }
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(() => {
+  if (route.params.id !== undefined) {
+    id.value = route.params.id.toString();
+    fectDataresign(id.value);
+  }
+});
 </script>
 <template>
   <div class="col-12 row justify-center">