295 lines
7.6 KiB
Vue
295 lines
7.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, reactive } from "vue";
|
|
import axios from "axios";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useQuasar } from "quasar";
|
|
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
|
|
import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
|
|
import avatar from "@/assets/avatar_user.jpg";
|
|
import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
|
|
import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
|
|
const mixin = useCounterMixin();
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const {
|
|
dialogRemove,
|
|
dialogConfirm,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
success,
|
|
date2Thai,
|
|
} = mixin;
|
|
|
|
const profileId = ref<string>(route.params.id.toString());
|
|
const formDetail = ref<any>();
|
|
const itemsMenu = ref<DataOption[]>([
|
|
{
|
|
id: "1",
|
|
name: "ช่วยราชการ",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "ส่งตัวกลับ",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "แต่งตั้ง-เลื่อน-ย้าย",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "ถึงแก่กรรม",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "ให้ออกจากราชการ",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "อื่นๆ",
|
|
},
|
|
]);
|
|
|
|
const uploadUrl = ref<string>("");
|
|
const fileName = ref<string>("");
|
|
const profilePicture = ref<string>("");
|
|
const profileFile = ref();
|
|
const input = document.createElement("input");
|
|
input.type = "file";
|
|
input.accept = ".jpg,.png,.tif,.pic";
|
|
|
|
input.addEventListener("change", (e) => {
|
|
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
|
uploadProfile();
|
|
});
|
|
|
|
function selectFile() {
|
|
input.click();
|
|
}
|
|
|
|
async function uploadProfile() {
|
|
await http
|
|
.post(config.API.file("ทะเบียนประวัติ", "โปรไฟล์", profileId.value), {
|
|
replace: true,
|
|
fileList: [
|
|
{
|
|
fileName: fileName.value,
|
|
},
|
|
],
|
|
})
|
|
.then(async (res) => {
|
|
uploadUrl.value = res.data[fileName.value].uploadUrl;
|
|
uploadFileURL(uploadUrl.value, profileFile.value);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
async function uploadFileURL(uploadUrl: string, file: any) {
|
|
showLoader();
|
|
await axios
|
|
.put(uploadUrl, file, {
|
|
headers: {
|
|
"Content-Type": file.type,
|
|
},
|
|
})
|
|
.then(() => {
|
|
fetchProfile(profileId.value);
|
|
success($q, "อัปโหลดไฟล์สำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
async function fetchProfile(id: string) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
|
|
.then(async (res) => {
|
|
profilePicture.value = res.data.downloadUrl;
|
|
})
|
|
.catch(() => {
|
|
profilePicture.value = avatar;
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
async function fetchDataPersonal() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.registryNewByProfileId(profileId.value))
|
|
.then((res) => {
|
|
formDetail.value = res.data.result;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
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(async () => {
|
|
fileName.value = `profile-${profileId.value}`;
|
|
fetchProfile(profileId.value);
|
|
fetchDataPersonal();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="row items-center q-gutter-sm q-mb-xs">
|
|
<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="md"
|
|
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"
|
|
size="md"
|
|
>
|
|
<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: 160px">
|
|
<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">
|
|
<h2 class="title q-ma-none q-pa-none">
|
|
{{
|
|
`${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName}`
|
|
}}
|
|
</h2>
|
|
</div>
|
|
<div class="col-12 subtitle">{{ formDetail?.position }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute-center-left q-ml-lg">
|
|
<q-avatar size="130px">
|
|
<img :src="profilePicture" />
|
|
</q-avatar>
|
|
<q-btn
|
|
round
|
|
color="white"
|
|
text-color="primary"
|
|
icon="mdi-pencil-outline"
|
|
style="position: absolute; bottom: 0; right: 0"
|
|
@click="selectFile"
|
|
>
|
|
</q-btn>
|
|
</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-6">ตำแหน่งในสายงาน</div>
|
|
<div class="col">{{ formDetail?.position }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="col-sm-3 col-md-3">
|
|
<div class="col text-grey-6">ประเภทตำแหน่ง</div>
|
|
<div class="col">{{ formDetail?.posType.posTypeName }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="col-sm-3 col-md-3">
|
|
<div class="col text-grey-6">ระดับตำแหน่ง</div>
|
|
<div class="col">{{ formDetail?.posLevel.posLevelName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card class="q-mt-md rounded">
|
|
<TabMain />
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
h2.title {
|
|
font-size: 1.2rem;
|
|
line-height: 1.6rem;
|
|
font-weight: 500;
|
|
}
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
color: #34373c;
|
|
}
|
|
.absolute-center-left {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.rounded {
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|