2023-09-27 15:49:15 +07:00
|
|
|
<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>
|
|
|
|
|
</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/>
|
2023-09-29 15:56:13 +07:00
|
|
|
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
|
2023-09-27 15:49:15 +07:00
|
|
|
</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>
|
2023-09-29 15:56:13 +07:00
|
|
|
<!-- 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>
|
2023-09-27 15:49:15 +07:00
|
|
|
</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";
|
|
|
|
|
|
|
|
|
|
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 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'}
|
|
|
|
|
])
|
2023-09-29 15:56:13 +07:00
|
|
|
|
|
|
|
|
const data = ref(false);
|
|
|
|
|
const columns = ref<QTableProps["columns"]>([
|
|
|
|
|
{
|
|
|
|
|
name: "no",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ลำดับ",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "no",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:5%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "type",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ประเภทการลา",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "type",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "numDate",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "โควตาวันลา",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "numDate",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "extend",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ทดวันลา",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "extend",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "use",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "ใช้ไป (%)",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "use",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "numAll",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "จำนวนยื่นขอลา (วัน)",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "numAll",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "numDone",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "จำนวนที่อนุมัติ (วัน)",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "numDone",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "numNot",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "จำนวนที่ไม่อนุมัติ (วัน)",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "numNot",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "numCancel",
|
|
|
|
|
align: "left",
|
|
|
|
|
label: "จำนวนที่ยกเลิก (วัน)",
|
|
|
|
|
sortable: true,
|
|
|
|
|
field: "numCancel",
|
|
|
|
|
headerStyle: "font-size: 14px",
|
|
|
|
|
style: "font-size: 14px; width:15%;",
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
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: 'ลาฟื้นฟูสมรรถภาพด้านอาชีพ' }
|
|
|
|
|
])
|
|
|
|
|
const pagination = ref({rowsPerPage: 11})
|
|
|
|
|
|
2023-09-27 15:49:15 +07:00
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.borderTop{
|
|
|
|
|
border-top: 1px solid #EDEDED ;
|
|
|
|
|
border-bottom:1px solid #EDEDED ;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
