บรรจุ แต่งตั้ง ย้าย โอน => ปรับ code และ load

src/modules/05_placement/components/AppointEmployee/Detail.vue

@@ -4,26 +4,40 @@ import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QForm } from "quasar";
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type {
   appointmentData,
   ResponseData,
   DataProfile,
 } from "@/modules/05_placement/interface/response/AppointMent";
-import type { QForm } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 
-import CardProfile from "@/components/CardProfile.vue";
+/**
+ * importComponents
+ */
+import CardProfile from "@/components/CardProfile.vue"; // card ข้อมูลส่วนตัว
 
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
+const paramsId = route.params.id;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
 
+const modalPersonal = ref<boolean>(false);
 const dataProfile = ref<DataProfile>();
 
 const appointment = ref<appointmentData>({
@@ -46,16 +60,6 @@ const date = ref<Date | null>(null);
 const status = ref<string>("");
 const avatar = ref<string>("");
 
-const paramsId = route.params.id;
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
-
 const title = ref<ResponseTitle>({
   fullname: "",
   organizationPositionOld: "",
@@ -63,10 +67,12 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 
-//เรียกข้อมูลตาม id
-const fecthappointmentByid = async () => {
+/**
+ * fetch รายละเอียดการปรับระดับชั้นงานลูกจ้าง
+ */
+function fecthappointmentByid() {
   showLoader();
-  await http
+  http
     .get(config.API.appointEmployeeByid(paramsId.toString()))
     .then((res: ResponseData) => {
       dataProfile.value = res.data.result as unknown as DataProfile;
@@ -96,58 +102,67 @@ const fecthappointmentByid = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-//ยืนยันการเเก้ไข
-const clickSave = async () => {
+/**
+ * ยืนยันการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย
+ */
+function clickSave() {
   if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
+    myForm.value.validate().then((result: any) => {
+      if (result) {
         dialogConfirm(
           $q,
-          async () => await putAppointment(),
+          async () => {
+            let data = {
+              citizenId: appointment.value.citizenId,
+              prefixId: appointment.value.prefixId,
+              firstname: appointment.value.firstname,
+              lastname: appointment.value.lastname,
+              educationOld: educationOld.value,
+              organizationPositionOld: organizationPositionOld.value,
+              positionTypeOld: positionTypeOld.value,
+              positionLevelOld: positionLevelOld.value,
+              positionNumberOld: posNo.value,
+              amountOld: salary.value.toString().replace(/,/g, ""),
+              reason: reason.value,
+              positionDate: date.value,
+            };
+            showLoader();
+            await http
+              .put(config.API.appointEmployeeByid(paramsId.toString()), data)
+              .then(async () => {
+                await fecthappointmentByid();
+                await success($q, "บันทึกข้อมูลสำเร็จ");
+                edit.value = false;
+              })
+              .catch((e) => {
+                messageError($q, e);
+              })
+              .finally(() => {
+                hideLoader();
+              });
+          },
           "ต้องการแก้ไขข้อมูลหรือไม่?",
           "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
         );
       }
     });
   }
-};
-// เเก้ไขข้อมูล
-const putAppointment = async () => {
-  let data = {
-    citizenId: appointment.value.citizenId,
-    prefixId: appointment.value.prefixId,
-    firstname: appointment.value.firstname,
-    lastname: appointment.value.lastname,
-    educationOld: educationOld.value,
-    organizationPositionOld: organizationPositionOld.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value.toString().replace(/,/g, ""),
-    reason: reason.value,
-    positionDate: date.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.appointEmployeeByid(paramsId.toString()), data)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      fecthappointmentByid();
-      edit.value = false;
-    });
-};
-const cancel = () => {
+}
+
+/**
+ * ยกเลิกการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย
+ */
+function cancel() {
   edit.value = false;
   fecthappointmentByid();
   myForm.value?.resetValidation();
-};
+}
+
+/**
+ * Class input
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -155,17 +170,8 @@ const getClass = (val: boolean) => {
   };
 };
 
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await fecthappointmentByid();
+onMounted(() => {
+  fecthappointmentByid();
 });
 </script>
 <template>
@@ -180,7 +186,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.push(`/placement/appoint-employee`)"
     />
-    รายละเอียดการปรับระดับชั้นงานลูกจ้าง {{ title.fullname }}
+    รายละเอียดการปรับระดับชั้นงานลูกจ้าง{{ title.fullname }}
   </div>
 
   <CardProfile :data="dataProfile as DataProfile" :type="'employee'" />
@@ -191,7 +197,13 @@ onMounted(async () => {
         แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
       </div>
       <q-space />
-      <div v-if="status !== 'DONE' && status !== 'REPORT' && checkPermission($route)?.attrIsUpdate">
+      <div
+        v-if="
+          status !== 'DONE' &&
+          status !== 'REPORT' &&
+          checkPermission($route)?.attrIsUpdate
+        "
+      >
         <div class="q-gutter-sm" v-if="!edit">
           <q-btn
             outline
@@ -334,7 +346,7 @@ onMounted(async () => {
                 lazy-rules
                 mask="###,###,###,###"
                 reverse-fill-mask
-                class="inputgreen"
+                :class="getClass(edit)"
               />
             </div>
           </div>
@@ -401,12 +413,6 @@ onMounted(async () => {
       </div>
     </q-form>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 <style lang="scss" scope>
 .q-img {