From e6cfec106a733a5a6a38582bce21861439f38ce4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 Mar 2024 10:11:32 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/detail/Achievement/Main.vue    |  2 +-
 .../components/detail/Salary/Main.vue         |  2 +-
 .../components/detail/TabMain.vue             |  4 +-
 .../04_registryNew/views/detailView.vue       | 65 ++++++++++++++++---
 4 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/Main.vue b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
index 76961142d..d5fd7322e 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
@@ -13,7 +13,7 @@ const tab = ref<string>("1");
 <template>
   <div class="row items-center q-mb-lg">
     <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-cash" class="q-mr-md" />
+      <q-icon name="mdi-medal" class="q-mr-md" />
       <span>ข้อมูลผลงานและเครื่องราชฯ</span>
     </div>
   </div>
diff --git a/src/modules/04_registryNew/components/detail/Salary/Main.vue b/src/modules/04_registryNew/components/detail/Salary/Main.vue
index dc8c8124b..82428ade5 100644
--- a/src/modules/04_registryNew/components/detail/Salary/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/Main.vue
@@ -10,7 +10,7 @@ const tab = ref<string>("1");
 <template>
   <div class="row items-center q-mb-lg">
     <div class="text-dark row items-center" style="font-size: 22px">
-      <q-icon name="mdi-account" class="q-mr-md" />
+      <q-icon name="mdi-cash" class="q-mr-md" />
       <span>ข้อมูลเงินเดือน/ค่าจ้าง</span>
     </div>
   </div>
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
index de806977d..f9ab76280 100644
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@@ -24,12 +24,12 @@ const itemsTab = ref<any>([
   },
   {
     name: "3",
-    icon: "mail",
+    icon: "mdi-cash",
     label: "ข้อมูลเงินเดือน/ค่าจ้าง",
   },
   {
     name: "4",
-    icon: "mdi-cash",
+    icon: "mdi-medal",
     label: "ข้อมูลผลงานและเครื่องราชฯ",
   },
   {
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 5d876821b..afc6f2e21 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -1,9 +1,31 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 
-import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
+import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
 
+import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
 const router = useRouter();
+
+const formDetail = ref<DataPerson>();
+
+function fetchDataPersonal() {
+  const data = {
+    id: "1526d9d3-d8b1-43ab-81b5-a84dfbe99201",
+    prefix: "นาย",
+    firstName: "ณัฐพงศ์",
+    lastName: "ดิษยบุตร",
+    citizenId: "0000000000001",
+    position: "นักบริหาร",
+    posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe09362",
+    posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08091",
+  };
+
+  formDetail.value = data;
+}
+onMounted(() => {
+  fetchDataPersonal();
+});
 </script>
 <template>
   <div class="row items-center q-gutter-sm">
@@ -69,18 +91,23 @@ const router = useRouter();
 
   <q-card>
     <div class="column" style="height: 170px">
-      <div class="col row items-center justify-end">
-        <div class="col-12 col-md-10">
-          <div class="col-12 text-primary" style="font-size: 20px">
-            นายณัฐพงศ์ ดิษยบุตร
+      <div class="col row items-center">
+        <div class="row col-12">
+          <div class="col-sm-3 col-md-2"></div>
+          <div class="col">
+            <div class="col-12 text-primary" style="font-size: 20px">
+              {{
+                `${formDetail?.prefix}${formDetail?.firstName}  ${formDetail?.lastName}`
+              }}
+            </div>
+            <div class="col-12">{{ formDetail?.position }}</div>
           </div>
-          <div class="col-12">นักบริหาร</div>
         </div>
       </div>
 
       <div class="absolute-center-left q-ml-lg">
         <q-avatar size="130px">
-          <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
+          <img src="@/assets/avatar_user.jpg" />
         </q-avatar>
         <q-btn
           round
@@ -91,9 +118,27 @@ const router = useRouter();
         />
       </div>
 
-      <div class="col row items-center justify-around bg-teal-1">
-        <div class="col-8 row text-weight-bold">
-          <div class="row"></div>
+      <div class="col row items-center bg-teal-1">
+        <div class="row col-12">
+          <div class="col-sm-3 col-md-2"></div>
+          <div class="col-2">
+            <div class="col-sm-3 col-md-3">
+              <div class="col text-grey-5">ตำแหน่งในสายงาน</div>
+              <div class="col">หัวหน้าสำนักงาน</div>
+            </div>
+          </div>
+          <div class="col-2">
+            <div class="col-sm-3 col-md-3">
+              <div class="col text-grey-5">ประเภทตำแหน่ง</div>
+              <div class="col">บริหาร</div>
+            </div>
+          </div>
+          <div class="col-2">
+            <div class="col-sm-3 col-md-3">
+              <div class="col text-grey-5">ระดับตำแหน่งง</div>
+              <div class="col">สำนาญการพิเศษ</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>