405 lines
12 KiB
Vue
405 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { deleteCookie, getCookie, setCookie } from "@/plugins/cookie";
|
|
import { onMounted, ref } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import axios from "axios";
|
|
import { useRoute } from "vue-router";
|
|
|
|
import router from "../router";
|
|
import config from "../app.config";
|
|
|
|
import CustomComponent from "../components/CustomDialog.vue";
|
|
import screen1 from "../assets/screen1.png";
|
|
import screen2 from "../assets/screen2.png";
|
|
import screen3 from "../assets/screen3.png";
|
|
import screen4 from "../assets/screen4.png";
|
|
|
|
import assetSso from "../assets/sso.png";
|
|
import line2 from "../assets/line2.png";
|
|
|
|
import type { DateCards } from "../interface/index/Main";
|
|
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const cookieTokenName = ref<string>("BMAHRIS_KEYCLOAK_IDENTITY");
|
|
const cookieTokenRefName = ref<string>("BMAHRIS_KEYCLOAK_REFRESH");
|
|
const urlAdmin = config.API.URL_ADMIN;
|
|
const urlUser = config.API.URL_USER;
|
|
const urlMgt = config.API.URL_MGT;
|
|
const urlCheckin = config.API.URL_CHECKIN;
|
|
|
|
const cards = ref<DateCards[]>([
|
|
{
|
|
label: "ระบบบริการเจ้าของข้อมูล",
|
|
img: screen1,
|
|
page: "user",
|
|
},
|
|
{
|
|
label: "ระบบลงเวลาปฏิบัติราชการ",
|
|
img: screen2,
|
|
page: "checkin",
|
|
},
|
|
{
|
|
label: "ระบบบริหารจัดการ",
|
|
img: screen3,
|
|
page: "mgt",
|
|
},
|
|
{
|
|
label: "ระบบแอดมิน",
|
|
img: screen4,
|
|
page: "admin",
|
|
},
|
|
]);
|
|
|
|
const token = ref<any>("");
|
|
const refreshToken = ref<any>("");
|
|
const name = ref<string>("");
|
|
async function getName() {
|
|
const token = await getCookie(cookieTokenName.value);
|
|
if (token) {
|
|
const base64Url = token.split(".")[1];
|
|
|
|
// แปลงจาก Base64 URL-safe เป็น Base64 ปกติ
|
|
const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
|
|
|
|
// ถอดรหัส Base64
|
|
const decoded = atob(base64);
|
|
|
|
// ดึงชื่อผู้ใช้
|
|
name.value = decodeURIComponent(escape(JSON.parse(decoded).name));
|
|
} else name.value = "";
|
|
}
|
|
|
|
async function goPage(sys: string, url: string) {
|
|
const token = await getCookie(cookieTokenName.value);
|
|
|
|
if (token) {
|
|
// แยกส่วน Payload ของ JWT (ส่วนที่ 2)
|
|
const base64Url = token.split(".")[1];
|
|
|
|
// แปลงจาก Base64 URL-safe เป็น Base64 ปกติ
|
|
const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
|
|
|
|
// ถอดรหัส Base64
|
|
const decoded = atob(base64);
|
|
|
|
// กำหนด requiredRole ตามค่าของ sys
|
|
let requiredRole: string[] = [];
|
|
|
|
if (sys === "user" || sys === "checkin") {
|
|
requiredRole = ["USER"];
|
|
} else if (sys === "mgt") {
|
|
requiredRole = ["STAFF"]; // ถ้า sys เป็นค่าว่าง ให้ใช้ "ADMIN"
|
|
} else if (sys === "admin") {
|
|
requiredRole = ["ADMIN", "SUPER_ADMIN"];
|
|
}
|
|
|
|
// console.log("requiredRole===>", requiredRole);
|
|
// console.log("decoded===>", JSON.parse(decoded).realm_access.roles);
|
|
|
|
// ตรวจสอบว่า payload.role มีค่าหรือไม่ และว่ามี role ที่ต้องการหรือไม่
|
|
if (
|
|
requiredRole.some((role) =>
|
|
JSON.parse(decoded).realm_access.roles.includes(role)
|
|
)
|
|
) {
|
|
window.location.href = `${url}/auth?token=${token}&accessToken=${refreshToken.value}`;
|
|
} else {
|
|
// alert("คุณไม่มีสิทธิ์เข้าใช้งานระบบนี้");
|
|
$q.dialog({
|
|
component: CustomComponent,
|
|
componentProps: {
|
|
title: `แจ้งเตือน`,
|
|
message: "คุณไม่มีสิทธิ์เข้าใช้งานระบบนี้",
|
|
icon: "warning",
|
|
color: "red",
|
|
onlycancel: true,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
async function logout() {
|
|
$q.dialog({
|
|
component: CustomComponent,
|
|
componentProps: {
|
|
title: `ยืนยันการออกจากระบบ`,
|
|
message: "ต้องการออกจากระบบใช่หรือไม่?",
|
|
icon: "info",
|
|
color: "public",
|
|
},
|
|
cancel: true,
|
|
persistent: true,
|
|
}).onOk(async () => {
|
|
await deleteCookie(cookieTokenName.value);
|
|
await deleteCookie(cookieTokenRefName.value);
|
|
// ยิง logout เข้าระบบ
|
|
await postSaveLog("ออกจากระบบ", token.value);
|
|
window.location.href = `${config.API.URL_SSO}`;
|
|
});
|
|
}
|
|
|
|
async function postSaveLog(type: string, token: any) {
|
|
await axios
|
|
.post(
|
|
config.API.ssoLog,
|
|
{ text: type },
|
|
{
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
)
|
|
.then((res) => {
|
|
console.log("res:", res.data);
|
|
})
|
|
.catch((err) => {
|
|
console.error("Error:", err);
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
deleteCookie("BMAHRISMGT_KEYCLOAK_IDENTITY");
|
|
deleteCookie("BMAHRISADM_KEYCLOAK_IDENTITY");
|
|
deleteCookie("BMAHRISCKI_KEYCLOAK_IDENTITY");
|
|
deleteCookie("BMAHRISUSER_KEYCLOAK_IDENTITY");
|
|
|
|
const uid = route.query.uid?.toString() || "";
|
|
await axios
|
|
.post(
|
|
`${config.API.sso}/kcauth`,
|
|
{},
|
|
{
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Cookie: `uid=${uid};`,
|
|
},
|
|
withCredentials: true, // Include cookies with the request
|
|
}
|
|
)
|
|
.then(async (res: any) => {
|
|
if (res.status === 200) {
|
|
if (res.data.access_token) {
|
|
setCookie(cookieTokenName.value, res.data.access_token, 1);
|
|
setCookie(cookieTokenRefName.value, res.data.refresh_token, 1);
|
|
|
|
token.value = await res.data.access_token;
|
|
refreshToken.value = await res.data.refresh_token;
|
|
|
|
// ยิง log เข้าระบบ
|
|
await postSaveLog("เข้าสู่ระบบ", res.data.access_token);
|
|
} else if (res.data.isLogin) {
|
|
token.value = await getCookie(cookieTokenName.value);
|
|
refreshToken.value = await getCookie(cookieTokenRefName.value);
|
|
}
|
|
}
|
|
})
|
|
.catch((err: any) => {
|
|
if (location.hostname == "hrms.chin.in.th") {
|
|
router.push("/sso");
|
|
} else {
|
|
// window.location.href = `${config.API.URL_SSO}`;
|
|
}
|
|
});
|
|
|
|
getName();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Background Image -->
|
|
<div class="bg-img h-50 fixed-top" style="z-index: -1">
|
|
<img alt="" :src="line2" class="img_absolute_line" />
|
|
</div>
|
|
|
|
<div class="row justify-center">
|
|
<div class="col-md-8 col-sm-12">
|
|
<q-toolbar style="padding: 0px">
|
|
<div class="row items-center q-py-sm">
|
|
<q-img :src="assetSso" style="width: 80px" />
|
|
|
|
<div class="text-white q-ml-md" v-if="$q.screen.gt.md">
|
|
<div class="text-grey-5 text-caption text-left">
|
|
Human Resource Management System (HRMS)
|
|
</div>
|
|
<div class="text-bold text-left">
|
|
ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-space />
|
|
<div class="row items-center q-col-gutter-md">
|
|
<div class="text-white">
|
|
{{ name }}
|
|
</div>
|
|
<div>
|
|
<q-btn
|
|
@click="logout()"
|
|
class="btn_logout"
|
|
icon="mdi-logout"
|
|
:label="$q.screen.gt.md ? 'ออกจากระบบ' : ''"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-toolbar>
|
|
|
|
<!-- Title Section -->
|
|
<div
|
|
class="text-white text-center"
|
|
style="margin-top: 80px"
|
|
v-if="!$q.screen.gt.sm"
|
|
>
|
|
<div class="text-bold" :class="!$q.screen.gt.sm ? '' : 'text-h5'">
|
|
ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
</div>
|
|
<div class="text-caption q-mt-sm">
|
|
Human Resource Management System (HRMS)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Section -->
|
|
<div
|
|
:style="$q.screen.gt.sm ? 'margin-top: 200px' : ''"
|
|
class="q-mt-xl"
|
|
:class="!$q.screen.gt.md ? 'row justify-center' : ''"
|
|
>
|
|
<div class="q-col-gutter-lg" :class="$q.screen.gt.md ? 'row' : ''">
|
|
<div class="col" v-for="(card, index) in cards" :key="index">
|
|
<q-card
|
|
:style="!$q.screen.gt.md ? 'width: 300px' : ''"
|
|
bordered
|
|
class="my-card"
|
|
:class="
|
|
$q.screen.gt.md ? (index % 2 === 0 ? '' : 'card-right') : ''
|
|
"
|
|
>
|
|
<q-img :src="card.img" />
|
|
|
|
<q-card-section>
|
|
<div class="row col-12">
|
|
<q-btn
|
|
outline
|
|
class="full-width"
|
|
color="primary"
|
|
:label="card.label"
|
|
@click="
|
|
goPage(
|
|
card.page,
|
|
card.page === 'user'
|
|
? urlUser
|
|
: card.page === 'checkin'
|
|
? urlCheckin
|
|
: card.page === 'mgt'
|
|
? urlMgt
|
|
: card.page === 'admin'
|
|
? urlAdmin
|
|
: ''
|
|
)
|
|
"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="q-ma-md">
|
|
<div class="row">
|
|
{{ fullname }}
|
|
<q-btn @click="logout()" class="btn_logout">
|
|
ออกจากระบบ <i class="mdi mdi-logout"></i>
|
|
</q-btn>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<img src="@/assets/screen1.png" style="width: 100%" />
|
|
<div class="h-100 py-3">
|
|
<a @click="goPage('user', urlUser)" class="link">
|
|
ระบบบริการเจ้าของข้อมูล
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<img src="@/assets/screen2.png" style="width: 100%" />
|
|
<div class="h-100 py-3">
|
|
<a @click="goPage('checkin', urlCheckin)" class="link">
|
|
ระบบลงเวลาปฏิบัติราชการ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<img src="@/assets/screen3.png" style="width: 100%" />
|
|
<div class="h-100 py-3">
|
|
<a @click="goPage('mgt', urlMgt)" class="link"> ระบบบริหารจัดการ </a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<img src="@/assets/screen4.png" style="width: 100%" />
|
|
<div class="h-100 py-3">
|
|
<a @click="goPage('admin', urlAdmin)" class="link"> ระบบแอดมิน </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-card {
|
|
width: 100%;
|
|
border: 1px solid rgb(255, 255, 255);
|
|
border-radius: 12px; /* มุมโค้งมน */
|
|
transition: all 0.3s ease; /* ทำให้การเปลี่ยนแปลงดูนุ่มนวล */
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อ hover */
|
|
}
|
|
|
|
.card-right {
|
|
transform: translateY(30px); /* เลื่อนการ์ดลงเล็กน้อย */
|
|
}
|
|
|
|
.btn_logout {
|
|
text-align: center;
|
|
text-decoration: none;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
cursor: pointer;
|
|
border: 0;
|
|
|
|
border-radius: 50px;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.btn_logout:hover {
|
|
color: #fff;
|
|
background-color: #00ffc8a1;
|
|
transition: 0.8s;
|
|
box-shadow: rgba(255, 255, 255, 0.16) 0px 10px 36px 0px,
|
|
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px;
|
|
}
|
|
|
|
.img_absolute_line {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: auto;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.bg-img {
|
|
background: rgb(30, 50, 49);
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(30, 50, 49, 1) 0%,
|
|
rgba(20, 120, 99, 1) 100%
|
|
);
|
|
min-height: 480px;
|
|
}
|
|
</style>
|