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

no message

Browse source
This commit is contained in:
setthawutttty 2023-11-07 15:06:48 +07:00
parent 83dc2d90a5
commit 538152d3cd
7 changed files with 991 additions and 360 deletions
Download patch file Download diff file Expand all files Collapse all files

293
src/modules/05_leave/componenst/Form.vue Normal file
View file

@ -0,0 +1,293 @@
<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const mixin = useCounterMixin();
const routeName = router.currentRoute.value.name;
const id = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const files = ref<any>();
const locationAbsence = ref<string>("");
const levelStudy = ref<string>("");
const degree = ref<string>("");
const major = ref<string>("");
const educational = ref<string>("");
const studyPeriod = ref<string>("");
const country = ref<string>("");
const capital = ref<string>("");
const tel = ref<number>();
const detail = ref<string>();
const Writeat = ref<string>();
const dateLeaveStart = ref<Date>(new Date());
const dateLeaveEnd = ref<Date>(new Date());
const dateTotal = ref<number>();
const noteReason = ref("");
const nameFile = ref<string>("");
const model = ref(null);
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
mixin;
const props = defineProps({
type: {
type: String,
default: "",
},
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
});
</script>
<template>
<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="dateLeaveStart"
: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="
dateLeaveStart != null ? date2Thai(dateLeaveStart) : 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="dateLeaveEnd"
: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="dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : 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
type="number"
v-model="dateTotal"
label="จำนวนวัน(บันทึกลง ก.พ.7)"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<q-input
class="col-3"
dense
outlined
v-model="Writeat"
label="เขียนที่"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<q-input
class="col-3"
dense
outlined
v-model="tel"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
class="col-6"
dense
outlined
v-model="detail"
label="รายละเอียด"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/>
<q-input
class="col-6"
dense
outlined
v-model="locationAbsence"
label="สถาที่ติดต่อขณะลา"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]"
/>
<q-input
class="col-4"
v-if="props.type === '7'"
dense
outlined
v-model="levelStudy"
label="ระดับที่ขอลาศึกษา"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="props.type === '7'"
dense
outlined
v-model="degree"
label="ชื่อปริญญา/ประกาศนียบัตร"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="props.type === '7'"
dense
outlined
v-model="major"
label="สาขาวิชาเอก/หลักสูตร/วิชา"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="props.type === '7'"
dense
outlined
v-model="educational"
label="ณ สถานศึกษา"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="props.type === '7'"
dense
outlined
v-model="studyPeriod"
label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="props.type === '7'"
dense
outlined
v-model="country"
label="ประเทศ"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-4"
v-if="props.type === '7'"
dense
outlined
v-model="capital"
label="ด้วยทุน"
:readonly="routeName != 'addAbsence'"
/>
<q-input
class="col-8"
v-if="props.type === '7'"
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>
</template>

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

@ -1,364 +1,504 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue" import { ref, onMounted } from "vue";
import { useQuasar } from "quasar" import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router" import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http" import { useLeaveStore } from "@/modules/05_leave/store"
import config from "@/app.config" import http from "@/plugins/http";
import type { QForm } from "quasar" import config from "@/app.config";
import type { QForm } from "quasar";
const mixin = useCounterMixin() const mixin = useCounterMixin();
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } = mixin const dataStore = useLeaveStore()
const router = useRouter() const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
const route = useRoute() mixin;
const myform = ref<QForm | null>(null) const router = useRouter();
const $q = useQuasar() const route = useRoute();
const routeName = router.currentRoute.value.name const myform = ref<QForm | null>(null);
const id = ref<string>("") const $q = useQuasar();
const fileDocDataUpload = ref<File[]>([]) const routeName = router.currentRoute.value.name;
const files = ref<any>() const id = ref<string>("");
const locationAbsence = ref<string>("") const fileDocDataUpload = ref<File[]>([]);
const levelStudy = ref<string>("") const files = ref<any>();
const degree = ref<string>("") const locationAbsence = ref<string>("");
const major = ref<string>("") const levelStudy = ref<string>("");
const educational = ref<string>("") const degree = ref<string>("");
const studyPeriod = ref<string>("") const major = ref<string>("");
const country = ref<string>("") const educational = ref<string>("");
const capital = ref<string>("") const studyPeriod = ref<string>("");
const tel = ref<number>() const country = ref<string>("");
const detail = ref<string>() const capital = ref<string>("");
const Writeat = ref<string>() const tel = ref<number>();
const dateLeaveStart = ref<Date>(new Date()) const detail = ref<string>();
const dateLeaveEnd = ref<Date>(new Date()) const Writeat = ref<string>();
const dateTotal = ref<number>() const dateLeaveStart = ref<Date>(new Date());
const noteReason = ref("") const dateLeaveEnd = ref<Date>(new Date());
const nameFile = ref<string>("") const dateTotal = ref<number>();
const model = ref(null) const noteReason = ref("");
const modelSpecific = ref(null) const nameFile = ref<string>("");
const model = ref(null);
const modelSpecific = ref(null);
const options = ref([ const options = ref([
"ลาป่วย", {id:'0',name:"ลาป่วย"},
"ลากิจส่วนตัว", {id:'1',name:"ลากิจส่วนตัว"},
"ลาคลอดบุตร", {id:'2',name:"ลาคลอดบุตร"},
"ลาไปช่วยเหลือภริยาที่คลอดบุตร", {id:'3',name:"ลาไปช่วยเหลือภริยาที่คลอดบุตร"},
"ลาพักผ่อน", {id:'4',name:"ลาพักผ่อน"},
"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ", {id:'5',name:"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ"},
"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล", {id:'6',name:"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล"},
"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน", {id:'7',name:"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"},
"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ", {id:'8',name:"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ"},
"ลาติดตามคู่สมรส", {id:'9',name:"ลาติดตามคู่สมรส"},
"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ", {id:'10',name:"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ"},
]) ]);
const optionsSpecific = ref(["ลาไปศึกษา", "ฝึกอบรม", "ปฎิบัติการวิจัย", "ดูงาน"]) const optionsSpecific = ref([
{id:'0',name:"ลาไปศึกษา"},
{id:'1',name:"ฝึกอบรม"},
{id:'2',name:"ปฎิบัติการวิจัย"},
{id:'3',name:"ดูงาน"},
]);
const dataDetail = ref<any>({ const dataDetail = ref<any>({
datetext: "", datetext: "",
activeDate: new Date(), activeDate: new Date(),
createdAt: new Date(), createdAt: new Date(),
firstName: "", firstName: "",
id: "", id: "",
isActive: true, isActive: true,
lastName: "", lastName: "",
location: "", location: "",
organizationPositionOld: "", organizationPositionOld: "",
positionLevelOld: "", positionLevelOld: "",
positionNumberOld: "", positionNumberOld: "",
positionTypeOld: "", positionTypeOld: "",
prefix: "", prefix: "",
profileId: "", profileId: "",
reason: "", reason: "",
salary: 0, salary: 0,
sendDate: new Date(), sendDate: new Date(),
status: "", status: "",
statustext: "", statustext: "",
fullname: "", fullname: "",
}) });
const clickBack = () => { const clickBack = () => {
router.push(`/leave`) router.push(`/leave`);
} };
onMounted(() => {}) onMounted(() => {});
const saveAbsence = () => { const saveAbsence = () => {
$q.dialog({ $q.dialog({
title: "ยืนยันการยื่นข้อมูลลาออก", title: "ยืนยันการยื่นข้อมูลลาออก",
message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?", message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
cancel: { cancel: {
flat: true, flat: true,
color: "negative", color: "negative",
}, },
persistent: true, persistent: true,
}) })
.onOk(() => { .onOk(() => {
// createFormresign() // createFormresign()
if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") { if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
console.log(1) console.log(1);
} else if (model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") { } else if (
console.log(2) model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"
} ) {
router.push(`/leave`) console.log(2);
}) }
.onCancel(() => {}) router.push(`/leave`);
.onDismiss(() => {}) })
} .onCancel(() => {})
.onDismiss(() => {});
};
</script> </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="clickBack" /> <q-btn
<div>ยื่นใบลา</div> icon="mdi-arrow-left"
</div> unelevated
<q-form ref="myform" class="col-12"> round
<q-card bordered> dense
<div class="col-12 row q-col-gutter-md q-pa-md"> flat
<div class="col-xs-12 col-sm-12"> color="primary"
<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" /> class="q-mr-sm"
<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div> @click="clickBack"
<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>
</div> </div>
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" /> <q-form ref="myform" class="col-12">
<div class="q-pl-sm text-weight-bold text-dark" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน</div> <q-card bordered>
<div class="col-12 row q-pa-sm q-col-gutter-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"> <div class="col-12 row q-col-gutter-md q-pa-md">
<q-select dense class="q-ml-lg col-6" outlined v-model="modelSpecific" :options="optionsSpecific" prefix="ประเภทใบลา :" /> <div class="col-xs-12 col-sm-12">
</div> <q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-else /> <div class="q-pl-sm text-weight-bold text-dark">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" /> เลือกประเภทการลา
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div> </div>
<q-card bordered class="q-pa-md bg-grey-1"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <q-select
<datepicker dense
class="col-2" class="q-ml-lg col-6"
menu-class-name="modalfix" outlined
v-model="dateLeaveStart" v-model="model"
:locale="'th'" :options="dataStore.optionsSpecific"
autoApply prefix="ประเภทใบลา :"
borderless />
:enableTimePicker="false" <div class="col-6 row q-pa-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" >
week-start="0" <q-select
:readonly="routeName != 'addAbsence'" dense
> class="q-ml-lg col-6"
<template #year="{ year }"> outlined
{{ year + 543 }} v-model="modelSpecific"
</template> :options="optionsSpecific"
<template #year-overlay-value="{ value }"> prefix="ประเภทใบลา :"
{{ parseInt(value + 543) }} />
</template> </div>
<template #trigger> </div>
<q-input <q-icon
outlined name="mdi-numeric-2-circle"
dense size="20px"
hide-bottom-space color="primary"
:readonly="routeName != 'addAbsence'" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
class="full-width datepicker" />
:model-value="dateLeaveStart != null ? date2Thai(dateLeaveStart) : null" <div
:label="`${'วันที่เริ่ม'}`" class="q-pl-sm text-weight-bold text-dark"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`]" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
> >
<template v-slot:prepend> เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> </div>
</template> <div
</q-input> class="col-12 row q-pa-sm q-col-gutter-sm"
</template> v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
</datepicker> >
<datepicker <q-select
class="col-2" dense
menu-class-name="modalfix" class="q-ml-lg col-6"
v-model="dateLeaveEnd" outlined
:locale="'th'" v-model="modelSpecific"
autoApply :options="optionsSpecific"
borderless prefix="ประเภทใบลา :"
:enableTimePicker="false" />
week-start="0" </div>
:readonly="routeName != 'addAbsence'" <q-icon
> name="mdi-numeric-2-circle"
<template #year="{ year }"> size="20px"
{{ year + 543 }} color="primary"
</template> v-else
<template #year-overlay-value="{ value }"> />
{{ parseInt(value + 543) }} <q-icon
</template> name="mdi-numeric-3-circle"
<template #trigger> size="20px"
<q-input color="primary"
outlined v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
dense />
hide-bottom-space <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
:readonly="routeName != 'addAbsence'" <q-card bordered class="q-pa-md bg-grey-1">
class="full-width datepicker" <div class="col-12 row q-pa-sm q-col-gutter-sm">
:model-value="dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null" <datepicker
:label="`${'จนถึงวันที่'}`" class="col-2"
:rules="[val => !!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`]" menu-class-name="modalfix"
> v-model="dateLeaveStart"
<template v-slot:prepend> :locale="'th'"
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> autoApply
</template> borderless
</q-input> :enableTimePicker="false"
</template> week-start="0"
</datepicker> :readonly="routeName != 'addAbsence'"
<q-input >
class="col-2" <template #year="{ year }">
dense {{ year + 543 }}
outlined </template>
type="number" <template #year-overlay-value="{ value }">
v-model="dateTotal" {{ parseInt(value + 543) }}
label="จำนวนวัน(บันทึกลง ก.พ.7)" </template>
:readonly="routeName != 'addAbsence'" <template #trigger>
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]" <q-input
/> outlined
<q-input class="col-3" dense outlined v-model="Writeat" label="เขียนที่" :readonly="routeName != 'addAbsence'" :rules="[val => !!val || `${'เขียนที่'}`]" /> dense
<q-input hide-bottom-space
class="col-3" :readonly="routeName != 'addAbsence'"
dense class="full-width datepicker"
outlined :model-value="
v-model="tel" dateLeaveStart != null
mask="(###)-###-####" ? date2Thai(dateLeaveStart)
unmasked-value : null
label="หมายเลขโทรศัพท์ที่ติดต่อได้" "
:readonly="routeName != 'addAbsence'" :label="`${'วันที่เริ่ม'}`"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]" :rules="[
/> (val) => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`,
<q-input ]"
class="col-6" >
dense <template v-slot:prepend>
outlined <q-icon
v-model="detail" name="event"
label="รายละเอียด" class="cursor-pointer"
:readonly="routeName != 'addAbsence'" style="color: var(--q-primary)"
:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]" >
/> </q-icon>
<q-input </template>
class="col-6" </q-input>
dense </template>
outlined </datepicker>
v-model="locationAbsence" <datepicker
label="สถาที่ติดต่อขณะลา" class="col-2"
:readonly="routeName != 'addAbsence'" menu-class-name="modalfix"
:rules="[val => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]" v-model="dateLeaveEnd"
/> :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="
dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : 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
type="number"
v-model="dateTotal"
label="จำนวนวัน(บันทึกลง ก.พ.7)"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<q-input
class="col-3"
dense
outlined
v-model="Writeat"
label="เขียนที่"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<q-input
class="col-3"
dense
outlined
v-model="tel"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="routeName != 'addAbsence'"
:rules="[
(val) =>
!!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input
class="col-6"
dense
outlined
v-model="detail"
label="รายละเอียด"
:readonly="routeName != 'addAbsence'"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/>
<q-input
class="col-6"
dense
outlined
v-model="locationAbsence"
label="สถาที่ติดต่อขณะลา"
:readonly="routeName != 'addAbsence'"
:rules="[
(val) => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`,
]"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="levelStudy" dense
label="ระดับที่ขอลาศึกษา" outlined
:readonly="routeName != 'addAbsence'" v-model="levelStudy"
/> label="ระดับที่ขอลาศึกษา"
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="degree" dense
label="ชื่อปริญญา/ประกาศนียบัตร" outlined
:readonly="routeName != 'addAbsence'" v-model="degree"
/> label="ชื่อปริญญา/ประกาศนียบัตร"
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="major" dense
label="สาขาวิชาเอก/หลักสูตร/วิชา" outlined
:readonly="routeName != 'addAbsence'" v-model="major"
/> label="สาขาวิชาเอก/หลักสูตร/วิชา"
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="educational" dense
label="ณ สถานศึกษา" outlined
:readonly="routeName != 'addAbsence'" v-model="educational"
/> label="ณ สถานศึกษา"
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="studyPeriod" dense
label="ระยะเวลาในการศึกษาตลอดหลักสูตร" outlined
:readonly="routeName != 'addAbsence'" v-model="studyPeriod"
/> label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="country" dense
label="ประเทศ" outlined
:readonly="routeName != 'addAbsence'" v-model="country"
/> label="ประเทศ"
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-4" class="col-4"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="capital" dense
label="ด้วยทุน" outlined
:readonly="routeName != 'addAbsence'" v-model="capital"
/> label="ด้วยทุน"
:readonly="routeName != 'addAbsence'"
/>
<q-input <q-input
class="col-8" class="col-8"
v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" v-if="
dense model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
outlined "
v-model="noteReason" dense
label="ที่มาของหลักสูตร" outlined
:readonly="routeName != 'addAbsence'" v-model="noteReason"
/> label="ที่มาของหลักสูตร"
:readonly="routeName != 'addAbsence'"
/>
<q-file v-model="files" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6"> <q-file
<template v-slot:prepend> v-model="files"
<q-icon name="attach_file" color="primary" /> dense
</template> label="เอกสารประกอบ"
</q-file> 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="col-12 row" v-if="routeName != 'addAbsence'">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"> <div
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div> class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
</div> >
<q-card bordered flat class="full-width"> <div class="q-pl-sm text-weight-bold text-dark">
<q-list separator> เอกสารเพิ่มเติม
<q-item v-for="file in files" :key="file.key" class="q-my-xs"> </div>
<q-item-section> </div>
<q-item-label class="full-width ellipsis"> <q-card bordered flat class="full-width">
{{ file.fileName }} <q-list separator>
</q-item-label> <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-label caption> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-card> </q-card>
</div> </div>
</div> </div>
</q-card> </q-card>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<div class="row col-12 q-pa-md"> <div class="row col-12 q-pa-md">
<q-space /> <q-space />
<q-btn unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="saveAbsence" /> <q-btn
</div> unelevated
</q-card> dense
</q-form> class="q-px-md items-center btnBlue"
</div> label="บันทึก"
</div> @click="saveAbsence"
/>
</div>
</q-card>
</q-form>
</div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.btnBlue { .btnBlue {
background-color: #016987; background-color: #016987;
color: #fff; color: #fff;
} }
</style> </style>

2
src/modules/05_leave/interface/index/main.ts
View file

@ -21,7 +21,7 @@ interface formListLeaveData {
date: string | null date: string | null
type: string type: string
status: string status: string
fiscalyear: string year: string
} }
export type { OptionData, FormLeavetMainData, formListLeaveData } export type { OptionData, FormLeavetMainData, formListLeaveData }

6
src/modules/05_leave/interface/request/AddAbsence.ts Normal file
View file

@ -0,0 +1,6 @@
interface OptionDataAdd {
}
export type {
OptionDataAdd
}

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

@ -3,7 +3,7 @@
*/ */
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 addAbsence = () => import("@/modules/05_leave/views/AddPage.vue")
/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue"); /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
*/ */

64
src/modules/05_leave/store.ts
View file

@ -1,7 +1,7 @@
import { defineStore } from "pinia" import { defineStore } from "pinia"
import { ref, computed } from "vue" import { ref, computed } from "vue"
import type { QTableProps } from "quasar" import type { QTableProps } from "quasar"
import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/" import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/main"
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
export const useLeaveStore = defineStore("Leave", () => { export const useLeaveStore = defineStore("Leave", () => {
@ -10,7 +10,7 @@ export const useLeaveStore = defineStore("Leave", () => {
const LeaveType = ref<string | null>("0") const LeaveType = ref<string | null>("0")
const LeaveStatus = ref<string | null>("0") const LeaveStatus = ref<string | null>("0")
const fiscalYearyear = ref<string | null>("0") const fiscalYearyear = ref<string | null>("0")
const rows = ref<formListLeaveData>([]) const rows = ref<formListLeaveData[]>([])
const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
async function fecthList(data: formListLeaveData[]) { async function fecthList(data: formListLeaveData[]) {
let datalist: formListLeaveData[] = data.map((e: any) => ({ let datalist: formListLeaveData[] = data.map((e: any) => ({
@ -31,21 +31,21 @@ export const useLeaveStore = defineStore("Leave", () => {
if (filterType === "" && filterStatus === "" && filterYear === "") { if (filterType === "" && filterStatus === "" && filterYear === "") {
DataMainUpdate.value = DataMainOrig.value DataMainUpdate.value = DataMainOrig.value
} else if (filterType !== "" && filterStatus === "" && filterYear === "") { } else if (filterType !== "" && filterStatus === "" && filterYear === "") {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType)
} else if (filterType !== "" && filterStatus !== "" && filterYear === null) { } else if (filterType !== "" && filterStatus !== "" && filterYear === null) {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus)
} else if (filterType !== "" && filterStatus === "" && filterYear !== "") { } else if (filterType !== "" && filterStatus === "" && filterYear !== "") {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.fiscalYear === filterYear) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.year === filterYear)
} else if (filterType === "" && filterStatus !== "" && filterYear === "") { } else if (filterType === "" && filterStatus !== "" && filterYear === "") {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus)
} else if (filterType === "" && filterStatus === "" && filterYear !== "") { } else if (filterType === "" && filterStatus === "" && filterYear !== "") {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.fiscalYear === filterYear) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.year === filterYear)
} else if (filterType === "" && filterStatus !== "" && filterYear !== null) { } else if (filterType === "" && filterStatus !== "" && filterYear !== null) {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.fiscalYear === filterYear) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.year === filterYear)
} else if (filterType !== "" && filterStatus !== "" && filterYear === "") { } else if (filterType !== "" && filterStatus !== "" && filterYear === "") {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.Type === filterType) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.type === filterType)
} else if (filterType !== "" && filterStatus !== "" && filterYear !== null) { } else if (filterType !== "" && filterStatus !== "" && filterYear !== null) {
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus && item.fiscalYear === filterYear) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus && item.year === filterYear)
} else if (filterType == "0" && filterStatus == "0" && filterYear !== null) { } else if (filterType == "0" && filterStatus == "0" && filterYear !== null) {
DataMainUpdate.value = DataMainOrig.value DataMainUpdate.value = DataMainOrig.value
} }
@ -67,13 +67,13 @@ export const useLeaveStore = defineStore("Leave", () => {
if (fiscalYearyear.value !== "0") { if (fiscalYearyear.value !== "0") {
filteredData = filteredData.filter((item: formListLeaveData) => item.year === fiscalYearyear.value) filteredData = filteredData.filter((item: formListLeaveData) => item.year === fiscalYearyear.value)
} }
const dataArr = filteredData.map((e: any) => ({ const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
no: e.no, no: e.no,
type: convertType(e.type), type: convertType(e.type) || '',
status: convertStatus(e.status), status: convertStatus(e.status) || '',
date: date2Thai(new Date(e.date)), date: date2Thai(new Date(e.date)),
year: convertYear(e.year), year: e.year !== undefined ? e.year : ''
})) }));
rows.value = dataArr rows.value = dataArr
} }
} }
@ -162,12 +162,16 @@ export const useLeaveStore = defineStore("Leave", () => {
} }
} }
const optionsSpecific = ref<OptionData[]>([ const optionsSpecific = ref([
{ id: "0", name: "ลาไปศึกษา" }, { id: '0', name: "ลาไปศึกษา" },
{ id: "1", name: "ฝึกอบรม" }, { id: '1', name: "ฝึกอบรม" },
{ id: "2", name: "ปฎิบัติการวิจัย" }, { id: '2', name: "ปฎิบัติการวิจัย" },
{ id: "2", name: "ดูงาน" }, { id: '3', name: "ดูงาน" },
]) ]);
const optionsOrdination = ref([
{ id: '0', name: "ลาอุปสมบท" },
{ id: '1', name: "ลาประกอบพิธีฮัจย์" },
]);
const typeOptions = ref<OptionData[]>([ const typeOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" }, { id: "0", name: "ทั้งหมด" },
{ id: "1", name: "ลาป่วย" }, { id: "1", name: "ลาป่วย" },
@ -181,8 +185,20 @@ export const useLeaveStore = defineStore("Leave", () => {
{ id: "9", name: "ลาติดตามคู่สมรส" }, { id: "9", name: "ลาติดตามคู่สมรส" },
{ id: "10", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" }, { id: "10", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]) ])
const options = ref<OptionData[]>([
const statusOptions = ref<OptionData>([ { id: '0', name: "ลาป่วย" },
{ id: '1', name: "ลากิจส่วนตัว" },
{ id: '2', name: "ลาคลอดบุตร" },
{ id: '3', name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
{ id: '4', name: "ลาพักผ่อน" },
{ id: '5', name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
{ id: '6', name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
{ id: '7', name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
{ id: '8', name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
{ id: '9', name: "ลาติดตามคู่สมรส" },
{ id: '10', name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]);
const statusOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" }, { id: "0", name: "ทั้งหมด" },
{ id: "1", name: "อนุมัติ" }, { id: "1", name: "อนุมัติ" },
{ id: "2", name: "ไม่อนุมัติ" }, { id: "2", name: "ไม่อนุมัติ" },
@ -247,5 +263,7 @@ export const useLeaveStore = defineStore("Leave", () => {
searchFilterTable, searchFilterTable,
fiscalyearOP, fiscalyearOP,
fiscalYearyear, fiscalYearyear,
options,
optionsOrdination
} }
}) })

174
src/modules/05_leave/views/AddPage.vue Normal file
View file

@ -0,0 +1,174 @@
<script setup lang="ts">
import { ref, onMounted,computed } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import Form from '@/modules/05_leave/componenst/Form.vue'
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";
const dataStore = useLeaveStore();
const router = useRouter();
const route = useRoute();
const myform = ref<QForm | null>(null);
const $q = useQuasar();
const model = ref('');
const modelSpecific = ref(null);
const clickBack = () => {
router.push(`/leave`);
};
onMounted(() => {});
const saveAbsence = () => {
$q.dialog({
title: "ยืนยันการยื่นข้อมูลลาออก",
message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(() => {
// createFormresign()
if (model.value !== "7") {
console.log(1);
} else if (model.value === "7") {
console.log(2);
}
router.push(`/leave`);
})
.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="clickBack"
/>
<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">
<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">
เลือกประเภทการลา {{ model }}
</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="dataStore.options"
option-value="id"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
/>
<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
<div class="col-6 row q-pa-sm" v-if="model === '5' || model === '7'">
<q-select
dense
class="q-ml-lg col-6"
outlined
v-model="modelSpecific"
:options="model === '5' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
option-value="id"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
/>
</div>
</div>
<q-icon
name="mdi-numeric-2-circle"
size="20px"
color="primary"
v-if="model == '7'"
/>
<div
class="q-pl-sm text-weight-bold text-dark"
v-if="model == '7'"
>
เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
</div>
<div
class="col-12 row q-pa-sm q-col-gutter-sm"
v-if="model == '7'"
>
<q-select
dense
class="q-ml-lg col-6"
outlined
v-model="modelSpecific"
:options="dataStore.optionsSpecific"
option-value="id"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
/>
</div>
<q-icon
name="mdi-numeric-2-circle"
size="20px"
color="primary"
v-else
/>
<q-icon
name="mdi-numeric-3-circle"
size="20px"
color="primary"
v-if="model == '7'"
/>
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
<Form :type="model"/>
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
@click="saveAbsence"
/>
</div>
</q-card>
</q-form>
</div>
</div>
</template>
<style scoped lang="scss">
.btnBlue {
background-color: #016987;
color: #fff;
}
</style>