Refactoring code module 06_retirement

src/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
-import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+
+import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
 
 /** use */
 const $q = useQuasar();
@@ -101,17 +104,17 @@ const checkSelected = computed(() => {
 });
 
 //popup ยืนยันส่งัว
-const saveOrder = () => {
+function saveOrder() {
   dialogConfirm(
     $q,
     () => Ordersave(),
     "ยืนยันส่งไปออกคำสั่ง",
     "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
   );
-};
+}
 
 //ส่งไปออกคำสั่ง
-const Ordersave = async () => {
+async function Ordersave() {
   const id = selected.value.map((r) => r.id);
   const body = {
     id,
@@ -130,16 +133,18 @@ const Ordersave = async () => {
       props.getData?.();
       hideLoader();
     });
-};
+}
 
 const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-const updateInput = (value: any) => {
+function updateInput(value: any) {
   emit("update:filterKeyword2", value);
-};
+}
+
 //รีเซ็ตค่าในช่องค้นหา
-const Reset = () => {
+function Reset() {
   emit("update:filterKeyword2", "");
-};
+}
+
 watchEffect(() => {
   if (props.modal === true) {
     selected.value = [];

src/modules/06_retirement/components/Expulsion/expulsionMain.vue

@@ -3,14 +3,16 @@ import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRetirementDataStore } from "@/modules/06_retirement/store";
-import DialogSendToCommand from "@/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
 import type { ResponseData } from "@/modules/06_retirement/interface/response/expulsion";
 
+import DialogSendToCommand from "@/modules/06_retirement/components/Expulsion/DialogSendToCommand.vue";
+
 /** use */
 const $q = useQuasar();
 const router = useRouter();
@@ -51,6 +53,14 @@ const resetFilter = () => {
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const filters = ref<ResponseData[]>([]);
+
+/** Setting Pagination */
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -117,15 +127,12 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** HOOK */
-onMounted(async () => {
-  await getData();
-});
-
 /**
  * ฟังก์ชั่น modal
  */
-const openModalOrder = () => {
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+function openModalOrder() {
   openModal();
   const row = filters.value.filter(
     (r: ResponseData) =>
@@ -141,14 +148,12 @@ const openModalOrder = () => {
       r.date
   );
   rows2.value = row;
-};
-const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
+}
 
 /**
  * นำข้อมูลมาจาก API
  */
-const getData = async () => {
+async function getData() {
   showLoader();
   await http
     .get(config.API.retirementExpulsion)
@@ -188,13 +193,13 @@ const getData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
  * ลบข้อมูล
  * @param id ไอดีข้อมูล
  */
-const clickDelete = async (id: string) => {
+async function clickDelete(id: string) {
   dialogRemove(
     $q,
     async () => {
@@ -203,9 +208,9 @@ const clickDelete = async (id: string) => {
     `ลบข้อมูล`,
     `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`
   );
-};
+}
 //ลบข้อมูลจากAPI
-const deleteData = async (id: string) => {
+async function deleteData(id: string) {
   await http
     .delete(config.API.expulsionByid(id))
     .then((res) => {
@@ -218,14 +223,11 @@ const deleteData = async (id: string) => {
       hideLoader();
       await getData();
     });
-};
+}
 
-/** Setting Pagination */
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
+/** HOOK */
+onMounted(async () => {
+  await getData();
 });
 </script>
 <template>

src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue

@@ -2,19 +2,20 @@
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import CurrencyInput from "@/components/CurruncyInput.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
 import { tokenParsed } from "@/plugins/auth";
 
 /**Import Type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
+import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import CurrencyInput from "@/components/CurruncyInput.vue";
+
 /** Use */
 const $q = useQuasar();
 const route = useRoute();
@@ -30,6 +31,9 @@ const {
   dialogConfirm,
 } = mixin;
 
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
+
 /**ตัวแปร */
 const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
@@ -61,19 +65,10 @@ const responseData = ref<ResponseDataDetail>({
   fullname: "",
 });
 
-/**Hook */
-onMounted(async () => {
-  const user = await tokenParsed();
-  if (user) {
-    roleAdmin.value = await user.role.includes("placement1");
-  }
-  await getData();
-});
-
 /**
  * นำข้อมูลมาจาก API
  */
-const getData = async () => {
+async function getData() {
   showLoader();
   await http
     .get(config.API.expulsionByid(dataId))
@@ -115,18 +110,18 @@ const getData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**ฟังก์ชั่นcancel */
-const clickCancel = async () => {
+async function clickCancel() {
   await getData();
   edit.value = false;
-};
+}
 
 /**
  * Functionบันทึก
  */
-const conditionSave = async () => {
+async function conditionSave() {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
       if (success) {
@@ -141,9 +136,9 @@ const conditionSave = async () => {
       }
     });
   }
-};
+}
 //Save จาก Api
-const saveData = async () => {
+async function saveData() {
   const body = {
     organization: organization.value,
     reason: reason.value,
@@ -168,18 +163,18 @@ const saveData = async () => {
       await getData();
       hideLoader();
     });
-};
+}
 
 /**
  * Function เพิ่ม Class เวลา Edit
  * @param val เมื่อเป็นEdit จะเปลี่ยน Class
  */
-const getClass = (val: boolean) => {
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
-};
+}
 
 function onclickViewinfo(id: string) {
   modalPersonal.value = true;
@@ -189,6 +184,15 @@ function onclickViewinfo(id: string) {
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
+
+/**Hook */
+onMounted(async () => {
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
+  }
+  await getData();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -377,20 +381,6 @@ function updatemodalPersonal(modal: boolean) {
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <!-- <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                @update:model-value="salary.toLocaleString('en-US')"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              /> -->
               <CurrencyInput
                 v-model="salary"
                 :edit="edit"