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

เพิ่มเงื่อนไข ui แบบฟอร์มลาออก

Browse source
This commit is contained in:
AnandaTon 2023-11-20 23:24:06 +07:00
parent f02468d7fd
commit b536f4a3c1
10 changed files with 94 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ const formData = reactive<any>({
leaveNo: "", leaveNo: "",
startLeaveDate: null, startLeaveDate: null,
endLeaveDate: null, endLeaveDate: null,
halfDay: "half_day_morning", halfDay: "day",
contractTel: "", contractTel: "",
leaveTotal: "", leaveTotal: "",
leaveContactTel: "", leaveContactTel: "",
@ -100,11 +100,11 @@ function onValidate() {
} }
const isReadOnly = computed(() => { const isReadOnly = computed(() => {
const condition = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon" const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
if (condition) { if (conditionHalfDay) {
formData.endLeaveDate = null // Set formData.endLeaveDate to null formData.endLeaveDate = formData.startLeaveDate // Set formData.endLeaveDate to null
} }
return condition return conditionHalfDay
}) })
console.log(isReadOnly.value) console.log(isReadOnly.value)
</script> </script>
@ -185,6 +185,7 @@ console.log(isReadOnly.value)
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="isReadOnly" :readonly="isReadOnly"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -214,7 +215,11 @@ console.log(isReadOnly.value)
<div class="col-12 col-md-4 col-sm-6"> <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"> <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) }} {{
formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
? "0.5 วัน"
: calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
}}
</p> </p>
</div> </div>
</div> </div>

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

