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

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>