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

addAbsence Ui

Browse source
This commit is contained in:
AnandaTon 2023-10-05 10:12:10 +07:00
parent 9a55a75706
commit 12b9ad4a0d
3 changed files with 568 additions and 271 deletions
Download patch file Download diff file Expand all files Collapse all files

362
src/modules/05_leave/componenst/addAbsence.vue Normal file
View file

@ -0,0 +1,362 @@
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"
import config from "@/app.config"
import type { QForm } from "quasar"
const mixin = useCounterMixin()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
const router = useRouter()
const route = useRoute()
const myform = ref<QForm | null>(null)
const $q = useQuasar()
const routeName = router.currentRoute.value.name
const id = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const files = ref<any>()
const tranferOrg = ref("")
const dateCommand = ref<Date>(new Date())
const dateLeave = ref<Date>(new Date())
const noteReason = ref("")
const nameFile = ref<string>("")
const model = ref(null)
const modelSpecific = ref(null)
const options = ref([
"ลาป่วย",
"ลากิจส่วนตัว",
"ลาคลอดบุตร",
"ลาไปช่วยเหลือภริยาที่คลอดบุตร",
"ลาพักผ่อน",
"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ",
"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล",
"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน",
"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ",
"ลาติดตามคู่สมรส",
"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ",
])
const optionsSpecific = ref(["ลาไปศึกษา", "ฝึกอบรม", "ปฎิบัติการวิจัย", "ดูงาน"])
const dataDetail = ref<any>({
datetext: "",
activeDate: new Date(),
createdAt: new Date(),
firstName: "",
id: "",
isActive: true,
lastName: "",
location: "",
organizationPositionOld: "",
positionLevelOld: "",
positionNumberOld: "",
positionTypeOld: "",
prefix: "",
profileId: "",
reason: "",
salary: 0,
sendDate: new Date(),
status: "",
statustext: "",
fullname: "",
})
const clickBack = () => {
router.push(`/retire`)
}
const statusOrder = (val: boolean) => {
switch (val) {
case true:
return "ยับยั้งการลาออก"
case false:
return "อนุมัติการลาออก"
}
}
onMounted(() => {
// if (route.params.id !== undefined) {
// id.value = route.params.id.toString()
// fectDataresign(id.value)
// }
})
const saveResing = () => {
$q.dialog({
title: "ยืนยันการยื่นข้อมูลลาออก",
message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(() => {
// createFormresign()
})
.onCancel(() => {})
.onDismiss(() => {})
}
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
<div>ยื่นใบลา</div>
</div>
<q-form ref="myform" class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-select dense class="q-ml-lg col-6" outlined v-model="model" :options="options" prefix="ประเภทใบลา :" />
</div>
<div class="q-pl-sm text-weight-bold text-dark" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน</div>
<div class="col-12 row q-pa-sm q-col-gutter-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">
<q-select dense class="q-ml-lg col-6" outlined v-model="modelSpecific" :options="optionsSpecific" />
</div>
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<datepicker
class="col-2"
menu-class-name="modalfix"
v-model="dateLeave"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName != 'addAbsence'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:readonly="routeName != 'addAbsence'"
class="full-width datepicker"
:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
:label="`${'วันที่เริ่ม'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-2"
menu-class-name="modalfix"
v-model="dateLeave"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName != 'addAbsence'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:readonly="routeName != 'addAbsence'"
class="full-width datepicker"
:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
:label="`${'จนถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-2"
dense
outlined
v-model="noteReason"
label="จำนวนวัน(บันทึกลง ก.พ.7)"
:readonly="routeName != 'addAbsence'"
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<q-input class="col-3" dense outlined v-model="noteReason" label="เขียนที่" :readonly="routeName != 'addAbsence'" :rules="[val => !!val || `${'เขียนที่'}`]" />
<q-input
class="col-3"
dense
outlined
v-model="noteReason"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="routeName != 'addAbsence'"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
class="col-6"
dense
outlined
v-model="noteReason"
label="รายละเอียด"
:readonly="routeName != 'addAbsence'"
:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/>
<q-input
class="col-6"
dense
outlined
v-model="noteReason"
label="สถาที่ติดต่อขณะลา"
:readonly="routeName != 'addAbsence'"
:rules="[val => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]"
/>
<q-input
class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="ระดับที่ขอลาศึกษา"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="ชื่อปริญญา/ประกาศนียบัตร"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="สาขาวิชาเอก/หลักสูตร/วิชา"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="ณ สถานศึกษา"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="ประเทศ"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="ด้วยทุน"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-8"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense
outlined
v-model="noteReason"
label="ที่มาของหลักสูตร"
:readonly="routeName != 'addAbsence'"
/>
<q-file v-model="files" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="routeName != 'addAbsence'">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
</div>
<!-- <div class="row col-12 q-pa-md" v-if="routeName != 'addAbsence'">
<q-space />
<q-btn
v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'"
unelevated
dense
class="q-px-md items-center"
color="orange"
label="ยกเลิกการลา"
@click="cancelResing"
:disable="tranferOrg == '' && noteReason == ''"
/>
</div> -->
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="primary" label="บันทึก" @click="saveData" :disable="tranferOrg == '' && noteReason == ''" />
</div>
</q-card>
</q-form>
</div>
</div>
</template>

33
src/modules/05_leave/router.ts
View file

@ -1,18 +1,29 @@
/** /**
* Router leave * Router leave
*/ */
const leave = () => import("@/modules/05_leave/views/Main.vue"); const leave = () => import("@/modules/05_leave/views/Main.vue")
const addAbsence = () => import("@/modules/05_leave/componenst/addAbsence.vue")
/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue"); /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
*/ */
export default [ export default [
{ {
path: "/leave", path: "/leave",
name: "leave", name: "leave",
component: leave, component: leave,
meta: { meta: {
Auth: true, Auth: true,
Key: [7], Key: [7],
}, },
} },
] {
path: "/leave/add",
name: "addAbsence",
component: addAbsence,
meta: {
Auth: true,
Key: [7],
},
},
]

444
src/modules/05_leave/views/Main.vue
View file

@ -5,254 +5,175 @@
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" /> <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
<div>รายการลา</div> <div>รายการลา</div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md"> <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
<div class="row col-12 q-col-gutter-sm"> <div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-9 col-md-9 row"> <div class="col-xs-12 col-sm-9 col-md-9 row">
<q-card bordered class="q-pa-md col-12"> <q-card bordered class="q-pa-md col-12">
<div class="row col-12"> <div class="row col-12">
<div class="row items-center"> <div class="row items-center">
<!-- filter เลือกเดือนปี --> <!-- filter เลือกเดือนปี -->
<datepicker <datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" v-if="currentTab === 'calendar'">
v-model="dateMonth" <template #year="{ year }">{{ year + 543 }}</template>
:locale="'th'" <template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
autoApply <template #trigger>
month-picker <q-input :model-value="monthYearThai(dateMonth)" dense outlined hide-bottom-space style="width: 130px">
:enableTimePicker="false" <template v-slot:prepend>
v-if="currentTab === 'calendar'" <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
> </template>
<template #year="{ year }">{{ year + 543 }}</template> </q-input>
<template #year-overlay-value="{ value }">{{ </template>
parseInt(value + 543) </datepicker>
}}</template>
<template #trigger>
<q-input
:model-value="monthYearThai(dateMonth)"
dense
outlined
hide-bottom-space
style="width: 130px"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<!-- filter เลือกปี --> <!-- filter เลือกปี -->
<datepicker <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="currentTab === 'list'">
v-model="dateYear" <template #year="{ year }">{{ year + 543 }}</template>
:locale="'th'" <template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
autoApply <template #trigger>
year-picker <q-input :model-value="dateYear + 543" dense outlined style="width: 100px" hide-bottom-space>
:enableTimePicker="false" <template v-slot:prepend>
v-if="currentTab === 'list'" <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
> </template>
<template #year="{ year }">{{ year + 543 }}</template> </q-input>
<template #year-overlay-value="{ value }">{{ </template>
parseInt(value + 543) </datepicker>
}}</template> <div class="q-ml-sm">
<template #trigger> <!-- icon เพิ่มวันหยุด -->
<q-input <q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
:model-value="dateYear + 543" <q-icon name="mdi-plus" size="22px" color="primary" />
dense <q-tooltip>ยื่นใบลา</q-tooltip>
outlined </q-btn>
style="width: 100px" </div>
hide-bottom-space </div>
> <q-space />
<template v-slot:prepend> <div class="justify-center row items-center">
<q-icon <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
name="event" <q-tabs v-model="currentTab" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
class="cursor-pointer" <q-btn
style="color: var(--q-primary)" name="calendar"
> round
</q-icon> size="12px"
</template> flat
</q-input> icon="mdi-calendar-month"
</template> @click="currentTab = 'calendar'"
</datepicker> :color="currentTab == 'calendar' ? 'primary' : 'grey-6'"
<div class="q-ml-sm"> class="q-mr-sm"
<!-- icon เพิ่มวันหยุด --> >
<q-btn round dense flat size="13px" class="q-px-sm"> <q-tooltip>ปฏิทิน</q-tooltip>
<q-icon </q-btn>
name="mdi-plus" <q-separator vertical inset />
size="22px" <q-btn
color="primary" name="list"
/> round
<q-tooltip>เพิ่มวันหยุด</q-tooltip> size="12px"
</q-btn> flat
</div> icon="mdi-format-list-bulleted"
</div> @click="currentTab = 'list'"
<q-space /> :color="currentTab == 'list' ? 'primary' : 'grey-6'"
<div class="justify-center row items-center"> class="q-ml-sm"
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ --> >
<q-tabs <q-tooltip>รายการ</q-tooltip>
v-model="currentTab" </q-btn>
indicator-color="transparent" </q-tabs>
align="left" </div>
active-color="activetab" </div>
class="text-nativetab" <div class="col-12">
inline-label <subCalendarComponent v-if="currentTab === 'calendar'" />
dense </div>
>
<q-btn <div class="col-12">
name="calendar" <subListCalendarComponent v-if="currentTab === 'list'" />
round </div>
size="12px" </q-card>
flat </div>
icon="mdi-calendar-month" <div class="col-xs-12 col-sm-3 col-md-3 row">
@click="currentTab = 'calendar'" <q-card bordered class="col-12 row caedNone">
:color="currentTab == 'calendar' ? 'primary' : 'grey-6'" <div class="col-12 row">
class="q-mr-sm" <q-card class="row col-12 items-center q-px-md q-py-sm">
> <div class="text-weight-bold">สถิติการลา</div>
<q-tooltip>ปฏิทิน</q-tooltip> <q-space />
</q-btn> <q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
<q-separator vertical inset /> </q-card>
<q-btn <div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
name="list" <q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
round <q-knob readonly v-model="item.value" show-value size="70px" :thickness="0.15" track-color="grey-3" :class="`${item.color}`">
size="12px" <span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
flat </q-knob>
icon="mdi-format-list-bulleted" <div class="col-12 text-center text-weight-medium q-py-xs">
@click="currentTab = 'list'" {{ item.text }}
:color="currentTab == 'list' ? 'primary' : 'grey-6'" </div>
class="q-ml-sm" <div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop">
> <div class="col-4 column q-pa-xs text-center">
<q-tooltip>รายการ</q-tooltip> <span class="text-weight-bold">{{ item.all }}</span>
</q-btn> <span class="text-grey-7 text-caption">ทั้งหมด</span>
</q-tabs> </div>
</div> <q-separator vertical />
</div> <div class="col-4 column q-pa-xs text-center">
<div class="col-12 "> <span class="text-weight-bold">{{ item.use }}</span>
<subCalendarComponent v-if="currentTab === 'calendar'"/> <span class="text-grey-7 text-caption">ใช้ไป</span>
</div> </div>
<q-separator vertical />
<div class="col-12 "> <div class="col-4 column q-pa-xs text-center">
<subListCalendarComponent v-if="currentTab === 'list'" /> <span class="text-weight-bold">{{ item.remain }}</span>
</div> <span class="text-grey-7 text-caption">คงเหลือ</span>
</q-card> </div>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3 row"> </q-card>
<q-card bordered class="col-12 row caedNone"> </div>
<div class="col-12 row"> </div>
<q-card class="row col-12 items-center q-px-md q-py-sm"> </q-card>
<div class="text-weight-bold">สถิติการลา</div> </div>
<q-space/> </div>
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" /> </div>
</q-card> </div>
<div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item,index) in itemPie" :key="index"> <!-- modal ตารางสถิติการลา -->
<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0"> <q-dialog v-model="data" persistent>
<q-knob <q-card style="min-width: 85%">
readonly <q-card-section class="row items-center q-pa-sm">
v-model="item.value" <div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
show-value <q-space />
size="70px" <q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
:thickness="0.15" </q-card-section>
track-color="grey-3" <q-separator />
:class=" `${item.color}`" <q-card-section class="q-p-md row">
> <q-table flat bordered dense :rows="rows" :columns="columns" row-key="name" class="col-12" hide-bottom v-model:pagination="pagination" />
<span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span> </q-card-section>
</q-knob> </q-card>
<div class="col-12 text-center text-weight-medium q-py-xs"> </q-dialog>
{{item.text}}
</div>
<div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop">
<div class="col-4 column q-pa-xs text-center">
<span class="text-weight-bold">{{ item.all }}</span>
<span class="text-grey-7 text-caption">ทั้งหมด</span>
</div>
<q-separator vertical />
<div class="col-4 column q-pa-xs text-center">
<span class="text-weight-bold">{{ item.use }}</span>
<span class="text-grey-7 text-caption">ใช้ไป</span>
</div>
<q-separator vertical />
<div class="col-4 column q-pa-xs text-center">
<span class="text-weight-bold">{{ item.remain }}</span>
<span class="text-grey-7 text-caption">คงเหลือ</span>
</div>
</div>
</q-card>
</div>
</div>
</q-card>
</div>
</div>
</div>
</div>
<!-- modal ตารางสถิติการลา -->
<q-dialog v-model="data" persistent>
<q-card style="min-width: 85%;">
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row">
<q-table
flat bordered
dense
:rows="rows"
:columns="columns"
row-key="name"
class="col-12"
hide-bottom
v-model:pagination="pagination"
/>
</q-card-section>
</q-card>
</q-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar"
import { defineComponent, onMounted } from "@vue/runtime-core"; import { defineComponent, onMounted } from "@vue/runtime-core"
import { reactive, ref, watch } from "vue"; import { reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"; import { useRouter } from "vue-router"
import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue"; import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue"
import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue"; import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue"
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin"
import type { import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
DataDateMonthObject
} from "@/modules/05_leave/interface/request/Calendar.ts";
const router = useRouter(); const router = useRouter()
const currentTab = ref<string>("calendar"); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
const dateMonth = ref<number>(new Date().getFullYear()); const dateMonth = ref<number>(new Date().getFullYear())
const dateYear = ref<number>(new Date().getFullYear()); const dateYear = ref<number>(new Date().getFullYear())
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { monthYear2Thai} = mixin; const { monthYear2Thai } = mixin
/** /**
* แปลง ปีและเดือนเป็นภาษาไทย * แปลง ปีและเดือนเป็นภาษาไทย
* @param val datepicker แบบเลือกปีและเดือน * @param val datepicker แบบเลือกปีและเดือน
*/ */
const monthYearThai = (val: DataDateMonthObject) => { const monthYearThai = (val: DataDateMonthObject) => {
if (val == null) return ""; if (val == null) return ""
else return monthYear2Thai(val.month, val.year); else return monthYear2Thai(val.month, val.year)
}; }
const value = ref(90); const value = ref(90)
const itemPie = ref([ const itemPie = ref([
{text: 'ลาป่วย', color: 'text-pink-5', value: 90, all: '10', use: '9', remain: '1'}, { text: "ลาป่วย", color: "text-pink-5", value: 90, all: "10", use: "9", remain: "1" },
{text: 'ลากิจส่วนตัว', color: 'text-deep-purple', value: 80, all: '12', use: '9', remain: '3'}, { text: "ลากิจส่วนตัว", color: "text-deep-purple", value: 80, all: "12", use: "9", remain: "3" },
{text: 'ลาพักผ่อน', color: 'text-indigo', value: 78, all: '20', use: '17', remain: '3'} { text: "ลาพักผ่อน", color: "text-indigo", value: 78, all: "20", use: "17", remain: "3" },
]) ])
const data = ref(false); const data = ref(false)
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -263,7 +184,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;", style: "font-size: 14px; width:5%;",
}, },
{ {
name: "type", name: "type",
align: "left", align: "left",
label: "ประเภทการลา", label: "ประเภทการลา",
@ -281,7 +202,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "extend", name: "extend",
align: "left", align: "left",
label: "ทดวันลา", label: "ทดวันลา",
@ -290,7 +211,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "use", name: "use",
align: "left", align: "left",
label: "ใช้ไป (%)", label: "ใช้ไป (%)",
@ -299,7 +220,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "numAll", name: "numAll",
align: "left", align: "left",
label: "จำนวนยื่นขอลา (วัน)", label: "จำนวนยื่นขอลา (วัน)",
@ -308,7 +229,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "numDone", name: "numDone",
align: "left", align: "left",
label: "จำนวนที่อนุมัติ (วัน)", label: "จำนวนที่อนุมัติ (วัน)",
@ -317,7 +238,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "numNot", name: "numNot",
align: "left", align: "left",
label: "จำนวนที่ไม่อนุมัติ (วัน)", label: "จำนวนที่ไม่อนุมัติ (วัน)",
@ -326,7 +247,7 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "numCancel", name: "numCancel",
align: "left", align: "left",
label: "จำนวนที่ยกเลิก (วัน)", label: "จำนวนที่ยกเลิก (วัน)",
@ -337,24 +258,27 @@ const columns = ref<QTableProps["columns"]>([
}, },
]) ])
const rows = ref<any>([ const rows = ref<any>([
{no:'1',type: 'ลาป่วย' }, { no: "1", type: "ลาป่วย" },
{no:'2',type: 'ลากิจส่วนตัว' }, { no: "2", type: "ลากิจส่วนตัว" },
{no:'3',type: 'ลาคลอดบุตร' }, { no: "3", type: "ลาคลอดบุตร" },
{no:'4',type: 'ลาช่วยเหลือภริยาที่คลอดบุตร' }, { no: "4", type: "ลาช่วยเหลือภริยาที่คลอดบุตร" },
{no:'5',type: 'ลาพักผ่อน' }, { no: "5", type: "ลาพักผ่อน" },
{no:'6',type: 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ' }, { no: "6", type: "ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ" },
{no:'7',type: 'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล' }, { no: "7", type: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
{no:'8',type: 'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน' }, { no: "8", type: "ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน" },
{no:'9',type: 'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ' }, { no: "9", type: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ" },
{no:'10',type: 'ลาติดตามคู่สมรส' }, { no: "10", type: "ลาติดตามคู่สมรส" },
{no:'11',type: 'ลาฟื้นฟูสมรรถภาพด้านอาชีพ' } { no: "11", type: "ลาฟื้นฟูสมรรถภาพด้านอาชีพ" },
]) ])
const pagination = ref({rowsPerPage: 11}) const pagination = ref({ rowsPerPage: 11 })
const addAbsence = async () => {
router.push(`/leave/add`)
}
</script> </script>
<style> <style>
.borderTop{ .borderTop {
border-top: 1px solid #EDEDED ; border-top: 1px solid #ededed;
border-bottom:1px solid #EDEDED ; border-bottom: 1px solid #ededed;
} }
</style> </style>