@ -165,7 +165,8 @@ function onValidate() {
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -180,7 +181,7 @@ function onValidate() {
ref="endLeaveDateRef" ref="endLeaveDateRef"
for="endLeaveDateRef" for="endLeaveDateRef"
hide-bottom-space hide-bottom-space
:readonly="!edit" :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="`${'ลาถึงวันที่'}`"

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

@ -187,7 +187,8 @@ function onValidate() {
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -202,7 +203,7 @@ function onValidate() {
ref="endLeaveDateRef" ref="endLeaveDateRef"
for="endLeaveDateRef" for="endLeaveDateRef"
hide-bottom-space hide-bottom-space
:readonly="!edit" :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="`${'ลาถึงวันที่'}`"

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

@ -203,7 +203,8 @@ function onValidate() {
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -218,8 +219,8 @@ function onValidate() {
ref="endLeaveDateRef" ref="endLeaveDateRef"
for="endLeaveDateRef" for="endLeaveDateRef"
hide-bottom-space hide-bottom-space
:readonly="!edit"
class="full-width datepicker" class="full-width datepicker"
:readonly="!formData.startLeaveDate"
: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 || `${'กรุณาเลือกลาถึงวันที่'}`]"

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

@ -42,8 +42,8 @@ const formData = reactive<any>({
writeat: "", writeat: "",
government: new Date(), government: new Date(),
birthday: new Date(), birthday: new Date(),
dateLeaveStart: new Date(), dateLeaveStart: null,
dateLeaveEnd: new Date(), dateLeaveEnd: null,
totalLeave: new Date(), totalLeave: new Date(),
dateOrdination: new Date(), dateOrdination: new Date(),
measureLocationName: "", measureLocationName: "",
@ -150,7 +150,18 @@ function onSubmit() {
</template> </template>
</datepicker> </datepicker>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveEnd" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0"> <datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateLeaveEnd"
:locale="'th'"
autoApply
borderless
:readonly="!formData.dateLeaveStart"
:enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
week-start="0"
>
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -167,6 +178,7 @@ function onSubmit() {
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:readonly="!formData.dateLeaveStart"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>

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

@ -33,8 +33,8 @@ const props = defineProps({
const formData = reactive<any>({ const formData = reactive<any>({
writeat: "", writeat: "",
government: new Date(), government: new Date(),
dateLeaveStart: new Date(), dateLeaveStart: null,
dateLeaveEnd: new Date(), dateLeaveEnd: null,
totalLeave: new Date(), totalLeave: new Date(),
monk: "never", monk: "never",
file: null, file: null,
@ -145,6 +145,8 @@ function onSubmit() {
week-start="0" week-start="0"
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
:readonly="!formData.dateLeaveStart"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -159,6 +161,7 @@ function onSubmit() {
bg-color="white" bg-color="white"
outlined outlined
dense dense
:readonly="!formData.dateLeaveStart"
hide-bottom-space hide-bottom-space
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"

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

@ -137,7 +137,18 @@ function onSubmit() {
</template> </template>
</datepicker> </datepicker>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveEnd" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0"> <datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateLeaveEnd"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!formData.dateLeaveStart"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -151,6 +162,7 @@ function onSubmit() {
ref="dateLeaveEndRef" ref="dateLeaveEndRef"
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
:readonly="!formData.dateLeaveStart"
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"

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

@ -6,7 +6,7 @@ import { useQuasar } from "quasar"
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin const { date2Thai, dialogConfirm, notifyError } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const filesUpload = ref<any>(null) const filesUpload = ref<any>(null)
const isSave = ref<boolean>(false) const isSave = ref<boolean>(false)
@ -85,20 +85,14 @@ function onValidate() {
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
function onSubmit() { function onSubmit() {
dialogConfirm( dialogConfirm($q, async () => {
$q, if (filesUpload.value) {
async () => { console.log(filesUpload.value)
if (isSave.value === false) { } else {
props.onSubmit() notifyError($q, "กรุณาอัปโหลดแบบฟอร์ม")
console.log(formData) console.log("false")
isSave.value = true }
} else { })
console.log("savefile อัปโหลด", filesUpload.value)
}
},
!isSave.value ? "ยืนยันการยื่นใบลา" : "ยืนยันการอัพโหลดไฟล์",
!isSave.value ? "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
)
} }
</script> </script>
@ -189,7 +183,8 @@ function onSubmit() {
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -204,7 +199,7 @@ function onSubmit() {
ref="endLeaveDateRef" ref="endLeaveDateRef"
for="endLeaveDateRef" for="endLeaveDateRef"
hide-bottom-space hide-bottom-space
:readonly="!edit" :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="`${'ลาถึงวันที่'}`"
@ -268,7 +263,7 @@ function onSubmit() {
</div> </div>
</q-card> </q-card>
<div v-if="isSave" class="q-mt-md"> <div v-if="formData.leaveNo && formData.endLeaveDate && formData.startLeaveDate" class="q-mt-md">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-4-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>

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

@ -122,7 +122,7 @@ function onValidate() {
/** /**
* function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly * function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly
*/ */
const isReadOnly = ref(true) const isReadOnly = ref(false)
watch(formData.followHistoryCountry, newVal => { watch(formData.followHistoryCountry, newVal => {
isReadOnly.value = !!newVal isReadOnly.value = !!newVal
}) })
@ -230,7 +230,8 @@ watch(formData.followHistoryEnd, newVal => {
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit" :readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -245,7 +246,7 @@ watch(formData.followHistoryEnd, newVal => {
ref="endLeaveDateRef" ref="endLeaveDateRef"
for="endLeaveDateRef" for="endLeaveDateRef"
hide-bottom-space hide-bottom-space
:readonly="!edit" :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="`${'ลาถึงวันที่'}`"

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

@ -6,7 +6,7 @@ import type { FormRef13 } 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, notifyError } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const isSave = ref<boolean>(false) const isSave = ref<boolean>(false)
@ -63,18 +63,30 @@ function onValidate() {
} }
} }
// /** ฟังก์ชั่น บันทึก */
// function onSubmit() {
// dialogConfirm(
// $q,
// async () => {
// props.onSubmit()
// console.log(formData)
// isSave.value = true
// },
// "ยืนยันการยื่นใบลา",
// "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
// )
// }
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
function onSubmit() { function onSubmit() {
dialogConfirm( dialogConfirm($q, async () => {
$q, if (filesUpload.value) {
async () => { console.log(filesUpload.value)
props.onSubmit() } else {
console.log(formData) notifyError($q, "กรุณาอัปโหลดแบบฟอร์ม")
isSave.value = true console.log("false")
}, }
"ยืนยันการยื่นใบลา", })
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
} }
/** ฟังก์ชั่น อัปโหลด /** ฟังก์ชั่น อัปโหลด
@ -202,7 +214,7 @@ function upLoadFile() {
</div> </div>
</q-card> </q-card>
<div v-if="isSave" class="q-mt-md"> <div v-if="formData.writeat && formData.dateLeaveStart && formData.dateLeaveEnd" class="q-mt-md">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-4-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>