326 lines
9.5 KiB
Vue
326 lines
9.5 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 type {
|
|
ResponseInbox,
|
|
DataInbox,
|
|
} from "@/interface/response/dashboard/dashboard";
|
|
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
dialogMessage,
|
|
success,
|
|
messageError,
|
|
date2Thai,
|
|
} = mixin;
|
|
|
|
const iteminbox = ref<any>([]);
|
|
const splitterModel = ref<number>(30);
|
|
const link = ref<string>("0");
|
|
const inboxList = ref<DataInbox[]>([
|
|
{
|
|
no: "1",
|
|
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
|
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
|
timereceive: new Date(),
|
|
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
|
ratingModel: 0,
|
|
},
|
|
{
|
|
no: "2",
|
|
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
|
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
|
timereceive: new Date(),
|
|
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
|
ratingModel: 0,
|
|
},
|
|
]);
|
|
const data = ref<DataInbox[]>([
|
|
// {
|
|
// no: "1",
|
|
// sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
|
// subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
|
// timereceive: new Date(),
|
|
// body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
|
// ratingModel: 0,
|
|
// },
|
|
]);
|
|
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();
|
|
});
|
|
|
|
const getData = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.msgInbox)
|
|
.then((res: any) => {
|
|
const response = res.data.result;
|
|
// console.log(response);
|
|
let list: DataInbox[] = [];
|
|
response.map((e: ResponseInbox) => {
|
|
list.push({
|
|
no: e.id ?? "",
|
|
sender:
|
|
e.createdFullName == "" || e.createdFullName == null
|
|
? "เจ้าหน้าที่"
|
|
: e.createdFullName,
|
|
subject: e.subject ?? "",
|
|
timereceive: new Date(e.createdAt),
|
|
body: e.body ?? "",
|
|
ratingModel: 0,
|
|
});
|
|
});
|
|
inboxList.value = list;
|
|
})
|
|
.catch((e) => {
|
|
// messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const selectInbox = (id: string) => {
|
|
link.value = id;
|
|
data.value = inboxList.value.filter((r) => r.no == id);
|
|
};
|
|
</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="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="index"
|
|
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)
|
|
}}</q-item-label>
|
|
<q-item-label class="text-weight-medium">{{
|
|
contact.sender
|
|
}}</q-item-label>
|
|
<q-item-label caption lines="2">{{
|
|
contact.subject
|
|
}}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side top>
|
|
<q-rating
|
|
v-model="contact.ratingModel"
|
|
size="1.4em"
|
|
:max="1"
|
|
color="grey"
|
|
color-selected="yellow-13"
|
|
/>
|
|
<q-icon
|
|
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>
|
|
|
|
<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"
|
|
/>
|
|
ไม่พบข้อความ
|
|
</div>
|
|
</q-banner>
|
|
</q-scroll-area>
|
|
</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="eow 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">
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-reply"
|
|
size="10px"
|
|
color="grey-7"
|
|
/>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-trash-can"
|
|
size="10px"
|
|
color="grey-7"
|
|
/>
|
|
<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 class="row self-center">
|
|
<q-icon name="mdi-paperclip" color="grey" size="xs" />
|
|
<div class="text-grey-8 q-pl-sm text-weight-light">
|
|
เอกสารแนบ (10 MB)
|
|
</div>
|
|
</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;
|
|
}
|
|
</style>
|