106 lines
2.9 KiB
Vue
106 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useQuasar } from 'quasar'
|
|
import { useRouter } from 'vue-router'
|
|
import { useCounterMixin } from '@/stores/mixin'
|
|
import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
|
|
import { logout } from '@/plugins/auth'
|
|
import CustomComponent from '@/components/CustomDialog.vue'
|
|
|
|
const $q = useQuasar()
|
|
const router = useRouter()
|
|
const mixin = useCounterMixin()
|
|
const positionKeycloakStore = usePositionKeycloakStore()
|
|
const { showLoader, hideLoader } = mixin
|
|
|
|
/**
|
|
* ฟังก์ชันจัดการเมื่อผู้ใช้กดปุ่มตกลง
|
|
* ดำเนินการ logout โดยตรง
|
|
*/
|
|
function handleOkClick() {
|
|
performLogout()
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดำเนินการออกจากระบบ
|
|
*/
|
|
async function performLogout() {
|
|
showLoader()
|
|
try {
|
|
// ล้างข้อมูล positionKeycloak ก่อน logout
|
|
positionKeycloakStore.clearPositionKeycloak()
|
|
await logout()
|
|
} catch (error) {
|
|
console.error('Logout error:', error)
|
|
} finally {
|
|
setTimeout(() => {
|
|
hideLoader()
|
|
}, 1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="fullscreen bg-secondary text-white text-center q-pa-sm flex flex-center"
|
|
>
|
|
<div class="no-position-container">
|
|
<!-- Icon แสดงความผิดปกติ -->
|
|
<div class="icon-container">
|
|
<q-icon name="mdi-account-off-outline" size="100px" color="white" />
|
|
</div>
|
|
|
|
<!-- หัวข้อหลัก -->
|
|
<div class="text-h4 q-mt-lg q-mb-md">ไม่พบข้อมูลสังกัด</div>
|
|
|
|
<!-- รายละเอียด -->
|
|
<div class="text-h6 q-mb-lg text-weight-regular">
|
|
ท่านยังไม่มีสังกัดในโครงสร้างองค์กร<br />
|
|
กรุณาติดต่อเจ้าหน้าที่ที่เบอร์ 1171
|
|
<br />เพื่อดำเนินการเพิ่มข้อมูล
|
|
</div>
|
|
|
|
<div class="text-weight-regular">
|
|
เมื่อเจ้าหน้าที่ได้เพิ่มท่านในโครงสร้างองค์กรเรียบร้อยแล้ว
|
|
กรุณาเข้าสู่ระบบใหม่อีกครั้ง
|
|
</div>
|
|
<!-- ปุ่มตกลง -->
|
|
<q-btn
|
|
class="q-mt-xl"
|
|
color="white"
|
|
text-color="secondary"
|
|
unelevated
|
|
label="ตกลง"
|
|
no-caps
|
|
size="lg"
|
|
padding="md xl"
|
|
@click="handleOkClick"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.no-position-container {
|
|
max-width: 600px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.icon-container {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.text-h4 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.text-h6 {
|
|
line-height: 1.8;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.q-btn {
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
min-width: 150px;
|
|
}
|
|
</style>
|