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

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

View file

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

View file

@ -165,7 +165,8 @@ function onValidate() {
hide-bottom-space
:enableTimePicker="false"
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 }">
{{ year + 543 }}
@ -180,7 +181,7 @@ function onValidate() {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
:readonly="!edit"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`"

View file

@ -187,7 +187,8 @@ function onValidate() {
hide-bottom-space
:enableTimePicker="false"
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 }">
{{ year + 543 }}
@ -202,7 +203,7 @@ function onValidate() {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
:readonly="!edit"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`"

View file

@ -203,7 +203,8 @@ function onValidate() {
borderless
:enableTimePicker="false"
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 }">
{{ year + 543 }}
@ -218,8 +219,8 @@ function onValidate() {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
:readonly="!edit"
class="full-width datepicker"
:readonly="!formData.startLeaveDate"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"

View file

@ -42,8 +42,8 @@ const formData = reactive<any>({
writeat: "",
government: new Date(),
birthday: new Date(),
dateLeaveStart: new Date(),
dateLeaveEnd: new Date(),
dateLeaveStart: null,
dateLeaveEnd: null,
totalLeave: new Date(),
dateOrdination: new Date(),
measureLocationName: "",
@ -150,7 +150,18 @@ function onSubmit() {
</template>
</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 }">
{{ year + 543 }}
</template>
@ -167,6 +178,7 @@ function onSubmit() {
class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:readonly="!formData.dateLeaveStart"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>

View file

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

View file

@ -137,7 +137,18 @@ function onSubmit() {
</template>
</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 }">
{{ year + 543 }}
</template>
@ -151,6 +162,7 @@ function onSubmit() {
ref="dateLeaveEndRef"
bg-color="white"
hide-bottom-space
:readonly="!formData.dateLeaveStart"
class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null"
:label="`${'ลาถึงวันที่'}`"

View file

@ -6,7 +6,7 @@ import { useQuasar } from "quasar"
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin
const { date2Thai, dialogConfirm, notifyError } = mixin
const edit = ref<boolean>(true)
const filesUpload = ref<any>(null)
const isSave = ref<boolean>(false)
@ -85,20 +85,14 @@ function onValidate() {
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
if (isSave.value === false) {
props.onSubmit()
console.log(formData)
isSave.value = true
} else {
console.log("savefile อัปโหลด", filesUpload.value)
}
},
!isSave.value ? "ยืนยันการยื่นใบลา" : "ยืนยันการอัพโหลดไฟล์",
!isSave.value ? "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
)
dialogConfirm($q, async () => {
if (filesUpload.value) {
console.log(filesUpload.value)
} else {
notifyError($q, "กรุณาอัปโหลดแบบฟอร์ม")
console.log("false")
}
})
}
</script>
@ -189,7 +183,8 @@ function onSubmit() {
borderless
:enableTimePicker="false"
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 }">
{{ year + 543 }}
@ -204,7 +199,7 @@ function onSubmit() {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
:readonly="!edit"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`"
@ -268,7 +263,7 @@ function onSubmit() {
</div>
</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">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวนโหลด/ปโหลดแบบฟอร</div>

View file

@ -122,7 +122,7 @@ function onValidate() {
/**
* function check าถามามาเเลวจะเป readonly
*/
const isReadOnly = ref(true)
const isReadOnly = ref(false)
watch(formData.followHistoryCountry, newVal => {
isReadOnly.value = !!newVal
})
@ -230,7 +230,8 @@ watch(formData.followHistoryEnd, newVal => {
hide-bottom-space
:enableTimePicker="false"
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 }">
{{ year + 543 }}
@ -245,7 +246,7 @@ watch(formData.followHistoryEnd, newVal => {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
:readonly="!edit"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`"

View file

@ -6,7 +6,7 @@ import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm } = mixin
const { date2Thai, dialogConfirm, notifyError } = mixin
const edit = ref<boolean>(true)
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() {
dialogConfirm(
$q,
async () => {
props.onSubmit()
console.log(formData)
isSave.value = true
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
dialogConfirm($q, async () => {
if (filesUpload.value) {
console.log(filesUpload.value)
} else {
notifyError($q, "กรุณาอัปโหลดแบบฟอร์ม")
console.log("false")
}
})
}
/**
@ -202,7 +214,7 @@ function upLoadFile() {
</div>
</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">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวนโหลด/ปโหลดแบบฟอร</div>