ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
This commit is contained in:
setthawutttty
parent
b44a15f69b
commit
4da85e5667
4 changed files with 708 additions and 82 deletions
|
|
@ -1,31 +1,319 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false);
|
||||
import { reactive, ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
const formData = reactive<any>({
|
||||
writeat: "",
|
||||
government: new Date(),
|
||||
dateLeaveStart: new Date(),
|
||||
dateLeaveEnd: new Date(),
|
||||
totalLeave: new Date(),
|
||||
monk: "",
|
||||
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);
|
||||
|
||||
const formRef: FormRef07 = {
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
government: governmentRef,
|
||||
dateLeaveStart: dateLeaveStartRef,
|
||||
dateLeaveEnd: dateLeaveEndRef,
|
||||
};
|
||||
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
console.log(formData);
|
||||
props.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>
|
||||
<div>
|
||||
ลาประกอบพิธีฮัจย์
|
||||
<ul>
|
||||
<li>ลาตั้งแต่วันที่</li>
|
||||
<li>ลาถึงวันที่</li>
|
||||
<li>
|
||||
จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
|
||||
backend)
|
||||
</li>
|
||||
<li>วันที่เข้ารับราชการ (Auto)</li>
|
||||
<li>เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก)</li>
|
||||
<li>รายละเอียด (ไม่บังคับกรอก)</li>
|
||||
<li>เอกสารประกอบ</li>
|
||||
</ul>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="writeatRef"
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formData.writeat"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="dateLeaveStartRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateLeaveStart != null
|
||||
? date2Thai(formData.dateLeaveStart)
|
||||
: 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.dateLeaveEnd"
|
||||
: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
|
||||
dense
|
||||
ref="dateLeaveEndRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateLeaveEnd != null
|
||||
? date2Thai(formData.dateLeaveEnd)
|
||||
: 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>
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
type="number"
|
||||
v-model="formData.totalLeave"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
/>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
เคยไปประกอบพิธีฮัจย์หรือไม่
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-radio
|
||||
v-model="formData.monk"
|
||||
val="ever"
|
||||
label="เคย"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formData.monk"
|
||||
val="never"
|
||||
label="ไม่เคยไปประกอบพิธีฮัจย์"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
</div>
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.info"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
v-model="formData.file"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
multiple
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
|
||||
>
|
||||
<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">
|
||||
เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,356 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false);
|
||||
import { reactive, ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
const formData = reactive<any>({
|
||||
dateLeaveStart: null,
|
||||
dateLeaveEnd: null,
|
||||
totalLeave: 1,
|
||||
file: null,
|
||||
writeat: "",
|
||||
received: "",
|
||||
at: "",
|
||||
dateAt: "",
|
||||
admitted: "",
|
||||
atPlace: "",
|
||||
});
|
||||
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const fileRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
const receivedRef = ref<object | null>(null);
|
||||
const atRef = ref<object | null>(null);
|
||||
const dateAtRef = ref<object | null>(null);
|
||||
const admittedRef = ref<object | null>(null);
|
||||
const atPlaceRef = ref<object | null>(null);
|
||||
|
||||
const formRef: FormRef08 = {
|
||||
dateLeaveStart: dateLeaveStartRef,
|
||||
dateLeaveEnd: dateLeaveEndRef,
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
received: receivedRef,
|
||||
at: atRef,
|
||||
dateAt: dateAtRef,
|
||||
admitted: admittedRef,
|
||||
atPlace: atPlaceRef,
|
||||
};
|
||||
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
console.log(formData);
|
||||
props.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>
|
||||
<div>
|
||||
ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
|
||||
<ul>
|
||||
<li>ลาตั้งแต่วันที่</li>
|
||||
<li>ลาถึงวันที่</li>
|
||||
<li>
|
||||
จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
|
||||
backend)
|
||||
</li>
|
||||
<li>ได้รับหมายเรียกของ</li>
|
||||
<li>ที่</li>
|
||||
<li>ลงวันที่</li>
|
||||
<li>ให้เข้ารับการ</li>
|
||||
<li>ณ ที่</li>
|
||||
<li>รายละเอียด (ไม่บังคับกรอก)</li>
|
||||
<li>เอกสารประกอบ</li>
|
||||
</ul>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="writeatRef"
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formData.writeat"
|
||||
label="เขียนที่"
|
||||
: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"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="dateLeaveStartRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateLeaveStart != null
|
||||
? date2Thai(formData.dateLeaveStart)
|
||||
: 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.dateLeaveEnd"
|
||||
: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
|
||||
dense
|
||||
ref="dateLeaveEndRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateLeaveEnd != null
|
||||
? date2Thai(formData.dateLeaveEnd)
|
||||
: 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>
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
type="number"
|
||||
v-model="formData.totalLeave"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
ref="receivedRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.received"
|
||||
label="ได้รับหมายเรียกของ"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||
/>
|
||||
<q-input
|
||||
ref="atRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.at"
|
||||
label="ที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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.dateAt"
|
||||
: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
|
||||
dense
|
||||
ref="dateAtRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateAt != null ? date2Thai(formData.dateAt) : 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>
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
ref="admittedRef"
|
||||
outlined
|
||||
v-model="formData.admitted"
|
||||
label="ให้เข้ารับการ"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="atPlaceRef"
|
||||
v-model="formData.atPlace"
|
||||
label="ณ ที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.info"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
v-model="formData.file"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
multiple
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
|
||||
>
|
||||
<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">
|
||||
เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,29 @@ interface FormRef06 {
|
|||
addressBuddhist:object|null;
|
||||
[key: string]: any;
|
||||
}
|
||||
interface FormRef07 {
|
||||
file:object|null
|
||||
writeat:object|null
|
||||
government:object|null
|
||||
dateLeaveStart:object|null
|
||||
dateLeaveEnd:object|null
|
||||
[key: string]: any;
|
||||
}
|
||||
interface FormRef08 {
|
||||
dateLeaveStart:object|null
|
||||
dateLeaveEnd:object|null
|
||||
file:object|null
|
||||
writeat:object|null
|
||||
received:object|null
|
||||
at:object|null
|
||||
dateAt:object|null
|
||||
admitted:object|null
|
||||
atPlace:object|null
|
||||
[key: string]: any;
|
||||
}
|
||||
export type {
|
||||
FormData,
|
||||
FormRef06
|
||||
FormRef06,
|
||||
FormRef07,
|
||||
FormRef08,
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ const route = useRoute();
|
|||
const myform = ref<QForm | null>(null);
|
||||
const $q = useQuasar();
|
||||
|
||||
const model = ref("");
|
||||
const model = ref("6");
|
||||
const modelSpecific = ref("");
|
||||
|
||||
const clickBack = () => {
|
||||
|
|
@ -85,65 +85,60 @@ const onSubmit = async () => {
|
|||
<div class="col-xs-12 col-sm-12">
|
||||
<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
เลือกประเภทการลา
|
||||
เลือกประเภทการลา {{ model }}
|
||||
</div>
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-select
|
||||
dense
|
||||
class="q-ml-lg col-6"
|
||||
outlined
|
||||
v-model="model"
|
||||
:options="dataStore.options"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทใบลา :"
|
||||
@update:model-value="dataStore.typeConvert(model, null)"
|
||||
/>
|
||||
<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
|
||||
<div
|
||||
class="col-6 row q-pa-sm"
|
||||
v-if="model === '5' || model === '7'"
|
||||
>
|
||||
<div class="q-py-sm q-px-lg">
|
||||
<div class="row">
|
||||
<q-select
|
||||
dense
|
||||
class="q-ml-lg col-6"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
outlined
|
||||
v-model="modelSpecific"
|
||||
:options="
|
||||
model === '5'
|
||||
? dataStore.optionsOrdination
|
||||
: dataStore.optionsSpecific
|
||||
"
|
||||
v-model="model"
|
||||
:options="dataStore.options"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทใบลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
@update:model-value="dataStore.typeConvert(model, null)"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12 col-sm-6 col-md-3" v-if="model === '5' || model === '7'">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="modelSpecific"
|
||||
:options="
|
||||
model === '5'
|
||||
? dataStore.optionsOrdination
|
||||
: dataStore.optionsSpecific
|
||||
"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทใบลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
|
||||
</div>
|
||||
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
|
||||
<Form :model="model" />
|
||||
</div>
|
||||
<div v-if="model">
|
||||
<div v-if="model" style="width: 100%;">
|
||||
<Form3
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '0' || model === '1' || model === '2'"
|
||||
/>
|
||||
<Form4
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '3'"
|
||||
/>
|
||||
<Form5
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '4'"
|
||||
/>
|
||||
<Form4 :on-submit="onSubmit" v-if="model === '3'" />
|
||||
<Form5 :on-submit="onSubmit" v-if="model === '4'" />
|
||||
<Form6
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '5' && modelSpecific === '0'"
|
||||
|
|
@ -152,7 +147,7 @@ const onSubmit = async () => {
|
|||
:on-submit="onSubmit"
|
||||
v-if="model === '5' && modelSpecific === '1'"
|
||||
/>
|
||||
<Form8 :on-submit="onSubmit" v-if="model === '6'" />
|
||||
<Form8 :on-submit="onSubmit" v-if="model === '6'" style="width: 100%;"/>
|
||||
<Form9
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '7' && modelSpecific === '0'"
|
||||
|
|
@ -171,7 +166,6 @@ const onSubmit = async () => {
|
|||
<Form13 :on-submit="onSubmit" v-if="model === '10'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</q-form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue