no message

src/modules/05_placement/components/probation/ProbationDetail.vue

@@ -34,19 +34,19 @@
         <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 class="col-12 text-detail">{{ position_line }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-2 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">{{ level }}</div>
+            <div class="col-12 text-detail">{{ position_level }}</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">{{ institution }}</div>
+            <div class="col-12 text-detail">{{ organization }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
@@ -55,18 +55,18 @@
             <div class="col-12 text-detail">
               <q-icon
                 size="20px"
-                v-if="status == 'อยู่ระหว่างการทดลองงาน'"
+                v-if="probation_status == 'PENDING'"
                 name="mdi-timer-sand"
                 color="deep-orange"
               />
               <q-icon
                 size="20px"
-                v-else-if="status == 'ไม่ผ่านการทดลอง'"
+                v-else-if="probation_status == 'ไม่ผ่านการทดลอง'"
                 name="mdi-close"
                 color="red"
               />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
-              {{ status }}
+              {{ probation_status == 'PENDING' ? 'อยู่ในระหว่างการทดลองงาน' : '' }}
             </div>
           </div>
         </div>
@@ -78,7 +78,7 @@
       <div class="row col-12 q-col-gutter-sm">
         <div>
           <q-btn
-            @click="router.push(`/probation/add`)"
+            @click="router.push(`/probation/add/${personalId}`)"
             size="12px"
             flat
             round
@@ -191,17 +191,26 @@
 </template>
 <script setup lang="ts">
 import { useRouter, useRoute } from "vue-router";
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs,onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const route = useRoute();
-
-const name = ref<string>("นายสมคิด ยอดใจ");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const status = ref<string>("อยู่ระหว่างการทดลองงาน");
+const personalId = ref<string>(route.params.id as string);
+const name = ref<string>("");
+const position_line = ref<string>("");
+const position_level = ref<string>("");
+const organization = ref<string>("");
+const probation_status = ref<string>("");
 
 const pagination = ref({
   sortBy: "desc",
@@ -314,6 +323,42 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const getpersonalList = async () => {
+  showLoader();
+  await http
+    .get(config.API.personal(personalId.value))
+    .then((res) => {
+      const data = res.data.data;
+      name.value = data.name
+      position_line.value = data.position_line
+      position_level.value = data.position_level
+      organization.value = data.organization
+      probation_status.value = data.probation_status
+
+      // rows.value = data.map((item: FormProbationPersonal) => ({
+      //   personal_id: item.personal_id,
+      //   name: item.name,
+      //   position_line: item.position_line,
+      //   position_line_id: item.position_line_id,
+      //   position_level: item.position_level,
+      //   position_level_id: item.position_level_id,
+      //   organization: item.organization,
+      //   probation_no: item.probation_no,
+      //   order_number: item.order_number,
+      //   probation_status: item.probation_status,
+      // }));
+      console.log("(data)", data);
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await getpersonalList()
+  console.log()
+})
 </script>
 <style lang="scss" scope>
 .q-img {