แก้ไขชื่อตัวแปรให้สอดคล้องกัน

This commit is contained in:
AnandaTon 2023-11-23 10:19:35 +07:00
parent 7a688d8abc
commit 5a44fc64a4
7 changed files with 168 additions and 177 deletions

View file

@ -29,9 +29,9 @@ const writeatRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null) const birthdayRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null) const governmentRef = ref<object | null>(null)
const totalLeaveRef = ref<object | null>(null) const totalLeaveRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null) const endLeaveDateRef = ref<object | null>(null)
const dateOrdinationRef = ref<object | null>(null) const dateOrdinationRef = ref<object | null>(null)
const dateLeaveStartRef = ref<object | null>(null) const startLeaveDateRef = ref<object | null>(null)
const addressMeasureRef = ref<object | null>(null) const addressMeasureRef = ref<object | null>(null)
const addressBuddhistRef = ref<object | null>(null) const addressBuddhistRef = ref<object | null>(null)
const measureLocationNameRef = ref<object | null>(null) const measureLocationNameRef = ref<object | null>(null)
@ -42,8 +42,8 @@ const formData = reactive<any>({
writeat: "", writeat: "",
government: new Date(), government: new Date(),
birthday: new Date(), birthday: new Date(),
dateLeaveStart: null, startLeaveDate: null,
dateLeaveEnd: null, endLeaveDate: null,
totalLeave: new Date(), totalLeave: new Date(),
dateOrdination: new Date(), dateOrdination: new Date(),
measureLocationName: "", measureLocationName: "",
@ -60,8 +60,8 @@ const formRef: FormRef06 = {
writeat: writeatRef, writeat: writeatRef,
government: governmentRef, government: governmentRef,
birthday: birthdayRef, birthday: birthdayRef,
dateLeaveStart: dateLeaveStartRef, startLeaveDate: startLeaveDateRef,
dateLeaveEnd: dateLeaveEndRef, endLeaveDate: endLeaveDateRef,
totalLeave: totalLeaveRef, totalLeave: totalLeaveRef,
dateOrdination: dateOrdinationRef, dateOrdination: dateOrdinationRef,
measureLocationName: measureLocationNameRef, measureLocationName: measureLocationNameRef,
@ -71,10 +71,10 @@ const formRef: FormRef06 = {
addressBuddhist: addressBuddhistRef, addressBuddhist: addressBuddhistRef,
} }
// Watch for changes in dateLeaveEnd and update leaveTotal accordingly // Watch for changes in endLeaveDate and update leaveTotal accordingly
watch(formData.dateLeaveEnd, async () => { watch(formData.endLeaveDate, async () => {
if (formData.dateLeaveStart !== undefined && formData.dateLeaveEnd !== undefined) { if (formData.startLeaveDate !== undefined && formData.endLeaveDate !== undefined) {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
formData.leaveTotal = newLeaveTotal formData.leaveTotal = newLeaveTotal
console.log(newLeaveTotal) console.log(newLeaveTotal)
} }
@ -86,7 +86,7 @@ watch(formData.dateLeaveEnd, async () => {
* function พเดทค LeaveTotal * function พเดทค LeaveTotal
*/ */
function updateLeaveTotal() { function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
formData.leaveTotal = newLeaveTotal formData.leaveTotal = newLeaveTotal
console.log("test") console.log("test")
} }
@ -144,7 +144,7 @@ function onSubmit() {
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveStart" :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.startLeaveDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -156,10 +156,10 @@ function onSubmit() {
outlined outlined
bg-color="white" bg-color="white"
dense dense
ref="dateLeaveStartRef" ref="startLeaveDateRef"
hide-bottom-space hide-bottom-space
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null" :model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
@ -173,14 +173,14 @@ function onSubmit() {
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formData.dateLeaveEnd" v-model="formData.endLeaveDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
@update:model-value="updateLeaveTotal" @update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:enableTimePicker="false" :enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
week-start="0" week-start="0"
> >
<template #year="{ year }"> <template #year="{ year }">
@ -193,13 +193,13 @@ function onSubmit() {
<q-input <q-input
outlined outlined
dense dense
ref="dateLeaveEndRef" ref="endLeaveDateRef"
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>

View file

@ -14,8 +14,8 @@ const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const writeatRef = ref<object | null>(null) const writeatRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null) const governmentRef = ref<object | null>(null)
const dateLeaveStartRef = ref<object | null>(null) const startLeaveDateRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null) const endLeaveDateRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
@ -33,8 +33,8 @@ const props = defineProps({
const formData = reactive<any>({ const formData = reactive<any>({
writeat: "", writeat: "",
government: new Date(), government: new Date(),
dateLeaveStart: null, startLeaveDate: null,
dateLeaveEnd: null, endLeaveDate: null,
totalLeave: new Date(), totalLeave: new Date(),
monk: "never", monk: "never",
file: null, file: null,
@ -44,8 +44,8 @@ const formData = reactive<any>({
const formRef: FormRef07 = { const formRef: FormRef07 = {
writeat: writeatRef, writeat: writeatRef,
government: governmentRef, government: governmentRef,
dateLeaveStart: dateLeaveStartRef, startLeaveDate: startLeaveDateRef,
dateLeaveEnd: dateLeaveEndRef, endLeaveDate: endLeaveDateRef,
} }
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */ /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@ -68,7 +68,7 @@ function onValidate() {
* function พเดทค LeaveTotal * function พเดทค LeaveTotal
*/ */
function updateLeaveTotal() { function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
formData.leaveTotal = newLeaveTotal formData.leaveTotal = newLeaveTotal
console.log("test") console.log("test")
} }
@ -110,7 +110,7 @@ function onSubmit() {
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<datepicker <datepicker
v-model="formData.dateLeaveStart" v-model="formData.startLeaveDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
@ -127,7 +127,7 @@ function onSubmit() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveStartRef" ref="startLeaveDateRef"
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
outlined outlined
@ -135,7 +135,7 @@ function onSubmit() {
hide-bottom-space hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null" :model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
@ -145,7 +145,7 @@ function onSubmit() {
</datepicker> </datepicker>
<datepicker <datepicker
v-model="formData.dateLeaveEnd" v-model="formData.endLeaveDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
@ -154,8 +154,8 @@ function onSubmit() {
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
@update:model-value="updateLeaveTotal" @update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -165,15 +165,15 @@ function onSubmit() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveEndRef" ref="endLeaveDateRef"
class="full-width datepicker" class="full-width datepicker"
bg-color="white" bg-color="white"
outlined outlined
dense dense
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
hide-bottom-space hide-bottom-space
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>

View file

@ -12,8 +12,8 @@ const edit = ref<boolean>(true)
const files = ref<any>(null) const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const dateLeaveStartRef = ref<object | null>(null) const startLeaveDateRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null) const endLeaveDateRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null) const writeatRef = ref<object | null>(null)
const receivedRef = ref<object | null>(null) const receivedRef = ref<object | null>(null)
const atRef = ref<object | null>(null) const atRef = ref<object | null>(null)
@ -35,8 +35,8 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({ const formData = reactive<any>({
dateLeaveStart: null, startLeaveDate: null,
dateLeaveEnd: null, endLeaveDate: null,
totalLeave: 1, totalLeave: 1,
file: null, file: null,
writeat: "", writeat: "",
@ -50,8 +50,8 @@ const formData = reactive<any>({
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef08 = { const formRef: FormRef08 = {
dateLeaveStart: dateLeaveStartRef, startLeaveDate: startLeaveDateRef,
dateLeaveEnd: dateLeaveEndRef, endLeaveDate: endLeaveDateRef,
writeat: writeatRef, writeat: writeatRef,
received: receivedRef, received: receivedRef,
at: atRef, at: atRef,
@ -81,7 +81,7 @@ function onValidate() {
* function พเดทค LeaveTotal * function พเดทค LeaveTotal
*/ */
function updateLeaveTotal() { function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
formData.leaveTotal = newLeaveTotal formData.leaveTotal = newLeaveTotal
console.log("test") console.log("test")
} }
@ -120,7 +120,7 @@ function onSubmit() {
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.dateLeaveStart" :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.startLeaveDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -132,10 +132,10 @@ function onSubmit() {
outlined outlined
bg-color="white" bg-color="white"
dense dense
ref="dateLeaveStartRef" ref="startLeaveDateRef"
hide-bottom-space hide-bottom-space
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null" :model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
@ -149,15 +149,15 @@ function onSubmit() {
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formData.dateLeaveEnd" v-model="formData.endLeaveDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
@update:model-value="updateLeaveTotal" @update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -169,12 +169,12 @@ function onSubmit() {
<q-input <q-input
outlined outlined
dense dense
ref="dateLeaveEndRef" ref="endLeaveDateRef"
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
class="full-width datepicker" class="full-width datepicker"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >

View file

@ -12,8 +12,8 @@ const edit = ref<boolean>(true)
const files = ref<any>(null) const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const dateLeaveStartRef = ref<object | null>(null) const startLeaveDateRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null) const endLeaveDateRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null) const birthdayRef = ref<object | null>(null)
const dateGovernmentRef = ref<object | null>(null) const dateGovernmentRef = ref<object | null>(null)
const salaryRef = ref<object | null>(null) const salaryRef = ref<object | null>(null)
@ -41,8 +41,8 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({ const formData = reactive<any>({
writeat: "", writeat: "",
dateLeaveStart: null, startLeaveDate: null,
dateLeaveEnd: null, endLeaveDate: null,
birthday: new Date(), birthday: new Date(),
dateGovernment: new Date(), dateGovernment: new Date(),
salary: 10000, salary: 10000,
@ -60,8 +60,8 @@ const formData = reactive<any>({
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef09 = { const formRef: FormRef09 = {
dateLeaveStart: dateLeaveStartRef, startLeaveDate: startLeaveDateRef,
dateLeaveEnd: dateLeaveEndRef, endLeaveDate: endLeaveDateRef,
birthday: birthdayRef, birthday: birthdayRef,
dateGovernment: dateGovernmentRef, dateGovernment: dateGovernmentRef,
salary: salaryRef, salary: salaryRef,
@ -96,7 +96,7 @@ function onValidate() {
* function พเดทค LeaveTotal * function พเดทค LeaveTotal
*/ */
function updateLeaveTotal() { function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
formData.leaveTotal = newLeaveTotal formData.leaveTotal = newLeaveTotal
console.log("test") console.log("test")
} }
@ -142,7 +142,7 @@ const formattedSalary = computed(() => {
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<datepicker v-model="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'"> <datepicker v-model="formData.startLeaveDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -151,7 +151,7 @@ const formattedSalary = computed(() => {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveStartRef" ref="startLeaveDateRef"
class="full-width datepicker" class="full-width datepicker"
bg-color="white" bg-color="white"
outlined outlined
@ -159,7 +159,7 @@ const formattedSalary = computed(() => {
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null" :model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -170,7 +170,7 @@ const formattedSalary = computed(() => {
</datepicker> </datepicker>
<datepicker <datepicker
v-model="formData.dateLeaveEnd" v-model="formData.endLeaveDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
@ -178,9 +178,9 @@ const formattedSalary = computed(() => {
week-start="0" week-start="0"
:locale="'th'" :locale="'th'"
@update:model-value="updateLeaveTotal" @update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:enableTimePicker="false" :enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -190,7 +190,7 @@ const formattedSalary = computed(() => {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveEndRef" ref="endLeaveDateRef"
class="full-width datepicker" class="full-width datepicker"
outlined outlined
dense dense
@ -198,8 +198,8 @@ const formattedSalary = computed(() => {
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>

View file

@ -25,8 +25,8 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({ const formData = reactive<any>({
writeat: "", writeat: "",
dateLeaveStart: null, startLeaveDate: null,
dateLeaveEnd: null, endLeaveDate: null,
birthday: new Date(), birthday: new Date(),
dateGovernment: new Date(), dateGovernment: new Date(),
salary: 10000, salary: 10000,
@ -42,8 +42,8 @@ const formData = reactive<any>({
}) })
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const dateLeaveStartRef = ref<object | null>(null) const startLeaveDateRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null) const endLeaveDateRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null) const birthdayRef = ref<object | null>(null)
const dateGovernmentRef = ref<object | null>(null) const dateGovernmentRef = ref<object | null>(null)
const telRef = ref<object | null>(null) const telRef = ref<object | null>(null)
@ -56,8 +56,8 @@ const writeatRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef10 = { const formRef: FormRef10 = {
dateLeaveStart: dateLeaveStartRef, startLeaveDate: startLeaveDateRef,
dateLeaveEnd: dateLeaveEndRef, endLeaveDate: endLeaveDateRef,
birthday: birthdayRef, birthday: birthdayRef,
dateGovernment: dateGovernmentRef, dateGovernment: dateGovernmentRef,
tel: telRef, tel: telRef,
@ -91,7 +91,7 @@ function onValidate() {
* function พเดทค LeaveTotal * function พเดทค LeaveTotal
*/ */
function updateLeaveTotal() { function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
formData.leaveTotal = newLeaveTotal formData.leaveTotal = newLeaveTotal
console.log("test") console.log("test")
} }
@ -136,7 +136,7 @@ const formattedSalary = computed(() => {
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<datepicker v-model="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'"> <datepicker v-model="formData.startLeaveDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -145,7 +145,7 @@ const formattedSalary = computed(() => {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveStartRef" ref="startLeaveDateRef"
class="full-width datepicker" class="full-width datepicker"
bg-color="white" bg-color="white"
outlined outlined
@ -153,7 +153,7 @@ const formattedSalary = computed(() => {
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null" :model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -164,17 +164,17 @@ const formattedSalary = computed(() => {
</datepicker> </datepicker>
<datepicker <datepicker
v-model="formData.dateLeaveEnd" v-model="formData.endLeaveDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@update:model-value="updateLeaveTotal" @update:model-value="updateLeaveTotal"
week-start="0" week-start="0"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:locale="'th'" :locale="'th'"
:enableTimePicker="false" :enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -184,7 +184,7 @@ const formattedSalary = computed(() => {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveEndRef" ref="endLeaveDateRef"
class="full-width datepicker" class="full-width datepicker"
outlined outlined
dense dense
@ -192,8 +192,8 @@ const formattedSalary = computed(() => {
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>

View file

@ -14,8 +14,8 @@ const files = ref<any>(null)
const filesUpload = ref<any>(null) const filesUpload = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const dateLeaveStartRef = ref<object | null>(null) const startLeaveDateRef = ref<object | null>(null)
const dateLeaveEndRef = ref<object | null>(null) const endLeaveDateRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null) const writeatRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
@ -33,16 +33,16 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({ const formData = reactive<any>({
writeat: "", writeat: "",
dateLeaveStart: null, startLeaveDate: null,
dateLeaveEnd: null, endLeaveDate: null,
file: "", file: "",
info: "", info: "",
}) })
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef13 = { const formRef: FormRef13 = {
dateLeaveStart: dateLeaveStartRef, startLeaveDate: startLeaveDateRef,
dateLeaveEnd: dateLeaveEndRef, endLeaveDate: endLeaveDateRef,
writeat: writeatRef, writeat: writeatRef,
} }
@ -117,7 +117,7 @@ function upLoadFile() {
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<datepicker v-model="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'"> <datepicker v-model="formData.startLeaveDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
@ -126,14 +126,14 @@ function upLoadFile() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveStartRef" ref="startLeaveDateRef"
class="full-width datepicker" class="full-width datepicker"
bg-color="white" bg-color="white"
outlined outlined
dense dense
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : null" :model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
@ -145,16 +145,16 @@ function upLoadFile() {
</datepicker> </datepicker>
<datepicker <datepicker
v-model="formData.dateLeaveEnd" v-model="formData.endLeaveDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
week-start="0" week-start="0"
:locale="'th'" :locale="'th'"
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:enableTimePicker="false" :enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -164,15 +164,15 @@ function upLoadFile() {
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="dateLeaveEndRef" ref="endLeaveDateRef"
class="full-width datepicker" class="full-width datepicker"
outlined outlined
dense dense
lazy-rules lazy-rules
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
:readonly="!formData.dateLeaveStart" :readonly="!formData.startLeaveDate"
:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : null" :model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
@ -214,7 +214,7 @@ function upLoadFile() {
</div> </div>
</q-card> </q-card>
<div v-if="formData.writeat && formData.dateLeaveStart && formData.dateLeaveEnd" class="q-mt-md"> <div v-if="formData.writeat && formData.startLeaveDate && formData.endLeaveDate" 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>

View file

@ -1,91 +1,82 @@
interface FormData { interface FormData {
dateStart: Date dateStart: Date
subject: string subject: string
who: string who: string
requestName: string requestName: string
position: string position: string
level: string level: string
ocRequest: string ocRequest: string
leaveReceived: string leaveReceived: string
leaveUse: string leaveUse: string
leaveRemaining: string leaveRemaining: string
} }
interface FormRef06 { interface FormRef06 {
writeat: object | null; writeat: object | null
government: object | null; government: object | null
birthday: object | null; birthday: object | null
dateLeaveStart: object | null; startLeaveDate: object | null
dateLeaveEnd: object | null; endLeaveDate: object | null
totalLeave: object | null; totalLeave: object | null
dateOrdination: object | null; dateOrdination: object | null
measureLocationName: object | null; measureLocationName: object | null
tel: object | null; tel: object | null
addressMeasure: object | null; addressMeasure: object | null
buddhistLocationName: object | null; buddhistLocationName: object | null
addressBuddhist: object | null; addressBuddhist: object | null
[key: string]: any; [key: string]: any
} }
interface FormRef07 { interface FormRef07 {
writeat: object | null writeat: object | null
government: object | null government: object | null
dateLeaveStart: object | null startLeaveDate: object | null
dateLeaveEnd: object | null endLeaveDate: object | null
[key: string]: any; [key: string]: any
} }
interface FormRef08 { interface FormRef08 {
dateLeaveStart: object | null startLeaveDate: object | null
dateLeaveEnd: object | null endLeaveDate: object | null
writeat: object | null writeat: object | null
received: object | null received: object | null
at: object | null at: object | null
dateAt: object | null dateAt: object | null
admitted: object | null admitted: object | null
atPlace: object | null atPlace: object | null
[key: string]: any; [key: string]: any
} }
interface FormRef09 { interface FormRef09 {
dateLeaveStart: object | null startLeaveDate: object | null
dateLeaveEnd: object | null endLeaveDate: object | null
birthday: object | null birthday: object | null
dateGovernment: object | null dateGovernment: object | null
salary: object | null salary: object | null
tel: object | null tel: object | null
addressLeave: object | null addressLeave: object | null
capital: object | null capital: object | null
country: object | null country: object | null
nameEducation: object | null nameEducation: object | null
degree: object | null degree: object | null
study: object | null study: object | null
writeat: object | null writeat: object | null
[key: string]: any; [key: string]: any
} }
interface FormRef10 { interface FormRef10 {
dateLeaveStart: object | null startLeaveDate: object | null
dateLeaveEnd: object | null endLeaveDate: object | null
birthday: object | null birthday: object | null
dateGovernment: object | null dateGovernment: object | null
tel: object | null tel: object | null
addressLeave: object | null addressLeave: object | null
capital: object | null capital: object | null
country: object | null country: object | null
course: object | null course: object | null
location: object | null location: object | null
writeat: object | null writeat: object | null
[key: string]: any; [key: string]: any
} }
interface FormRef13 { interface FormRef13 {
dateLeaveStart: object | null startLeaveDate: object | null
dateLeaveEnd: object | null endLeaveDate: object | null
writeat: object | null writeat: object | null
[key: string]: any; [key: string]: any
}
export type {
FormData,
FormRef06,
FormRef07,
FormRef08,
FormRef09,
FormRef10,
FormRef13,
} }
export type { FormData, FormRef06, FormRef07, FormRef08, FormRef09, FormRef10, FormRef13 }