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

แก้ Ui ฟอร์ม เพิ่ม function ต่างๆ

Browse source
This commit is contained in:
AnandaTon 2023-11-20 18:01:01 +07:00
parent f8a95f61fa
commit f02468d7fd
14 changed files with 241 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,12 @@
<script setup lang="ts"> <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 type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
const $q = useQuasar()
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai } = mixin const { date2Thai, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
@ -20,11 +22,11 @@ const props = defineProps({
}) })
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({ const formData = reactive<any>({
leaveNo: "", leaveNo: "",
startLeaveDate: null, startLeaveDate: null,
endLeaveDate: null, endLeaveDate: null,
halfDay: "day", halfDay: "half_day_morning",
contractTel: "", contractTel: "",
leaveTotal: "", leaveTotal: "",
leaveContactTel: "", leaveContactTel: "",
@ -96,6 +98,15 @@ function onValidate() {
props.onSubmit() 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> </script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว --> <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
@ -173,7 +184,7 @@ function onValidate() {
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="isReadOnly"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -188,7 +199,7 @@ function onValidate() {
ref="endLeaveDateRef" ref="endLeaveDateRef"
for="endLeaveDateRef" for="endLeaveDateRef"
hide-bottom-space hide-bottom-space
:readonly="!edit" :readonly="isReadOnly"
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="`${'ลาถึงวันที่'}`"
@ -200,19 +211,12 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <div class="col-12 col-md-4 col-sm-6">
class="col-12 col-md-2 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">
dense เป็นเวลา
outlined {{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
ref="leaveTotalRef" </p>
for="leaveTotalRef" </div>
type="number"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
@ -302,7 +306,7 @@ 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>

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

@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Bir
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai } = mixin const { date2Thai, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
@ -20,7 +20,7 @@ const props = defineProps({
}) })
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({ const formData = reactive<any>({
leaveNo: "", leaveNo: "",
startLeaveDate: null, startLeaveDate: null,
endLeaveDate: null, endLeaveDate: null,
@ -192,22 +192,16 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<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 <q-input
class="col-12 col-md-2 col-sm-12" class="col-12 col-md-3 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 dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -222,7 +216,7 @@ function onValidate() {
/> />
<q-input <q-input
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-9 col-sm-12"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -233,7 +227,8 @@ function onValidate() {
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]" :rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/> />
</div>
</div>
<q-input <q-input
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12"
@ -289,7 +284,7 @@ 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>

35
src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
View file

@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Hel
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai } = mixin const { date2Thai, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
@ -20,7 +20,7 @@ const props = defineProps({
}) })
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({ const formData = reactive<any>({
leaveNo: "", leaveNo: "",
wifeName: "", wifeName: "",
brithDate: null, brithDate: null,
@ -214,19 +214,12 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <div class="col-12 col-md-4 col-sm-6">
class="col-12 col-md-4 col-sm-12" <p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
dense เป็นเวลา
outlined {{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
ref="leaveTotalRef" </p>
for="leaveTotalRef" </div>
type="number"
hide-bottom-space
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-4 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12"
@ -279,9 +272,10 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input <q-input
class="col-12 col-md-4 col-sm-12" class="col-12 col-md-3 col-sm-12"
dense dense
outlined outlined
ref="leaveContactTelRef" ref="leaveContactTelRef"
@ -296,7 +290,7 @@ function onValidate() {
/> />
<q-input <q-input
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-9 col-sm-12"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -307,7 +301,8 @@ function onValidate() {
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]" :rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/> />
</div>
</div>
<q-input <q-input
hide-bottom-space hide-bottom-space
type="textarea" type="textarea"
@ -350,7 +345,7 @@ function onValidate() {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</form> </form>
</template> </template>

33
src/modules/05_leave/componenst/Forms/05_VacationForm.vue
View file

@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Vac
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai } = mixin const { date2Thai, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
@ -20,7 +20,7 @@ const props = defineProps({
}) })
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({ const formData = reactive<any>({
leaveNo: "", leaveNo: "",
halfDay: "day", halfDay: "day",
lastYearVacation: "", lastYearVacation: "",
@ -230,20 +230,14 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <div class="col-12 col-md-4 col-sm-6">
class="col-12 col-md-3 col-sm-12" <p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
dense เป็นเวลา
outlined {{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
hide-bottom-space </p>
ref="leaveTotalRef" </div>
for="leaveTotalRef" <div class="full-width">
type="number" <div class="q-col-gutter-sm row">
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<q-input <q-input
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12"
dense dense
@ -260,7 +254,7 @@ function onValidate() {
/> />
<q-input <q-input
class="col-12 col-md-12 col-sm-6" class="col-12 col-md-9 col-sm-6"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -271,7 +265,8 @@ function onValidate() {
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]" :rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/> />
</div>
</div>
<q-input <q-input
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
@ -314,7 +309,7 @@ function onValidate() {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</form> </form>
</template> </template>

28
src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
View file

@ -6,7 +6,7 @@ import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const files = ref<any>(null) const files = ref<any>(null)
@ -96,9 +96,10 @@ function onSubmit() {
console.log(formData) console.log(formData)
props.onSubmit() props.onSubmit()
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) )
console.log("tese")
} }
</script> </script>
@ -175,8 +176,12 @@ function onSubmit() {
</template> </template>
</datepicker> </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="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<datepicker <datepicker
@ -364,6 +369,17 @@ function onSubmit() {
type="textarea" type="textarea"
hide-bottom-space 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"> <div class="col-12 col-sm-6">
<q-file ref="fileRef" v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple> <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"> <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>

16
src/modules/05_leave/componenst/Forms/07_HajjForm.vue
View file

@ -6,7 +6,7 @@ import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const files = ref<any>(null) const files = ref<any>(null)
@ -73,8 +73,8 @@ function onSubmit() {
console.log(formData) console.log(formData)
props.onSubmit() props.onSubmit()
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) )
} }
</script> </script>
@ -171,8 +171,12 @@ function onSubmit() {
</template> </template>
</datepicker> </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 <datepicker
v-model="formData.government" v-model="formData.government"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
@ -251,7 +255,7 @@ function onSubmit() {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</form> </form>
</template> </template>

16
src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
View file

@ -6,7 +6,7 @@ import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const files = ref<any>(null) const files = ref<any>(null)
@ -85,8 +85,8 @@ function onSubmit() {
console.log(formData) console.log(formData)
props.onSubmit() props.onSubmit()
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) )
} }
</script> </script>
@ -163,8 +163,12 @@ function onSubmit() {
</template> </template>
</datepicker> </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="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input
@ -280,7 +284,7 @@ function onSubmit() {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</form> </form>
</template> </template>

8
src/modules/05_leave/componenst/Forms/09_StudyForm.vue
View file

@ -100,8 +100,8 @@ function onSubmit() {
console.log(formData) console.log(formData)
props.onSubmit() props.onSubmit()
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) )
} }
@ -201,7 +201,7 @@ const formattedSalary = computed(() => {
<div class="col-12 col-md-4 col-sm-6"> <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"> <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) }} {{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
</p> </p>
</div> </div>
@ -422,7 +422,7 @@ const formattedSalary = computed(() => {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</form> </form>
</template> </template>

6
src/modules/05_leave/componenst/Forms/10_TrainForm.vue
View file

@ -95,8 +95,8 @@ function onSubmit() {
console.log(formData) console.log(formData)
props.onSubmit() props.onSubmit()
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) )
} }
/** /**
@ -393,7 +393,7 @@ const formattedSalary = computed(() => {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</form> </form>
</template> </template>

6
src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
View file

@ -96,8 +96,8 @@ function onSubmit() {
console.log("savefile อัปโหลด", filesUpload.value) console.log("savefile อัปโหลด", filesUpload.value)
} }
}, },
!isSave.value ? "ยืนยันการบันทึกข้อมูล" : "ยืนยันการอัพโหลดไฟล์", !isSave.value ? "ยืนยันการยื่นใบลา" : "ยืนยันการอัพโหลดไฟล์",
!isSave.value ? "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?" !isSave.value ? "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
) )
} }
</script> </script>
@ -302,7 +302,7 @@ function onSubmit() {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</div> </div>
</form> </form>

60
src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
View file

@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Fol
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai, arabicNumberToText } = mixin const { date2Thai, arabicNumberToText, calculateDurationYmd } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
@ -20,7 +20,7 @@ const props = defineProps({
}) })
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({ const formData = reactive<any>({
leaveNo: "", leaveNo: "",
startLeaveDate: null, startLeaveDate: null,
endLeaveDate: null, endLeaveDate: null,
@ -35,7 +35,7 @@ const formData = reactive<FormData>({
followHistoryTime: "", followHistoryTime: "",
followHistoryStart: null, followHistoryStart: null,
followHistoryEnd: null, followHistoryEnd: null,
leaveDetail: "", //รายละเอียดการลา leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
file: [], //เอกสารปะกอบ file: [], //เอกสารปะกอบ
}) })
@ -118,6 +118,26 @@ function onValidate() {
props.onSubmit() 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> </script>
<template> <template>
@ -237,20 +257,13 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <div class="col-12 col-md-4 col-sm-6">
class="col-12 col-md-4 col-sm-12" <p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
dense มีกำหนด
outlined {{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
hide-bottom-space </p>
ref="leaveTotalRef" </div>
for="leaveTotalRef" <div class="col-12 col-md-6 col-sm-12">
type="number"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<div class="col-12 col-md-3 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 /> <q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
</div> </div>
<div class="col-12 col-md-6 col-sm-12"> <div class="col-12 col-md-6 col-sm-12">
@ -324,7 +337,7 @@ function onValidate() {
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="isReadOnly"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -339,7 +352,7 @@ function onValidate() {
ref="followHistoryStartRef" ref="followHistoryStartRef"
for="followHistoryStartRef" for="followHistoryStartRef"
hide-bottom-space hide-bottom-space
:readonly="!edit" :readonly="isReadOnly"
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null" :model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
:label="`${'ตั้งแต่วันที่'}`" :label="`${'ตั้งแต่วันที่'}`"
@ -361,7 +374,7 @@ function onValidate() {
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="isReadOnly"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -376,7 +389,7 @@ function onValidate() {
ref="followHistoryEndRef" ref="followHistoryEndRef"
for="followHistoryEndRef" for="followHistoryEndRef"
hide-bottom-space hide-bottom-space
:readonly="!edit" :readonly="isReadOnly"
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null" :model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
:label="`${'ถึงวันที่'}`" :label="`${'ถึงวันที่'}`"
@ -398,17 +411,18 @@ function onValidate() {
v-model="formData.followHistoryCountry" v-model="formData.followHistoryCountry"
label="ประเทศ" label="ประเทศ"
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]" :rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
:readonly="isReadOnly"
/> />
<q-input <q-input
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12"
dense dense
outlined outlined
:readonly="isReadOnly"
hide-bottom-space hide-bottom-space
ref="followHistoryTimeRef" ref="followHistoryTimeRef"
for="followHistoryTimeRef" for="followHistoryTimeRef"
v-model="formData.followHistoryTime" v-model="formData.followHistoryTime"
label="เป็นเวลา" label="เป็นเวลา"
:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
/> />
<q-input <q-input
@ -453,7 +467,7 @@ function onValidate() {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</form> </form>
</template> </template>

6
src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
View file

@ -72,8 +72,8 @@ function onSubmit() {
console.log(formData) console.log(formData)
isSave.value = true isSave.value = true
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) )
} }
@ -236,7 +236,7 @@ function upLoadFile() {
<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
</div> </div>
</div> </div>
</form> </form>

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

@ -89,8 +89,8 @@ onMounted(() => {})
const saveAbsence = () => { const saveAbsence = () => {
$q.dialog({ $q.dialog({
title: "ยืนยันการยื่นข้อมูลลาออก", title: "ยืนยันการยื่นใบลา",
message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?", message: "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่?",
cancel: { cancel: {
flat: true, flat: true,
color: "negative", color: "negative",

8
src/modules/05_leave/views/AddPage.vue
View file

@ -20,9 +20,11 @@ import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http" import http from "@/plugins/http"
import config from "@/app.config" import config from "@/app.config"
import type { QForm } from "quasar" import type { QForm } from "quasar"
import { useCounterMixin } from "@/stores/mixin"
const dataStore = useLeaveStore() const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const myform = ref<QForm | null>(null) const myform = ref<QForm | null>(null)
@ -55,8 +57,10 @@ const saveAbsence = () => {
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}) .onDismiss(() => {})
} }
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => { const onSubmit = async () => {
dialogConfirm($q, async () => {}, "ยืนยันการยื่นใบลา", "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?")
console.log("save") console.log("save")
} }
</script> </script>