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