เพิ่มเงื่อนไข ui แบบฟอร์มลาออก
This commit is contained in:
parent
f02468d7fd
commit
b536f4a3c1
10 changed files with 94 additions and 51 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="`${'ลาถึงวันที่'}`"
|
||||
|
|
|
|||
|
|
@ -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="`${'ลาถึงวันที่'}`"
|
||||
|
|
|
|||
|
|
@ -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 || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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="`${'ลาถึงวันที่'}`"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="`${'ลาถึงวันที่'}`"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue