fetchData จาก api รายละเอียดข้อมูลกรรมการ

src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue

@@ -26,7 +26,7 @@ onMounted(() => {
  * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
  */
 const data = reactive<FormData>({
-  personalId:"",
+  personalId: "",
   prefix: "",
   firstname: "",
   lastname: "",
@@ -39,19 +39,32 @@ const data = reactive<FormData>({
  * ดึงค่าจาก api
  */
 const fetchData = async () => {
-  data.prefix = "นาง";
-  data.firstname = "เกสินี";
-  data.lastname = "เจียรสุมัย";
-  data.position = "ครู";
-  data.phone = "0800808080";
-  data.email = "e@email.com";
+  showLoader();
+  await http
+    .get(config.API.directorbyId(personalId.value))
+    .then((res) => {
+      const dataApi = res.data.result;
+      personalId.value = dataApi.id;
+      data.prefix = dataApi.prefix;
+      data.firstname = dataApi.firstName;
+      data.lastname = dataApi.lastName;
+      data.position = dataApi.position;
+      data.phone = dataApi.phone;
+      data.email = dataApi.email;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 /**
  * บันทึกข้อมูลที่เเก้ไข
  * @param id ระบุ บุคคล
  */
-function onSubmit(formData:FormData) {
+function onSubmit(formData: FormData) {
   dialogConfirm($q, () => putData(formData));
 }
 
@@ -93,6 +106,6 @@ function putData(formData: FormData) {
       แก้ไขรายชื่อกรรมการ
     </div>
 
-    <Form :on-submit="onSubmit" :data="data"/>
+    <Form :on-submit="onSubmit" :data="data" />
   </div>
 </template>