ข้อมูลทะเบียนประวัติ
This commit is contained in:
STW_TTTY\stwtt
parent
b05065ba67
commit
bd6f4fde7f
34 changed files with 9004 additions and 706 deletions
|
|
@ -1,25 +1,38 @@
|
|||
<script setup lang="ts">
|
||||
import avatar from "@/assets/avatar_user.jpg";
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
|
||||
//หน้าเมนู
|
||||
import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
|
||||
import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
|
||||
import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
|
||||
import InsigniaPage from "@/modules/10_registry/tabs/04_insignia.vue";
|
||||
import Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
|
||||
import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const store = useRegistryInFormationStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError,dialogConfirm } = mixin;
|
||||
const profileImg = ref<string>("");
|
||||
const router = useRouter();
|
||||
const tab = ref<string>("information");
|
||||
const formData = reactive<any>({
|
||||
prefix: "นาง",
|
||||
firstName: "กัณฐิมา",
|
||||
lastName: "กาฬสินธุ์",
|
||||
position: "นักบริหาร",
|
||||
posName: "หัวหน้าสำนักงาน",
|
||||
posType: "บริหาร",
|
||||
posLevel: "ชำนาญการพิเศษ",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
position: "",
|
||||
posExecutiveName: "",
|
||||
posTypeName: "",
|
||||
posLevelName: "",
|
||||
});
|
||||
const sizeImg = ref<string>("");
|
||||
function onResize(size: any) {
|
||||
|
|
@ -28,9 +41,81 @@ function onResize(size: any) {
|
|||
}
|
||||
|
||||
function onMobile(type: string) {
|
||||
console.log(1111);
|
||||
router.push(`/registry/${type}`);
|
||||
}
|
||||
|
||||
function getMain() {
|
||||
http.get(config.API.profilePosition()).then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.prefix = data.prefix;
|
||||
formData.firstName = data.firstName;
|
||||
formData.lastName = data.lastName;
|
||||
formData.position = data.position;
|
||||
|
||||
formData.posTypeName = data.posTypeName;
|
||||
formData.posExecutiveName = data.posExecutiveName;
|
||||
formData.posLevelName = data.posLevelName;
|
||||
store.profileId = data.profileId;
|
||||
if (data.avatarName) {
|
||||
getImg(data.profileId, data.avatarName);
|
||||
} else {
|
||||
profileImg.value = avatar;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getImg(id: string, pathName: string) {
|
||||
http
|
||||
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
|
||||
.then((res) => {
|
||||
profileImg.value = res.data.downloadUrl;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
function getType() {
|
||||
http
|
||||
.get(config.API.proFileType)
|
||||
.then((res) => {
|
||||
store.typeProfile = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
function onClickDownloadKp7(type: string) {
|
||||
if (type === "FULL") {
|
||||
window.open(config.API.profileReportId(store.profileId));
|
||||
} else if (type === "SHORT") {
|
||||
window.open(config.API.profileKp7ShortId(store.profileId));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* logout keycloak
|
||||
* confirm ก่อนออกจากระบบ
|
||||
*/
|
||||
const doLogout = () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
keycloak.logout();
|
||||
},
|
||||
"ยืนยันการออกจากระบบ",
|
||||
"ต้องการออกจากระบบใช่หรือไม่"
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
store.typeProfile = "OFFICER";
|
||||
await getType();
|
||||
await getMain();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row justify-center">
|
||||
|
|
@ -43,15 +128,15 @@ function onMobile(type: string) {
|
|||
<q-card bordered>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<q-card-section>
|
||||
<div class="text-center">
|
||||
<q-avatar :size="sizeImg">
|
||||
<img
|
||||
:src="avatar"
|
||||
style="border-radius: 50%; object-fit: cover"
|
||||
/>
|
||||
</q-avatar>
|
||||
<div class="relative-position" style="height: 120px">
|
||||
<div class="absolute-center">
|
||||
<q-avatar size="120px" class="bg-grey-2">
|
||||
<q-img :src="profileImg" />
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column text-center q-mt-md q-mb-lg">
|
||||
|
||||
<div class="column text-center q-mt-md q-mb-sm">
|
||||
<span class="text-teal text-weight-medium">{{
|
||||
formData.firstName
|
||||
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
|
||||
|
|
@ -66,29 +151,45 @@ function onMobile(type: string) {
|
|||
<q-list separator class="q-mt-md">
|
||||
<q-separator />
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-6"
|
||||
>ตำแหน่งในสายงาน</q-item-section
|
||||
>
|
||||
<q-item-section>{{ formData.posName }}</q-item-section>
|
||||
<q-item-section class="text-grey-6">{{
|
||||
store.typeProfile == "OFFICER" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง"
|
||||
}}</q-item-section>
|
||||
<q-item-section>{{ formData.posExecutiveName }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-6">ประเภท</q-item-section>
|
||||
<q-item-section>{{ formData.posType }}</q-item-section>
|
||||
<q-item-section class="text-grey-6">{{
|
||||
store.typeProfile == "OFFICER" ? "ประเภทตำแหน่ง" : "กลุ่มงาน"
|
||||
}}</q-item-section>
|
||||
<q-item-section>{{
|
||||
formData.posTypeName ? formData.posTypeName : "-"
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-6"
|
||||
>ระดับชั้นงาน</q-item-section
|
||||
>
|
||||
<q-item-section>{{ formData.posLevel }}</q-item-section>
|
||||
<q-item-section class="text-grey-6">{{
|
||||
store.typeProfile == "OFFICER"
|
||||
? "ระดับตำแหน่ง"
|
||||
: "ระดับชั้นงาน"
|
||||
}}</q-item-section>
|
||||
<q-item-section>{{
|
||||
formData.posLevelName ? formData.posLevelName : "-"
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
<q-card-section class="q-gutter-y-sm">
|
||||
<q-btn class="full-width" unelevated color="blue-6"
|
||||
<q-btn
|
||||
class="full-width"
|
||||
unelevated
|
||||
color="blue-6"
|
||||
@click="onClickDownloadKp7('FULL')"
|
||||
><q-icon left size="2em" name="mdi-file-download-outline" />
|
||||
<div>ดาวน์โหลดประวัติแบบย่อ</div></q-btn
|
||||
>
|
||||
<q-btn class="full-width" unelevated color="primary"
|
||||
<q-btn
|
||||
class="full-width"
|
||||
unelevated
|
||||
color="primary"
|
||||
@click="onClickDownloadKp7('SHORT')"
|
||||
><q-icon left size="2em" name="mdi-folder-download-outline" />
|
||||
<div>ดาวน์โหลด ก.พ.7/ก.ก. 1</div></q-btn
|
||||
>
|
||||
|
|
@ -104,10 +205,14 @@ function onMobile(type: string) {
|
|||
class="bg-grey-1 text-grey-6 shadow-2"
|
||||
align="left"
|
||||
>
|
||||
<q-tab name="information" label="ข้อมูลส่วนตัว" class="bg-active"/>
|
||||
<q-tab
|
||||
name="information"
|
||||
label="ข้อมูลส่วนตัว"
|
||||
class="bg-active"
|
||||
/>
|
||||
<q-tab name="government" label="ข้อมูลราชการ" />
|
||||
<q-tab name="salary" label="ข้อมูลเงินเดือน/ค่าจ้าง" />
|
||||
<q-tab name="insignia" label="ข้อมูลเครื่องราชฯ" />
|
||||
<q-tab name="insignia" label="ข้อมูลผลงาน" />
|
||||
<q-tab name="other" label="ข้อมูลอื่นๆ" />
|
||||
</q-tabs>
|
||||
|
||||
|
|
@ -129,7 +234,7 @@ function onMobile(type: string) {
|
|||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="insignia">
|
||||
<InsigniaPage />
|
||||
<Certificate />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="other">
|
||||
|
|
@ -144,10 +249,10 @@ function onMobile(type: string) {
|
|||
<q-card bordered>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<q-card-section>
|
||||
<div class="text-center">
|
||||
<div class="text-center q-mt-md">
|
||||
<q-avatar :size="sizeImg">
|
||||
<img
|
||||
:src="avatar"
|
||||
:src="profileImg"
|
||||
style="border-radius: 50%; object-fit: cover"
|
||||
/>
|
||||
</q-avatar>
|
||||
|
|
@ -171,6 +276,7 @@ function onMobile(type: string) {
|
|||
text-color="light-blue-5"
|
||||
size="14px"
|
||||
icon="mdi-file-download-outline"
|
||||
@click="onClickDownloadKp7('FULL')"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
color="teal-1"
|
||||
|
|
@ -180,6 +286,7 @@ function onMobile(type: string) {
|
|||
round
|
||||
size="14px"
|
||||
icon="mdi-folder-download-outline"
|
||||
@click="onClickDownloadKp7('SHORT')"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
color="red-1"
|
||||
|
|
@ -189,6 +296,7 @@ function onMobile(type: string) {
|
|||
round
|
||||
size="14px"
|
||||
icon="mdi-logout"
|
||||
@click="doLogout"
|
||||
></q-btn>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
@ -212,7 +320,7 @@ function onMobile(type: string) {
|
|||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('insignia')">
|
||||
<q-item clickable v-ripple @click="onMobile('achievement')">
|
||||
<q-item-section>ข้อมูลผลงาน</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
|
|
@ -229,4 +337,4 @@ function onMobile(type: string) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue