จัด ฟอร์มลา เเก้ ui 06/07/08/09/10/13
This commit is contained in:
setthawutttty
parent
591c423125
commit
acb81f2c40
6 changed files with 581 additions and 553 deletions
|
|
@ -12,7 +12,6 @@ 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);
|
||||
|
|
@ -37,13 +36,12 @@ const formData = reactive<any>({
|
|||
dateLeaveStart: new Date(),
|
||||
dateLeaveEnd: new Date(),
|
||||
totalLeave: new Date(),
|
||||
monk: "",
|
||||
monk: "never",
|
||||
file: null,
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: FormRef07 = {
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
government: governmentRef,
|
||||
dateLeaveStart: dateLeaveStartRef,
|
||||
|
|
@ -88,29 +86,28 @@ function onSubmit() {
|
|||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formData.writeat"
|
||||
ref="writeatRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formData.writeat"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formData.dateLeaveStart"
|
||||
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"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -120,19 +117,119 @@ function onSubmit() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="governmentRef"
|
||||
dense
|
||||
ref="dateLeaveStartRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
:model-value="
|
||||
formData.dateLeaveStart != null
|
||||
? date2Thai(formData.dateLeaveStart)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formData.dateLeaveEnd"
|
||||
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 }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateLeaveEndRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:model-value="
|
||||
formData.dateLeaveEnd != null
|
||||
? date2Thai(formData.dateLeaveEnd)
|
||||
: null
|
||||
"
|
||||
: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
|
||||
v-model="formData.totalLeave"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
type="number"
|
||||
label="จำนวนวันที่ลา"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formData.government"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="governmentRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
formData.government != null
|
||||
? date2Thai(formData.government)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
||||
]"
|
||||
|
|
@ -151,142 +248,43 @@ function onSubmit() {
|
|||
</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="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"
|
||||
label="เคย"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formData.monk"
|
||||
val="never"
|
||||
label="ไม่เคยไปประกอบพิธีฮัจย์"
|
||||
checked-icon="task_alt"
|
||||
label="ไม่เคยไปประกอบพิธีฮัจย์"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.info"
|
||||
class="col-12 q-mt-sm"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
v-model="formData.file"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
dense
|
||||
outlined
|
||||
multiple
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { FormRef08 } 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 dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = 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);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -17,7 +32,8 @@ const props = defineProps({
|
|||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<any>({
|
||||
dateLeaveStart: null,
|
||||
dateLeaveEnd: null,
|
||||
|
|
@ -32,20 +48,10 @@ const formData = reactive<any>({
|
|||
info:''
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: FormRef08 = {
|
||||
dateLeaveStart: dateLeaveStartRef,
|
||||
dateLeaveEnd: dateLeaveEndRef,
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
received: receivedRef,
|
||||
at: atRef,
|
||||
|
|
@ -54,9 +60,9 @@ const formRef: FormRef08 = {
|
|||
atPlace: atPlaceRef,
|
||||
};
|
||||
|
||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
|
|
@ -70,6 +76,8 @@ function onValidate() {
|
|||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -188,6 +196,7 @@ function onSubmit() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
|
|
@ -212,6 +221,7 @@ function onSubmit() {
|
|||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
ref="atRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
|
|
@ -225,6 +235,7 @@ function onSubmit() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
|
|
@ -268,6 +279,7 @@ function onSubmit() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
|
|
@ -279,6 +291,7 @@ function onSubmit() {
|
|||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
|
|
@ -292,26 +305,26 @@ function onSubmit() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.info"
|
||||
type="textarea"
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,33 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref,computed } from "vue";
|
||||
import { reactive, ref, computed } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm ,arabicNumberToText, calculateDurationYmd} = mixin;
|
||||
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
|
||||
mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const files = ref<any>(null);
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const birthdayRef = ref<object | null>(null);
|
||||
const dateGovernmentRef = ref<object | null>(null);
|
||||
const salaryRef = ref<object | null>(null);
|
||||
const telRef = ref<object | null>(null);
|
||||
const addressLeaveRef = ref<object | null>(null);
|
||||
const capitalRef = ref<object | null>(null);
|
||||
const countryRef = ref<object | null>(null);
|
||||
const nameEducationRef = ref<object | null>(null);
|
||||
const degreeRef = ref<object | null>(null);
|
||||
const studyRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -17,7 +38,8 @@ const props = defineProps({
|
|||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<any>({
|
||||
writeat: "",
|
||||
dateLeaveStart: null,
|
||||
|
|
@ -37,21 +59,7 @@ const formData = reactive<any>({
|
|||
info: "",
|
||||
});
|
||||
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const birthdayRef = ref<object | null>(null);
|
||||
const dateGovernmentRef = ref<object | null>(null);
|
||||
const salaryRef = ref<object | null>(null);
|
||||
const telRef = ref<object | null>(null);
|
||||
const addressLeaveRef = ref<object | null>(null);
|
||||
const capitalRef = ref<object | null>(null);
|
||||
const countryRef = ref<object | null>(null);
|
||||
const nameEducationRef = ref<object | null>(null);
|
||||
const degreeRef = ref<object | null>(null);
|
||||
const studyRef = ref<object | null>(null);
|
||||
const fileRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: FormRef09 = {
|
||||
dateLeaveStart: dateLeaveStartRef,
|
||||
dateLeaveEnd: dateLeaveEndRef,
|
||||
|
|
@ -65,13 +73,12 @@ const formRef: FormRef09 = {
|
|||
nameEducation: nameEducationRef,
|
||||
degree: degreeRef,
|
||||
study: studyRef,
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
};
|
||||
|
||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
|
|
@ -85,6 +92,8 @@ function onValidate() {
|
|||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -111,122 +120,26 @@ const formattedSalary = computed(() => {
|
|||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formData.writeat"
|
||||
ref="writeatRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formData.writeat"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
: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.dateGovernment"
|
||||
: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
|
||||
readonly
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="dateGovernmentRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateGovernment != null
|
||||
? date2Thai(formData.dateGovernment)
|
||||
: 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
|
||||
dense
|
||||
readonly
|
||||
ref="birthdayRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
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
|
||||
v-model="formData.dateLeaveStart"
|
||||
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"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -236,19 +149,19 @@ const formattedSalary = computed(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="dateLeaveStartRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
ref="dateLeaveStartRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="
|
||||
formData.dateLeaveStart != null
|
||||
? date2Thai(formData.dateLeaveStart)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -264,16 +177,22 @@ const formattedSalary = computed(() => {
|
|||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formData.dateLeaveEnd"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateLeaveEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
|
||||
:min-date="
|
||||
formData.dateLeaveStart
|
||||
? new Date(
|
||||
formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
|
||||
)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -283,20 +202,20 @@ const formattedSalary = computed(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateLeaveEndRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
lazy-rules
|
||||
ref="dateLeaveEndRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
:model-value="
|
||||
formData.dateLeaveEnd != null
|
||||
? date2Thai(formData.dateLeaveEnd)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -310,6 +229,7 @@ const formattedSalary = computed(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p
|
||||
v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
|
||||
|
|
@ -318,116 +238,221 @@ const formattedSalary = computed(() => {
|
|||
>
|
||||
ระยะเวลา
|
||||
{{
|
||||
calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
|
||||
calculateDurationYmd(
|
||||
formData.dateLeaveStart,
|
||||
formData.dateLeaveEnd
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formData.dateGovernment"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateGovernmentRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
formData.dateGovernment != null
|
||||
? date2Thai(formData.dateGovernment)
|
||||
: null
|
||||
"
|
||||
: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
|
||||
v-model="formData.birthday"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="birthdayRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="
|
||||
formData.birthday != null
|
||||
? date2Thai(formData.birthday)
|
||||
: null
|
||||
"
|
||||
: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
|
||||
ref="salaryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formattedSalary"
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
/>
|
||||
<q-input
|
||||
ref="salaryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.salaryText"
|
||||
ref="salaryRef"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formData.salaryText"
|
||||
label="เงินเดือนปัจจุบัน(คำอ่าน)"
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
v-model="formData.nameEducation"
|
||||
ref="nameEducationRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.nameEducation"
|
||||
label="ชื่อสถานศึกษา"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.degree"
|
||||
ref="degreeRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.degree"
|
||||
label="ชั้นปริญญา"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.study"
|
||||
ref="studyRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.study"
|
||||
label="ศึกษาวิชา"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.country"
|
||||
ref="countryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.country"
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.capital"
|
||||
ref="capitalRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.capital"
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.tel"
|
||||
ref="telRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="telRef"
|
||||
v-model="formData.tel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.addressLeave"
|
||||
ref="addressLeaveRef"
|
||||
class="col-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.addressLeave"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
|
|
@ -436,26 +461,25 @@ const formattedSalary = computed(() => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.info"
|
||||
class="col-12 q-mt-sm"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
v-model="formData.file"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
multiple
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
|
||||
label="เอกสารประกอบ"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref,computed } from "vue";
|
||||
import { reactive, ref, computed } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef10 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm ,arabicNumberToText, calculateDurationYmd} = mixin;
|
||||
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
|
||||
mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
|
|
@ -40,14 +41,12 @@ const dateLeaveStartRef = ref<object | null>(null);
|
|||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const birthdayRef = ref<object | null>(null);
|
||||
const dateGovernmentRef = ref<object | null>(null);
|
||||
const salaryRef = ref<object | null>(null);
|
||||
const telRef = ref<object | null>(null);
|
||||
const addressLeaveRef = ref<object | null>(null);
|
||||
const capitalRef = ref<object | null>(null);
|
||||
const countryRef = ref<object | null>(null);
|
||||
const courseRef = ref<object | null>(null);
|
||||
const locationRef = ref<object | null>(null);
|
||||
const fileRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
|
||||
const formRef: FormRef10 = {
|
||||
|
|
@ -55,14 +54,12 @@ const formRef: FormRef10 = {
|
|||
dateLeaveEnd: dateLeaveEndRef,
|
||||
birthday: birthdayRef,
|
||||
dateGovernment: dateGovernmentRef,
|
||||
salary: salaryRef,
|
||||
tel: telRef,
|
||||
addressLeave: addressLeaveRef,
|
||||
capital: capitalRef,
|
||||
country: countryRef,
|
||||
course: courseRef,
|
||||
location: locationRef,
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
};
|
||||
|
||||
|
|
@ -108,122 +105,26 @@ const formattedSalary = computed(() => {
|
|||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formData.writeat"
|
||||
ref="writeatRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formData.writeat"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
: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.dateGovernment"
|
||||
: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
|
||||
readonly
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="dateGovernmentRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateGovernment != null
|
||||
? date2Thai(formData.dateGovernment)
|
||||
: 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
|
||||
dense
|
||||
readonly
|
||||
ref="birthdayRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
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
|
||||
v-model="formData.dateLeaveStart"
|
||||
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"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -233,19 +134,19 @@ const formattedSalary = computed(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="dateLeaveStartRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
ref="dateLeaveStartRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="
|
||||
formData.dateLeaveStart != null
|
||||
? date2Thai(formData.dateLeaveStart)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -261,16 +162,22 @@ const formattedSalary = computed(() => {
|
|||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formData.dateLeaveEnd"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateLeaveEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:min-date="
|
||||
formData.dateLeaveStart
|
||||
? new Date(
|
||||
formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
|
||||
)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -280,20 +187,20 @@ const formattedSalary = computed(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateLeaveEndRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
lazy-rules
|
||||
ref="dateLeaveEndRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
:model-value="
|
||||
formData.dateLeaveEnd != null
|
||||
? date2Thai(formData.dateLeaveEnd)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -307,6 +214,7 @@ const formattedSalary = computed(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p
|
||||
v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
|
||||
|
|
@ -315,105 +223,205 @@ const formattedSalary = computed(() => {
|
|||
>
|
||||
ระยะเวลา
|
||||
{{
|
||||
calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
|
||||
calculateDurationYmd(
|
||||
formData.dateLeaveStart,
|
||||
formData.dateLeaveEnd
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formData.dateGovernment"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateGovernmentRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
formData.dateGovernment != null
|
||||
? date2Thai(formData.dateGovernment)
|
||||
: null
|
||||
"
|
||||
: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
|
||||
v-model="formData.birthday"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="birthdayRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="
|
||||
formData.birthday != null
|
||||
? date2Thai(formData.birthday)
|
||||
: null
|
||||
"
|
||||
: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
|
||||
ref="salaryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formattedSalary"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
ref="salaryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
v-model="formData.salaryText"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formData.salaryText"
|
||||
label="เงินเดือนปัจจุบัน(คำอ่าน)"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
ref="courseRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.course"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="courseRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้าน/หลักสูตร"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.location"
|
||||
ref="locationRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.location"
|
||||
label="ณ สถานที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.country"
|
||||
ref="countryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.country"
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.capital"
|
||||
ref="capitalRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.capital"
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.tel"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="telRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="telRef"
|
||||
v-model="formData.tel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.addressLeave"
|
||||
ref="addressLeaveRef"
|
||||
class="col-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.addressLeave"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
|
|
@ -422,26 +430,25 @@ const formattedSalary = computed(() => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.info"
|
||||
class="col-12 q-mt-sm"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
v-model="formData.file"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
multiple
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
|
||||
label="เอกสารประกอบ"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
|
|
|
|||
|
|
@ -1,13 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, computed } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin;
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const isSave = ref<boolean>(false);
|
||||
const files = ref<any>(null);
|
||||
const filesUpload = ref<any>(null);
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -18,8 +29,8 @@ const props = defineProps({
|
|||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
const filesUpload = ref<any>(null);
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<any>({
|
||||
writeat: "",
|
||||
dateLeaveStart: null,
|
||||
|
|
@ -28,21 +39,16 @@ const formData = reactive<any>({
|
|||
info: "",
|
||||
});
|
||||
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const fileRef = ref<object | null>(null);
|
||||
const writeatRef = ref<object | null>(null);
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: FormRef13 = {
|
||||
dateLeaveStart: dateLeaveStartRef,
|
||||
dateLeaveEnd: dateLeaveEndRef,
|
||||
file: fileRef,
|
||||
writeat: writeatRef,
|
||||
};
|
||||
|
||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
|
|
@ -56,25 +62,24 @@ function onValidate() {
|
|||
onSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
if (isSave.value === false) {
|
||||
props.onSubmit();
|
||||
console.log(formData);
|
||||
isSave.value = true;
|
||||
} else {
|
||||
console.log("savefile อัปโหลด", filesUpload.value);
|
||||
}
|
||||
props.onSubmit();
|
||||
console.log(formData);
|
||||
isSave.value = true;
|
||||
},
|
||||
!isSave.value ? "ยืนยันการบันทึกข้อมูล" : "ยืนยันการอัพโหลดไฟล์",
|
||||
!isSave.value
|
||||
? "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
: "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ฟังชั่น อัปโหลด
|
||||
* consolelog ไว้ก่อน
|
||||
*/
|
||||
function upLoadFile() {
|
||||
console.log("upload", filesUpload.value);
|
||||
}
|
||||
|
|
@ -87,25 +92,26 @@ function upLoadFile() {
|
|||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="writeatRef"
|
||||
v-model="formData.writeat"
|
||||
class="col-12 col-sm-12"
|
||||
ref="writeatRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formData.writeat"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formData.dateLeaveStart"
|
||||
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"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -115,13 +121,13 @@ function upLoadFile() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="dateLeaveStartRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
ref="dateLeaveStartRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateLeaveStart != null
|
||||
? date2Thai(formData.dateLeaveStart)
|
||||
|
|
@ -143,15 +149,15 @@ function upLoadFile() {
|
|||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formData.dateLeaveEnd"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateLeaveEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="
|
||||
formData.dateLeaveStart
|
||||
? new Date(
|
||||
|
|
@ -168,14 +174,14 @@ function upLoadFile() {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="dateLeaveEndRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
lazy-rules
|
||||
ref="dateLeaveEndRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:readonly="!formData.dateLeaveStart"
|
||||
:model-value="
|
||||
formData.dateLeaveEnd != null
|
||||
? date2Thai(formData.dateLeaveEnd)
|
||||
|
|
@ -195,40 +201,25 @@ function upLoadFile() {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<p
|
||||
v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
|
||||
class="text-weight-bold text-subtitle1 q-mb-none"
|
||||
style="padding-top: 7px; color: #26a69a"
|
||||
>
|
||||
ระยะเวลา
|
||||
{{
|
||||
calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.info"
|
||||
label="รายละเอียด"
|
||||
class="col-12 q-mt-sm"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
v-model="formData.file"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
multiple
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
|
||||
label="เอกสารประกอบ"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
|
|
@ -262,7 +253,7 @@ function upLoadFile() {
|
|||
<div v-if="isSave" class="q-mt-md">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ดาวน์โหลด/อัพโหลดแบบฟอร์ม
|
||||
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
|
|
@ -281,7 +272,7 @@ function upLoadFile() {
|
|||
<div class="col-10 col-sm-5 col-md-4 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="filesUpload"
|
||||
|
|
@ -290,6 +281,7 @@ function upLoadFile() {
|
|||
outlined
|
||||
bg-color="white"
|
||||
multiple
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ interface FormRef06 {
|
|||
[key: string]: any;
|
||||
}
|
||||
interface FormRef07 {
|
||||
file: object | null
|
||||
writeat: object | null
|
||||
government: object | null
|
||||
dateLeaveStart: object | null
|
||||
|
|
@ -37,7 +36,6 @@ interface FormRef07 {
|
|||
interface FormRef08 {
|
||||
dateLeaveStart: object | null
|
||||
dateLeaveEnd: object | null
|
||||
file: object | null
|
||||
writeat: object | null
|
||||
received: object | null
|
||||
at: object | null
|
||||
|
|
@ -59,7 +57,6 @@ interface FormRef09 {
|
|||
nameEducation: object | null
|
||||
degree: object | null
|
||||
study: object | null
|
||||
file: object | null
|
||||
writeat: object | null
|
||||
[key: string]: any;
|
||||
}
|
||||
|
|
@ -68,21 +65,18 @@ interface FormRef10 {
|
|||
dateLeaveEnd: object | null
|
||||
birthday: object | null
|
||||
dateGovernment: object | null
|
||||
salary: object | null
|
||||
tel: object | null
|
||||
addressLeave: object | null
|
||||
capital: object | null
|
||||
country: object | null
|
||||
course: object | null
|
||||
location: object | null
|
||||
file: object | null
|
||||
writeat: object | null
|
||||
[key: string]: any;
|
||||
}
|
||||
interface FormRef13 {
|
||||
dateLeaveStart: object | null
|
||||
dateLeaveEnd: object | null
|
||||
file: object | null
|
||||
writeat: object | null
|
||||
[key: string]: any;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue