527 lines
17 KiB
Vue
527 lines
17 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import router from "@/router";
|
|
import config from "@/app.config";
|
|
import http from "@/plugins/http";
|
|
import { tokenParsed } from "@/plugins/auth";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useDataStore } from "@/stores/data";
|
|
|
|
import type {
|
|
InboxDetail,
|
|
InboxList,
|
|
MenuMainList,
|
|
} from "@/modules/01_dashboard/interface/Main";
|
|
|
|
import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
|
|
import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
|
|
|
|
const $q = useQuasar();
|
|
const dataStore = useDataStore();
|
|
const mixin = useCounterMixin();
|
|
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
|
|
|
const fullname = ref<string>(""); // ชื่อผู้ใช้
|
|
const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
|
|
const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
|
|
const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ
|
|
|
|
// รายการเมนูหลักของระบบ
|
|
const filteredItems = computed(() => {
|
|
const isOfficer = dataStore.officerType === "OFFICER";
|
|
const conditions: Record<string, boolean> = {
|
|
ทดลองปฏิบัติหน้าที่ราชการ: dataStore.isProbation,
|
|
ประเมินบุคคล: isOfficer,
|
|
ผลงาน: isOfficer,
|
|
ขอโอน: isOfficer,
|
|
"ผู้ขอรับการประเมิน (KPI)": isOfficer,
|
|
"ผู้ประเมิน (KPI)": isOfficer,
|
|
"ทุนการศึกษา/ฝึกอบรม": isOfficer,
|
|
การพัฒนารายบุคคล: isOfficer,
|
|
};
|
|
|
|
return items.value.filter((item) => conditions[item.title] ?? true);
|
|
});
|
|
|
|
const items = ref<MenuMainList[]>([
|
|
{
|
|
icon: "mdi-account-group-outline",
|
|
title: "แผนผังองค์กร",
|
|
sub: "ดูแผนผังองค์กร",
|
|
// color: "blue-3",
|
|
color: "grey-3",
|
|
path: "/organization-chart",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-clipboard-account-outline",
|
|
title: "ทะเบียนประวัติ",
|
|
sub: "ข้อมูลทะเบียนประวัติ",
|
|
color: "blue-4",
|
|
path: "/registry",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-clipboard-account-outline",
|
|
title: "ประเมินบุคคล",
|
|
sub: "ข้อมูลการประเมินบุคคล",
|
|
color: "lime-4",
|
|
path: "/evaluate",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-calendar-account-outline",
|
|
title: "การลา",
|
|
sub: "ดู/ลงเวลา ทำเรื่องลา",
|
|
color: "cyan-3",
|
|
path: "/leave",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-folder-account-outline",
|
|
title: "ผลงาน",
|
|
sub: "ดูผลงาน",
|
|
color: "light-green-3",
|
|
path: "/portfolio",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-account-arrow-right-outline",
|
|
title: "ขอโอน",
|
|
sub: "ทำเรื่องขอโอนย้าย",
|
|
color: "deep-purple-3",
|
|
path: "/transfer",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-scale-balance",
|
|
title: "อุทธรณ์/ร้องทุกข์",
|
|
sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
|
|
color: "green-3",
|
|
path: "/appeal-complain",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-account-box-outline",
|
|
title: "ผู้ขอรับการประเมิน (KPI)",
|
|
sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
|
|
color: "red-2",
|
|
path: "/KPI",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-elevator",
|
|
title: "ผู้ประเมิน (KPI)",
|
|
sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
|
|
color: "red-2",
|
|
path: "/KPI-evaluator",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-school",
|
|
title: "ทุนการศึกษา/ฝึกอบรม",
|
|
sub: "รายการทุนการศึกษา/ฝึกอบรม",
|
|
color: "teal-2",
|
|
path: "/scholarship",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-human-handsup",
|
|
title: "การพัฒนารายบุคคล",
|
|
sub: "Individual Development Plan",
|
|
color: "orange-3",
|
|
path: "/IDP",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-poll",
|
|
title: "ทดลองปฏิบัติหน้าที่ราชการ",
|
|
sub: "ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น",
|
|
color: "yellow-3",
|
|
path: "/probation-report",
|
|
active: false,
|
|
},
|
|
]);
|
|
|
|
/**
|
|
* ฟังก์ชั่นดึงข้อมูลกล่องข้อความ
|
|
* @param index หน้าที่โหลดข้อมูล
|
|
*/
|
|
const fetchlistInbox = async (index: number) => {
|
|
if (index === 1) {
|
|
isLoadingInbox.value = true; // เริ่มโหลดข้อมูลกล่องข้อความ
|
|
}
|
|
|
|
index != 0 &&
|
|
(await http
|
|
.get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
|
|
.then((res) => {
|
|
let data: InboxList[] = res.data.result.data;
|
|
totalInbox.value = res.data.result.total;
|
|
let listItem: InboxDetail[] = [];
|
|
if (data && data.length > 0) {
|
|
data.map((e: InboxList) => {
|
|
listItem.push({
|
|
no: e.id ?? "",
|
|
sender: !e.createdFullName ? "เจ้าหน้าที่" : e.createdFullName,
|
|
subject: e.subject ?? "",
|
|
body: e.body ?? "-",
|
|
ratingModel: 0,
|
|
receiveDate: date2Thai(e.receiveDate, false, true),
|
|
payload: e.payload,
|
|
isOpen: e.isOpen,
|
|
});
|
|
});
|
|
inboxList.value.push(...listItem);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
isLoadingInbox.value = false;
|
|
}));
|
|
};
|
|
|
|
/**
|
|
* ฟังก์ชั่น redirect ไปหน้าระบบ
|
|
* @param path ที่อยู่หน้า
|
|
*/
|
|
const goToPage = (path?: string) => {
|
|
router.push(`${path}`);
|
|
};
|
|
|
|
const modalReply = ref<boolean>(false); // เปิด/ปิด dialog ตอบกลับข้อความ/ส่งข้อความ
|
|
const contactNo = ref<string>(); // id ข้อความที่ต้องการตอบกลับ
|
|
/**
|
|
* ฟังก์ชั่นเปิด dialog ตอบกลับข้อความ
|
|
* @param id id ข้อความ
|
|
*/
|
|
function dialogRepleOpen(id: string) {
|
|
contactNo.value = id; // กำหนด id ข้อความ
|
|
modalReply.value = true; // เปิด dialog ตอบกลับข้อความ
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชั่นปิด dialog ตอบกลับข้อความ
|
|
*/
|
|
function modalReplyClose() {
|
|
contactNo.value = ""; // ล้าง id ข้อความ
|
|
modalReply.value = false; // ปิด dialog ตอบกลับข้อความ
|
|
}
|
|
|
|
const dataInbox = ref<InboxDetail>(); // รายละเอียดข้อความ
|
|
const modalDetial = ref<boolean>(false); // เปิด/ปิด dialog รายละเอียดข้อความ
|
|
/**
|
|
* ฟังก์ชั่นเปิด dialog รายละเอียดข้อความ
|
|
* @param data รายละเอียดข้อความ
|
|
*/
|
|
async function onClickOpenPopupDetail(data: InboxDetail) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.msgInboxRead(data.no))
|
|
.then(() => {
|
|
const filterDate = inboxList.value.filter(
|
|
(r: InboxDetail) => r.no == data.no,
|
|
);
|
|
for (const item of filterDate) {
|
|
item.isOpen = true;
|
|
}
|
|
dataInbox.value = data;
|
|
idInboxActive.value = data.no;
|
|
modalDetial.value = !modalDetial.value;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชั่นกำหนดรายละเอียดข้อความ ส่งไปยัง dialog
|
|
*/
|
|
function updateModalDetail(val: boolean) {
|
|
modalDetial.value = val; // กำหนดรายละเอียดข้อความที่เลือก
|
|
}
|
|
|
|
const scrollTargetRef = ref<any>(null); // เช็คการ scroll ของกล่องข้อความ
|
|
const totalInbox = ref<number>(0); // จำนวนข้อความทั้งหมด
|
|
/**
|
|
* ฟังก์ชั่นโหลดข้อมูลกล่องข้อความ
|
|
* @param index หน้าที่โหลดข้อมูล
|
|
* @param done ฟังก์ชั่นเมื่อโหลดข้อมูลเสร็จ
|
|
*/
|
|
async function onLoad(index: number, done: Function) {
|
|
const num = index === 1 ? 0 : index++;
|
|
try {
|
|
// ถ้าโหลดครบแล้ว ให้หยุด infinite scroll
|
|
if (inboxList.value.length >= totalInbox.value) {
|
|
done(true);
|
|
return;
|
|
}
|
|
|
|
await fetchlistInbox(num);
|
|
done();
|
|
} catch (error) {
|
|
done(true);
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchlistInbox(1); // ดึงข้อมูลกล่องข้อความ
|
|
// ดึงข้อมูลผู้ใช้
|
|
const user = await tokenParsed();
|
|
if (user) {
|
|
fullname.value = user.name;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
|
|
<div class="col-12 row" v-if="!$q.screen.gt.xs">
|
|
<div class="text-white text-weight-light text-18px">
|
|
สวัสดี, {{ fullname }}
|
|
</div>
|
|
<div style="color: #ffffff" class="text-18px text-weight-medium col-12">
|
|
ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-9">
|
|
<div class="row justify-start q-col-gutter-md">
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
|
|
v-for="(item, j) in filteredItems"
|
|
:key="j"
|
|
>
|
|
<q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">
|
|
<q-skeleton width="100%" height="180px" />
|
|
</q-card>
|
|
|
|
<q-card
|
|
v-else
|
|
bordered
|
|
@click="
|
|
item.path === '/organization-chart' ? null : goToPage(item.path)
|
|
"
|
|
:class="
|
|
item.path === '/organization-chart'
|
|
? 'disabledcard col-12'
|
|
: 'noactive col-12'
|
|
"
|
|
>
|
|
<div class="col-12">
|
|
<q-avatar
|
|
:color="item.color"
|
|
text-color="white"
|
|
:size="$q.screen.gt.xs ? '55px' : '40px'"
|
|
>
|
|
<q-icon
|
|
:name="item.icon"
|
|
:size="$q.screen.gt.xs ? '28px' : '20px'"
|
|
color="black"
|
|
/>
|
|
</q-avatar>
|
|
</div>
|
|
<div class="q-pt-md col-12 text-left text-18px">
|
|
{{ item.title }}
|
|
</div>
|
|
<div
|
|
class="col-12 text-left text-grey text-weight-regular gt-xs"
|
|
style="font-size: 14px"
|
|
>
|
|
{{ item.sub }}
|
|
</div>
|
|
<q-tooltip v-if="item.path === '/organization-chart'">
|
|
อยู่ระหว่างปรับปรุง</q-tooltip
|
|
>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-3 row">
|
|
<q-card
|
|
flat
|
|
bordered
|
|
:style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 500px;'"
|
|
class="q-pb-sm col-12"
|
|
>
|
|
<div class="col-12 row q-px-md q-pt-md q-pb-sm">
|
|
<div class="text-subtitle1 text-weight-bold text-dark">
|
|
กล่องข้อความ
|
|
</div>
|
|
<q-space />
|
|
<div v-if="isLoadingInbox">
|
|
<q-skeleton type="text" width="80px" />
|
|
</div>
|
|
<div v-else class="text-grey-5" style="font-size: 12px">
|
|
ทั้งหมด {{ totalInbox }} ข้อความ
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="q-pa-sm"
|
|
v-if="isLoadingInbox"
|
|
style="height: calc(100% - 60px)"
|
|
>
|
|
<div v-for="(item, index) in 3">
|
|
<q-skeleton type="text" width="10%" class="text-subtitle1" />
|
|
<q-skeleton type="text" width="50%" class="text-subtitle1" />
|
|
<q-skeleton type="text" class="text-caption" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="totalInbox != 0 && !isLoadingInbox"
|
|
ref="scrollTargetRef"
|
|
style="max-height: 90%; overflow: auto"
|
|
>
|
|
<q-infinite-scroll
|
|
@load="onLoad"
|
|
:offset="250"
|
|
class="q-px-md"
|
|
:scroll-target="scrollTargetRef"
|
|
>
|
|
<div
|
|
v-for="(item, index) in inboxList"
|
|
:key="index"
|
|
class="caption"
|
|
>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
class="'q-py-md q-mb-sm my-menu'"
|
|
:active="idInboxActive === item.no"
|
|
active-class="my-menu-link"
|
|
@click.stop.prevent="onClickOpenPopupDetail(item)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label caption class="text-weight-light">
|
|
{{ item.receiveDate }}
|
|
<q-space />
|
|
</q-item-label>
|
|
<q-item-label
|
|
:class="!item.isOpen ? 'text-weight-medium' : 'text-grey-7'"
|
|
>
|
|
{{ item.sender }}
|
|
<q-icon
|
|
v-if="item.payload"
|
|
name="mdi-paperclip"
|
|
color="grey-6"
|
|
size="18px"
|
|
/></q-item-label>
|
|
<q-item-label
|
|
caption
|
|
:class="!item.isOpen ? 'text-weight-medium text-dark' : ''"
|
|
lines="2"
|
|
>{{ item.subject }}</q-item-label
|
|
>
|
|
</q-item-section>
|
|
|
|
<q-item-section side top>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-reply"
|
|
size="10px"
|
|
color="grey-7"
|
|
@click.stop.prevent="dialogRepleOpen(item.no)"
|
|
>
|
|
<q-tooltip>ตอบกลับข้อความ</q-tooltip>
|
|
</q-btn>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
<template v-slot:loading>
|
|
<div
|
|
class="row justify-center q-my-md"
|
|
v-if="inboxList.length < totalInbox"
|
|
>
|
|
<q-spinner-dots color="primary" size="40px" />
|
|
</div>
|
|
</template>
|
|
</q-infinite-scroll>
|
|
</div>
|
|
|
|
<q-banner
|
|
rounded
|
|
class="bg-amber-1 text-center q-mx-sm"
|
|
v-else-if="totalInbox === 0 && !isLoadingInbox"
|
|
>
|
|
<div class="text-yellow-10">
|
|
<q-icon
|
|
name="mdi-alert-box"
|
|
class="q-mx-xs"
|
|
size="sm"
|
|
color="yellow-10"
|
|
/>
|
|
ไม่พบข้อความ
|
|
</div>
|
|
</q-banner>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
<PopupReplyInbox
|
|
:modal="modalReply"
|
|
:id-inbox="contactNo"
|
|
:click-close="modalReplyClose"
|
|
/>
|
|
|
|
<PopupDetailInbox
|
|
:modal="modalDetial"
|
|
:data="dataInbox"
|
|
@update:modal="updateModalDetail"
|
|
/>
|
|
</template>
|
|
<style scoped>
|
|
.my-menu-notread {
|
|
color: #1bb19b;
|
|
background: #ebf9f7 !important;
|
|
font-weight: 600;
|
|
border-radius: 10px;
|
|
}
|
|
.my-menu-link {
|
|
color: #1bb19b;
|
|
background: #ebf9f7 !important;
|
|
font-weight: 600;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.my-menu-link .q-hoverable {
|
|
border-radius: 10px;
|
|
}
|
|
.my-menu {
|
|
background: #f1f0f04a;
|
|
border-radius: 10px;
|
|
}
|
|
.q-card {
|
|
border-radius: 12px;
|
|
}
|
|
.text-18px {
|
|
font-size: 1.25em;
|
|
}
|
|
.noactive {
|
|
color: #35473c;
|
|
border-radius: 12px;
|
|
padding: 10%;
|
|
transition: 0.1s ease;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
.noactive:hover {
|
|
background: #ebf9f7;
|
|
color: #1bb19b !important;
|
|
font-weight: 600;
|
|
border: 1px solid #6dbdb142;
|
|
}
|
|
.disabledcard {
|
|
color: rgba(105, 104, 104, 0.733) !important;
|
|
border-color: rgba(207, 207, 207, 0.322) !important;
|
|
box-shadow: none !important;
|
|
border-radius: 12px;
|
|
cursor: no-drop !important;
|
|
padding: 10%;
|
|
}
|
|
</style>
|