hrms-mgt/src/modules/04_registryNew/views/detailView.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
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 = {
    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;
}

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();
});
</script>
<template>
  <div class="row items-center q-gutter-sm">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      ทะเบียนประวัติ
    </div>
    <q-space />
    <q-btn-dropdown
      size="16px"
      rounded
      unelevated
      color="grey-4"
      text-color="red"
      icon="mdi-home-export-outline"
      dropdown-icon="mdi-chevron-down"
    >
      <q-list v-for="(item, index) in itemsMenu" key="index">
        <q-item clickable v-close-popup>
          <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>
    <div class="column" style="height: 170px">
      <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>
      </div>

      <div class="absolute-center-left q-ml-lg">
        <q-avatar size="130px">
          <img src="@/assets/avatar_user.jpg" />
        </q-avatar>
        <q-btn
          round
          color="white"
          text-color="primary"
          icon="mdi-pencil-outline"
          style="position: absolute; bottom: 0; right: 0"
        />
      </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>
  </q-card>

  <q-card class="q-mt-md">
    <TabMain />
  </q-card>
</template>

<style scoped>
.absolute-center-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>