no message
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
74b68a7f65
commit
75c677f58c
1 changed files with 242 additions and 185 deletions
|
|
@ -1,216 +1,273 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, Static } from "vue"
|
import { ref, onMounted, Static } from "vue";
|
||||||
const link = ref<number>(1)
|
const link = ref<number>(1);
|
||||||
import { useQuasar } from "quasar"
|
import { useQuasar } from "quasar";
|
||||||
import router from "@/router"
|
import router from "@/router";
|
||||||
import http from "@/plugins/http"
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config"
|
import config from "@/app.config";
|
||||||
import { useCounterMixin } from "@/stores/mixin"
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
const $q = useQuasar()
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin()
|
const mixin = useCounterMixin();
|
||||||
const { showLoader, hideLoader, date2Thai } = mixin
|
const { showLoader, hideLoader, date2Thai } = mixin;
|
||||||
|
|
||||||
const fullname = ref<string>("ธัญลักษณ์")
|
const fullname = ref<string>("ธัญลักษณ์");
|
||||||
const inboxList = ref<any>([
|
const inboxList = ref<any>([
|
||||||
// {
|
// {
|
||||||
// no: 1,
|
// no: 1,
|
||||||
// sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
// sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||||
// subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
// subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||||
// timereceive: "13/12/2565",
|
// timereceive: "13/12/2565",
|
||||||
// body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
// body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||||
// ratingModel: 0,
|
// ratingModel: 0,
|
||||||
// },
|
// },
|
||||||
])
|
]);
|
||||||
const items = ref<any>([
|
const items = ref<any>([
|
||||||
{
|
{
|
||||||
icon: "mdi-account-group-outline",
|
icon: "mdi-account-group-outline",
|
||||||
title: "แผนผังองค์กร",
|
title: "แผนผังองค์กร",
|
||||||
sub: "ดูแผนผังองค์กร",
|
sub: "ดูแผนผังองค์กร",
|
||||||
color: "blue-3",
|
color: "blue-3",
|
||||||
path: "",
|
path: "",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-clipboard-account-outline",
|
icon: "mdi-clipboard-account-outline",
|
||||||
title: "ประเมินผล",
|
title: "ประเมินผล",
|
||||||
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
||||||
color: "lime-4",
|
color: "lime-4",
|
||||||
path: "",
|
path: "/assess",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-calendar-account-outline",
|
icon: "mdi-calendar-account-outline",
|
||||||
title: "การลา",
|
title: "การลา",
|
||||||
sub: "ดู/ลงเวลา ทำเรื่องลา",
|
sub: "ดู/ลงเวลา ทำเรื่องลา",
|
||||||
color: "cyan-3",
|
color: "cyan-3",
|
||||||
path: "/leave",
|
path: "/leave",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-folder-account-outline",
|
icon: "mdi-folder-account-outline",
|
||||||
title: "ผลงาน",
|
title: "ผลงาน",
|
||||||
sub: "ดูผลงาน",
|
sub: "ดูผลงาน",
|
||||||
color: "light-green-3",
|
color: "light-green-3",
|
||||||
path: "",
|
path: "",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-account-arrow-right-outline",
|
icon: "mdi-account-arrow-right-outline",
|
||||||
title: "ขอโอน",
|
title: "ขอโอน",
|
||||||
sub: "ทำเรื่องขอโอนย้าย",
|
sub: "ทำเรื่องขอโอนย้าย",
|
||||||
color: "deep-purple-3",
|
color: "deep-purple-3",
|
||||||
path: "/transfer",
|
path: "/transfer",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-account-remove-outline",
|
icon: "mdi-account-remove-outline",
|
||||||
title: "ลาออก",
|
title: "ลาออก",
|
||||||
sub: "ทำเรื่องลาออก",
|
sub: "ทำเรื่องลาออก",
|
||||||
color: "orange-3",
|
color: "orange-3",
|
||||||
path: "/retire",
|
path: "/retire",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-scale-balance",
|
icon: "mdi-scale-balance",
|
||||||
title: "อุทธรณ์ร้องทุกข์",
|
title: "อุทธรณ์ร้องทุกข์",
|
||||||
sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
|
sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
|
||||||
color: "green-3",
|
color: "green-3",
|
||||||
path: "/appeal-complain",
|
path: "/appeal-complain",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
])
|
]);
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchlistInbox()
|
await fetchlistInbox();
|
||||||
})
|
});
|
||||||
const fetchlistInbox = async () => {
|
const fetchlistInbox = async () => {
|
||||||
showLoader()
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(config.API.msgInbox)
|
.get(config.API.msgInbox)
|
||||||
.then(res => {
|
.then((res) => {
|
||||||
let data = res.data.result
|
let data = res.data.result;
|
||||||
console.log(data)
|
console.log(data);
|
||||||
let listItem: any = []
|
let listItem: any = [];
|
||||||
data.map((e: any) => {
|
data.map((e: any) => {
|
||||||
listItem.push({
|
listItem.push({
|
||||||
no: e.id ?? "",
|
no: e.id ?? "",
|
||||||
sender: e.createdFullName == "" || e.createdFullName == null ? "เจ้าหน้าที่" : e.createdFullName,
|
sender:
|
||||||
subject: e.subject ?? "",
|
e.createdFullName == "" || e.createdFullName == null
|
||||||
timereceive: date2Thai(e.createdAt),
|
? "เจ้าหน้าที่"
|
||||||
body: e.body ?? "",
|
: e.createdFullName,
|
||||||
ratingModel: 0,
|
subject: e.subject ?? "",
|
||||||
})
|
timereceive: date2Thai(e.createdAt),
|
||||||
})
|
body: e.body ?? "",
|
||||||
inboxList.value = listItem
|
ratingModel: 0,
|
||||||
})
|
});
|
||||||
.catch(err => {
|
});
|
||||||
console.log(err)
|
inboxList.value = listItem;
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.catch((err) => {
|
||||||
hideLoader()
|
console.log(err);
|
||||||
})
|
})
|
||||||
}
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const transferToPage = (path?: string) => {
|
const transferToPage = (path?: string) => {
|
||||||
router.push(`${path}`)
|
router.push(`${path}`);
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
|
<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="col-12 row" v-if="!$q.screen.gt.xs">
|
||||||
<div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
|
<div class="text-white text-weight-light text-18px">
|
||||||
<div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
|
สวัสดี, {{ fullname }}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 col-sm-12 col-md-9">
|
<div style="color: #ffffff" class="text-18px text-weight-medium col-12">
|
||||||
<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">
|
</div>
|
||||||
<q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-xs-12 col-sm-12 col-md-9">
|
||||||
<q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
|
<div class="row justify-start q-col-gutter-md">
|
||||||
<q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
|
<div
|
||||||
</q-avatar>
|
class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
|
||||||
</div>
|
v-for="(item, j) in items"
|
||||||
<div class="q-pt-md col-12 text-left text-18px">
|
:key="j"
|
||||||
{{ item.title }}
|
>
|
||||||
</div>
|
<q-card
|
||||||
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">
|
bordered
|
||||||
{{ item.sub }}
|
@click="transferToPage(item.path)"
|
||||||
</div>
|
class="noactive col-12"
|
||||||
</q-card>
|
>
|
||||||
</div>
|
<div class="col-12">
|
||||||
</div>
|
<q-avatar
|
||||||
</div>
|
:color="item.color"
|
||||||
<div class="col-xs-12 col-sm-12 col-md-3 row">
|
text-color="white"
|
||||||
<q-card flat bordered :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: auto;'" class="q-pb-md col-12">
|
:size="$q.screen.gt.xs ? '55px' : '40px'"
|
||||||
<div class="col-12 row q-pa-md">
|
>
|
||||||
<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
|
<q-icon
|
||||||
<q-space />
|
:name="item.icon"
|
||||||
<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
|
:size="$q.screen.gt.xs ? '28px' : '20px'"
|
||||||
</div>
|
color="black"
|
||||||
<q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
|
/>
|
||||||
<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
|
</q-avatar>
|
||||||
<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
|
</div>
|
||||||
<q-item-section>
|
<div class="q-pt-md col-12 text-left text-18px">
|
||||||
<q-item-label>{{ contact.sender }}</q-item-label>
|
{{ item.title }}
|
||||||
<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
|
</div>
|
||||||
</q-item-section>
|
<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: auto;'"
|
||||||
|
class="q-pb-md col-12"
|
||||||
|
>
|
||||||
|
<div class="col-12 row q-pa-md">
|
||||||
|
<div class="text-subtitle1 text-weight-bold text-dark">
|
||||||
|
กล่องข้อความ
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
icon="mdi-dots-vertical"
|
||||||
|
color="grey-6"
|
||||||
|
size="11px"
|
||||||
|
flat
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
|
||||||
|
<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"
|
||||||
|
@click="link = contact.no"
|
||||||
|
active-class="my-menu-link"
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>{{ contact.sender }}</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-section side top>
|
||||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-scroll-area>
|
</q-scroll-area>
|
||||||
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
|
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
|
||||||
<div class="text-yellow-10">
|
<div class="text-yellow-10">
|
||||||
<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
|
<q-icon
|
||||||
ไม่พบข้อความ
|
name="mdi-alert-box"
|
||||||
</div>
|
class="q-mx-xs"
|
||||||
</q-banner>
|
size="sm"
|
||||||
</q-card>
|
color="yellow-10"
|
||||||
</div>
|
/>
|
||||||
</div>
|
ไม่พบข้อความ
|
||||||
|
</div>
|
||||||
|
</q-banner>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
.my-menu-link {
|
.my-menu-link {
|
||||||
color: #1bb19b;
|
color: #1bb19b;
|
||||||
background: #ebf9f7 !important;
|
background: #ebf9f7 !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.my-menu-link .q-hoverable {
|
.my-menu-link .q-hoverable {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.my-menu {
|
.my-menu {
|
||||||
background: #f1f0f04a;
|
background: #f1f0f04a;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.q-card {
|
.q-card {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
.text-18px {
|
.text-18px {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
.noactive {
|
.noactive {
|
||||||
color: #35473c;
|
color: #35473c;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 10%;
|
padding: 10%;
|
||||||
transition: 0.1s ease;
|
transition: 0.1s ease;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.noactive:hover {
|
.noactive:hover {
|
||||||
background: #ebf9f7;
|
background: #ebf9f7;
|
||||||
color: #1bb19b !important;
|
color: #1bb19b !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: 1px solid #6dbdb142;
|
border: 1px solid #6dbdb142;
|
||||||
}
|
}
|
||||||
.disabledcard {
|
.disabledcard {
|
||||||
color: rgba(209, 209, 209, 0.733) !important;
|
color: rgba(209, 209, 209, 0.733) !important;
|
||||||
border-color: rgba(207, 207, 207, 0.322) !important;
|
border-color: rgba(207, 207, 207, 0.322) !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
cursor: no-drop !important;
|
cursor: no-drop !important;
|
||||||
padding: 10%;
|
padding: 10%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue