ทะเบียนประวัติ

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>

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>

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: "ข้อมูลผลงานและเครื่องราชฯ",
   },
   {

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 row items-center">
-        <div class="col-12 col-md-10">
+        <div class="row col-12">
-          <div class="col-12 text-primary" style="font-size: 20px">
+          <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 row items-center bg-teal-1">
-        <div class="col-8 row text-weight-bold">
+        <div class="row col-12">
-          <div class="row"></div>
+          <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>