จัดโค้ด ลาอุปสมบท
This commit is contained in:
setthawutttty
parent
ca4c3565bd
commit
fdec45119b
2 changed files with 179 additions and 130 deletions
|
|
@ -1,12 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const files = ref<any>(null);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -17,7 +22,22 @@ const props = defineProps({
|
|||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const telRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
const birthdayRef = ref<object | null>(null);
|
||||
const governmentRef = ref<object | null>(null);
|
||||
const totalLeaveRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const dateOrdinationRef = ref<object | null>(null);
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const addressMeasureRef = ref<object | null>(null);
|
||||
const addressBuddhistRef = ref<object | null>(null);
|
||||
const measureLocationNameRef = ref<object | null>(null);
|
||||
const buddhistLocationNameRef = ref<object | null>(null);
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<any>({
|
||||
writeat: "",
|
||||
government: new Date(),
|
||||
|
|
@ -31,22 +51,11 @@ const formData = reactive<any>({
|
|||
addressMeasure: "",
|
||||
buddhistLocationName: "",
|
||||
addressBuddhist: "",
|
||||
monk: "",
|
||||
monk: "never",
|
||||
file: null,
|
||||
});
|
||||
|
||||
const writeatRef = ref<object | null>(null);
|
||||
const governmentRef = ref<object | null>(null);
|
||||
const birthdayRef = ref<object | null>(null);
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const totalLeaveRef = ref<object | null>(null);
|
||||
const dateOrdinationRef = ref<object | null>(null);
|
||||
const measureLocationNameRef = ref<object | null>(null);
|
||||
const telRef = ref<object | null>(null);
|
||||
const addressMeasureRef = ref<object | null>(null);
|
||||
const buddhistLocationNameRef = ref<object | null>(null);
|
||||
const addressBuddhistRef = ref<object | null>(null);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: FormRef06 = {
|
||||
writeat: writeatRef,
|
||||
government: governmentRef,
|
||||
|
|
@ -62,9 +71,9 @@ const formRef: FormRef06 = {
|
|||
addressBuddhist: addressBuddhistRef,
|
||||
};
|
||||
|
||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
|
|
@ -78,6 +87,8 @@ function onValidate() {
|
|||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -91,6 +102,7 @@ function onSubmit() {
|
|||
}
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์ม ลาอุปสมบท -->
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
|
|
@ -108,102 +120,7 @@ function onSubmit() {
|
|||
label="เขียนที่"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.government"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="governmentRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.government != null
|
||||
? date2Thai(formData.government)
|
||||
: 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-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.birthday"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="birthdayRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.birthday != null
|
||||
? date2Thai(formData.birthday)
|
||||
: 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>
|
||||
</div>
|
||||
</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -291,6 +208,7 @@ function onSubmit() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
|
|
@ -302,9 +220,105 @@ function onSubmit() {
|
|||
readonly
|
||||
/>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
เคยบวชหรือไม่
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.government"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="governmentRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.government != null
|
||||
? date2Thai(formData.government)
|
||||
: 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-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.birthday"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="birthdayRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.birthday != null
|
||||
? date2Thai(formData.birthday)
|
||||
: 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12"> เคยบวชหรือไม่ </div>
|
||||
<div class="col-12">
|
||||
<q-radio
|
||||
v-model="formData.monk"
|
||||
|
|
@ -319,6 +333,7 @@ function onSubmit() {
|
|||
checked-icon="task_alt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่บวช</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
|
|
@ -365,6 +380,7 @@ function onSubmit() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
|
|
@ -392,7 +408,7 @@ function onSubmit() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
|
|
@ -404,9 +420,8 @@ function onSubmit() {
|
|||
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
/>
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
สถานที่จำพรรษา
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12"> สถานที่จำพรรษา </div>
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
|
|
@ -418,6 +433,7 @@ function onSubmit() {
|
|||
label="ชื่อวัด"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12"
|
||||
dense
|
||||
|
|
@ -428,7 +444,25 @@ function onSubmit() {
|
|||
label="ที่อยู่"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
v-model="formData.file"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
multiple
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
|
|
@ -451,7 +485,9 @@ function onSubmit() {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
|
|
|
|||
|
|
@ -1,12 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const files = ref<any>(null);
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const fileRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
const governmentRef = ref<object | null>(null);
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -17,7 +29,8 @@ const props = defineProps({
|
|||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<any>({
|
||||
writeat: "",
|
||||
government: new Date(),
|
||||
|
|
@ -28,12 +41,7 @@ const formData = reactive<any>({
|
|||
file: null,
|
||||
});
|
||||
|
||||
const fileRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
const governmentRef = ref<object | null>(null);
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: FormRef07 = {
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
|
|
@ -42,9 +50,9 @@ const formRef: FormRef07 = {
|
|||
dateLeaveEnd: dateLeaveEndRef,
|
||||
};
|
||||
|
||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
|
|
@ -58,6 +66,8 @@ function onValidate() {
|
|||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -88,6 +98,7 @@ function onSubmit() {
|
|||
label="เขียนที่"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
|
|
@ -139,6 +150,7 @@ function onSubmit() {
|
|||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -226,6 +238,7 @@ function onSubmit() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
|
|
@ -237,9 +250,7 @@ function onSubmit() {
|
|||
readonly
|
||||
/>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
เคยไปประกอบพิธีฮัจย์หรือไม่
|
||||
</div>
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12"> เคยไปประกอบพิธีฮัจย์หรือไม่ </div>
|
||||
<div class="col-12">
|
||||
<q-radio
|
||||
v-model="formData.monk"
|
||||
|
|
@ -254,6 +265,7 @@ function onSubmit() {
|
|||
checked-icon="task_alt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
|
|
@ -262,6 +274,7 @@ function onSubmit() {
|
|||
v-model="formData.info"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue