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

layout form ลา

Browse source
This commit is contained in:
Warunee Tamkoo 2023-11-23 10:46:59 +07:00
parent 5a44fc64a4
commit b3523dfd4f
2 changed files with 326 additions and 271 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/05_leave/componenst/Forms/01_SickForm.vue
View file

@ -232,7 +232,7 @@ console.log(isReadOnly.value)
</template> </template>
</datepicker> </datepicker>
<q-input <q-input
class="col-12 col-md-2 col-sm-6" class="col-12 col-md-3 col-sm-6"
dense dense
bg-color="white" bg-color="white"
outlined outlined

595
src/modules/05_leave/componenst/Forms/03_Birth.vue
View file

@ -1,306 +1,361 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue" import { ref, reactive, watch } from "vue";
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/BirthForm" import type {
import { useCounterMixin } from "@/stores/mixin" FormData,
FormRef,
} from "@/modules/05_leave/interface/request/BirthForm";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin() const mixin = useCounterMixin();
const { date2Thai, calculateDurationYmd } = mixin const { date2Thai, calculateDurationYmd } = mixin;
const edit = ref<boolean>(true) const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null, default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}) });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({ const formData = reactive<any>({
leaveNo: "", leaveNo: "",
startLeaveDate: null, startLeaveDate: null,
endLeaveDate: null, endLeaveDate: null,
contractTel: "", contractTel: "",
leaveTotal: "", leaveTotal: "",
leaveLast: "", leaveLast: "",
leaveContactTel: "", leaveContactTel: "",
leaveContactLocation: "", leaveContactLocation: "",
leaveDetail: "", leaveDetail: "",
file: [], file: [],
}) });
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null) const leaveNoRef = ref<object | null>(null);
const startLeaveDateRef = ref<object | null>(null) const startLeaveDateRef = ref<object | null>(null);
const endLeaveDateRef = ref<object | null>(null) const endLeaveDateRef = ref<object | null>(null);
const contractTelRef = ref<object | null>(null) const contractTelRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null) const leaveTotalRef = ref<object | null>(null);
const leaveContactTelRef = ref<object | null>(null) const leaveContactTelRef = ref<object | null>(null);
const leaveContactLocationRef = ref<object | null>(null) const leaveContactLocationRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null) const leaveDetailRef = ref<object | null>(null);
const fileRef = ref<object | null>(null) const fileRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = { const FormRef: FormRef = {
leaveNo: leaveNoRef, leaveNo: leaveNoRef,
startLeaveDate: startLeaveDateRef, startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef, endLeaveDate: endLeaveDateRef,
contractTel: contractTelRef, contractTel: contractTelRef,
leaveTotal: leaveTotalRef, leaveTotal: leaveTotalRef,
leaveContactTel: leaveContactTelRef, leaveContactTel: leaveContactTelRef,
leaveContactLocation: leaveContactLocationRef, leaveContactLocation: leaveContactLocationRef,
leaveDetail: leaveDetailRef, leaveDetail: leaveDetailRef,
file: fileRef, file: fileRef,
} };
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */ /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => { watch(props.data, async () => {
// console.log("data==>", props.data) // console.log("data==>", props.data)
formData.leaveNo = props.data.leaveNo formData.leaveNo = props.data.leaveNo;
formData.startLeaveDate = props.data.startLeaveDate formData.startLeaveDate = props.data.startLeaveDate;
formData.endLeaveDate = props.data.endLeaveDate formData.endLeaveDate = props.data.endLeaveDate;
formData.contractTel = props.data.contractTel formData.contractTel = props.data.contractTel;
formData.leaveTotal = props.data.leaveTotal formData.leaveTotal = props.data.leaveTotal;
formData.leaveContactTel = props.data.leaveContactTel formData.leaveContactTel = props.data.leaveContactTel;
formData.leaveDetail = props.data.leaveDetail formData.leaveDetail = props.data.leaveDetail;
formData.file = props.data.file formData.file = props.data.file;
}) });
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const fileDocDataUpload = ref<File[]>([]) const fileDocDataUpload = ref<File[]>([]);
async function fileUploadDoc(files: any) { async function fileUploadDoc(files: any) {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file) fileDocDataUpload.value.push(file);
}) });
} }
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() { function onValidate() {
const hasError = [] const hasError = [];
for (const key in FormRef) { for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) { if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key] const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate() const isValid = property.value.validate();
hasError.push(isValid) hasError.push(isValid);
} }
} }
} }
if (hasError.every(result => result === true)) { if (hasError.every((result) => result === true)) {
props.onSubmit() props.onSubmit();
} }
} }
</script> </script>
<!-- ฟอร์มลาคลอดบุตร--> <!-- ฟอร์มลาคลอดบุตร-->
<template> <template>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div> <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div> </div>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <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-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12"
ref="leaveNoRef" ref="leaveNoRef"
for="leaveNoRef" for="leaveNoRef"
dense dense
outlined outlined
v-model="formData.leaveNo" v-model="formData.leaveNo"
label="เขียนที่" label="เขียนที่"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<datepicker <datepicker
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formData.startLeaveDate" v-model="formData.startLeaveDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="!edit"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="startLeaveDateRef" ref="startLeaveDateRef"
for="startLeaveDateRef" for="startLeaveDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit" :readonly="!edit"
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null" :model-value="
:label="`${'ลาตั้งแต่วันที่'}`" formData.startLeaveDate != null
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" ? date2Thai(formData.startLeaveDate)
> : null
<template v-slot:prepend> "
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> :label="`${'ลาตั้งแต่วันที่'}`"
</template> :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
</q-input> >
</template> <template v-slot:prepend>
</datepicker> <q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker <datepicker
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formData.endLeaveDate" v-model="formData.endLeaveDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!formData.startLeaveDate" :readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="
> formData.startLeaveDate
<template #year="{ year }"> ? new Date(
{{ year + 543 }} formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000
</template> )
<template #year-overlay-value="{ value }"> : null
{{ parseInt(value + 543) }} "
</template> >
<template #trigger> <template #year="{ year }">
<q-input {{ year + 543 }}
outlined </template>
dense <template #year-overlay-value="{ value }">
ref="endLeaveDateRef" {{ parseInt(value + 543) }}
for="endLeaveDateRef" </template>
hide-bottom-space <template #trigger>
bg-color="white" <q-input
:readonly="!formData.startLeaveDate" outlined
class="full-width datepicker" dense
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null" ref="endLeaveDateRef"
:label="`${'ลาถึงวันที่'}`" for="endLeaveDateRef"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" hide-bottom-space
> bg-color="white"
<template v-slot:prepend> :readonly="!formData.startLeaveDate"
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> class="full-width datepicker"
</template> :model-value="
</q-input> formData.endLeaveDate != null
</template> ? date2Thai(formData.endLeaveDate)
</datepicker> : null
<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space /> "
<q-input :label="`${'ลาถึงวันที่'}`"
class="col-12 col-md-3 col-sm-6" :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
dense >
outlined <template v-slot:prepend>
ref="leaveLastRef" <q-icon
for="leaveLastRef" name="event"
v-model="formData.leaveLast" class="cursor-pointer"
label="ลาครั้งสุดท้ายเมื่อวันที่" style="color: var(--q-primary)"
readonly >
hide-bottom-space </q-icon>
bg-color="white" </template>
/> </q-input>
<div class="full-width"> </template>
<div class="q-col-gutter-sm row"> </datepicker>
<q-input <q-input
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
hide-bottom-space ref="leaveTotalRef"
bg-color="white" for="leaveTotalRef"
ref="leaveContactTelRef" v-model="formData.leaveTotal"
for="leaveContactTelRef" label="จำนวนวันที่ลา"
v-model="formData.leaveContactTel" bg-color="white"
mask="(###)-###-####" readonly
unmasked-value hide-bottom-space
label="หมายเลขโทรศัพท์ที่ติดต่อได้" />
:readonly="!edit" <q-input
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]" class="col-12 col-md-3 col-sm-6"
/> dense
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="formData.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input <q-input
class="col-12 col-md-9 col-sm-12" class="col-12 col-md-9 col-sm-12"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveContactLocationRef" ref="leaveContactLocationRef"
for="leaveContactLocationRef" for="leaveContactLocationRef"
v-model="formData.leaveContactLocation" v-model="formData.leaveContactLocation"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]" :rules="[
/> (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
</div> ]"
</div> />
<q-input </div>
type="textarea" </div>
class="col-12 col-md-12 col-sm-12" <q-input
dense type="textarea"
outlined class="col-12 col-md-12 col-sm-12"
bg-color="white" dense
ref="leaveDetailRef" outlined
for="leaveDetailRef" bg-color="white"
v-model="formData.leaveDetail" ref="leaveDetailRef"
label="รายละเอียด" for="leaveDetailRef"
:readonly="!edit" v-model="formData.leaveDetail"
/> label="รายละเอียด"
:readonly="!edit"
/>
<q-file <q-file
ref="fileRef" ref="fileRef"
for="fileRef" for="fileRef"
hide-bottom-space hide-bottom-space
v-model="formData.file" v-model="formData.file"
@added="fileUploadDoc" @added="fileUploadDoc"
dense dense
bg-color="white" bg-color="white"
label="เอกสารประกอบ" label="เอกสารประกอบ"
outlined outlined
use-chips use-chips
multiple multiple
class="q-pl-sm col-12" class="q-pl-sm col-12"
:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
<div class="col-12 row" v-if="!edit"> <div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"> <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 class="q-pl-sm text-weight-bold text-dark">
</div> เอกสารเพิ่มเติม
<q-card bordered flat class="full-width"> </div>
<q-list separator> </div>
<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs"> <q-card bordered flat class="full-width">
<q-item-section> <q-list separator>
<q-item-label class="full-width ellipsis"> <q-item
{{ file.name }} v-for="(file, index) in formData.file"
</q-item-label> :key="index"
<q-item-label caption> </q-item-label> class="q-my-xs"
</q-item-section> >
</q-item> <q-item-section>
</q-list> <q-item-label class="full-width ellipsis">
</q-card> {{ file.name }}
</div> </q-item-label>
</div> <q-item-label caption> </q-item-label>
</q-card> </q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" /> <q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md"> <div class="row col-12 q-pt-md">
<q-space /> <q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" /> <q-btn
</div> id="onSubmit"
</form> type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="ยื่นใบลา"
/>
</div>
</form>
</template> </template>