From af3fafe9f603b7e9dbd13414158150796d6def79 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 Mar 2024 11:25:42 +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 +-
 .../detail/GovernmentInformation/Main.vue     |  4 +-
 .../components/detail/Other/Main.vue          |  4 +-
 .../detail/PersonalInformation/Main.vue       |  4 +-
 .../components/detail/Salary/Main.vue         |  7 +-
 .../components/detail/TabMain.vue             |  8 +-
 .../04_registryNew/views/detailView.vue       | 82 +++++++++++++------
 7 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/Main.vue b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
index d5fd7322e..7b717afeb 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/Main.vue
@@ -25,7 +25,7 @@ const tab = ref<string>("1");
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
index 5ed90d2a8..7978d9e98 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue
@@ -11,7 +11,7 @@ const tab = ref<string>("1");
 </script>
 <template>
   <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
+    <div class="text-dark row items-center text-weight-bold" style="font-size: 20px">
       <q-icon name="mdi-account-tie" class="q-mr-md" />
       <span>ข้อมูลราชการ</span>
     </div>
@@ -24,7 +24,7 @@ const tab = ref<string>("1");
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >
diff --git a/src/modules/04_registryNew/components/detail/Other/Main.vue b/src/modules/04_registryNew/components/detail/Other/Main.vue
index 494c2138e..b981c40ee 100644
--- a/src/modules/04_registryNew/components/detail/Other/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Other/Main.vue
@@ -9,7 +9,7 @@ const tab = ref<string>("1");
 </script>
 <template>
   <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
+    <div class="text-dark row items-center text-weight-bold" style="font-size: 20px">
       <q-icon name="mdi-bookmark" class="q-mr-md" />
       <span>เอกสารหลักฐานและอื่นๆ</span>
     </div>
@@ -22,7 +22,7 @@ const tab = ref<string>("1");
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
index 6b382cb68..9a98d940e 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
@@ -13,7 +13,7 @@ const tab = ref<string>("1");
 </script>
 <template>
   <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
+    <div class="text-dark row items-center text-weight-bold" style="font-size: 20px">
       <q-icon name="mdi-account" class="q-mr-md" />
       <span>ข้อมูลส่วนตัว</span>
     </div>
@@ -26,7 +26,7 @@ const tab = ref<string>("1");
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >
diff --git a/src/modules/04_registryNew/components/detail/Salary/Main.vue b/src/modules/04_registryNew/components/detail/Salary/Main.vue
index 82428ade5..ba24c14ab 100644
--- a/src/modules/04_registryNew/components/detail/Salary/Main.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/Main.vue
@@ -9,7 +9,10 @@ const tab = ref<string>("1");
 </script>
 <template>
   <div class="row items-center q-mb-lg">
-    <div class="text-dark row items-center" style="font-size: 22px">
+    <div
+      class="text-dark row items-center text-weight-bold"
+      style="font-size: 20px"
+    >
       <q-icon name="mdi-cash" class="q-mr-md" />
       <span>ข้อมูลเงินเดือน/ค่าจ้าง</span>
     </div>
@@ -22,7 +25,7 @@ const tab = ref<string>("1");
     class="text-grey"
     active-color="blue"
     indicator-color="white"
-    align="justify"
+    align="left"
     narrow-indicator
     bordered
   >
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
index f9ab76280..b59798545 100644
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@@ -46,6 +46,7 @@ const splitterModel = ref<number>(12);
     <template v-slot:before>
       <q-tabs v-model="store.tabMain" vertical class="text-blue">
         <q-tab
+          class="hover-tab"
           v-for="(tab, index) in itemsTab"
           :key="index"
           :name="tab.name"
@@ -80,4 +81,9 @@ const splitterModel = ref<number>(12);
   </q-splitter>
 </template>
 
-<style scoped></style>
+<style scoped>
+.hover-tab:hover {
+  background-color: #0793f1;
+  color: white !important;
+}
+</style>
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index afc6f2e21..96a8a3d7c 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -1,13 +1,44 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
 import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
 
 import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
 const router = useRouter();
+const route = useRoute();
 
+const profileId = ref<string>(route.params.id.toString());
 const formDetail = ref<DataPerson>();
+const itemsMenu = ref<DataOption[]>([
+  {
+    id: "1",
+    name: "ช่วยราชการ",
+  },
+  {
+    id: "2",
+    name: "ส่งตัวกลับ",
+  },
+  {
+    id: "3",
+    name: "แต่งตั้ง-เลื่อน-ย้าย",
+  },
+  {
+    id: "4",
+    name: "ถึงแก่กรรม",
+  },
+  {
+    id: "5",
+    name: "ให้ออกจากราชการ",
+  },
+  {
+    id: "6",
+    name: "อื่นๆ",
+  },
+]);
 
 function fetchDataPersonal() {
   const data = {
@@ -23,6 +54,14 @@ function fetchDataPersonal() {
 
   formDetail.value = data;
 }
+
+function onClickDownloadKp7(type: string) {
+  if (type === "FULL") {
+    window.open(config.API.profileReportId(profileId.value));
+  } else if (type === "SHORT") {
+    window.open(config.API.profileKp7ShortId(profileId.value));
+  }
+}
 onMounted(() => {
   fetchDataPersonal();
 });
@@ -52,41 +91,32 @@ onMounted(() => {
       icon="mdi-home-export-outline"
       dropdown-icon="mdi-chevron-down"
     >
-      <q-list>
+      <q-list v-for="(item, index) in itemsMenu" key="index">
         <q-item clickable v-close-popup>
-          <q-item-section avatar>
-            <q-avatar icon="folder" color="primary" text-color="white" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Photos</q-item-label>
-            <q-item-label caption>February 22, 2016</q-item-label>
-          </q-item-section>
-          <q-item-section side>
-            <q-icon name="info" color="amber" />
-          </q-item-section>
-        </q-item>
-
-        <q-item clickable v-close-popup>
-          <q-item-section avatar>
-            <q-avatar icon="assignment" color="secondary" text-color="white" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Vacation</q-item-label>
-            <q-item-label caption>February 22, 2016</q-item-label>
-          </q-item-section>
-          <q-item-section side>
-            <q-icon name="info" color="amber" />
-          </q-item-section>
+          <q-item-section>{{ item.name }}</q-item-section>
         </q-item>
       </q-list>
     </q-btn-dropdown>
+
     <q-btn
       unelevated
       round
       color="grey-4"
       text-color="primary"
       icon="mdi-file-eye-outline"
-    />
+    >
+      <q-tooltip>ดาวน์ไฟล์</q-tooltip>
+      <q-menu>
+        <q-list style="min-width: 120px">
+          <q-item clickable v-close-popup @click="onClickDownloadKp7('FULL')">
+            <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
+          </q-item>
+          <q-item clickable v-close-popup @click="onClickDownloadKp7('SHORT')">
+            <q-item-section class="text-primary">ประวัติแบบย่อ</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
   </div>
 
   <q-card>