Merge branch 'develop' into dev-tee
# Conflicts: # src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
This commit is contained in:
setthawutttty
commit
b44a15f69b
3 changed files with 441 additions and 320 deletions
|
|
@ -16,25 +16,24 @@ const props = defineProps({
|
||||||
<div>
|
<div>
|
||||||
ลาติดตามคู่สมรส
|
ลาติดตามคู่สมรส
|
||||||
<ul>
|
<ul>
|
||||||
|
<li>เขียนที่</li>
|
||||||
<li>ลาตั้งแต่วันที่</li>
|
<li>ลาตั้งแต่วันที่</li>
|
||||||
<li>ลาถึงวันที่</li>
|
<li>ลาถึงวันที่</li>
|
||||||
<li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
|
<li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
|
||||||
<li>วันเดือนปีเกิด (Auto)</li>
|
|
||||||
<li>วันที่เข้ารับราชการ (Auto)</li>
|
|
||||||
<li>เงินเดือนปัจจุบัน (Auto)</li>
|
<li>เงินเดือนปัจจุบัน (Auto)</li>
|
||||||
<li>
|
<li>
|
||||||
เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
|
เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
|
||||||
</li>
|
</li>
|
||||||
|
<li>ชื่อคู่สมรส</li>
|
||||||
|
<li>ตำแหน่งคู่สมรส</li>
|
||||||
|
<li>ระดับคู่สมรส</li>
|
||||||
|
<li>ไปปฏิบัติราชการ ณ ประเทศ</li>
|
||||||
|
<li>ระดับคู่สมรส</li>
|
||||||
<li>
|
<li>
|
||||||
กรณีลาไปศึกษาต่อ มีฟิลด์เพิ่มคือ ศึกษาวิชา, ขั้นปริญญา, ชื่อสถานศึกษา,
|
ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย ประกอบด้วย ประเทศ, เป็นเวลา กี่ปี
|
||||||
ประเทศ, ด้วยทุน
|
กี่เดือน กี่วัน, ตั้งแต่วันที่, ถึงวันที่ (ในกรณีลาติดต่อกับครั้งก่อน
|
||||||
|
รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน ข้อมูลมาจาก API (Auto))
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน มีฟิลด์เพิ่มคือ ด้าน/หลักสูตร,
|
|
||||||
ณ สถานที่, ประเทศ, ด้วยทุน
|
|
||||||
</li>
|
|
||||||
<li>ที่อยู่ที่ติดต่อได้ระหว่างลา</li>
|
|
||||||
<li>หมายเลขโทรศัพท์</li>
|
|
||||||
<li>รายละเอียด (ไม่บังคับกรอก)</li>
|
<li>รายละเอียด (ไม่บังคับกรอก)</li>
|
||||||
<li>เอกสารประกอบ</li>
|
<li>เอกสารประกอบ</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/module
|
||||||
import { useCounterMixin } from "@/stores/mixin"
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
|
||||||
export const useLeaveStore = defineStore("Leave", () => {
|
export const useLeaveStore = defineStore("Leave", () => {
|
||||||
|
const tabValue = ref<string>("calendar");
|
||||||
const typeLeave = ref<string|undefined>('')
|
const typeLeave = ref<string|undefined>('')
|
||||||
const mixin = useCounterMixin()
|
const mixin = useCounterMixin()
|
||||||
const { date2Thai } = mixin
|
const { date2Thai } = mixin
|
||||||
|
|
@ -294,6 +295,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
tabValue,
|
||||||
typeOptions,
|
typeOptions,
|
||||||
optionsSpecific,
|
optionsSpecific,
|
||||||
statusOptions,
|
statusOptions,
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,263 @@
|
||||||
|
<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 { useLeaveStore } from "@/modules/05_leave/store";
|
||||||
|
|
||||||
|
const leaveStore = useLeaveStore();
|
||||||
|
const { filterSelector, searchFilterTable } = leaveStore;
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const dateMonth = ref<DataDateMonthObject>({
|
||||||
|
month: new Date().getMonth(),
|
||||||
|
year: new Date().getFullYear(),
|
||||||
|
});
|
||||||
|
// console.log(dateMonth.value);
|
||||||
|
const props = defineProps({
|
||||||
|
dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
|
||||||
|
fetchDataSummaryCalendar: {
|
||||||
|
//ฟังก์ชันอัพเดทสรุปวันหยุด
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const dateYear = ref<number>(new Date().getFullYear());
|
||||||
|
const emit = defineEmits(["update:dateYear"]);
|
||||||
|
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 updateMonth = async (e: DataDateMonthObject) => {
|
||||||
|
console.log(dateMonth.value);
|
||||||
|
if (e != null) {
|
||||||
|
dateYear.value = e.year;
|
||||||
|
emit("update:dateYear", e.year);
|
||||||
|
await props.fetchDataSummaryCalendar();
|
||||||
|
}
|
||||||
|
console.log(dateMonth.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
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 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 });
|
||||||
|
|
||||||
|
const addAbsence = async () => {
|
||||||
|
router.push(`/leave/add`);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row justify-center">
|
<div class="col-12 row justify-center">
|
||||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||||
<div class="toptitle text-white col-12 row items-center">
|
<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)" />
|
<q-btn
|
||||||
<div>รายการลา</div>
|
icon="mdi-arrow-left"
|
||||||
</div>
|
unelevated
|
||||||
</div>
|
round
|
||||||
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
dense
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
flat
|
||||||
<div class="col-xs-12 col-sm-9 col-md-9 row">
|
color="primary"
|
||||||
<q-card bordered class="q-pa-md col-12">
|
class="q-mr-sm"
|
||||||
<div class="row col-12">
|
@click="router.go(-1)"
|
||||||
<div class="row items-center">
|
/>
|
||||||
<!-- filter เลือกเดือนปี -->
|
<div>รายการลา</div>
|
||||||
<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" v-if="currentTab === 'calendar'" @update:modelValue="updateMonth">
|
</div>
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
</div>
|
||||||
<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
|
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
||||||
<template #trigger>
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
<q-input :model-value="monthYearThai(dateMonth)" dense outlined style="width: 130px">
|
<div class="col-xs-12 col-sm-9 col-md-9 row">
|
||||||
<template v-slot:prepend>
|
<q-card bordered class="q-pa-md col-12">
|
||||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
<div class="row col-12">
|
||||||
</template>
|
<div class="row items-center">
|
||||||
</q-input>
|
<!-- filter เลือกเดือนปี -->
|
||||||
</template>
|
<datepicker
|
||||||
</datepicker>
|
v-model="dateMonth"
|
||||||
<q-select
|
:locale="'th'"
|
||||||
v-if="currentTab === 'list'"
|
autoApply
|
||||||
outlined
|
month-picker
|
||||||
dense
|
:enableTimePicker="false"
|
||||||
lazy-rules
|
v-if="leaveStore.tabValue === 'calendar'"
|
||||||
v-model="LeaveData.fiscalYearyear"
|
@update:modelValue="updateMonth"
|
||||||
:label="`${'ปี พ.ศ.'}`"
|
>
|
||||||
emit-value
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
map-options
|
<template #year-overlay-value="{ value }">{{
|
||||||
option-label="name"
|
parseInt(value + 543)
|
||||||
:options="LeaveData.fiscalyearOP"
|
}}</template>
|
||||||
option-value="id"
|
<template #trigger>
|
||||||
hide-bottom-space
|
<q-input
|
||||||
style="min-width: 150px"
|
:model-value="monthYearThai(dateMonth)"
|
||||||
class="col-xs-12 col-sm-auto"
|
dense
|
||||||
@update:model-value="searchFilterTable"
|
outlined
|
||||||
@filter="(inputValue:any,
|
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>
|
||||||
|
<q-select
|
||||||
|
v-if="leaveStore.tabValue === 'list'"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="leaveStore.fiscalYearyear"
|
||||||
|
:label="`${'ปี พ.ศ.'}`"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="leaveStore.fiscalyearOP"
|
||||||
|
option-value="id"
|
||||||
|
hide-bottom-space
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="col-xs-12 col-sm-auto"
|
||||||
|
@update:model-value="searchFilterTable"
|
||||||
|
@filter="(inputValue:any,
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
|
doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
|
||||||
) "
|
) "
|
||||||
/>
|
/>
|
||||||
<!-- filter เลือกปี -->
|
<!-- filter เลือกปี -->
|
||||||
<!-- <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="currentTab === 'list'">
|
<!-- <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="leaveStore.tabValue === 'list'">
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
|
<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
|
|
@ -56,274 +268,182 @@
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</datepicker> -->
|
</datepicker> -->
|
||||||
<div class="q-ml-sm">
|
<div class="q-ml-sm">
|
||||||
<!-- icon เพิ่มวันหยุด -->
|
<!-- icon เพิ่มวันหยุด -->
|
||||||
<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
|
<q-btn
|
||||||
<q-icon name="mdi-plus" size="22px" color="primary" />
|
round
|
||||||
<q-tooltip>ยื่นใบลา</q-tooltip>
|
dense
|
||||||
</q-btn>
|
flat
|
||||||
</div>
|
size="13px"
|
||||||
</div>
|
class="q-px-sm"
|
||||||
<q-space />
|
@click="addAbsence"
|
||||||
<div class="justify-center row items-center">
|
>
|
||||||
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
|
<q-icon name="mdi-plus" size="22px" color="primary" />
|
||||||
<q-tabs v-model="currentTab" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
|
<q-tooltip>ยื่นใบลา</q-tooltip>
|
||||||
<q-btn
|
</q-btn>
|
||||||
name="calendar"
|
</div>
|
||||||
round
|
</div>
|
||||||
size="12px"
|
<q-space />
|
||||||
flat
|
<div class="justify-center row items-center">
|
||||||
icon="mdi-calendar-month"
|
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
|
||||||
@click="currentTab = 'calendar'"
|
<q-tabs
|
||||||
:color="currentTab == 'calendar' ? 'primary' : 'grey-6'"
|
v-model="leaveStore.tabValue"
|
||||||
class="q-mr-sm"
|
indicator-color="transparent"
|
||||||
>
|
align="left"
|
||||||
<q-tooltip>ปฏิทิน</q-tooltip>
|
active-color="activetab"
|
||||||
</q-btn>
|
class="text-nativetab"
|
||||||
<q-separator vertical inset />
|
inline-label
|
||||||
<q-btn
|
dense
|
||||||
name="list"
|
>
|
||||||
round
|
<q-btn
|
||||||
size="12px"
|
name="calendar"
|
||||||
flat
|
round
|
||||||
icon="mdi-format-list-bulleted"
|
size="12px"
|
||||||
@click="currentTab = 'list'"
|
flat
|
||||||
:color="currentTab == 'list' ? 'primary' : 'grey-6'"
|
icon="mdi-calendar-month"
|
||||||
class="q-ml-sm"
|
@click="leaveStore.tabValue = 'calendar'"
|
||||||
>
|
:color="
|
||||||
<q-tooltip>รายการ</q-tooltip>
|
leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
|
||||||
</q-btn>
|
"
|
||||||
</q-tabs>
|
class="q-mr-sm"
|
||||||
</div>
|
>
|
||||||
</div>
|
<q-tooltip>ปฏิทิน</q-tooltip>
|
||||||
<div class="col-12">
|
</q-btn>
|
||||||
<subCalendarComponent :dateYear="dateMonth.year" :dateMonth="dateMonth.month" v-if="currentTab === 'calendar'" />
|
<q-separator vertical inset />
|
||||||
</div>
|
<q-btn
|
||||||
|
name="list"
|
||||||
|
round
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
icon="mdi-format-list-bulleted"
|
||||||
|
@click="leaveStore.tabValue = 'list'"
|
||||||
|
:color="
|
||||||
|
leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
|
||||||
|
"
|
||||||
|
class="q-ml-sm"
|
||||||
|
>
|
||||||
|
<q-tooltip>รายการ</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<subCalendarComponent
|
||||||
|
:dateYear="dateMonth.year"
|
||||||
|
:dateMonth="dateMonth.month"
|
||||||
|
v-if="leaveStore.tabValue === 'calendar'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<subListCalendarComponent v-if="currentTab === 'list'" />
|
<subListCalendarComponent v-if="leaveStore.tabValue === 'list'" />
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 col-sm-3 col-md-3 row">
|
<div class="col-xs-12 col-sm-3 col-md-3 row">
|
||||||
<q-card bordered class="col-12 row caedNone">
|
<q-card bordered class="col-12 row caedNone">
|
||||||
<div class="col-12 row">
|
<div class="col-12 row">
|
||||||
<q-card class="row col-12 items-center q-px-md q-py-sm">
|
<q-card class="row col-12 items-center q-px-md q-py-sm">
|
||||||
<div class="text-weight-bold">สถิติการลา</div>
|
<div class="text-weight-bold">สถิติการลา</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
|
<q-btn
|
||||||
</q-card>
|
dense
|
||||||
<div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
|
flat
|
||||||
<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
|
class="text-blue"
|
||||||
<q-knob readonly v-model="item.value" show-value size="70px" :thickness="0.15" track-color="grey-3" :class="`${item.color}`">
|
icon="mdi-chart-line-variant"
|
||||||
<span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
|
@click="data = true"
|
||||||
</q-knob>
|
label="ตารางสถิติการลา"
|
||||||
<div class="col-12 text-center text-weight-medium q-py-xs">
|
/>
|
||||||
{{ item.text }}
|
</q-card>
|
||||||
</div>
|
<div
|
||||||
<div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop">
|
bordered
|
||||||
<div class="col-4 column q-pa-xs text-center">
|
class="col-12 row justify-center q-px-md q-pb-md"
|
||||||
<span class="text-weight-bold">{{ item.all }}</span>
|
v-for="(item, index) in itemPie"
|
||||||
<span class="text-grey-7 text-caption">ทั้งหมด</span>
|
:key="index"
|
||||||
</div>
|
>
|
||||||
<q-separator vertical />
|
<q-card
|
||||||
<div class="col-4 column q-pa-xs text-center">
|
bordered
|
||||||
<span class="text-weight-bold">{{ item.use }}</span>
|
flat
|
||||||
<span class="text-grey-7 text-caption">ใช้ไป</span>
|
class="col-12 row q-pt-md justify-center shadow-0"
|
||||||
</div>
|
>
|
||||||
<q-separator vertical />
|
<q-knob
|
||||||
<div class="col-4 column q-pa-xs text-center">
|
readonly
|
||||||
<span class="text-weight-bold">{{ item.remain }}</span>
|
v-model="item.value"
|
||||||
<span class="text-grey-7 text-caption">คงเหลือ</span>
|
show-value
|
||||||
</div>
|
size="70px"
|
||||||
</div>
|
:thickness="0.15"
|
||||||
</q-card>
|
track-color="grey-3"
|
||||||
</div>
|
:class="`${item.color}`"
|
||||||
</div>
|
>
|
||||||
</q-card>
|
<span class="text-subtitle2 text-weight-bold"
|
||||||
</div>
|
>{{ item.value }}%</span
|
||||||
</div>
|
>
|
||||||
</div>
|
</q-knob>
|
||||||
</div>
|
<div class="col-12 text-center text-weight-medium q-py-xs">
|
||||||
<!-- modal ตารางสถิติการลา -->
|
{{ item.text }}
|
||||||
<q-dialog v-model="data" persistent>
|
</div>
|
||||||
<q-card style="min-width: 85%">
|
<div
|
||||||
<q-card-section class="row items-center q-pa-sm">
|
class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop"
|
||||||
<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
|
>
|
||||||
<q-space />
|
<div class="col-4 column q-pa-xs text-center">
|
||||||
<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
|
<span class="text-weight-bold">{{ item.all }}</span>
|
||||||
</q-card-section>
|
<span class="text-grey-7 text-caption">ทั้งหมด</span>
|
||||||
<q-separator />
|
</div>
|
||||||
<q-card-section class="q-p-md row">
|
<q-separator vertical />
|
||||||
<q-table flat bordered dense :rows="rows" :columns="columns" row-key="name" class="col-12" hide-bottom v-model:pagination="pagination" />
|
<div class="col-4 column q-pa-xs text-center">
|
||||||
</q-card-section>
|
<span class="text-weight-bold">{{ item.use }}</span>
|
||||||
</q-card>
|
<span class="text-grey-7 text-caption">ใช้ไป</span>
|
||||||
</q-dialog>
|
</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">
|
|
||||||
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 { useLeaveStore } from "@/modules/05_leave/store"
|
|
||||||
|
|
||||||
const LeaveData = useLeaveStore()
|
<style scoped>
|
||||||
const { filterSelector, searchFilterTable } = LeaveData
|
|
||||||
const router = useRouter()
|
|
||||||
const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
|
|
||||||
const dateMonth = ref<DataDateMonthObject>({
|
|
||||||
month: new Date().getMonth(),
|
|
||||||
year: new Date().getFullYear(),
|
|
||||||
})
|
|
||||||
console.log(dateMonth.value)
|
|
||||||
const props = defineProps({
|
|
||||||
dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
|
|
||||||
fetchDataSummaryCalendar: {
|
|
||||||
//ฟังก์ชันอัพเดทสรุปวันหยุด
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
const dateYear = ref<number>(new Date().getFullYear())
|
|
||||||
const emit = defineEmits(["update:dateYear"])
|
|
||||||
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 updateMonth = async (e: DataDateMonthObject) => {
|
|
||||||
console.log(dateMonth.value)
|
|
||||||
if (e != null) {
|
|
||||||
dateYear.value = e.year
|
|
||||||
emit("update:dateYear", e.year)
|
|
||||||
await props.fetchDataSummaryCalendar()
|
|
||||||
}
|
|
||||||
console.log(dateMonth.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
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 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 })
|
|
||||||
|
|
||||||
const addAbsence = async () => {
|
|
||||||
router.push(`/leave/add`)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue