แก้ Ui ฟอร์ม เพิ่ม function ต่างๆ
This commit is contained in:
AnandaTon
parent
f8a95f61fa
commit
f02468d7fd
14 changed files with 241 additions and 210 deletions
|
|
@ -1,10 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import { ref, reactive, watch, computed } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const { date2Thai, calculateDurationYmd } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
|
|
@ -20,11 +22,11 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
const formData = reactive<any>({
|
||||
leaveNo: "",
|
||||
startLeaveDate: null,
|
||||
endLeaveDate: null,
|
||||
halfDay: "day",
|
||||
halfDay: "half_day_morning",
|
||||
contractTel: "",
|
||||
leaveTotal: "",
|
||||
leaveContactTel: "",
|
||||
|
|
@ -96,6 +98,15 @@ function onValidate() {
|
|||
props.onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
const isReadOnly = computed(() => {
|
||||
const condition = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
|
||||
if (condition) {
|
||||
formData.endLeaveDate = null // Set formData.endLeaveDate to null
|
||||
}
|
||||
return condition
|
||||
})
|
||||
console.log(isReadOnly.value)
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
|
||||
|
|
@ -173,7 +184,7 @@ function onValidate() {
|
|||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
:readonly="isReadOnly"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -188,7 +199,7 @@ function onValidate() {
|
|||
ref="endLeaveDateRef"
|
||||
for="endLeaveDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
:readonly="isReadOnly"
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
|
|
@ -200,19 +211,12 @@ function onValidate() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
type="number"
|
||||
v-model="formData.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
|
|
@ -302,7 +306,7 @@ function onValidate() {
|
|||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Bir
|
|||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const { date2Thai, calculateDurationYmd } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
|
|
@ -20,7 +20,7 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
const formData = reactive<any>({
|
||||
leaveNo: "",
|
||||
startLeaveDate: null,
|
||||
endLeaveDate: null,
|
||||
|
|
@ -192,48 +192,43 @@ function onValidate() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-12"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
type="number"
|
||||
v-model="formData.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactTelRef"
|
||||
for="leaveContactTelRef"
|
||||
v-model="formData.leaveContactTel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactLocationRef"
|
||||
for="leaveContactLocationRef"
|
||||
v-model="formData.leaveContactLocation"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
|
||||
</p>
|
||||
</div>
|
||||
<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
|
||||
ref="leaveContactTelRef"
|
||||
for="leaveContactTelRef"
|
||||
v-model="formData.leaveContactTel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactLocationRef"
|
||||
for="leaveContactLocationRef"
|
||||
v-model="formData.leaveContactLocation"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
|
|
@ -289,7 +284,7 @@ function onValidate() {
|
|||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Hel
|
|||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const { date2Thai, calculateDurationYmd } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
|
|
@ -20,7 +20,7 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
const formData = reactive<any>({
|
||||
leaveNo: "",
|
||||
wifeName: "",
|
||||
brithDate: null,
|
||||
|
|
@ -214,19 +214,12 @@ function onValidate() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
type="number"
|
||||
hide-bottom-space
|
||||
v-model="formData.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
|
|
@ -279,35 +272,37 @@ function onValidate() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveContactTelRef"
|
||||
for="leaveContactTelRef"
|
||||
v-model="formData.leaveContactTel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveContactTelRef"
|
||||
for="leaveContactTelRef"
|
||||
v-model="formData.leaveContactTel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactLocationRef"
|
||||
for="leaveContactLocationRef"
|
||||
v-model="formData.leaveContactLocation"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactLocationRef"
|
||||
for="leaveContactLocationRef"
|
||||
v-model="formData.leaveContactLocation"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
|
|
@ -350,7 +345,7 @@ function onValidate() {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Vac
|
|||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const { date2Thai, calculateDurationYmd } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
|
|
@ -20,7 +20,7 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
const formData = reactive<any>({
|
||||
leaveNo: "",
|
||||
halfDay: "day",
|
||||
lastYearVacation: "",
|
||||
|
|
@ -230,48 +230,43 @@ function onValidate() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
type="number"
|
||||
v-model="formData.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactTelRef"
|
||||
for="leaveContactTelRef"
|
||||
v-model="formData.leaveContactTel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactLocationRef"
|
||||
for="leaveContactLocationRef"
|
||||
v-model="formData.leaveContactLocation"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
|
||||
</p>
|
||||
</div>
|
||||
<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
|
||||
ref="leaveContactTelRef"
|
||||
for="leaveContactTelRef"
|
||||
v-model="formData.leaveContactTel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveContactLocationRef"
|
||||
for="leaveContactLocationRef"
|
||||
v-model="formData.leaveContactLocation"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
|
|
@ -314,7 +309,7 @@ function onValidate() {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence"
|
|||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm } = mixin
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
|
||||
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
|
@ -96,9 +96,10 @@ function onSubmit() {
|
|||
console.log(formData)
|
||||
props.onSubmit()
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
console.log("tese")
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -175,8 +176,12 @@ function onSubmit() {
|
|||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input class="col-12 col-md-4 col-sm-6" dense outlined bg-color="white" type="number" v-model="formData.totalLeave" label="จำนวนวันที่ลา" readonly />
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
|
|
@ -364,6 +369,17 @@ function onSubmit() {
|
|||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formData.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file ref="fileRef" v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple>
|
||||
|
|
@ -398,7 +414,7 @@ function onSubmit() {
|
|||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence"
|
|||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm } = mixin
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
|
||||
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
|
@ -73,8 +73,8 @@ function onSubmit() {
|
|||
console.log(formData)
|
||||
props.onSubmit()
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -171,8 +171,12 @@ function onSubmit() {
|
|||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input v-model="formData.totalLeave" class="col-12 col-md-4 col-sm-6" bg-color="white" dense outlined readonly type="number" label="จำนวนวันที่ลา" />
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
|
||||
</p>
|
||||
</div>
|
||||
<datepicker
|
||||
v-model="formData.government"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
|
|
@ -251,7 +255,7 @@ function onSubmit() {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence"
|
|||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm } = mixin
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
|
||||
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
|
@ -85,8 +85,8 @@ function onSubmit() {
|
|||
console.log(formData)
|
||||
props.onSubmit()
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -163,8 +163,12 @@ function onSubmit() {
|
|||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input class="col-12 col-md-4 col-sm-6" dense outlined bg-color="white" type="number" v-model="formData.totalLeave" label="จำนวนวันที่ลา" readonly />
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
|
|
@ -280,7 +284,7 @@ function onSubmit() {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -100,8 +100,8 @@ function onSubmit() {
|
|||
console.log(formData)
|
||||
props.onSubmit()
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -201,7 +201,7 @@ const formattedSalary = computed(() => {
|
|||
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
ระยะเวลา
|
||||
เป็นเวลา
|
||||
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -422,7 +422,7 @@ const formattedSalary = computed(() => {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@ function onSubmit() {
|
|||
console.log(formData)
|
||||
props.onSubmit()
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
/**
|
||||
|
|
@ -393,7 +393,7 @@ const formattedSalary = computed(() => {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -96,8 +96,8 @@ function onSubmit() {
|
|||
console.log("savefile อัปโหลด", filesUpload.value)
|
||||
}
|
||||
},
|
||||
!isSave.value ? "ยืนยันการบันทึกข้อมูล" : "ยืนยันการอัพโหลดไฟล์",
|
||||
!isSave.value ? "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
|
||||
!isSave.value ? "ยืนยันการยื่นใบลา" : "ยืนยันการอัพโหลดไฟล์",
|
||||
!isSave.value ? "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -302,7 +302,7 @@ function onSubmit() {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Fol
|
|||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, arabicNumberToText } = mixin
|
||||
const { date2Thai, arabicNumberToText, calculateDurationYmd } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
|
|
@ -20,7 +20,7 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
const formData = reactive<any>({
|
||||
leaveNo: "",
|
||||
startLeaveDate: null,
|
||||
endLeaveDate: null,
|
||||
|
|
@ -35,7 +35,7 @@ const formData = reactive<FormData>({
|
|||
followHistoryTime: "",
|
||||
followHistoryStart: null,
|
||||
followHistoryEnd: null,
|
||||
leaveDetail: "", //รายละเอียดการลา
|
||||
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
|
||||
file: [], //เอกสารปะกอบ
|
||||
})
|
||||
|
||||
|
|
@ -118,6 +118,26 @@ function onValidate() {
|
|||
props.onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly
|
||||
*/
|
||||
const isReadOnly = ref(true)
|
||||
watch(formData.followHistoryCountry, newVal => {
|
||||
isReadOnly.value = !!newVal
|
||||
})
|
||||
|
||||
watch(formData.followHistoryTime, newVal => {
|
||||
isReadOnly.value = !!newVal
|
||||
})
|
||||
|
||||
watch(formData.followHistoryStart, newVal => {
|
||||
isReadOnly.value = !!newVal
|
||||
})
|
||||
|
||||
watch(formData.followHistoryEnd, newVal => {
|
||||
isReadOnly.value = !!newVal
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -237,20 +257,13 @@ function onValidate() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
type="number"
|
||||
v-model="formData.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-3 col-sm-12">
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
|
||||
มีกำหนด
|
||||
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
|
|
@ -324,7 +337,7 @@ function onValidate() {
|
|||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
:readonly="isReadOnly"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -339,7 +352,7 @@ function onValidate() {
|
|||
ref="followHistoryStartRef"
|
||||
for="followHistoryStartRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
:readonly="isReadOnly"
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
|
||||
:label="`${'ตั้งแต่วันที่'}`"
|
||||
|
|
@ -361,7 +374,7 @@ function onValidate() {
|
|||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
:readonly="isReadOnly"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -376,7 +389,7 @@ function onValidate() {
|
|||
ref="followHistoryEndRef"
|
||||
for="followHistoryEndRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
:readonly="isReadOnly"
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
|
|
@ -398,17 +411,18 @@ function onValidate() {
|
|||
v-model="formData.followHistoryCountry"
|
||||
label="ประเทศ"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
|
||||
:readonly="isReadOnly"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
:readonly="isReadOnly"
|
||||
hide-bottom-space
|
||||
ref="followHistoryTimeRef"
|
||||
for="followHistoryTimeRef"
|
||||
v-model="formData.followHistoryTime"
|
||||
label="เป็นเวลา"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
|
|
@ -453,7 +467,7 @@ function onValidate() {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@ function onSubmit() {
|
|||
console.log(formData)
|
||||
isSave.value = true
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -236,7 +236,7 @@ function upLoadFile() {
|
|||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@ onMounted(() => {})
|
|||
|
||||
const saveAbsence = () => {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการยื่นข้อมูลลาออก",
|
||||
message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
|
||||
title: "ยืนยันการยื่นใบลา",
|
||||
message: "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
|
|
|
|||
|
|
@ -20,9 +20,11 @@ import { useLeaveStore } from "@/modules/05_leave/store"
|
|||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import type { QForm } from "quasar"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const dataStore = useLeaveStore()
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm } = mixin
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const myform = ref<QForm | null>(null)
|
||||
|
|
@ -55,8 +57,10 @@ const saveAbsence = () => {
|
|||
.onCancel(() => {})
|
||||
.onDismiss(() => {})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm($q, async () => {}, "ยืนยันการยื่นใบลา", "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?")
|
||||
|
||||
console.log("save")
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue