เพิ่ม from submit
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
e4835425c0
commit
2dabb6d6a8
1 changed files with 259 additions and 280 deletions
|
|
@ -251,306 +251,285 @@ function checkEndDate() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
// watch(
|
||||||
() => formData.date,
|
// () => formData.date,
|
||||||
() => {
|
// () => {
|
||||||
if (formData.date) {
|
// if (formData.date) {
|
||||||
dateRef.value.resetValidation();
|
// dateRef.value.resetValidation();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
);
|
// );
|
||||||
|
|
||||||
watch(
|
// watch(
|
||||||
() => formData.startDate,
|
// () => formData.startDate,
|
||||||
() => {
|
// () => {
|
||||||
if (formData.startDate) {
|
// if (formData.startDate) {
|
||||||
startDateRef.value.resetValidation();
|
// startDateRef.value.resetValidation();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
);
|
// );
|
||||||
|
|
||||||
watch(
|
// watch(
|
||||||
() => formData.endDate,
|
// () => formData.endDate,
|
||||||
() => {
|
// () => {
|
||||||
if (formData.endDate) {
|
// if (formData.endDate) {
|
||||||
endDateRef.value.resetValidation();
|
// endDateRef.value.resetValidation();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
);
|
// );
|
||||||
|
|
||||||
/**
|
|
||||||
* function เรียกไฟล์ PDF
|
|
||||||
* @param url link PDF
|
|
||||||
* @param type ประเภทไฟล์
|
|
||||||
* @param fileName ชือไฟล์
|
|
||||||
*/
|
|
||||||
async function downloadFile(url: string, type: string, fileName: string) {
|
|
||||||
await axios
|
|
||||||
.get(url, {
|
|
||||||
method: "GET",
|
|
||||||
responseType: "blob",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then(async (res) => {
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = window.URL.createObjectURL(res.data);
|
|
||||||
a.download = fileName;
|
|
||||||
a.click();
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-card class="col-12" style="width: 80%">
|
<q-card class="col-12" style="width: 80%">
|
||||||
<Header :tittle="title" :close="closeDialog" />
|
<form @submit.prevent.stop="onClickSubmit">
|
||||||
<q-separator />
|
<Header :tittle="title" :close="closeDialog" />
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section class="scroll" style="max-height: 70vh">
|
<q-card-section class="scroll" style="max-height: 70vh">
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
<div class="col-xs-12 col-md-3">
|
<div class="col-xs-12 col-md-3">
|
||||||
<q-select
|
<q-select
|
||||||
ref="salaryTypeRef"
|
ref="salaryTypeRef"
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
outlined
|
outlined
|
||||||
option-label="name"
|
option-label="name"
|
||||||
option-value="id"
|
option-value="id"
|
||||||
emit-value
|
emit-value
|
||||||
map-options
|
map-options
|
||||||
v-model="formData.salaryType"
|
v-model="formData.salaryType"
|
||||||
:options="salaryTypeOption"
|
:options="salaryTypeOption"
|
||||||
label="ประเภทผังบัญชีเงินเดือน"
|
label="ประเภทผังบัญชีเงินเดือน"
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
|
(val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
|
||||||
]"
|
]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-3">
|
<div class="col-xs-12 col-md-3">
|
||||||
<q-select
|
<q-select
|
||||||
ref="posTypeRef"
|
ref="posTypeRef"
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
outlined
|
outlined
|
||||||
option-label="name"
|
option-label="name"
|
||||||
option-value="id"
|
option-value="id"
|
||||||
emit-value
|
emit-value
|
||||||
map-options
|
map-options
|
||||||
v-model="formData.posTypeId"
|
v-model="formData.posTypeId"
|
||||||
:options="salaryPosTypeOption"
|
:options="salaryPosTypeOption"
|
||||||
label="ประเภทตำแหน่ง/กลุ่ม"
|
label="ประเภทตำแหน่ง/กลุ่ม"
|
||||||
:rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
|
:rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
@update:model-value="fetchPosLevel"
|
@update:model-value="fetchPosLevel"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-3">
|
<div class="col-xs-12 col-md-3">
|
||||||
<q-select
|
<q-select
|
||||||
ref="posLevelRef"
|
ref="posLevelRef"
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
outlined
|
outlined
|
||||||
option-label="name"
|
option-label="name"
|
||||||
option-value="id"
|
option-value="id"
|
||||||
emit-value
|
emit-value
|
||||||
map-options
|
map-options
|
||||||
v-model="formData.posLevelId"
|
v-model="formData.posLevelId"
|
||||||
:options="salaryPosLevelOption"
|
:options="salaryPosLevelOption"
|
||||||
label="ระดับ"
|
label="ระดับ"
|
||||||
:rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
|
:rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:disable="formData.posTypeId === ''"
|
:disable="formData.posTypeId === ''"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-1">
|
<div class="col-xs-12 col-md-1">
|
||||||
<q-checkbox size="md" v-model="formData.isSpecial" label="ฉ" />
|
<q-checkbox
|
||||||
</div>
|
size="md"
|
||||||
|
v-model="formData.isSpecial"
|
||||||
|
label="ฉ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="col-xs-12 col-md-2"
|
class="col-xs-12 col-md-2"
|
||||||
style="display: flex; justify-content: flex-start"
|
style="display: flex; justify-content: flex-start"
|
||||||
>
|
|
||||||
<q-toggle
|
|
||||||
color="primary"
|
|
||||||
label="สถานะการใช้งาน"
|
|
||||||
v-model="formData.isActive"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-4">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="formData.date"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
borderless
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<q-toggle
|
||||||
{{ year + 543 }}
|
color="primary"
|
||||||
</template>
|
label="สถานะการใช้งาน"
|
||||||
<template #year-overlay-value="{ value }">
|
v-model="formData.isActive"
|
||||||
{{ parseInt(value + 543) }}
|
/>
|
||||||
</template>
|
</div>
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
ref="dateRef"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
hide-bottom-space
|
|
||||||
:model-value="
|
|
||||||
formData.date != null ? date2Thai(formData.date) : null
|
|
||||||
"
|
|
||||||
label="ให้ไว้ ณ วันที่"
|
|
||||||
:rules="[
|
|
||||||
(val) =>
|
|
||||||
!!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
|
|
||||||
]"
|
|
||||||
lazy-rules
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-4">
|
<div class="col-xs-12 col-md-4">
|
||||||
<datepicker
|
<datepicker
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formData.startDate"
|
v-model="formData.date"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
@update:model-value="checkEndDate"
|
>
|
||||||
>
|
<template #year="{ year }">
|
||||||
<template #year="{ year }">
|
{{ year + 543 }}
|
||||||
{{ year + 543 }}
|
</template>
|
||||||
</template>
|
<template #year-overlay-value="{ value }">
|
||||||
<template #year-overlay-value="{ value }">
|
{{ parseInt(value + 543) }}
|
||||||
{{ parseInt(value + 543) }}
|
</template>
|
||||||
</template>
|
<template #trigger>
|
||||||
<template #trigger>
|
<q-input
|
||||||
<q-input
|
ref="dateRef"
|
||||||
ref="startDateRef"
|
outlined
|
||||||
outlined
|
dense
|
||||||
dense
|
hide-bottom-space
|
||||||
hide-bottom-space
|
:model-value="
|
||||||
:model-value="
|
formData.date != null
|
||||||
formData.startDate != null
|
? date2Thai(formData.date)
|
||||||
? date2Thai(formData.startDate)
|
: null
|
||||||
: null
|
"
|
||||||
"
|
label="ให้ไว้ ณ วันที่"
|
||||||
label="วันที่มีผลบังคับใช้"
|
:rules="[
|
||||||
:rules="[
|
(val) =>
|
||||||
(val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
|
!!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
|
||||||
]"
|
]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<q-icon
|
<q-icon
|
||||||
name="event"
|
name="event"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
style="color: var(--q-primary)"
|
style="color: var(--q-primary)"
|
||||||
>
|
>
|
||||||
</q-icon>
|
</q-icon>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</datepicker>
|
</datepicker>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-4">
|
<div class="col-xs-12 col-md-4">
|
||||||
<datepicker
|
<datepicker
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formData.endDate"
|
v-model="formData.startDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:min-date="formData.startDate"
|
@update:model-value="checkEndDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="endDateRef"
|
ref="startDateRef"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:model-value="
|
:model-value="
|
||||||
formData.endDate != null
|
formData.startDate != null
|
||||||
? date2Thai(formData.endDate)
|
? date2Thai(formData.startDate)
|
||||||
: null
|
: null
|
||||||
"
|
"
|
||||||
label="วันที่สิ้นสุดบังคับใช้"
|
label="วันที่มีผลบังคับใช้"
|
||||||
:rules="[
|
:rules="[
|
||||||
(val) =>
|
(val) =>
|
||||||
!!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
|
!!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
|
||||||
]"
|
]"
|
||||||
lazy-rules
|
lazy-rules
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<q-icon
|
<q-icon
|
||||||
name="event"
|
name="event"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
style="color: var(--q-primary)"
|
style="color: var(--q-primary)"
|
||||||
>
|
>
|
||||||
</q-icon>
|
</q-icon>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</datepicker>
|
</datepicker>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-xs-12 col-md-4">
|
||||||
<q-input
|
<datepicker
|
||||||
v-model="formData.details"
|
menu-class-name="modalfix"
|
||||||
outlined
|
v-model="formData.endDate"
|
||||||
dense
|
:locale="'th'"
|
||||||
type="textarea"
|
autoApply
|
||||||
label="คำอธิบาย"
|
borderless
|
||||||
/>
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:min-date="formData.startDate"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="endDateRef"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
:model-value="
|
||||||
|
formData.endDate != null
|
||||||
|
? date2Thai(formData.endDate)
|
||||||
|
: null
|
||||||
|
"
|
||||||
|
label="วันที่สิ้นสุดบังคับใช้"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
!!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
v-model="formData.details"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
type="textarea"
|
||||||
|
label="คำอธิบาย"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<div class="text-right q-ma-sm">
|
||||||
|
<q-btn label="บันทึก" type="submit" color="secondary">
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</form>
|
||||||
<q-separator />
|
|
||||||
<div class="text-right q-ma-sm">
|
|
||||||
<q-btn label="บันทึก" color="secondary" @click="onClickSubmit">
|
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue