482 lines
14 KiB
Vue
482 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, Static } from "vue";
|
|
const link = ref<number>(1);
|
|
import { useQuasar } from "quasar";
|
|
import router from "@/router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import keycloak from "@/plugins/keycloak";
|
|
import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
|
|
import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
|
|
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
|
|
|
const fullname = ref<string>("");
|
|
const inboxList = ref<any>([
|
|
// {
|
|
// no: 1,
|
|
// sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
|
// subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
|
// timereceive: "13/12/2565",
|
|
// body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
|
// ratingModel: 0,
|
|
// },
|
|
]);
|
|
const items = ref<any>([
|
|
{
|
|
icon: "mdi-account-group-outline",
|
|
title: "แผนผังองค์กร",
|
|
sub: "ดูแผนผังองค์กร",
|
|
color: "blue-3",
|
|
path: "",
|
|
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: "",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-account-arrow-right-outline",
|
|
title: "ขอโอน",
|
|
sub: "ทำเรื่องขอโอนย้าย",
|
|
color: "deep-purple-3",
|
|
path: "/transfer",
|
|
active: false,
|
|
},
|
|
{
|
|
icon: "mdi-account-remove-outline",
|
|
title: "ลาออก",
|
|
sub: "ทำเรื่องลาออก",
|
|
color: "orange-3",
|
|
path: "/retire",
|
|
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,
|
|
},
|
|
]);
|
|
onMounted(async () => {
|
|
await fetchlistInbox(1);
|
|
if (keycloak.tokenParsed != null) {
|
|
fullname.value = keycloak.tokenParsed.name;
|
|
}
|
|
});
|
|
const fetchlistInbox = async (index: number) => {
|
|
index === 1 && showLoader();
|
|
index != 0 &&
|
|
(await http
|
|
.get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
|
|
.then((res) => {
|
|
let data = res.data.result.data;
|
|
totalInbox.value = res.data.result.total;
|
|
let listItem: any = [];
|
|
data.map((e: any) => {
|
|
listItem.push({
|
|
no: e.id ?? "",
|
|
sender:
|
|
e.createdFullName == "" || e.createdFullName == null
|
|
? "เจ้าหน้าที่"
|
|
: e.createdFullName,
|
|
subject: e.subject ?? "",
|
|
timereceive: date2Thai(e.createdAt),
|
|
body: e.body ?? "-",
|
|
ratingModel: 0,
|
|
receiveDate: e.receiveDate,
|
|
payload: e.payload,
|
|
isOpen: e.isOpen,
|
|
});
|
|
});
|
|
inboxList.value.push(...listItem);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
}));
|
|
};
|
|
|
|
const transferToPage = (path?: string) => {
|
|
router.push(`${path}`);
|
|
};
|
|
|
|
// Dialog Reply
|
|
const modalReply = ref<boolean>(false);
|
|
const contactNo = ref<string>();
|
|
function dialogRepleOpen(id: string) {
|
|
contactNo.value = id;
|
|
modalReply.value = true;
|
|
}
|
|
|
|
function modalReplyClose() {
|
|
contactNo.value = "";
|
|
modalReply.value = false;
|
|
}
|
|
|
|
const dataInbox = ref<any>();
|
|
const modalDetial = ref<boolean>(false);
|
|
async function onClickOpenPopupDetail(data: any) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.msgInboxRead(data.no))
|
|
.then(() => {
|
|
const filterDate = inboxList.value.filter((r: any) => r.no == data.no);
|
|
for (const item of filterDate) {
|
|
item.isOpen = true;
|
|
}
|
|
dataInbox.value = data;
|
|
link.value = data.no;
|
|
modalDetial.value = !modalDetial.value;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function updateModalDetail(val: boolean) {
|
|
modalDetial.value = val;
|
|
}
|
|
|
|
const scrollTargetRef = ref<any>(null);
|
|
const totalInbox = ref<number>(0);
|
|
async function onLoad(index: number, done: any) {
|
|
const num = index === 1 ? 0 : index++;
|
|
if (inboxList.value.length < totalInbox.value) {
|
|
setTimeout(() => {
|
|
fetchlistInbox(num);
|
|
done();
|
|
}, 3000);
|
|
}
|
|
}
|
|
const thaiOptions: Intl.DateTimeFormatOptions = {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
};
|
|
</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 items"
|
|
:key="j"
|
|
>
|
|
<q-card
|
|
bordered
|
|
@click="transferToPage(item.path)"
|
|
class="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-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 class="text-grey-5" style="font-size: 12px">
|
|
ทั้งหมด {{ totalInbox }} ข้อความ
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="totalInbox != 0"
|
|
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="link === item.no"
|
|
active-class="my-menu-link"
|
|
@click.stop.prevent="onClickOpenPopupDetail(item)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label caption class="text-weight-light">
|
|
{{ date2Thai(item.receiveDate) }}
|
|
{{
|
|
new Date(item.receiveDate).toLocaleTimeString(
|
|
"th-TH",
|
|
thaiOptions
|
|
)
|
|
}}
|
|
น. <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-item-label caption>{{ item.timereceive }}</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-scroll-area style="height: 64vh" v-if="inboxList.length > 0">
|
|
<q-list
|
|
v-for="(contact, index) in inboxList"
|
|
:key="index"
|
|
class="q-px-md"
|
|
>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
class="q-py-md q-mb-sm my-menu"
|
|
:active="link === contact.no"
|
|
active-class="my-menu-link"
|
|
@click="onClickOpenPopupDetail(contact)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
{{ contact.sender }}
|
|
<q-icon
|
|
v-if="contact.payload"
|
|
name="mdi-paperclip"
|
|
color="grey-6"
|
|
size="18px"
|
|
/></q-item-label>
|
|
<q-item-label caption class="text-grey-6" lines="2">{{
|
|
contact.subject
|
|
}}</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section side top>
|
|
<q-item-label caption>{{ contact.timereceive }}</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="dialogRepleOpen(contact.no)"
|
|
>
|
|
<q-tooltip>ตอบกลับข้อความ</q-tooltip>
|
|
</q-btn>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area> -->
|
|
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
|
|
<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"
|
|
:idInbox="contactNo"
|
|
:click-close="modalReplyClose"
|
|
/>
|
|
|
|
<PopupDetailInbox
|
|
:modal="modalDetial"
|
|
:data="dataInbox"
|
|
@update:modal="updateModalDetail"
|
|
/>
|
|
</template>
|
|
<style>
|
|
.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(209, 209, 209, 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>
|