Refactoring code module 03_retire

src/modules/03_retire/interface/Main.ts

@@ -0,0 +1,63 @@
+interface QuestionDescription {
+  question1Desc: string;
+  question2Desc: string;
+  question3Desc: string;
+  question4Desc: string;
+  question5Desc: string;
+  question6Desc: string;
+  question7Desc: string;
+  question8Desc: string;
+  question9Desc: string;
+  question10Desc: string;
+  [key: string]: string;
+}
+
+interface OptionQuestions {
+  label: string;
+  value: number;
+}
+interface OptionQuestions2 {
+  label: string;
+  value: boolean;
+}
+
+interface MainList {
+  id: string;
+  location: string;
+  sendDate: string;
+  activeDate: string;
+  reason: string;
+  approveReason: string | null;
+  rejectReason: string | null;
+  status: string;
+  isActive: boolean;
+}
+
+interface MainList {
+  id: string;
+  placeLeave: string;
+  dateStartLeave: string;
+  dateLeave: string;
+  status: string;
+  statustext: string;
+}
+
+interface MainListResponse {
+  id: string;
+  location: string;
+  sendDate: Date | null;
+  activeDate: Date | null;
+  reason: string;
+  approveReason: string | null;
+  rejectReason: string | null;
+  status: string;
+  isActive: boolean;
+}
+
+export type {
+  QuestionDescription,
+  OptionQuestions,
+  OptionQuestions2,
+  MainList,
+  MainListResponse,
+};

src/modules/03_retire/interface/request/Main.ts

@@ -1,24 +0,0 @@
-interface QuestionDescription {
-  question1Desc: string;
-  question2Desc: string;
-  question3Desc: string;
-  question4Desc: string;
-  question5Desc: string;
-  question6Desc: string;
-  question7Desc: string;
-  question8Desc: string;
-  question9Desc: string;
-  question10Desc: string;
-  [key: string]: string;
-}
-
-interface OptionQuestions {
-  label: string;
-  value: number;
-}
-interface OptionQuestions2 {
-  label: string;
-  value: boolean;
-}
-
-export type { QuestionDescription, OptionQuestions, OptionQuestions2 };

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

@@ -2,40 +2,39 @@
 import { ref, defineModel } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importCompouents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
-/** use*/
 const $q = useQuasar();
 const route = useRoute();
+const mixin = useCounterMixin();
+const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   fectData: { type: Function, require: true },
 });
 
-const id = ref<string>(route.params.id ? route.params.id.toString() : "");
+const reason = ref<string>(""); //เหตุผลที่ขอยกเลิกการลาออก
-
-const mixin = useCounterMixin();
-const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;
-const reason = ref<string>("");
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
   onSubmit();
 }
 
+/** ปิด dialog */
 function close() {
   modal.value = false;
   reason.value = "";
 }
 
