จัดระเบียบ code และเพิ่ม component

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

@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { ResponseDataDetail } from "@/modules/05_placement/interface/response/Transfer";
-import type { QTableProps, QForm } from "quasar";
+import type { QForm } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -27,8 +27,8 @@ const {
   dialogConfirm,
   success,
 } = mixin;
-const roleAdmin = ref<boolean>(false);
 
+const roleAdmin = ref<boolean>(false);
 const title = ref<ResponseTitle>({
   fullname: "",
   organizationPositionOld: "",
@@ -64,23 +64,14 @@ const reason = ref<string>("");
 const Otherdata = ref<any>([]);
 const avatar = ref<string>("");
 
-onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin.value);
-  }
-  await fecthOther();
-});
-
+//-----(fetch data by id)-----//
 const fecthOther = async () => {
   showLoader();
   await http
     .get(config.API.otherByid(paramsId.toString()))
-    // .get(config.API.transferId(paramsId.toString()))
     .then((res: any) => {
       const data = res.data.result;
       Otherdata.value = res.data.result;
-      // console.log(data);
       avatar.value = data.avatar ?? "";
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
@@ -89,12 +80,10 @@ const fecthOther = async () => {
 
       responseData.value.profileId = data.profileId;
       responseData.value.createdAt = data.createdAt;
-      responseData.value.date =
-        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.date = data.date !== null ? new Date(data.date) : new Date();
       responseData.value.id = data.id ?? "";
       responseData.value.organization = data.organization ?? "";
-      responseData.value.organizationPositionOld =
-        data.organizationPositionOld ?? "";
+      responseData.value.organizationPositionOld = data.organizationPositionOld ?? "";
       responseData.value.positionLevelOld = data.positionLevelOld ?? "";
       responseData.value.positionNumberOld = data.positionNumberOld ?? "";
       responseData.value.positionTypeOld = data.positionTypeOld ?? "";
@@ -102,18 +91,14 @@ const fecthOther = async () => {
       responseData.value.salary = data.salary !== null ? data.salary : 0;
       responseData.value.status = data.status ?? "";
       responseData.value.avataPath = data.avataPath ?? "";
-      responseData.value.fullname = `${data.firstname ?? "-"} ${
-        data.lastName ?? "-"
-      }`;
-
+      responseData.value.fullname = `${data.prefix ?? "-"}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       organizationPositionOld.value = data.organizationPositionOld ?? "";
       positionTypeOld.value = data.positionTypeOld ?? "";
       positionLevelOld.value = data.positionLevelOld ?? "";
       posNo.value = data.positionNumberOld ?? "";
       salary.value = data.amountOld ?? "";
       organization.value = data.organization ?? "";
-      date.value =
-        data.positionDate !== null ? new Date(data.positionDate) : null;
+      date.value = data.positionDate !== null ? new Date(data.positionDate) : null;
       reason.value = data.reason ?? "";
     })
     .catch((e) => {
@@ -124,6 +109,8 @@ const fecthOther = async () => {
       edit.value = false;
     });
 };
+
+//-----(edit)-----//
 const clickEdit = async () => {
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
@@ -132,8 +119,8 @@ const clickEdit = async () => {
     }
   });
 };
+//-----(update)-----//
 const saveOther = async () => {
-  // showLoader();
   let data = {
     citizenId: Otherdata.value.citizenId,
     prefixId: Otherdata.value.prefixId,
@@ -147,8 +134,6 @@ const saveOther = async () => {
     positionNumberOld: posNo.value,
     amountOld: Number(salary.value),
   };
-  console.log(data);
-
   await http
     .put(config.API.otherByid(paramsId.toString()), data)
     .then(() => {
@@ -168,8 +153,14 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await fecthOther();
+});
 </script>
-
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -180,14 +171,14 @@ const getClass = (val: boolean) => {
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.go(-1)"
+      @click="router.push(`/other`)"
     />
-    รายละเอียดรายการอื่นๆ {{ title.fullname }}
+    รายละเอียดรายการอื่นๆ {{ responseData.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 }}
+        {{ responseData.fullname }}
       </div>
       <q-space />
       <q-btn
@@ -356,44 +347,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"
-              /> -->
               <CurruncyInput
                 v-model="salary"
                 label="เงินเดือน"
                 :edit="edit"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                :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