แก้ ไม่มีการส่ง จำนวนวัน /แก้ convert date จาก api

This commit is contained in:
STW_TTTY\stwtt 2024-07-08 12:04:06 +07:00
parent fb951882b8
commit adc7a0f3cb

View file

@ -195,6 +195,11 @@ watch(props, () => {
}
});
watch(()=>formDataWorkInternational.leaveEndDate,()=>{
if(formDataWorkInternational.leaveStartDate !== null && formDataWorkInternational.leaveEndDate !== null){
fetchCheck()
}
})
/**Hook */
onMounted(() => {
if (props.data) {
@ -214,136 +219,135 @@ onMounted(() => {
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกขอม</div>
</div>
<form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
hide-bottom-space
bg-color="white"
for="leaveWroteRef"
dense
outlined
v-model="formDataWorkInternational.leaveWrote"
label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกขอม</div>
</div>
<form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
hide-bottom-space
bg-color="white"
for="leaveWroteRef"
dense
outlined
v-model="formDataWorkInternational.leaveWrote"
label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveStartDate"
:locale="'th'"
hide-bottom-space
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit || statusCheck === 'NEW'"
@update:model-value="formDataWorkInternational.leaveEndDate = null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker"
:model-value="
formDataWorkInternational.leaveStartDate != null
? date2Thai(formDataWorkInternational.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveStartDate"
:locale="'th'"
hide-bottom-space
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit || statusCheck === 'NEW'"
@update:model-value="formDataWorkInternational.leaveEndDate = null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker"
:model-value="
formDataWorkInternational.leaveStartDate != null
? date2Thai(formDataWorkInternational.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
:class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-6 col-sm-6 cursor-pointer"
menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
@update:model-value="fetchCheck()"
week-start="0"
:readonly="
!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
"
:min-date="formDataWorkInternational.leaveStartDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveEndDateRef"
for="leaveEndDateRef"
:readonly="
!formDataWorkInternational.leaveStartDate ||
statusCheck === 'NEW'
"
class="full-width datepicker"
:model-value="
formDataWorkInternational.leaveEndDate != null
? date2Thai(formDataWorkInternational.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
<datepicker
:class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-6 col-sm-6 cursor-pointer"
menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="
!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
"
:min-date="formDataWorkInternational.leaveStartDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveEndDateRef"
for="leaveEndDateRef"
:readonly="
!formDataWorkInternational.leaveStartDate ||
statusCheck === 'NEW'
"
class="full-width datepicker"
:model-value="
formDataWorkInternational.leaveEndDate != null
? date2Thai(formDataWorkInternational.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
<template v-slot:hint>
<span style="color: red">
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
</span>
</template>
</q-input>
</template>
</datepicker>
<!-- <q-input
<template v-slot:hint>
<span style="color: red">
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
</span>
</template>
</q-input>
</template>
</datepicker>
<!-- <q-input
class="col-md-3 col-sm-12"
dense
outlined
@ -356,190 +360,190 @@ onMounted(() => {
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/> -->
<q-input
hide-bottom-space
type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formDataWorkInternational.leaveDetail"
label="รายละเอียด"
:readonly="!edit || statusCheck === 'NEW'"
/>
<div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row">
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataWorkInternational.leaveDocument"
multiple
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12">
<q-card>
<q-list
v-if="leaveDocumentList && leaveDocumentList.length > 0"
separator
>
<q-item
v-for="(document, index) in leaveDocumentList"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="row items-baseline">
<div class="col">
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<div>
<q-btn
:href="document.path"
target="_blank"
outline
flat
dense
color="blue"
icon="mdi-download"
size="12px"
class="q-mr-md"
>
<q-tooltip>ดาวนโหลดไฟล</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
@click="clickDelete(leaveId, document.docId)"
target="_blank"
outline
color="red"
flat
dense
icon="delete"
size="12px"
>
<q-tooltip>ลบไฟล</q-tooltip>
</q-btn>
</div>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</div>
</q-card>
<q-input
hide-bottom-space
type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formDataWorkInternational.leaveDetail"
label="รายละเอียด"
:readonly="!edit || statusCheck === 'NEW'"
/>
<div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row">
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataWorkInternational.leaveDocument"
multiple
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12">
<q-card>
<q-list
v-if="leaveDocumentList && leaveDocumentList.length > 0"
separator
>
<q-item
v-for="(document, index) in leaveDocumentList"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="row items-baseline">
<div class="col">
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<div>
<q-btn
:href="document.path"
target="_blank"
outline
flat
dense
color="blue"
icon="mdi-download"
size="12px"
class="q-mr-md"
>
<q-tooltip>ดาวนโหลดไฟล</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
@click="clickDelete(leaveId, document.docId)"
target="_blank"
outline
color="red"
flat
dense
icon="delete"
size="12px"
>
<q-tooltip>ลบไฟล</q-tooltip>
</q-btn>
</div>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</div>
</q-card>
<div v-if="data && data.id" 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>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-sm-3 q-my-sm">
<div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
<div v-if="data && data.id" 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>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-sm-3 q-my-sm">
<div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
ดาวนโหลด
</div> -->
<q-btn
color="primary"
icon="download"
label="ดาวน์โหลดแบบฟอร์ม"
@click="
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
"
/>
</div>
</div>
<div class="col-sm-5 q-my-sm">
<div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
<q-btn
color="primary"
icon="download"
label="ดาวน์โหลดแบบฟอร์ม"
@click="
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
"
/>
</div>
</div>
<div class="col-sm-5 q-my-sm">
<div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
ปโหลด
</div> -->
<q-file
v-model="formDataWorkInternational.leaveDraftDocument"
use-chips
dense
label="อัปโหลดแบบฟอร์ม"
outlined
bg-color="white"
accept="application/pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<q-file
v-model="formDataWorkInternational.leaveDraftDocument"
use-chips
dense
label="อัปโหลดแบบฟอร์ม"
outlined
bg-color="white"
accept="application/pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
<div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
<div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
ไฟลปโหลด
</div> -->
<q-btn
icon="visibility"
color="blue"
label="ดาวน์โหลดไฟล์"
:href="leaveDraftDocument"
target="_blank"
/>
</div>
</div>
<!-- <div class="col-md-1 self-end q-mb-sm">
<q-btn
icon="visibility"
color="blue"
label="ดาวน์โหลดไฟล์"
:href="leaveDraftDocument"
target="_blank"
/>
</div>
</div>
<!-- <div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
><q-tooltip>ปโหลด</q-tooltip></q-btn
>
</div> -->
</div>
</q-card>
</div>
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>นทกแบบราง</q-tooltip></q-btn
>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>นใบลา</q-tooltip></q-btn
>
</div>
</div>
</form>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>นทกแบบราง</q-tooltip></q-btn
>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>นใบลา</q-tooltip></q-btn
>
</div>
</div>
</form>
</template>