+/** save data */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -89,7 +88,6 @@ function onSubmit() {
         <q-separator />
 
         <q-card-actions align="right" class="bg-white text-teal">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
           <q-btn
             type="submit"
             for="#submitForm"

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>(""); //เก็บ id path
- * ตัวแปรที่ใช้งาน
+const myform = ref<QForm | null>(null); //form
- */
+const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
-const id = ref<string>("");
+const dateCommand = ref<Date>(new Date()); //วันที่ยื่นขอลาออกจากราชการ
-const myform = ref<QForm | null>(null);
+const dateLeave = ref<Date>(new Date()); //วันที่ขอลาออกจากราชการ
-const tranferOrg = ref("");
+const noteReason = ref(""); //เหตุผลที่ลาออกจากราชการ
-const dateCommand = ref<Date>(new Date());
+const modal = ref<boolean>(false); //ตัวแปร dialog
-const dateLeave = ref<Date>(new Date());
+
-const noteReason = ref("");
-const modal = ref<boolean>(false);
 /** ข้อมูล 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">

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

@@ -1,21 +1,28 @@
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onBeforeMount } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useRestDataStore } from "@/modules/03_retire/store";
-import Table from "@/components/Table.vue";
 
-const RestData = useRestDataStore();
+import type {
-const { statusText } = RestData;
+  MainList,
-const router = useRouter();
+  MainListResponse,
+} from "@/modules/03_retire/interface/Main";
+
 const $q = useQuasar();
+const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const RestData = useRestDataStore();
+const { statusText } = RestData; //Func แปลง status to text
 
+const rows = ref<MainList[]>([]);
+const filter = ref<string>("");
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -23,11 +30,6 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * เพิ่มหัวข้อตาราง
- */
-const rows = ref<any>([]);
-const filter = ref<string>("");
 const visibleColumns = ref<String[]>([
   "no",
   "placeLeave",
@@ -35,6 +37,7 @@ const visibleColumns = ref<String[]>([
   "dateLeave",
   "statustext",
 ]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -83,28 +86,13 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
+/** ดึงข้อมูล */
- * ตั้งค่า pagination
+async function fectListleave() {
- */
-const initialPagination = ref({
-  rowsPerPage: 0,
-});
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
-  fectListleave();
-});
-
-//นำข้อมูลมาแสดง
-const fectListleave = async () => {
-  showLoader();
   await http
     .get(config.API.listUser())
-    .then((res: any) => {
+    .then(async (res) => {
-      let data = res.data.result;
+      let data = await res.data.result;
-      rows.value = data.map((e: any) => ({
+      rows.value = data.map((e: MainListResponse) => ({
         id: e.id,
         placeLeave: e.location,
         dateStartLeave: date2Thai(e.sendDate),
@@ -116,41 +104,33 @@ const fectListleave = async () => {
     .catch((e: any) => {
       messageError($q, e);
     })
-    .finally(() => {
+    .finally(() => {});
-      hideLoader();
+}
-    });
-};
 
 /**
  * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มลาออก
  */
-const clickAdd = async () => {
+async function clickAdd() {
   router.push(`/retire/add`);
-};
+}
+
+/** ทำก่อน mounted */
+onBeforeMount(() => {
+  showLoader();
+});
 
 /**
- * กดเพื่อย้อนกลับ
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
-const clickBack = () => {
+onMounted(async () => {
-  router.push(`/`);
+  await fectListleave();
-};
+  hideLoader();
+});
 </script>
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
+      <div class="toptitle text-white col-12 row items-center">ขอลาออก</div>
-        <!-- <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="clickBack"
-        /> -->
-        ขอลาออก
-      </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
           <div class="q-pb-sm row">

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

@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   QuestionDescription,
   OptionQuestions,
   OptionQuestions2,
-} from "@/modules/03_retire/interface/request/Main";
+} from "@/modules/03_retire/interface/Main";
 
+const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
   success,
@@ -29,100 +30,25 @@ const dataId = ref<any>(route.params.id.toString());
 /**
  * ตัวแปรแบบสอบถาม
  */
+const realReason = ref<string>("");
+const notExitFactor = ref<string>("");
+const suggestion = ref<string>("");
+
+/** check box */
 const exitFactor = ref<any>([]);
 const reasonWork = ref<any>([]);
 const adjust = ref<any>([]);
 const timeThink = ref<any>();
-const realReason = ref<any>("");
-const notExitFactor = ref<any>("");
 const haveJob = ref<any>();
 const suggestFriends = ref<any>();
 const futureWork = ref<any>();
-const suggestion = ref<any>("");
 
-const reasonWorkOther = ref("");
+const reasonWorkOther = ref<string>("");
-// const reasonWork_option = ref<any>([
+const exitFactorOther = ref<string>("");
-//   { label: "ความมั่นคงในการทำงาน ", value: 0 },
+const suggestFriendsReason = ref<string>("");
-//   { label: "สิทธิประโยชน์/สวัสดิการ", value: 1 },
+const haveJobReason = ref<string>("");
-//   { label: "อัตราเงินเดือน ", value: 2 },
+const futureWorkReason = ref<string>("");
-//   { label: "ลักษณะงาน ", value: 3 },
+const adjustOther = ref<string>("");
-//   { label: "วัฒนธรรมการทำงานของข้าราชการ ", value: 4 },
-//   { label: "นโยบายของหน่วยงาน ", value: 5 },
-//   { label: "ระบบการทำงาน", value: 6 },
-//   { label: "สมดุลชีวิตการทำงาน ", value: 7 },
-//   { label: "บรรยากาศในการทำงาน  ", value: 8 },
-//   { label: "การพัฒนาในสายอาชีพ  ", value: 9 },
-//   { label: "โอกาสความก้าวหน้า  ", value: 10 },
-//   { label: "การได้รับการยอมรับจากสังคม  ", value: 11 },
-//   { label: "อื่น ๆ (ระบุ)  ", value: 12 },
-// ]);
-const exitFactorOther = ref("");
-// const exitFactor_option = ref<any>([
-//   { label: "อัตราเงินเดือน ", value: 0 },
-//   { label: "สวัสดิการ", value: 1 },
-//   { label: "ลักษณะงาน ", value: 2 },
-//   { label: "ระบบการทำงาน ", value: 3 },
-//   { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
-//   { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
-//   { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
-//   { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
-//   { label: "ระบบบริหารงานภายในหน่วยงาน  ", value: 8 },
-//   { label: "บรรยากาศในการทำงาน  ", value: 9 },
-//   { label: "การปฏิบัติอย่างเป็นธรรม  ", value: 10 },
-//   { label: "การยอมรับความแตกต่างหลากหลาย  ", value: 11 },
-//   { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน  ", value: 12 },
-//   { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
-//   { label: "โอกาสความก้าวหน้า  ", value: 14 },
-//   { label: "อื่น ๆ (ระบุ)  ", value: 15 },
-// ]);
-const suggestFriendsReason = ref("");
-// const suggestFriends_option = ref<any>([
-//   { label: "แนะนำ  ", value: 0 },
-//   { label: "ไม่แนะนำ (ระบุ)", value: 1 },
-// ]);
-// const timeThink_option = ref<any>([
-//   { label: "น้อยกว่า 2 สัปดาห์ ", value: 0 },
-//   { label: "1 เดือน - 3 เดือน", value: 1 },
-//   { label: "3 เดือน - 6 เดือน  ", value: 2 },
-//   { label: "6 เดือนขึ้นไป  ", value: 3 },
-// ]);
-const haveJobReason = ref<any>("");
-// const haveJob_option = ref<any>([
-//   { label: "มี (ระบุ)", value: 0 },
-//   { label: "ไม่มี", value: 1 },
-// ]);
-const futureWorkReason = ref<any>("");
-// const futureWork_option = ref<any>([
-//   { label: "อยาก", value: 0 },
-//   { label: "ไม่อยาก (ระบุ)", value: 1 },
-// ]);
-const adjustOther = ref("");
-// const adjust_option = ref<any>([
-//   { label: "อัตราเงินเดือน ", value: 0 },
-//   { label: "สวัสดิการ", value: 1 },
-//   { label: "ลักษณะงาน ", value: 2 },
-//   { label: "ระบบการทำงาน ", value: 3 },
-//   { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
-//   { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
-//   { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
-//   { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
-//   { label: "ระบบบริหารงานภายในหน่วยงาน  ", value: 8 },
-//   { label: "บรรยากาศในการทำงาน  ", value: 9 },
-//   { label: "การปฏิบัติอย่างเป็นธรรม  ", value: 10 },
-//   { label: "การยอมรับความแตกต่างหลากหลาย  ", value: 11 },
-//   { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน  ", value: 12 },
-//   { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
-//   { label: "โอกาสความก้าวหน้า  ", value: 14 },
-//   { label: "อื่น ๆ (ระบุ)  ", value: 15 },
-// ]);
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  showLoader();
-  await fecthQuestion();
-});
 
 // เรียกชุดคำถาม
 // คำถาม
@@ -226,7 +152,7 @@ async function fecthQuestion() {
 /**
  * บันทึกเเบบสอบถาม
  */
-const saveForm = () => {
+function saveForm() {
   let hasError = false;
   if (
     reasonWork.value.length === 0 ||
@@ -267,12 +193,12 @@ const saveForm = () => {
   if (hasError === true) {
     notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
   }
-};
+}
 
 /**
  * สร้างเบบสอบถามไปยัง api
  */
-const createResult = async () => {
+async function createResult() {
   const data = {
     RetirementResignId: dataId.value,
     ReasonWork: reasonWork.value,
@@ -301,7 +227,15 @@ const createResult = async () => {
     .catch((e: any) => {
       messageError($q, e);
     });
-};
+}
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  showLoader();
+  await fecthQuestion();
+});
 </script>
 
 <template>