รายการแต่งตั้ง-เลื่อน-ย้าย จัดโค้ด + component

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

@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
-
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 
 import http from "@/plugins/http";
@@ -15,6 +14,21 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
+const appointment = ref<any>([]);
+const myform = ref<any>();
+const edit = ref<boolean>(false);
+const profileId = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const educationOld = ref<string>("");
+const reason = ref<string>("");
+const date = ref<Date | null>(null);
+const status = ref<string>("");
+const avatar = ref<string>("");
+
 const paramsId = route.params.id;
 const {
   date2Thai,
@@ -31,24 +45,9 @@ const title = ref<ResponseTitle>({
   positionLevelOld: "",
   positionTypeOld: "",
 });
-const appointment = ref<any>([]);
-const myform = ref<any>();
-const edit = ref<boolean>(false);
-const profileId = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<string>("");
-const educationOld = ref<string>("");
-const reason = ref<string>("");
-const date = ref<Date | null>(null);
-const status = ref<string>("");
-const avatar = ref<string>("");
-onMounted(async () => {
-  await fecthappointmentByid();
-});
 
+
+//เรียกข้อมูลตาม id
 const fecthappointmentByid = async () => {
   showLoader();
   await http
@@ -56,22 +55,18 @@ const fecthappointmentByid = async () => {
     .then((res: any) => {
       const data = res.data.result;
       appointment.value = data;
-      // console.log(data);
-
       profileId.value = data.profileId;
-      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
       (status.value = data.status),
-        console.log("🚀 ~ file: Detail.vue:65 ~ .then ~ status:", status.value);
-      educationOld.value = data.educationOld;
+      educationOld.value = data.educationOld ?? "-";
       organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
       posNo.value = data.positionNumberOld;
-      salary.value = data.salary;
-      // organization.value = data.organization; //ไม่มี
+      salary.value = data.salary ?? 0;
       reason.value = data.reason;
       date.value = data.positionDate;
       avatar.value = data.avatar ?? "";
@@ -83,8 +78,9 @@ const fecthappointmentByid = async () => {
       hideLoader();
     });
 };
+
+//ยืนยันการเเก้ไข
 const clickSave = async () => {
-  console.log(reason.value);
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
       dialogConfirm($q, () => putAppointment());
@@ -92,21 +88,13 @@ const clickSave = async () => {
     }
   });
 };
+// เเก้ไขข้อมูล
 const putAppointment = async () => {
-  console.log("บันทึกข้อมูล");
   let data = {
     citizenId: appointment.value.citizenId,
     prefixId: appointment.value.prefixId,
     firstname: appointment.value.firstname,
     lastname: appointment.value.lastname,
-    // dateOfBirth: "2023-08-15T08:44:38.060Z",
-    // genderId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // nationality: "string",
-    // race: "string",
-    // religionId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // bloodGroupId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // relationshipId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // telephoneNumber: "string",
     educationOld: educationOld.value,
     organizationPositionOld: organizationPositionOld.value,
     positionTypeOld: positionTypeOld.value,
@@ -115,10 +103,7 @@ const putAppointment = async () => {
     amountOld: Number(salary.value),
     reason: reason.value,
     positionDate: date.value,
-    // positionDate: "2023-08-15T08:44:38.060Z",
-    // file: ["string"],
   };
-  console.log(data);
   showLoader();
   await http
     .put(config.API.appointmentByid(paramsId.toString()), data)
@@ -127,7 +112,6 @@ const putAppointment = async () => {
     })
     .catch((e) => {
       messageError($q, e);
-      console.log(e);
     })
     .finally(() => {
       fecthappointmentByid();
@@ -140,6 +124,10 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+onMounted(async () => {
+  await fecthappointmentByid();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -151,7 +139,7 @@ const getClass = (val: boolean) => {
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.go(-1)"
+      @click="router.push(`/appoint-promote`)"
     />
     รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
   </div>
@@ -345,37 +333,15 @@ const getClass = (val: 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" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
-                :label="`${'เงินเดือน'}`" type="number" /> -->
               <CurrencyInput
                 v-model="salary"
+                label="เงินเดือน"
                 :edit="edit"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
               />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <!-- <div class="col-xs-6 col-sm-6 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`"
-              />
-            </div>
-          </div> -->
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
               <datepicker