toolbar
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
95b3dc7238
commit
062588d0bd
1 changed files with 115 additions and 6 deletions
|
|
@ -324,7 +324,7 @@ onMounted(async () => {
|
||||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||||
<q-card flat class="row col-12 cardNone">
|
<q-card flat class="row col-12 cardNone">
|
||||||
<div :class="getClass(stetusCheckin)">
|
<div :class="getClass(stetusCheckin)">
|
||||||
<div class="col-2">
|
<q-toolbar class="text-primary">
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="history"
|
icon="history"
|
||||||
unelevated
|
unelevated
|
||||||
|
|
@ -336,12 +336,121 @@ onMounted(async () => {
|
||||||
:class="$q.screen.gt.xs ? 'q-px-md' : ''"
|
:class="$q.screen.gt.xs ? 'q-px-md' : ''"
|
||||||
@click="router.push('/history')"
|
@click="router.push('/history')"
|
||||||
/>
|
/>
|
||||||
</div>
|
<q-toolbar-title>
|
||||||
<span class="text-body1 text-weight-bold col-8 text-center">
|
<span class="text-white text-body1 text-weight-bold text-center">
|
||||||
|
<span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
|
||||||
|
<span v-else>ลงเวลาออกงาน</span>
|
||||||
|
</span>
|
||||||
|
</q-toolbar-title>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
size="13px"
|
||||||
|
class="q-mx-md"
|
||||||
|
:disable="notiList.length === 0"
|
||||||
|
>
|
||||||
|
<q-icon name="notifications" size="24px" color="white" />
|
||||||
|
|
||||||
|
<q-badge
|
||||||
|
rounded
|
||||||
|
v-show="notiList.length > 0"
|
||||||
|
color="negative"
|
||||||
|
text-color="white"
|
||||||
|
floating
|
||||||
|
>{{ notiList.length }}</q-badge
|
||||||
|
>
|
||||||
|
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
|
||||||
|
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||||
|
<div class="text-subtitle1 text-weight-medium">
|
||||||
|
การแจ้งเตือน
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-list
|
||||||
|
style="min-width: 300px"
|
||||||
|
v-for="n in notiList"
|
||||||
|
:key="n.id"
|
||||||
|
>
|
||||||
|
<q-item v-ripple class="mytry q-py-xs" dense>
|
||||||
|
<q-item-section avatar top style="min-width: 40px">
|
||||||
|
<q-avatar color="primary" size="22px" text-color="white">
|
||||||
|
<span class="text-weight-medium text-uppercase">{{
|
||||||
|
n.sender
|
||||||
|
}}</span>
|
||||||
|
</q-avatar>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption class="text-black">{{
|
||||||
|
n.body
|
||||||
|
}}</q-item-label>
|
||||||
|
<q-item-label
|
||||||
|
caption
|
||||||
|
class="row items-center text-grey-7"
|
||||||
|
>{{ date2Thai(n.timereceive) }}</q-item-label
|
||||||
|
>
|
||||||
|
</q-item-section>
|
||||||
|
<q-btn
|
||||||
|
size="sm"
|
||||||
|
unelevated
|
||||||
|
dense
|
||||||
|
icon="mdi-close"
|
||||||
|
class="mybtn q-mx-xs"
|
||||||
|
@click="onClickDelete(n.id)"
|
||||||
|
></q-btn>
|
||||||
|
</q-item>
|
||||||
|
<q-separator color="grey-2" />
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn round dense flat size="13px" class="q-mx-md">
|
||||||
|
<q-icon name="account_circle" size="24px" color="white" />
|
||||||
|
<q-menu>
|
||||||
|
<div class="q-pa-md" style="max-width: 500px">
|
||||||
|
<q-list>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon color="primary" name="account_circle" />
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-item-section>{{ fullName }}</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item class="text-center">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>
|
||||||
|
<q-btn
|
||||||
|
color="primary"
|
||||||
|
label="ออกจากระบบ"
|
||||||
|
push
|
||||||
|
size="sm"
|
||||||
|
@click="onClickLogout"
|
||||||
|
/></q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</q-toolbar>
|
||||||
|
<!-- <div class="col-2">
|
||||||
|
<q-btn
|
||||||
|
icon="history"
|
||||||
|
unelevated
|
||||||
|
rounded
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
color="white"
|
||||||
|
:label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
|
||||||
|
:class="$q.screen.gt.xs ? 'q-px-md' : ''"
|
||||||
|
@click="router.push('/history')"
|
||||||
|
/>
|
||||||
|
</div> -->
|
||||||
|
<!-- <span class="text-body1 text-weight-bold col-6 text-center">
|
||||||
<span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
|
<span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
|
||||||
<span v-else>ลงเวลาออกงาน</span>
|
<span v-else>ลงเวลาออกงาน</span>
|
||||||
</span>
|
</span> -->
|
||||||
<div class="col-2 text-right">
|
<!-- <div class="col-4 text-right">
|
||||||
<q-btn
|
<q-btn
|
||||||
round
|
round
|
||||||
dense
|
dense
|
||||||
|
|
@ -436,7 +545,7 @@ onMounted(async () => {
|
||||||
</q-list>
|
</q-list>
|
||||||
</div> </q-menu
|
</div> </q-menu
|
||||||
></q-btn>
|
></q-btn>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 q-pa-md text-grey-9">
|
<div class="col-12 q-pa-md text-grey-9">
|
||||||
<div class="col-12 row justify-center">
|
<div class="col-12 row justify-center">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue