138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, watch } from "vue";
|
|
|
|
import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
|
|
|
|
const props = defineProps({
|
|
modal: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
data: {
|
|
type: Object,
|
|
},
|
|
clickClose: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:modal"]);
|
|
|
|
const modal = ref<boolean>(false);
|
|
const detail = reactive<any>({
|
|
no: "",
|
|
body: "",
|
|
ratingModel: 0,
|
|
receiveDate: "",
|
|
sender: "",
|
|
subject: "",
|
|
payload: [],
|
|
});
|
|
|
|
watch(
|
|
() => props.modal,
|
|
() => {
|
|
if (props.modal) {
|
|
const data = props.data;
|
|
if (data) {
|
|
detail.no = data.no;
|
|
detail.body = data.body;
|
|
detail.ratingMode = data.ratingMode;
|
|
detail.receiveDate = data.receiveDate;
|
|
detail.sender = data.sender;
|
|
detail.subject = data.subject;
|
|
detail.payload = data.payload;
|
|
modal.value = props.modal;
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => modal.value,
|
|
() => {
|
|
if (!modal.value) {
|
|
emit("update:modal", modal.value);
|
|
}
|
|
}
|
|
);
|
|
|
|
const modalReply = ref<boolean>(false);
|
|
|
|
function fileOpen(url: string) {
|
|
window.open(url, "_blank");
|
|
}
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="modal">
|
|
<q-card class="my-card" style="width: 700px; max-width: 80vw">
|
|
<!-- title -->
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar>
|
|
<q-icon name="mail_outline" color="teal" size="1.4em" />
|
|
</q-avatar>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-item-label>{{ detail.subject }}</q-item-label>
|
|
|
|
<q-item-label caption>
|
|
วันที่ได้รับ {{ detail.receiveDate }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side top>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-reply"
|
|
color="grey-7"
|
|
@click="(modalReply = true), (modal = false)"
|
|
>
|
|
<q-tooltip>ตอบกลับข้อความ</q-tooltip>
|
|
</q-btn>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
|
|
<!-- body -->
|
|
<q-card-section style="padding: 2px">
|
|
<q-card-section class="col-12">
|
|
{{ detail.body }}
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<!-- file -->
|
|
<q-card-actions v-if="detail.payload">
|
|
<q-btn flat color="grey-5" icon="mdi-paperclip"
|
|
>ดาวน์โหลดเอกสารแนบ
|
|
<q-menu max-width="480px">
|
|
<q-list
|
|
v-for="(item, index) in detail.payload.attachments"
|
|
:key="index"
|
|
>
|
|
<q-item clickable v-close-popup @click.stop="fileOpen(item.url)">
|
|
<q-item-section>{{ item.name }}</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
</q-list>
|
|
</q-menu>
|
|
<q-tooltip>ดาวน์โหลดเอกสารแนบ</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<PopupReplyInbox
|
|
:modal="modalReply"
|
|
:idInbox="detail.no"
|
|
:click-close="() => (modalReply = false)"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped></style>
|