active Dashbord
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
f9355e5e27
commit
33c2b338a2
1 changed files with 102 additions and 54 deletions
|
|
@ -16,40 +16,16 @@ const mixin = useCounterMixin(); //เรียกฟังก์ชันกล
|
|||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogMessage,
|
||||
success,
|
||||
messageError,
|
||||
date2Thai,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
|
||||
const iteminbox = ref<any>([]);
|
||||
const splitterModel = ref<number>(30);
|
||||
const link = ref<string>("0");
|
||||
const inboxList = ref<DataInbox[]>([]);
|
||||
const data = ref<DataInbox[]>([]);
|
||||
const payLoadtext = ref<string>();
|
||||
const btnReply = ref<boolean>(true);
|
||||
const listpayload = ref<any>([]);
|
||||
const listpayloadNolink = ref<any>([]);
|
||||
const smgreplaytitle = ref<string>("");
|
||||
const smgreplay = ref<string>("");
|
||||
const userName = ref<any>(localStorage.getItem("userName"));
|
||||
const thumbStyle = ref<any>({
|
||||
right: "4px",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#a8bbbf",
|
||||
width: "5px",
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
const barStyle = ref<any>({
|
||||
right: "2px",
|
||||
borderRadius: "9px",
|
||||
backgroundColor: "#d6dee1",
|
||||
width: "9px",
|
||||
opacity: 0.2,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
|
|
@ -78,12 +54,12 @@ const getData = async () => {
|
|||
});
|
||||
});
|
||||
inboxList.value = list;
|
||||
console.log("🚀 ~ file: Dashboard.vue:82 ~ .then ~ inboxList:", inboxList.value)
|
||||
}
|
||||
)
|
||||
|
||||
if (inboxList.value) {
|
||||
selectInbox(inboxList.value[0].no);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -116,27 +92,48 @@ const removeData = async (id: string) => {
|
|||
});
|
||||
};
|
||||
const fileOpen = (url: string) => {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- page:หน้าแรก -->
|
||||
<template>
|
||||
<div class="toptitle text-dark">หน้าแรก</div>
|
||||
<q-splitter v-model="splitterModel" :horizontal="$q.screen.lt.sm" separator-class="bg-grey-2 row"
|
||||
separator-style="width: 12px" class="text-dark" :style="$q.screen.gt.xs ? 'height: 80vh' : 'height:100%;'">
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
:horizontal="$q.screen.lt.sm"
|
||||
separator-class="bg-grey-2 row"
|
||||
separator-style="width: 12px"
|
||||
class="text-dark"
|
||||
:style="$q.screen.gt.xs ? 'height: 80vh' : 'height:100%;'"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<q-card flat bordered :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
:style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
|
||||
>
|
||||
<div class="col-12 q-py-sm q-px-md bg-grey-1">
|
||||
<div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-scroll-area :style="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
|
||||
class="bg-white rounded-borders q-px-md row col-12">
|
||||
<q-list v-for="(contact, index) in inboxList" :key="contact.no" class="q-pt-sm">
|
||||
|
||||
<q-item clickable v-ripple class="mytry" :active="link === contact.no" active-class="my-menu-link"
|
||||
@click="selectInbox(contact.no)">
|
||||
<q-scroll-area
|
||||
:style="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
|
||||
class="bg-white rounded-borders q-px-md row col-12"
|
||||
>
|
||||
<q-list
|
||||
v-for="(contact, index) in inboxList"
|
||||
:key="contact.no"
|
||||
class="q-pt-sm"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="mytry"
|
||||
:active="link === contact.no"
|
||||
active-class="my-menu-link"
|
||||
@click="selectInbox(contact.no)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label caption class="text-weight-light">{{
|
||||
date2Thai(contact.timereceive)
|
||||
|
|
@ -157,15 +154,34 @@ const fileOpen = (url: string) => {
|
|||
color-selected="yellow-13"
|
||||
/> -->
|
||||
|
||||
<q-icon v-if="contact.payload !== null" class="q-mt-md" name="mdi-paperclip" color="grey-5" size="xs" />
|
||||
<q-icon
|
||||
v-if="contact.payload !== null"
|
||||
class="q-mt-md"
|
||||
name="mdi-paperclip"
|
||||
color="grey-5"
|
||||
size="xs"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator v-if="index + 1 < inboxList.length" :key="index" color="grey-3 q-mt-sm" />
|
||||
<q-separator
|
||||
v-if="index + 1 < inboxList.length"
|
||||
:key="index"
|
||||
color="grey-3 q-mt-sm"
|
||||
/>
|
||||
</q-list>
|
||||
|
||||
<q-banner rounded class="bg-amber-1 text-center q-mt-sm" v-if="inboxList.length < 1">
|
||||
<q-banner
|
||||
rounded
|
||||
class="bg-amber-1 text-center q-mt-sm"
|
||||
v-if="inboxList.length < 1"
|
||||
>
|
||||
<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"
|
||||
class="q-mx-xs"
|
||||
size="sm"
|
||||
color="yellow-10"
|
||||
/>
|
||||
ไม่พบข้อความ
|
||||
</div>
|
||||
</q-banner>
|
||||
|
|
@ -174,13 +190,23 @@ const fileOpen = (url: string) => {
|
|||
</template>
|
||||
|
||||
<template v-slot:after>
|
||||
<q-card v-if="data != null" class="q-pa-none rounded-borders" flat bordered
|
||||
:style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'">
|
||||
<q-card
|
||||
v-if="data != null"
|
||||
class="q-pa-none rounded-borders"
|
||||
flat
|
||||
bordered
|
||||
:style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
|
||||
>
|
||||
<div class="eow col-12" v-for="(d, index) in data" :key="d.no">
|
||||
<div class="col-12 q-pa-xs">
|
||||
<q-item>
|
||||
<q-item-section top avatar>
|
||||
<q-avatar size="40px" rounded color="primary" class="text-white">
|
||||
<q-avatar
|
||||
size="40px"
|
||||
rounded
|
||||
color="primary"
|
||||
class="text-white"
|
||||
>
|
||||
<q-icon name="mdi-account" size="28px" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
|
@ -189,7 +215,9 @@ const fileOpen = (url: string) => {
|
|||
<q-item-label class="text-weight-medium">{{
|
||||
d.subject
|
||||
}}</q-item-label>
|
||||
<q-item-label caption lines="2">จาก : {{ d.sender }}</q-item-label>
|
||||
<q-item-label caption lines="2"
|
||||
>จาก : {{ d.sender }}</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
|
|
@ -205,7 +233,15 @@ const fileOpen = (url: string) => {
|
|||
size="10px"
|
||||
color="grey-7"
|
||||
/> -->
|
||||
<q-btn flat round dense icon="mdi-trash-can" size="10px" color="red" @click="deleteData(d.no)" />
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="mdi-trash-can"
|
||||
size="10px"
|
||||
color="red"
|
||||
@click="deleteData(d.no)"
|
||||
/>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -219,8 +255,13 @@ const fileOpen = (url: string) => {
|
|||
</q-item>
|
||||
</div>
|
||||
<div flat class="q-mb-md">
|
||||
<q-card flat bordered class="text-dark q-mx-md q-pa-md bg-grey-1"
|
||||
:style="$q.screen.gt.xs ? 'height: 64vh' : ''">{{ d.body }}</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="text-dark q-mx-md q-pa-md bg-grey-1"
|
||||
:style="$q.screen.gt.xs ? 'height: 64vh' : ''"
|
||||
>{{ d.body }}</q-card
|
||||
>
|
||||
|
||||
<div :class="$q.screen.gt.xs ? 'absolute-bottom q-mb-md' : ''">
|
||||
<div class="row col-12 self-center q-px-md q-pt-md">
|
||||
|
|
@ -229,9 +270,17 @@ const fileOpen = (url: string) => {
|
|||
<div class="text-grey-8 q-pl-sm text-weight-light">
|
||||
ดาวน์โหลดเอกสารแนบ
|
||||
</div>
|
||||
<q-menu transition-show="jump-down" transition-hide="jump-up" anchor="top middle" self="bottom middle">
|
||||
<q-menu
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
anchor="top middle"
|
||||
self="bottom middle"
|
||||
>
|
||||
<q-list style="min-width: 160px">
|
||||
<div v-for="(link, num) in d.payload.attachments" :key="num">
|
||||
<div
|
||||
v-for="(link, num) in d.payload.attachments"
|
||||
:key="num"
|
||||
>
|
||||
<q-item clickable @click="fileOpen(link.url)">
|
||||
<q-item-section>{{ link.name }}</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -239,7 +288,6 @@ const fileOpen = (url: string) => {
|
|||
</div>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <q-btn
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue