บรรจุ => ช่วยราชการ, ส่งตัวกลับ

src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

@@ -1,21 +1,21 @@
-div
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-
 import CurrencyInput from "@/components/CurruncyInput.vue";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importTypr*/
 import type { QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/officer";
-import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-const modalPersonal = ref<boolean>(false);
-const personalId = ref<string>("");
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
+
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -33,56 +33,42 @@ const {
 
 const myForm = ref<QForm | null>(null);
 
-const personId = ref<string>("");
+const dataProfile = ref<DataProfile>();
+
 const fullname = ref<string>("");
-const id = ref<string>("");
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const date = ref<Date | null>(null);
-const salary = ref<number>(0);
+
+/** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
+const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const avatar = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
 const dateRepatriation = ref<Date | null>(null);
+const reason = ref<string>("");
+const status = ref<string>("");
 
-const getData = async () => {
+/** fetch ข้อมูลรายละเอียด*/
+const getData = () => {
   showLoader();
-  await http
+  http
     .get(config.API.repatriationDetail(dataId))
     .then((res: ResponseData) => {
       const data = res.data.result;
-      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-        (id.value = data.id);
-      personId.value = data.profileId;
-      prefix.value = data.prefix;
-      firstName.value = data.firstName;
-      lastName.value = data.lastName;
+      dataProfile.value = res.data.result as unknown as DataProfile;
+      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
 
-      position.value = data.position ?? "-";
-      posNo.value = data.posNo;
-      positionLevel.value = `${data.posTypeName}(${data.posLevelName})`;
-      createdAt.value = data.createdAt;
-      organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
-      date.value = data.date;
-      salary.value = data.salary;
+      organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
       positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
+      salary.value = data.salary;
+      organization.value = data.organization;
+      reason.value = data.reason;
+      date.value = data.date;
       dateRepatriation.value = data.dateRepatriation;
-      fetchProfile(data.profileId);
+      status.value = data.status;
     })
     .catch((e) => {
       messageError($q, e);
@@ -92,26 +78,46 @@ const getData = async () => {
     });
 };
 
-function fetchProfile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
-    )
-    .then(async (res) => {
-      avatar.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      if (e.response.data.message === "ไม่พบไฟล์ในระบบ") {
-        avatar.value = "";
-      } else {
-        messageError($q, e);
-      }
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+const onSubmit = () => {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        organizationPositionOld: organizationPositionOld.value,
+        positionTypeOld: positionTypeOld.value,
+        positionLevelOld: positionLevelOld.value,
+        positionNumberOld: positionNumberOld.value,
+        amountOld: salary.value,
+        organization: organization.value,
+        date: date.value,
+        dateRepatriation: dateRepatriation.value,
+        reason: reason.value,
+      };
+      showLoader();
+      http
+        .put(config.API.repatriationMainEdit(dataId), body)
+        .then(() => {
+          success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+          getData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+};
+
+const cancelBtn = () => {
+  edit.value = !edit;
+  getData();
+  myForm.value?.resetValidation();
+};
 
 const getClass = (val: boolean) => {
   return {
@@ -120,64 +126,8 @@ const getClass = (val: boolean) => {
   };
 };
 
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
-const cancelBtn = () => {
-  edit.value = !edit;
+onMounted(() => {
   getData();
-  myForm.value?.resetValidation();
-};
-const saveData = async () => {
-  const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    date: date.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
-    dateRepatriation: dateRepatriation.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.repatriationMainEdit(dataId), body)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personalId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await getData();
 });
 </script>
 
@@ -195,99 +145,58 @@ onMounted(async () => {
     />
     รายละเอียดการส่งตัวกลับ {{ 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">
-        {{ fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(personId)"
-      />
-    </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 v-else src="@/assets/avatar_user.jpg" />
-        </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">
-              {{ position }}
-            </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">
-              {{ positionLevel }}
-            </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">
-              {{ organization }}
-            </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">
-      <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+    <q-form
+      ref="myForm"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="col-12"
+    >
+      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="q-pl-sm text-weight-bold text-dark">
+          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+        </div>
+        <q-space />
+        <div class="q-gutter-sm" v-if="!edit">
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+            v-if="!(status == 'REPORT' || status == 'DONE')"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            type="submit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancelBtn"
+          />
+        </div>
       </div>
-      <q-space />
-      <div class="q-gutter-sm" v-if="!edit">
-        <q-btn
-          outline
-          color="primary"
-          dense
-          icon-right="mdi-file-edit-outline"
-          class="q-px-sm"
-          label="แก้ไข"
-          style="width: 80px"
-          @click="edit = !edit"
-          v-if="!(status == 'REPORT' || status == 'DONE')"
-        />
-      </div>
-      <div class="q-gutter-sm" v-else>
-        <q-btn
-          outline
-          color="public"
-          dense
-          class="q-px-sm"
-          label="บันทึก"
-          style="width: 80px"
-          @click="conditionSave"
-        />
-        <q-btn
-          outline
-          color="red"
-          dense
-          class="q-px-sm"
-          label="ยกเลิก"
-          style="width: 80px"
-          @click="cancelBtn"
-        />
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm">
+      <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-12 row items-center">
@@ -351,7 +260,7 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="posNo"
+                v-model="positionNumberOld"
                 :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
                 hide-bottom-space
                 :label="`${'เลขที่'}`"
@@ -501,12 +410,6 @@ onMounted(async () => {
       </div>
     </q-form>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personalId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 
 <style lang="scss" scope>