390 lines
11 KiB
Vue
390 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
|
|
import type {
|
|
ResponseInbox,
|
|
DataInbox,
|
|
} from "@/interface/response/dashboard/dashboard";
|
|
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
success,
|
|
messageError,
|
|
date2Thai,
|
|
dialogRemove,
|
|
} = mixin;
|
|
|
|
const splitterModel = ref<number>(30);
|
|
const link = ref<string>("0");
|
|
const inboxList = ref<DataInbox[]>([]);
|
|
const data = ref<DataInbox[]>([]);
|
|
|
|
onMounted(async () => {
|
|
await getData(1);
|
|
});
|
|
|
|
const isLoadInbox = ref<boolean>(false);
|
|
const getData = async (index: number) => {
|
|
isLoadInbox.value = false;
|
|
index === 1 && showLoader();
|
|
index != 0 &&
|
|
(await http
|
|
.get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
|
|
.then((res: any) => {
|
|
const data = res.data.result.data;
|
|
totalInbox.value = res.data.result.total;
|
|
|
|
let list: DataInbox[] = [];
|
|
data.map((e: ResponseInbox) => {
|
|
list.push({
|
|
no: e.id ?? "",
|
|
sender:
|
|
e.createdFullName == "" || e.createdFullName == null
|
|
? "เจ้าหน้าที่"
|
|
: e.createdFullName,
|
|
subject: e.subject ?? "",
|
|
timereceive: new Date(e.receiveDate),
|
|
body: e.body ?? "",
|
|
payload: e.payload,
|
|
ratingModel: 0,
|
|
isOpen: e.isOpen,
|
|
});
|
|
});
|
|
inboxList.value.push(...list);
|
|
|
|
if (inboxList.value.length > 0 && index === 1) {
|
|
selectInbox(inboxList.value[0].no);
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
isLoadInbox.value = true;
|
|
hideLoader();
|
|
}));
|
|
};
|
|
|
|
const selectInbox = (id: string) => {
|
|
http
|
|
.get(config.API.msgInboxDelete(id))
|
|
.then(() => {
|
|
link.value = id;
|
|
data.value = inboxList.value.filter((r) => r.no == id);
|
|
for (const item of data.value) {
|
|
item.isOpen = true;
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
};
|
|
const deleteData = (id: string) => {
|
|
dialogRemove($q, () => removeData(id));
|
|
};
|
|
|
|
//รอ api ลบ
|
|
const removeData = async (id: string) => {
|
|
showLoader();
|
|
await http
|
|
.delete(config.API.msgInboxDelete(id))
|
|
.then((res) => {
|
|
success($q, "ลบข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
// getData();
|
|
hideLoader();
|
|
});
|
|
};
|
|
const fileOpen = (url: string) => {
|
|
window.open(url, "_blank");
|
|
};
|
|
|
|
// Dialog Reply
|
|
const modalReply = ref<boolean>(false);
|
|
function dialogRepleOpen() {
|
|
modalReply.value = true;
|
|
}
|
|
|
|
function modalReplyClose() {
|
|
modalReply.value = false;
|
|
}
|
|
|
|
const scrollTargetRef = ref<any>(null);
|
|
const totalInbox = ref<number>(0);
|
|
function onLoad(index: number, done: any) {
|
|
const num = index === 1 ? 0 : index++;
|
|
if (inboxList.value.length < totalInbox.value && isLoadInbox) {
|
|
setTimeout(() => {
|
|
getData(num);
|
|
done();
|
|
}, 3000);
|
|
}
|
|
}
|
|
const thaiOptions: Intl.DateTimeFormatOptions = {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
};
|
|
</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%;'"
|
|
>
|
|
<template v-slot:before>
|
|
<q-card
|
|
flat
|
|
bordered
|
|
:style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
|
|
>
|
|
<div class="q-px-md q-py-sm row col-12 items-center">
|
|
<div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
|
|
<q-space />
|
|
<div class="text-grey-5" style="font-size: 12px;">ทั้งหมด {{ totalInbox }} ข้อความ</div>
|
|
</div>
|
|
<q-separator />
|
|
|
|
<div
|
|
v-if="totalInbox != 0"
|
|
ref="scrollTargetRef"
|
|
style="max-height: 90%; overflow: auto"
|
|
>
|
|
<q-infinite-scroll
|
|
@load="onLoad"
|
|
:offset="250"
|
|
class="q-pa-sm"
|
|
:scroll-target="scrollTargetRef"
|
|
>
|
|
<q-list
|
|
v-for="(contact, index) in inboxList"
|
|
:key="contact.no"
|
|
>
|
|
<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) }}
|
|
{{
|
|
new Date(contact.timereceive).toLocaleTimeString(
|
|
"th-TH",
|
|
thaiOptions
|
|
)
|
|
}}
|
|
น. <q-space />
|
|
</q-item-label>
|
|
<q-item-label
|
|
:class="!contact.isOpen ? 'text-weight-medium' : ''"
|
|
>{{ contact.sender }}</q-item-label
|
|
>
|
|
<q-item-label
|
|
:class="
|
|
!contact.isOpen ? 'text-weight-medium text-black' : ''
|
|
"
|
|
caption
|
|
lines="2"
|
|
>{{ contact.subject }}</q-item-label
|
|
>
|
|
</q-item-section>
|
|
<q-item-section side top>
|
|
<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-list>
|
|
|
|
<template v-slot:loading v-if="inboxList.length < totalInbox">
|
|
<div class="row justify-center q-my-md">
|
|
<q-spinner-dots color="primary" size="40px" />
|
|
</div>
|
|
</template>
|
|
</q-infinite-scroll>
|
|
</div>
|
|
</q-card>
|
|
</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;'"
|
|
>
|
|
<div class="col-12" v-for="(d, index) in data" :key="index">
|
|
<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-icon name="mdi-account" size="28px" />
|
|
</q-avatar>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<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-section>
|
|
|
|
<q-item-section side top>
|
|
<q-item-label caption>{{
|
|
date2Thai(d.timereceive)
|
|
}}</q-item-label>
|
|
<div class="text-grey-8 q-gutter-xs q-pt-sm">
|
|
<!-- Reply -->
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-reply"
|
|
size="10px"
|
|
color="grey-7"
|
|
@click="dialogRepleOpen()"
|
|
>
|
|
<q-tooltip>ตอบกลับข้อความ</q-tooltip>
|
|
</q-btn>
|
|
|
|
<PopupReplyInbox
|
|
:modal="modalReply"
|
|
:idInbox="d.no"
|
|
:click-close="modalReplyClose"
|
|
/>
|
|
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-trash-can"
|
|
size="10px"
|
|
color="red"
|
|
@click="deleteData(d.no)"
|
|
/>
|
|
<!-- <q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-dots-vertical"
|
|
size="10px"
|
|
color="grey-7"
|
|
/> -->
|
|
</div>
|
|
</q-item-section>
|
|
</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
|
|
>
|
|
|
|
<div :class="$q.screen.gt.xs ? 'absolute-bottom q-mb-md' : ''">
|
|
<div class="row col-12 self-center q-px-md q-pt-md">
|
|
<div v-if="d.payload !== null" class="row self-center pointer">
|
|
<q-icon name="mdi-paperclip" color="grey" size="xs" />
|
|
<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-list style="min-width: 160px">
|
|
<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>
|
|
<q-separator />
|
|
</div>
|
|
</q-list>
|
|
</q-menu>
|
|
</div>
|
|
|
|
<!-- <q-btn
|
|
unelevated
|
|
size="12px"
|
|
dense
|
|
class="q-ml-md q-px-sm bg-blue-1 text-blue-7"
|
|
label="ดาวน์โหลดทั้งหมด"
|
|
/> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
</q-splitter>
|
|
</template>
|
|
|
|
<style>
|
|
.my-menu-link {
|
|
background: #ebf9f7 !important;
|
|
border-radius: 5px;
|
|
border: 1px solid #1bb19ab8;
|
|
color: #1bb19ab8 !important;
|
|
}
|
|
|
|
.my-menu-link .q-hoverable {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.mytry {
|
|
font-size: 0.75rem;
|
|
padding: 12px;
|
|
}
|
|
|
|
.mytry:hover {
|
|
border-radius: 5px;
|
|
}
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|