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

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

@ -1,11 +1,14 @@
<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({
@ -17,7 +20,7 @@ const props = defineProps({
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}) });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({ const formData = reactive<any>({
@ -31,18 +34,18 @@ const formData = reactive<any>({
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 = {
@ -55,43 +58,43 @@ const FormRef: FormRef = {
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>
@ -116,7 +119,7 @@ function onValidate() {
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<datepicker <datepicker
@ -147,12 +150,21 @@ function onValidate() {
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="
formData.startLeaveDate != null
? date2Thai(formData.startLeaveDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -169,7 +181,13 @@ function onValidate() {
: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
? new Date(
formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000
)
: null
"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -187,17 +205,37 @@ function onValidate() {
bg-color="white" bg-color="white"
:readonly="!formData.startLeaveDate" :readonly="!formData.startLeaveDate"
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null" :model-value="
formData.endLeaveDate != null
? date2Thai(formData.endLeaveDate)
: null
"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<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
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
bg-color="white"
readonly
hide-bottom-space
/>
<q-input <q-input
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6"
dense dense
@ -225,7 +263,9 @@ function onValidate() {
unmasked-value unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้" label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]" :rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/> />
<q-input <q-input
@ -239,7 +279,9 @@ function onValidate() {
v-model="formData.leaveContactLocation" v-model="formData.leaveContactLocation"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]" :rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/> />
</div> </div>
</div> </div>
@ -269,7 +311,7 @@ function onValidate() {
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" />
@ -278,11 +320,17 @@ function onValidate() {
<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>
</div> </div>
<q-card bordered flat class="full-width"> <q-card bordered flat class="full-width">
<q-list separator> <q-list separator>
<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs"> <q-item
v-for="(file, index) in formData.file"
:key="index"
class="q-my-xs"
>
<q-item-section> <q-item-section>
<q-item-label class="full-width ellipsis"> <q-item-label class="full-width ellipsis">
{{ file.name }} {{ file.name }}
@ -300,7 +348,14 @@ function onValidate() {
<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
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="ยื่นใบลา"
/>
</div> </div>
</form> </form>
</template> </template>