hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

เพิ่ม path ใน Dashboard สร้างเงื่อนไขในบันทึก

Browse source
This commit is contained in:
AnandaTon 2023-10-06 13:33:54 +07:00
parent 0a507ce808
commit d3ddfc38d7
2 changed files with 192 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

419
src/modules/01_dashboard/views/Dashboard.vue
View file

@ -1,273 +1,208 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, Static } from "vue"; import { ref, onMounted, Static } from "vue"
const link = ref<number>(1); const link = ref<number>(1)
import { useQuasar } from "quasar"; import { useQuasar } from "quasar"
import router from "@/router"; import router from "@/router"
import http from "@/plugins/http"; import http from "@/plugins/http"
import config from "@/app.config"; import config from "@/app.config"
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin"
const $q = useQuasar(); const $q = useQuasar()
const mixin = useCounterMixin(); const mixin = useCounterMixin()
const { const { showLoader, hideLoader, date2Thai } = mixin
showLoader,
hideLoader,
date2Thai,
} = mixin;
const fullname = ref<string>("ธัญลักษณ์"); const fullname = ref<string>("ธัญลักษณ์")
const inboxList = ref<any>([ const inboxList = ref<any>([
// { // {
// no: 1, // no: 1,
// sender: "เจ้าหน้าที่ทะเบียนประวัติ", // sender: "เจ้าหน้าที่ทะเบียนประวัติ",
// subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ", // subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
// timereceive: "13/12/2565", // timereceive: "13/12/2565",
// body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล", // body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
// ratingModel: 0, // ratingModel: 0,
// }, // },
]); ])
const items = ref<any>([ const items = ref<any>([
{ {
icon: "mdi-account-group-outline", icon: "mdi-account-group-outline",
title: "แผนผังองค์กร", title: "แผนผังองค์กร",
sub: "ดูแผนผังองค์กร", sub: "ดูแผนผังองค์กร",
color: "blue-3", color: "blue-3",
path: "", path: "",
active: false, active: false,
}, },
{ {
icon: "mdi-clipboard-account-outline", icon: "mdi-clipboard-account-outline",
title: "ประเมินผล", title: "ประเมินผล",
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ", sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
color: "lime-4", color: "lime-4",
path: "", path: "",
active: false, active: false,
}, },
{ {
icon: "mdi-calendar-account-outline", icon: "mdi-calendar-account-outline",
title: "การลา", title: "การลา",
sub: "ดู/ลงเวลา ทำเรื่องลา", sub: "ดู/ลงเวลา ทำเรื่องลา",
color: "cyan-3", color: "cyan-3",
path: "", path: "/leave",
active: false, active: false,
}, },
{ {
icon: "mdi-folder-account-outline", icon: "mdi-folder-account-outline",
title: "ผลงาน", title: "ผลงาน",
sub: "ดูผลงาน", sub: "ดูผลงาน",
color: "light-green-3", color: "light-green-3",
path: "", path: "",
active: false, active: false,
}, },
{ {
icon: "mdi-account-arrow-right-outline", icon: "mdi-account-arrow-right-outline",
title: "ขอโอน", title: "ขอโอน",
sub: "ทำเรื่องขอโอนย้าย", sub: "ทำเรื่องขอโอนย้าย",
color: "deep-purple-3", color: "deep-purple-3",
path: "/transfer", path: "/transfer",
active: false, active: false,
}, },
{ {
icon: "mdi-account-remove-outline", icon: "mdi-account-remove-outline",
title: "ลาออก", title: "ลาออก",
sub: "ทำเรื่องลาออก", sub: "ทำเรื่องลาออก",
color: "orange-3", color: "orange-3",
path: "/retire", path: "/retire",
active: false, active: false,
}, },
]); ])
onMounted(async () => { onMounted(async () => {
await fetchlistInbox(); await fetchlistInbox()
}); })
const fetchlistInbox = async () => { const fetchlistInbox = async () => {
showLoader(); showLoader()
await http await http
.get(config.API.msgInbox) .get(config.API.msgInbox)
.then((res) => { .then(res => {
let data = res.data.result; let data = res.data.result
console.log(data); console.log(data)
let listItem: any = []; let listItem: any = []
data.map((e: any) => { data.map((e: any) => {
listItem.push({ listItem.push({
no: e.id ?? "", no: e.id ?? "",
sender: sender: e.createdFullName == "" || e.createdFullName == null ? "เจ้าหน้าที่" : e.createdFullName,
e.createdFullName == "" || e.createdFullName == null subject: e.subject ?? "",
? "เจ้าหน้าที่" timereceive: date2Thai(e.createdAt),
: e.createdFullName, body: e.body ?? "",
subject: e.subject ?? "", ratingModel: 0,
timereceive: date2Thai(e.createdAt), })
body: e.body ?? "", })
ratingModel: 0, inboxList.value = listItem
}); })
}); .catch(err => {
inboxList.value = listItem; console.log(err)
}) })
.catch((err) => { .finally(() => {
console.log(err); hideLoader()
}) })
.finally(() => { }
hideLoader();
});
};
const transferToPage = (path?: string) => { const transferToPage = (path?: string) => {
router.push(`${path}`); router.push(`${path}`)
}; }
</script> </script>
<template> <template>
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%"> <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="col-12 row" v-if="!$q.screen.gt.xs">
<div class="text-white text-weight-light text-18px"> <div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
สวัสดี, {{ fullname }} <div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
</div> </div>
<div style="color: #ffffff" class="text-18px text-weight-medium col-12"> <div class="col-xs-12 col-sm-12 col-md-9">
ระบบทรัพยากรบุคคล <div class="row justify-start q-col-gutter-md">
</div> <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">
</div> <q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
<div class="col-xs-12 col-sm-12 col-md-9"> <div class="col-12">
<div class="row justify-start q-col-gutter-md"> <q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
<div <q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" </q-avatar>
v-for="(item, j) in items" </div>
:key="j" <div class="q-pt-md col-12 text-left text-18px">
> {{ item.title }}
<q-card </div>
bordered <div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">
@click="transferToPage(item.path)" {{ item.sub }}
class="noactive col-12" </div>
> </q-card>
<div class="col-12"> </div>
<q-avatar </div>
:color="item.color" </div>
text-color="white" <div class="col-xs-12 col-sm-12 col-md-3 row">
:size="$q.screen.gt.xs ? '55px' : '40px'" <q-card flat bordered :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: auto;'" class="q-pb-md col-12">
> <div class="col-12 row q-pa-md">
<q-icon <div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
:name="item.icon" <q-space />
:size="$q.screen.gt.xs ? '28px' : '20px'" <q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
color="black" </div>
/> <q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
</q-avatar> <q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
</div> <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">
<div class="q-pt-md col-12 text-left text-18px"> <q-item-section>
{{ item.title }} <q-item-label>{{ contact.sender }}</q-item-label>
</div> <q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
<div </q-item-section>
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: 74vh' : '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-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
<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-section side top>
<q-item-label caption>{{ contact.timereceive }}</q-item-label> <q-item-label caption>{{ contact.timereceive }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-scroll-area> </q-scroll-area>
<q-banner <q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
rounded <div class="text-yellow-10">
class="bg-amber-1 text-center q-mx-sm" <q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
v-else ไม่พบข้อความ
> </div>
<div class="text-yellow-10"> </q-banner>
<q-icon </q-card>
name="mdi-alert-box" </div>
class="q-mx-xs" </div>
size="sm"
color="yellow-10"
/>
ไม่พบข้อความ
</div>
</q-banner>
</q-card>
</div>
</div>
</template> </template>
<style> <style>
.my-menu-link { .my-menu-link {
color: #1bb19b; color: #1bb19b;
background: #ebf9f7 !important; background: #ebf9f7 !important;
font-weight: 600; font-weight: 600;
border-radius: 10px; border-radius: 10px;
} }
.my-menu-link .q-hoverable { .my-menu-link .q-hoverable {
border-radius: 10px; border-radius: 10px;
} }
.my-menu { .my-menu {
background: #f1f0f04a; background: #f1f0f04a;
border-radius: 10px; border-radius: 10px;
} }
.q-card { .q-card {
border-radius: 12px; border-radius: 12px;
} }
.text-18px { .text-18px {
font-size: 1.25em; font-size: 1.25em;
} }
.noactive { .noactive {
color: #35473c; color: #35473c;
border-radius: 12px; border-radius: 12px;
padding: 10%; padding: 10%;
transition: 0.1s ease; transition: 0.1s ease;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
.noactive:hover { .noactive:hover {
background: #ebf9f7; background: #ebf9f7;
color: #1bb19b !important; color: #1bb19b !important;
font-weight: 600; font-weight: 600;
border: 1px solid #6dbdb142; border: 1px solid #6dbdb142;
} }
.disabledcard { .disabledcard {
color: rgba(209, 209, 209, 0.733) !important; color: rgba(209, 209, 209, 0.733) !important;
border-color: rgba(207, 207, 207, 0.322) !important; border-color: rgba(207, 207, 207, 0.322) !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 12px; border-radius: 12px;
cursor: no-drop !important; cursor: no-drop !important;
padding: 10%; padding: 10%;
} }
</style> </style>

24
src/modules/05_leave/componenst/addAbsence.vue
View file

@ -108,19 +108,25 @@ const saveAbsence = () => {
}) })
.onOk(() => { .onOk(() => {
// createFormresign() // createFormresign()
if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
console.log(1)
} else if (model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
console.log(2)
}
router.push(`/leave`)
}) })
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}) .onDismiss(() => {})
} }
const saveData = () => { // const saveData = () => {
if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") { // if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
console.log(1) // console.log(1)
} else if (model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") { // } else if (model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
console.log(2) // console.log(2)
} // }
router.push(`/leave`) // router.push(`/leave`)
} // }
</script> </script>
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
@ -382,7 +388,7 @@ const saveData = () => {
<q-separator /> <q-separator />
<div class="row col-12 q-pa-md"> <div class="row col-12 q-pa-md">
<q-space /> <q-space />
<q-btn unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="saveData" /> <q-btn unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="saveAbsence" />
</div> </div>
</q-card> </q-card>
</q-form> </q-form>