284 lines
8.8 KiB
Vue
284 lines
8.8 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,
|
|
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();
|
|
});
|
|
|
|
const getData = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.msgInbox)
|
|
.then((res: any) => {
|
|
const data = res.data.result;
|
|
console.log(data);
|
|
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,
|
|
});
|
|
});
|
|
inboxList.value = list;
|
|
console.log("🚀 ~ file: Dashboard.vue:82 ~ .then ~ inboxList:", inboxList.value)
|
|
}
|
|
)
|
|
|
|
.catch((e) => {
|
|
// messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const selectInbox = (id: string) => {
|
|
link.value = id;
|
|
data.value = inboxList.value.filter((r) => r.no == id);
|
|
};
|
|
const deleteData = (id: string) => {
|
|
dialogRemove($q, () => removeData(id));
|
|
};
|
|
|
|
//รอ api ลบ
|
|
const removeData = async (id: string) => {
|
|
console.log("delete=", id);
|
|
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');
|
|
}
|
|
</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="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)
|
|
}}</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 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>
|
|
|
|
<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="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-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="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>
|