no message

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

@@ -1,6 +1,6 @@
 divdivdiv
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,11 +9,18 @@ import type { ResponseTitle } from "@/modules/05_placement/interface/response/Re
 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";
+
+const formData = reactive<any>({
+  firstName: "",
+  lastName: "",
+});
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -22,12 +29,8 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
-const appointment = ref<appointmentData>({
-  citizenId: "",
-  prefixId: "",
-  firstname: "",
-  lastname: "",
-});
+const dataProfile = ref<DataProfile>();
+
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
 const profileId = ref<string>("");
@@ -64,9 +67,13 @@ const fecthappointmentByid = async () => {
   showLoader();
   await http
     .get(config.API.appointmentByid(paramsId.toString()))
-    .then((res: ResponseData) => {
+    .then((res) => {
+      dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
-      appointment.value = data;
+
+      formData.firstName = data.firstName
+      formData.lastName = data.lastName
+      
       profileId.value = data.profileId;
       title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
         data.lastname ?? "-"
@@ -111,10 +118,10 @@ const clickSave = async () => {
 // เเก้ไขข้อมูล
 const putAppointment = async () => {
   let data = {
-    citizenId: appointment.value.citizenId,
-    prefixId: appointment.value.prefixId,
-    firstname: appointment.value.firstname,
-    lastname: appointment.value.lastname,
+    // CitizenId: appointment.value.citizenId,
+    // prefixId: appointment.value.prefixId,
+    Firstname: formData.firstName,
+    Lastname: formData.lastName,
     educationOld: educationOld.value,
     organizationPositionOld: organizationPositionOld.value,
     positionTypeOld: positionTypeOld.value,
@@ -177,56 +184,7 @@ onMounted(async () => {
     />
     รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย {{ title.fullname }}
   </div>
-  <q-card bordered class="row col-12 text-dark">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ title.fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(profileId)"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img :src="avatar" v-if="avatar !== ''" />
-          <q-img src="@/assets/avatar_user.jpg" v-else />
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 q-pl-md">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">
-              {{ title.positionTypeOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">
-              {{ title.positionLevelOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ title.organizationPositionOld }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
+  <CardProfile :data="dataProfile as DataProfile" />
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
@@ -341,9 +299,9 @@ onMounted(async () => {
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="positionLevelOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                :rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
                 hide-bottom-space
-                :label="`${'ระดับ'}`"
+                :label="`${'ประเภทตำแหน่ง'}`"
               />
             </div>
           </div>