clone code
This commit is contained in:
Kittapath
parent
c9597d1e38
commit
d57bcd1719
362 changed files with 104804 additions and 0 deletions
259
src/views/Dashboard.vue
Normal file
259
src/views/Dashboard.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const iteminbox = ref<any>([]);
|
||||
const splitterModel = ref<number>(30);
|
||||
const link = ref<number>(1);
|
||||
const inboxList = ref<any>([
|
||||
{
|
||||
no: 1,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 1,
|
||||
},
|
||||
]);
|
||||
const data = ref<any>([
|
||||
{
|
||||
no: 1,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
},
|
||||
]);
|
||||
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,
|
||||
});
|
||||
</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-pt-sm q-px-md">
|
||||
<div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label caption class="text-weight-light">{{
|
||||
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>{{ 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue