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

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

@@ -1,23 +1,40 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
-import type { 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";
 
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
+/**
+ * importType
+ */
+import type { QForm } from "quasar";
+import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+import type { DataProfile } from "@/modules/05_placement/interface/response/AppointMent";
+
+/**
+ * importComponents
+ */
+import CardProfile from "@/components/CardProfile.vue"; // card ข้อมูลส่วนตัว
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = useCounterMixin();
+const paramsId = route.params.id;
 
 const dataProfile = ref<DataProfile>();
 
@@ -35,16 +52,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: "",
@@ -52,10 +59,12 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 
-//เรียกข้อมูลตาม id
-const fecthappointmentByid = async () => {
+/**
+ *  fetch รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย
+ */
+function fecthappointmentByid() {
   showLoader();
-  await http
+  http
     .get(config.API.appointmentByid(paramsId.toString()))
     .then((res) => {
       dataProfile.value = res.data.result as unknown as DataProfile;
@@ -85,9 +94,11 @@ const fecthappointmentByid = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-// เเก้ไขข้อมูล
+/**
+ * ยืนยันการบับทึกข้อมูลลงบัญชีแนบท้าย
+ */
 function putAppointment() {
   dialogConfirm(
     $q,
@@ -105,26 +116,35 @@ function putAppointment() {
       showLoader();
       http
         .put(config.API.appointmentByid(paramsId.toString()), data)
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
+        .then(async () => {
+          await fecthappointmentByid();
+          await success($q, "บันทึกข้อมูลสำเร็จ");
+          edit.value = false;
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthappointmentByid();
-          edit.value = false;
+          hideLoader();
         });
     },
     "ต้องการแก้ไขข้อมูลหรือไม่?",
     "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
   );
 }
-const cancel = () => {
+
+/**
+ * ยกเลิกการแก้ไขลงบัญชีแนบท้าย
+ */
+function cancel() {
   edit.value = false;
-  fecthappointmentByid();
   myForm.value?.resetValidation();
-};
+  fecthappointmentByid();
+}
+
+/**
+ * classInput
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -132,17 +152,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>
@@ -157,7 +168,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.push(`/placement/appoint-promote`)"
     />
-    รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย {{ title.fullname }}
+    รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย{{ title.fullname }}
   </div>
   <CardProfile :data="dataProfile as DataProfile" />
 
@@ -322,7 +333,7 @@ onMounted(async () => {
                 lazy-rules
                 mask="###,###,###,###"
                 reverse-fill-mask
-                class="inputgreen"
+                :class="getClass(edit)"
               />
             </div>
           </div>
@@ -389,12 +400,6 @@ onMounted(async () => {
       </div>
     </q-form>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 <style lang="scss" scope>
 .q-img {