เพิ่ม ui ลาออก
This commit is contained in:
AnandaTon
parent
1b40d859e5
commit
bd6ccdbb3f
11 changed files with 8937 additions and 13229 deletions
|
|
@ -1,196 +1,175 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, Static } from "vue";
|
||||
const link = ref<number>(1);
|
||||
import { useQuasar } from "quasar";
|
||||
import router from "@/router";
|
||||
import { ref, Static } from "vue"
|
||||
const link = ref<number>(1)
|
||||
import { useQuasar } from "quasar"
|
||||
import router from "@/router"
|
||||
|
||||
const $q = useQuasar();
|
||||
const fullname = ref<string>("ธัญลักษณ์");
|
||||
const $q = useQuasar()
|
||||
const fullname = ref<string>("ธัญลักษณ์")
|
||||
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,
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
]);
|
||||
{
|
||||
no: 1,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 1,
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
timereceive: "13/12/2565",
|
||||
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
ratingModel: 0,
|
||||
},
|
||||
])
|
||||
const items = ref<any>([
|
||||
{
|
||||
icon: "mdi-account-group-outline",
|
||||
title: "แผนผังองค์กร",
|
||||
sub: "ดูแผนผังองค์กร",
|
||||
color: "blue-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-clipboard-account-outline",
|
||||
title: "ประเมินผล",
|
||||
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
||||
color: "lime-4",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-calendar-account-outline",
|
||||
title: "การลา",
|
||||
sub:"ดู/ลงเวลา ทำเรื่องลา",
|
||||
color: "cyan-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-folder-account-outline",
|
||||
title: "ผลงาน",
|
||||
sub:"ดูผลงาน",
|
||||
color: "light-green-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-arrow-right-outline",
|
||||
title: "ขอโอน",
|
||||
sub:"ทำเรื่องขอโอนย้าย",
|
||||
color: "deep-purple-3",
|
||||
path: "/transfer",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-remove-outline",
|
||||
title: "ลาออก",
|
||||
sub:"ทำเรื่องลาออก",
|
||||
color: "orange-3",
|
||||
path: "",
|
||||
active: false,
|
||||
}
|
||||
]);
|
||||
{
|
||||
icon: "mdi-account-group-outline",
|
||||
title: "แผนผังองค์กร",
|
||||
sub: "ดูแผนผังองค์กร",
|
||||
color: "blue-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-clipboard-account-outline",
|
||||
title: "ประเมินผล",
|
||||
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
|
||||
color: "lime-4",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-calendar-account-outline",
|
||||
title: "การลา",
|
||||
sub: "ดู/ลงเวลา ทำเรื่องลา",
|
||||
color: "cyan-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-folder-account-outline",
|
||||
title: "ผลงาน",
|
||||
sub: "ดูผลงาน",
|
||||
color: "light-green-3",
|
||||
path: "",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-arrow-right-outline",
|
||||
title: "ขอโอน",
|
||||
sub: "ทำเรื่องขอโอนย้าย",
|
||||
color: "deep-purple-3",
|
||||
path: "/transfer",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-account-remove-outline",
|
||||
title: "ลาออก",
|
||||
sub: "ทำเรื่องลาออก",
|
||||
color: "orange-3",
|
||||
path: "/leave",
|
||||
active: false,
|
||||
},
|
||||
])
|
||||
|
||||
const transferToPage = (path?: string) => {
|
||||
router.push(`${path}`);
|
||||
};
|
||||
router.push(`${path}`)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%;">
|
||||
<div class="col-12 row" v-if="!$q.screen.gt.xs">
|
||||
<div class="text-white text-weight-light text-18px">สวัสดี, {{fullname}}</div>
|
||||
<div
|
||||
style="color: #ffffff;"
|
||||
class="text-18px text-weight-medium col-12"
|
||||
>
|
||||
ระบบทรัพยากรบุคคล
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-9">
|
||||
<div class="row justify-start q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
|
||||
<q-card
|
||||
bordered
|
||||
@click="transferToPage(item.path)"
|
||||
class="noactive col-12">
|
||||
<div class="col-12">
|
||||
<q-avatar
|
||||
:color="item.color"
|
||||
text-color="white"
|
||||
:size="$q.screen.gt.xs ? '55px': '40px'"
|
||||
>
|
||||
<q-icon
|
||||
:name="item.icon"
|
||||
:size="$q.screen.gt.xs ? '28px': '20px'"
|
||||
color="black"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div class="q-pt-md col-12 text-left text-18px" >{{ item.title }}</div>
|
||||
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px;">{{ item.sub }}</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-3 row">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
:style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'"
|
||||
class="q-pb-md col-12"
|
||||
>
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
|
||||
<q-space />
|
||||
<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
|
||||
</div>
|
||||
<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
|
||||
<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
|
||||
<q-item-section>
|
||||
<q-item-label >{{ contact.sender }}</q-item-label>
|
||||
<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
|
||||
</q-item-section>
|
||||
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
|
||||
<div class="col-12 row" v-if="!$q.screen.gt.xs">
|
||||
<div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
|
||||
<div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-9">
|
||||
<div class="row justify-start q-col-gutter-md">
|
||||
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
|
||||
<q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
|
||||
<div class="col-12">
|
||||
<q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
|
||||
<q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div class="q-pt-md col-12 text-left text-18px">{{ item.title }}</div>
|
||||
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">{{ item.sub }}</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-3 row">
|
||||
<q-card flat bordered :style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'" class="q-pb-md col-12">
|
||||
<div class="col-12 row q-pa-md">
|
||||
<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
|
||||
<q-space />
|
||||
<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
|
||||
</div>
|
||||
<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
|
||||
<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
|
||||
<q-item-section>
|
||||
<q-item-label>{{ contact.sender }}</q-item-label>
|
||||
<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-banner rounded class="bg-amber-1 text-center q-mx-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-card>
|
||||
</div>
|
||||
</div>
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-banner rounded class="bg-amber-1 text-center q-mx-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-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.my-menu-link {
|
||||
color: #1bb19b;
|
||||
color: #1bb19b;
|
||||
background: #ebf9f7 !important;
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.my-menu-link .q-hoverable {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.my-menu{
|
||||
background: #f1f0f04a ;
|
||||
border-radius: 10px;
|
||||
.my-menu {
|
||||
background: #f1f0f04a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.q-card{
|
||||
border-radius: 12px;
|
||||
.q-card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.text-18px{
|
||||
font-size: 1.25em;
|
||||
.text-18px {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.noactive {
|
||||
color: #35473C ;
|
||||
color: #35473c;
|
||||
border-radius: 12px;
|
||||
padding: 10%;
|
||||
transition: 0.1s ease;
|
||||
opacity:1;
|
||||
cursor: pointer;
|
||||
padding: 10%;
|
||||
transition: 0.1s ease;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.noactive:hover{
|
||||
background: #ebf9f7 ;
|
||||
color: #1bb19b !important;
|
||||
font-weight: 600 ;
|
||||
border: 1px solid #6dbdb142;
|
||||
.noactive:hover {
|
||||
background: #ebf9f7;
|
||||
color: #1bb19b !important;
|
||||
font-weight: 600;
|
||||
border: 1px solid #6dbdb142;
|
||||
}
|
||||
.disabledcard {
|
||||
color: rgba(209, 209, 209, 0.733) !important;
|
||||
|
|
@ -198,6 +177,6 @@ const transferToPage = (path?: string) => {
|
|||
box-shadow: none !important;
|
||||
border-radius: 12px;
|
||||
cursor: no-drop !important;
|
||||
padding: 10%;
|
||||
padding: 10%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue