เพิ่ม multiple upload ในไฟล์ฟอร์มการลา
เพิ่ม multiple upload
This commit is contained in:
AnandaTon
parent
8bdb84cd95
commit
cf806db19f
24 changed files with 5549 additions and 6303 deletions
|
|
@ -1,511 +1,452 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, watch, computed, onMounted } from "vue";
|
import { ref, reactive, watch, computed, onMounted } from "vue"
|
||||||
import type {
|
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
|
||||||
FormData,
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
FormRef,
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
} from "@/modules/05_leave/interface/request/SickForm";
|
import http from "@/plugins/http"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import config from "@/app.config"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useQuasar } from "quasar"
|
||||||
import http from "@/plugins/http";
|
import { useRouter } from "vue-router"
|
||||||
import config from "@/app.config";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
const {
|
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
|
||||||
date2Thai,
|
const edit = ref<boolean>(true)
|
||||||
dateToISO,
|
|
||||||
dialogConfirm,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
fails,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
} = mixin;
|
|
||||||
const edit = ref<boolean>(true);
|
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataSick = reactive<any>({
|
const formDataSick = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
leaveRange: "ALL",
|
leaveRange: "ALL",
|
||||||
leaveTotal: "",
|
leaveTotal: "",
|
||||||
leaveLast: null,
|
leaveLast: null,
|
||||||
leaveNumber: "",
|
leaveNumber: "",
|
||||||
leaveAddress: "",
|
leaveAddress: "",
|
||||||
leaveDetail: "",
|
leaveDetail: "",
|
||||||
leaveDocument: [],
|
leaveDocument: [],
|
||||||
});
|
})
|
||||||
|
const leaveDocumentList = ref<any>()
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveRangeRef = ref<object | null>(null);
|
const leaveRangeRef = ref<object | null>(null)
|
||||||
const leaveTotalRef = ref<object | null>(null);
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
const leaveLastRef = ref<object | null>(null);
|
const leaveLastRef = ref<object | null>(null)
|
||||||
const leaveNumberRef = ref<object | null>(null);
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
const leaveAddressRef = ref<object | null>(null);
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
const leaveDetailRef = ref<object | null>(null);
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const FormRef: FormRef = {
|
const FormRef: FormRef = {
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveRange: leaveRangeRef,
|
leaveRange: leaveRangeRef,
|
||||||
leaveTotal: leaveTotalRef,
|
leaveTotal: leaveTotalRef,
|
||||||
leaveNumber: leaveNumberRef,
|
leaveNumber: leaveNumberRef,
|
||||||
leaveAddress: leaveAddressRef,
|
leaveAddress: leaveAddressRef,
|
||||||
leaveDetail: leaveDetailRef,
|
leaveDetail: leaveDetailRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
async function fileUploadDoc(files: any) {
|
async function fileUploadDoc(files: any) {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||||
*/
|
*/
|
||||||
function resetDate() {
|
function resetDate() {
|
||||||
if (
|
if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
|
||||||
formDataSick.leaveRange === "MORNING" ||
|
formDataSick.leaveStartDate = null
|
||||||
formDataSick.leaveRange === "AFTERNOON"
|
formDataSick.leaveEndDate = null
|
||||||
) {
|
}
|
||||||
formDataSick.leaveStartDate = null;
|
console.log("testnull")
|
||||||
formDataSick.leaveEndDate = null;
|
|
||||||
}
|
|
||||||
console.log("testnull");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in FormRef) {
|
for (const key in FormRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||||
const property = FormRef[key];
|
const property = FormRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
// if (formDataSick.leaveDocument.length > 0) {
|
|
||||||
// const blob = formDataSick.leaveDocument.slice(
|
|
||||||
// 0,
|
|
||||||
// formDataSick.leaveDocument[0].size
|
|
||||||
// );
|
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
|
||||||
// type: formDataSick.leaveDocument[0].type,
|
|
||||||
// });
|
|
||||||
// formData.append("leaveDocument", newFile);
|
|
||||||
// }
|
|
||||||
|
|
||||||
formData.append("leaveDocument", formDataSick.leaveDocument);
|
formDataSick.leaveDocument.forEach((file: File) => {
|
||||||
formData.append("type", formDataSick.type);
|
formData.append("leaveDocument", file)
|
||||||
formData.append("leaveRange", formDataSick.leaveRange);
|
})
|
||||||
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
|
// formData.append("leaveDocument", formDataSick.leaveDocument)
|
||||||
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
|
formData.append("type", formDataSick.type)
|
||||||
formData.append("leaveWrote", formDataSick.leaveWrote);
|
formData.append("leaveRange", formDataSick.leaveRange)
|
||||||
formData.append("leaveAddress", formDataSick.leaveAddress);
|
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
|
||||||
formData.append("leaveNumber", formDataSick.leaveNumber);
|
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
|
||||||
formData.append("leaveDetail", formDataSick.leaveDetail);
|
formData.append("leaveWrote", formDataSick.leaveWrote)
|
||||||
props.onSubmit(formData);
|
formData.append("leaveAddress", formDataSick.leaveAddress)
|
||||||
}
|
formData.append("leaveNumber", formDataSick.leaveNumber)
|
||||||
|
formData.append("leaveDetail", formDataSick.leaveDetail)
|
||||||
|
props.onSubmit(formData)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function fetchCheck() {
|
async function fetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataSick.leaveStartDate ?? null,
|
StartLeaveDate: formDataSick.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataSick.leaveEndDate ?? null,
|
EndLeaveDate: formDataSick.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
formDataSick.leaveTotal =
|
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
data.totalDate - data.sumDateWork - data.sumDateHoliday;
|
} else {
|
||||||
} else {
|
fails($q, "ไม่สามารถลาได้")
|
||||||
fails($q, "ไม่สามารถลาได้");
|
}
|
||||||
}
|
})
|
||||||
})
|
.catch((e: any) => {
|
||||||
.catch((e: any) => {
|
messageError($q, e)
|
||||||
messageError($q, e);
|
})
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
|
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
|
||||||
*/
|
*/
|
||||||
const isReadOnly = computed(() => {
|
const isReadOnly = computed(() => {
|
||||||
const conditionleaveRange =
|
const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
|
||||||
formDataSick.leaveRange === "MORNING" ||
|
if (conditionleaveRange) {
|
||||||
formDataSick.leaveRange === "AFTERNOON";
|
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
|
||||||
if (conditionleaveRange) {
|
formDataSick.leaveTotal = 0.5
|
||||||
formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
|
} else {
|
||||||
formDataSick.leaveTotal = 0.5;
|
formDataSick.leaveTotal = null
|
||||||
} else {
|
}
|
||||||
formDataSick.leaveTotal = null;
|
return conditionleaveRange
|
||||||
}
|
})
|
||||||
return conditionleaveRange;
|
|
||||||
});
|
|
||||||
|
|
||||||
function inputEdit(val: boolean) {
|
function inputEdit(val: boolean) {
|
||||||
return {
|
return {
|
||||||
"full-width cursor-pointer ": val,
|
"full-width cursor-pointer ": val,
|
||||||
"full-width cursor-pointer inputgreen": !val,
|
"full-width cursor-pointer inputgreen": !val,
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetEndDate(type: string) {
|
function resetEndDate(type: string) {
|
||||||
if (type === "day") {
|
if (type === "day") {
|
||||||
formDataSick.EndLeaveDate === null;
|
formDataSick.EndLeaveDate === null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
formDataSick.leaveWrote = props.data.leaveWrote;
|
formDataSick.leaveWrote = props.data.leaveWrote
|
||||||
formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
|
formDataSick.leaveStartDate = new Date(props.data.leaveStartDate)
|
||||||
formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
|
formDataSick.leaveEndDate = new Date(props.data.leaveEndDate)
|
||||||
formDataSick.contractTel = props.data.contractTel;
|
formDataSick.contractTel = props.data.contractTel
|
||||||
formDataSick.leaveTotal = props.data.leaveTotal;
|
formDataSick.leaveTotal = props.data.leaveTotal
|
||||||
formDataSick.leaveNumber = props.data.leaveNumber;
|
formDataSick.leaveNumber = props.data.leaveNumber
|
||||||
formDataSick.leaveDetail = props.data.leaveDetail;
|
formDataSick.leaveDetail = props.data.leaveDetail
|
||||||
// formDataSick.leaveDocument = props.data.leaveDocument;
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
formDataSick.leaveAddress = props.data.leaveAddress;
|
formDataSick.leaveAddress = props.data.leaveAddress
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
|
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent.stop="onValidate">
|
<form @submit.prevent.stop="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
for="leaveWroteRef"
|
for="leaveWroteRef"
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
v-model="formDataSick.leaveWrote"
|
v-model="formDataSick.leaveWrote"
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="col-12 col-md-4 col-sm-12">
|
<div class="col-12 col-md-4 col-sm-12">
|
||||||
<q-radio
|
<q-radio v-model="formDataSick.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||||
v-model="formDataSick.leaveRange"
|
<q-radio v-model="formDataSick.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
val="ALL"
|
<q-radio v-model="formDataSick.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
label="ลาทั้งวัน"
|
</div>
|
||||||
checked-icon="task_alt"
|
<div class="full-width">
|
||||||
/>
|
<div class="q-col-gutter-sm row">
|
||||||
<q-radio
|
<datepicker
|
||||||
v-model="formDataSick.leaveRange"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
val="MORNING"
|
menu-class-name="modalfix"
|
||||||
label="ลาครึ่งวันเช้า"
|
v-model="formDataSick.leaveStartDate"
|
||||||
checked-icon="task_alt"
|
:locale="'th'"
|
||||||
@update:model-value="resetDate"
|
autoApply
|
||||||
/>
|
borderless
|
||||||
<q-radio
|
:enableTimePicker="false"
|
||||||
v-model="formDataSick.leaveRange"
|
week-start="0"
|
||||||
val="AFTERNOON"
|
:readonly="!edit"
|
||||||
label="ลาครึ่งวันบ่าย"
|
@update:model-value="formDataSick.leaveEndDate = null"
|
||||||
checked-icon="task_alt"
|
>
|
||||||
@update:model-value="resetDate"
|
<template #year="{ year }">
|
||||||
/>
|
{{ year + 543 }}
|
||||||
</div>
|
</template>
|
||||||
<div class="full-width">
|
<template #year-overlay-value="{ value }">
|
||||||
<div class="q-col-gutter-sm row">
|
{{ parseInt(value + 543) }}
|
||||||
<datepicker
|
</template>
|
||||||
class="col-12 col-md-3 col-sm-6"
|
<template #trigger>
|
||||||
menu-class-name="modalfix"
|
<q-input
|
||||||
v-model="formDataSick.leaveStartDate"
|
outlined
|
||||||
:locale="'th'"
|
dense
|
||||||
autoApply
|
ref="leaveStartDateRef"
|
||||||
borderless
|
for="leaveStartDateRef"
|
||||||
:enableTimePicker="false"
|
hide-bottom-space
|
||||||
week-start="0"
|
:readonly="!edit"
|
||||||
:readonly="!edit"
|
bg-color="white"
|
||||||
@update:model-value="formDataSick.leaveEndDate = null"
|
class="full-width cursor-pointer inputgreen"
|
||||||
>
|
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
|
||||||
<template #year="{ year }">
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
{{ year + 543 }}
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
</template>
|
style="color: var(--q-primary)"
|
||||||
<template #year-overlay-value="{ value }">
|
>
|
||||||
{{ parseInt(value + 543) }}
|
<template v-slot:prepend>
|
||||||
</template>
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
<template #trigger>
|
</template>
|
||||||
<q-input
|
</q-input>
|
||||||
outlined
|
</template>
|
||||||
dense
|
</datepicker>
|
||||||
ref="leaveStartDateRef"
|
|
||||||
for="leaveStartDateRef"
|
|
||||||
hide-bottom-space
|
|
||||||
:readonly="!edit"
|
|
||||||
bg-color="white"
|
|
||||||
class="full-width cursor-pointer inputgreen"
|
|
||||||
:model-value="
|
|
||||||
formDataSick.leaveStartDate != null
|
|
||||||
? date2Thai(formDataSick.leaveStartDate)
|
|
||||||
: null
|
|
||||||
"
|
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-3 col-sm-6"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataSick.leaveEndDate"
|
v-model="formDataSick.leaveEndDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!formDataSick.leaveStartDate"
|
:readonly="!formDataSick.leaveStartDate"
|
||||||
@update:model-value="fetchCheck(), isReadOnly"
|
@update:model-value="fetchCheck(), isReadOnly"
|
||||||
:min-date="formDataSick.leaveStartDate"
|
:min-date="formDataSick.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
for="leaveEndDateRef"
|
for="leaveEndDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!formDataSick.leaveStartDate"
|
:readonly="!formDataSick.leaveStartDate"
|
||||||
:class="inputEdit(isReadOnly)"
|
:class="inputEdit(isReadOnly)"
|
||||||
:model-value="
|
:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
|
||||||
formDataSick.leaveEndDate != null
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
? date2Thai(formDataSick.leaveEndDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
<q-input
|
||||||
class="cursor-pointer"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
style="color: var(--q-primary)"
|
dense
|
||||||
>
|
bg-color="white"
|
||||||
</q-icon>
|
outlined
|
||||||
</template>
|
ref="leaveTotalRef"
|
||||||
</q-input>
|
for="leaveTotalRef"
|
||||||
</template>
|
v-model="formDataSick.leaveTotal"
|
||||||
</datepicker>
|
label="จำนวนวันที่ลา"
|
||||||
<q-input
|
readonly
|
||||||
class="col-12 col-md-3 col-sm-6"
|
hide-bottom-space
|
||||||
dense
|
/>
|
||||||
bg-color="white"
|
<q-input
|
||||||
outlined
|
class="col-12 col-md-3 col-sm-6"
|
||||||
ref="leaveTotalRef"
|
dense
|
||||||
for="leaveTotalRef"
|
outlined
|
||||||
v-model="formDataSick.leaveTotal"
|
ref="leaveLastRef"
|
||||||
label="จำนวนวันที่ลา"
|
for="leaveLastRef"
|
||||||
readonly
|
v-model="dataStore.leaveLast"
|
||||||
hide-bottom-space
|
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||||
/>
|
readonly
|
||||||
<q-input
|
hide-bottom-space
|
||||||
class="col-12 col-md-3 col-sm-6"
|
bg-color="white"
|
||||||
dense
|
/>
|
||||||
outlined
|
</div>
|
||||||
ref="leaveLastRef"
|
</div>
|
||||||
for="leaveLastRef"
|
<div class="full-width">
|
||||||
v-model="dataStore.leaveLast"
|
<div class="q-col-gutter-sm row">
|
||||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
<q-input
|
||||||
readonly
|
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||||
hide-bottom-space
|
dense
|
||||||
bg-color="white"
|
outlined
|
||||||
/>
|
ref="leaveNumberRef"
|
||||||
</div>
|
for="leaveNumberRef"
|
||||||
</div>
|
v-model="formDataSick.leaveNumber"
|
||||||
<div class="full-width">
|
mask="(###)-###-####"
|
||||||
<div class="q-col-gutter-sm row">
|
hide-bottom-space
|
||||||
<q-input
|
bg-color="white"
|
||||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
unmasked-value
|
||||||
dense
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
outlined
|
:readonly="!edit"
|
||||||
ref="leaveNumberRef"
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
for="leaveNumberRef"
|
/>
|
||||||
v-model="formDataSick.leaveNumber"
|
|
||||||
mask="(###)-###-####"
|
|
||||||
hide-bottom-space
|
|
||||||
bg-color="white"
|
|
||||||
unmasked-value
|
|
||||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
|
||||||
:readonly="!edit"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
ref="leaveAddressRef"
|
ref="leaveAddressRef"
|
||||||
for="leaveAddressRef"
|
for="leaveAddressRef"
|
||||||
v-model="formDataSick.leaveAddress"
|
v-model="formDataSick.leaveAddress"
|
||||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
hide-bottom-space
|
||||||
]"
|
bg-color="white"
|
||||||
hide-bottom-space
|
/>
|
||||||
bg-color="white"
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<q-input
|
||||||
</div>
|
type="textarea"
|
||||||
<q-input
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
type="textarea"
|
dense
|
||||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
outlined
|
||||||
dense
|
ref="leaveDetailRef"
|
||||||
outlined
|
for="leaveDetailRef"
|
||||||
ref="leaveDetailRef"
|
v-model="formDataSick.leaveDetail"
|
||||||
for="leaveDetailRef"
|
label="รายละเอียด"
|
||||||
v-model="formDataSick.leaveDetail"
|
:readonly="!edit"
|
||||||
label="รายละเอียด"
|
bg-color="white"
|
||||||
:readonly="!edit"
|
/>
|
||||||
bg-color="white"
|
<div class="full-width">
|
||||||
/>
|
<div class="q-col-gutter-sm row">
|
||||||
<div class="full-width">
|
<!-- multiple -->
|
||||||
<div class="q-col-gutter-sm row">
|
<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips multiple bg-color="white" class="col-12 q-pl-sm col-12">
|
||||||
<!-- multiple -->
|
<template v-slot:prepend>
|
||||||
<q-file
|
<q-icon name="attach_file" color="primary" />
|
||||||
for="leaveDocumentRef"
|
</template>
|
||||||
v-model="formDataSick.leaveDocument"
|
</q-file>
|
||||||
dense
|
<!-- <div class="col-12" v-if="formDataSick.leaveDocument.length == 0 && !data">
|
||||||
label="เอกสารประกอบ"
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||||
outlined
|
</div> -->
|
||||||
use-chips
|
</div>
|
||||||
bg-color="white"
|
</div>
|
||||||
|
<div class="col-12" v-if="data">
|
||||||
class="col-12 q-pl-sm col-12"
|
<div class="col-12 col-md-12 col-sm-12">
|
||||||
>
|
<q-card bordered>
|
||||||
<template v-slot:prepend>
|
<!-- <div class="col-12">
|
||||||
<q-icon name="attach_file" color="primary" />
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||||
</template>
|
</div> -->
|
||||||
</q-file>
|
<q-list separator>
|
||||||
</div>
|
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
</div>
|
<q-item-section>
|
||||||
<div class="col-12 col-sm-6 row" v-if="!edit">
|
<q-item-label class="row items-baseline">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="col">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
เอกสารเพิ่มเติม
|
</div>
|
||||||
</div>
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
</div>
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
<q-card bordered flat class="full-width">
|
</q-btn>
|
||||||
<q-list separator>
|
</q-item-label>
|
||||||
<q-item
|
</q-item-section>
|
||||||
v-for="(file, index) in formDataSick.leaveDocument"
|
</q-item>
|
||||||
:key="index"
|
</q-list>
|
||||||
class="q-my-xs"
|
</q-card>
|
||||||
>
|
</div>
|
||||||
<q-item-section>
|
</div>
|
||||||
<q-item-label class="full-width ellipsis">
|
|
||||||
{{ file.name }}
|
|
||||||
</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="col-12 col-sm-6 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, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<div class="row col-12 q-pt-md">
|
<q-separator class="q-mt-sm" />
|
||||||
<q-space />
|
|
||||||
<q-btn
|
<div class="row col-12 q-pt-md">
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
<q-space />
|
||||||
id="onSubmit"
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
type="submit"
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
unelevated
|
>
|
||||||
dense
|
<q-btn
|
||||||
class="q-px-md items-center btnBlue"
|
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||||
label="บันทึก"
|
id="onSubmit"
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
type="button"
|
||||||
>
|
unelevated
|
||||||
<q-btn
|
dense
|
||||||
v-if="data"
|
class="q-px-md items-center q-ml-sm"
|
||||||
id="onSubmit"
|
color="primary"
|
||||||
type="button"
|
label="ยื่นใบลา"
|
||||||
unelevated
|
@click="onConfirm"
|
||||||
dense
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
class="q-px-md items-center q-ml-sm"
|
>
|
||||||
color="primary"
|
</div>
|
||||||
label="ยื่นใบลา"
|
</form>
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,425 +1,415 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
|
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http"
|
||||||
import config from "@/app.config";
|
import config from "@/app.config"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
|
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||||
mixin;
|
const edit = ref<boolean>(true)
|
||||||
const edit = ref<boolean>(true);
|
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataBirth = reactive<any>({
|
const formDataBirth = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
leaveTotal: "",
|
leaveTotal: "",
|
||||||
leaveLast: "",
|
leaveLast: "",
|
||||||
leaveNumber: "",
|
leaveNumber: "",
|
||||||
leaveAddress: "",
|
leaveAddress: "",
|
||||||
leaveDetail: "",
|
leaveDetail: "",
|
||||||
leaveDocument: [],
|
leaveDocument: [],
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveTotalRef = ref<object | null>(null);
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
const leaveNumberRef = ref<object | null>(null);
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
const leaveAddressRef = ref<object | null>(null);
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
const leaveDetailRef = ref<object | null>(null);
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
const leaveDocumentRef = ref<object | null>(null);
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const FormRef: FormRef = {
|
const FormRef: FormRef = {
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveTotal: leaveTotalRef,
|
leaveTotal: leaveTotalRef,
|
||||||
leaveNumber: leaveNumberRef,
|
leaveNumber: leaveNumberRef,
|
||||||
leaveAddress: leaveAddressRef,
|
leaveAddress: leaveAddressRef,
|
||||||
leaveDetail: leaveDetailRef,
|
leaveDetail: leaveDetailRef,
|
||||||
leaveDocument: leaveDocumentRef,
|
leaveDocument: leaveDocumentRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
async function fileUploadDoc(files: any) {
|
async function fileUploadDoc(files: any) {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in FormRef) {
|
for (const key in FormRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||||
const property = FormRef[key];
|
const property = FormRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
// if (formDataBirth.leaveDocument.length > 0) {
|
formDataBirth.leaveDocument.forEach((file: File) => {
|
||||||
// const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
|
formData.append("leaveDocument", file)
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
})
|
||||||
// type: formDataBirth.leaveDocument[0].type,
|
// formData.append("leaveDocument", formDataBirth.leaveDocument);
|
||||||
// })
|
formData.append("type", formDataBirth.type)
|
||||||
// formData.append("leaveDocument", newFile)
|
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
|
||||||
// }
|
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
|
||||||
formData.append("leaveDocument", formDataBirth.leaveDocument);
|
formData.append("leaveWrote", formDataBirth.leaveWrote)
|
||||||
formData.append("type", formDataBirth.type);
|
formData.append("leaveAddress", formDataBirth.leaveAddress)
|
||||||
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate));
|
formData.append("leaveNumber", formDataBirth.leaveNumber)
|
||||||
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate));
|
formData.append("leaveDetail", formDataBirth.leaveDetail)
|
||||||
formData.append("leaveWrote", formDataBirth.leaveWrote);
|
|
||||||
formData.append("leaveAddress", formDataBirth.leaveAddress);
|
|
||||||
formData.append("leaveNumber", formDataBirth.leaveNumber);
|
|
||||||
formData.append("leaveDetail", formDataBirth.leaveDetail);
|
|
||||||
|
|
||||||
props.onSubmit(formData);
|
props.onSubmit(formData)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function fetchCheck() {
|
async function fetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataBirth.leaveStartDate ?? null,
|
StartLeaveDate: formDataBirth.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataBirth.leaveEndDate ?? null,
|
EndLeaveDate: formDataBirth.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
formDataBirth.leaveTotal = data.totalDate;
|
formDataBirth.leaveTotal = data.totalDate
|
||||||
// formDataBirth.leaveLast = data.sumDateWork
|
// formDataBirth.leaveLast = data.sumDateWork
|
||||||
} else {
|
} else {
|
||||||
fails($q, "ไม่สามารถลาได้");
|
fails($q, "ไม่สามารถลาได้")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e);
|
messageError($q, e)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const leaveDocumentList = ref<any>()
|
||||||
|
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
formDataBirth.leaveWrote = props.data.leaveWrote;
|
formDataBirth.leaveWrote = props.data.leaveWrote
|
||||||
formDataBirth.leaveStartDate = props.data.leaveStartDate;
|
formDataBirth.leaveStartDate = props.data.leaveStartDate
|
||||||
formDataBirth.leaveEndDate = props.data.leaveEndDate;
|
formDataBirth.leaveEndDate = props.data.leaveEndDate
|
||||||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
formDataBirth.leaveTotal = props.data.leaveTotal
|
||||||
formDataBirth.leaveNumber = props.data.leaveNumber;
|
formDataBirth.leaveNumber = props.data.leaveNumber
|
||||||
formDataBirth.leaveAddress = props.data.leaveAddress;
|
formDataBirth.leaveAddress = props.data.leaveAddress
|
||||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
formDataBirth.leaveDetail = props.data.leaveDetail
|
||||||
// formDataBirth.leaveDocument = props.data.leaveDocument;
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- ฟอร์มลาคลอดบุตร-->
|
<!-- ฟอร์มลาคลอดบุตร-->
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent.stop="onValidate">
|
<form @submit.prevent.stop="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
for="leaveWroteRef"
|
for="leaveWroteRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formDataBirth.leaveWrote"
|
v-model="formDataBirth.leaveWrote"
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataBirth.leaveStartDate"
|
v-model="formDataBirth.leaveStartDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
@update:model-value="formDataBirth.leaveEndDate = null"
|
@update:model-value="formDataBirth.leaveEndDate = null"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveStartDateRef"
|
ref="leaveStartDateRef"
|
||||||
for="leaveStartDateRef"
|
for="leaveStartDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
|
||||||
formDataBirth.leaveStartDate != null
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
? date2Thai(formDataBirth.leaveStartDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataBirth.leaveEndDate"
|
v-model="formDataBirth.leaveEndDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
@update:model-value="fetchCheck()"
|
@update:model-value="fetchCheck()"
|
||||||
borderless
|
borderless
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!formDataBirth.leaveStartDate"
|
:readonly="!formDataBirth.leaveStartDate"
|
||||||
:min-date="formDataBirth.leaveStartDate"
|
:min-date="formDataBirth.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
for="leaveEndDateRef"
|
for="leaveEndDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!formDataBirth.leaveStartDate"
|
:readonly="!formDataBirth.leaveStartDate"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
|
||||||
formDataBirth.leaveEndDate != null
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
? date2Thai(formDataBirth.leaveEndDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
<q-input
|
||||||
class="cursor-pointer"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
style="color: var(--q-primary)"
|
dense
|
||||||
>
|
outlined
|
||||||
</q-icon>
|
ref="leaveTotalRef"
|
||||||
</template>
|
for="leaveTotalRef"
|
||||||
</q-input>
|
v-model="formDataBirth.leaveTotal"
|
||||||
</template>
|
label="จำนวนวันที่ลา"
|
||||||
</datepicker>
|
bg-color="white"
|
||||||
<q-input
|
readonly
|
||||||
class="col-12 col-md-3 col-sm-6"
|
hide-bottom-space
|
||||||
dense
|
/>
|
||||||
outlined
|
<q-input
|
||||||
ref="leaveTotalRef"
|
class="col-12 col-md-3 col-sm-6"
|
||||||
for="leaveTotalRef"
|
dense
|
||||||
v-model="formDataBirth.leaveTotal"
|
outlined
|
||||||
label="จำนวนวันที่ลา"
|
ref="leaveLastRef"
|
||||||
bg-color="white"
|
for="leaveLastRef"
|
||||||
readonly
|
v-model="dataStore.leaveLast"
|
||||||
hide-bottom-space
|
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||||
/>
|
readonly
|
||||||
<q-input
|
hide-bottom-space
|
||||||
class="col-12 col-md-3 col-sm-6"
|
bg-color="white"
|
||||||
dense
|
/>
|
||||||
outlined
|
<div class="full-width">
|
||||||
ref="leaveLastRef"
|
<div class="q-col-gutter-sm row">
|
||||||
for="leaveLastRef"
|
<q-input
|
||||||
v-model="dataStore.leaveLast"
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
dense
|
||||||
readonly
|
outlined
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
/>
|
ref="leaveNumberRef"
|
||||||
<div class="full-width">
|
for="leaveNumberRef"
|
||||||
<div class="q-col-gutter-sm row">
|
v-model="formDataBirth.leaveNumber"
|
||||||
<q-input
|
mask="(###)-###-####"
|
||||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
unmasked-value
|
||||||
dense
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
outlined
|
:readonly="!edit"
|
||||||
hide-bottom-space
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
bg-color="white"
|
/>
|
||||||
ref="leaveNumberRef"
|
|
||||||
for="leaveNumberRef"
|
|
||||||
v-model="formDataBirth.leaveNumber"
|
|
||||||
mask="(###)-###-####"
|
|
||||||
unmasked-value
|
|
||||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
|
||||||
:readonly="!edit"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
ref="leaveAddressRef"
|
ref="leaveAddressRef"
|
||||||
for="leaveAddressRef"
|
for="leaveAddressRef"
|
||||||
v-model="formDataBirth.leaveAddress"
|
v-model="formDataBirth.leaveAddress"
|
||||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
/>
|
||||||
]"
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<q-input
|
||||||
</div>
|
type="textarea"
|
||||||
<q-input
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
type="textarea"
|
dense
|
||||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
outlined
|
||||||
dense
|
bg-color="white"
|
||||||
outlined
|
ref="leaveDetailRef"
|
||||||
bg-color="white"
|
for="leaveDetailRef"
|
||||||
ref="leaveDetailRef"
|
v-model="formDataBirth.leaveDetail"
|
||||||
for="leaveDetailRef"
|
label="รายละเอียด"
|
||||||
v-model="formDataBirth.leaveDetail"
|
:readonly="!edit"
|
||||||
label="รายละเอียด"
|
/>
|
||||||
:readonly="!edit"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- multiple -->
|
<!-- multiple -->
|
||||||
<q-file
|
<q-file
|
||||||
for="leaveDocumentRef"
|
for="leaveDocumentRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="formDataBirth.leaveDocument"
|
v-model="formDataBirth.leaveDocument"
|
||||||
@added="fileUploadDoc"
|
@added="fileUploadDoc"
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
label="เอกสารประกอบ"
|
label="เอกสารประกอบ"
|
||||||
outlined
|
outlined
|
||||||
use-chips
|
multiple
|
||||||
|
use-chips
|
||||||
class="q-pl-sm col-12"
|
class="q-pl-sm col-12"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<q-icon name="attach_file" color="primary" />
|
<q-icon name="attach_file" color="primary" />
|
||||||
</template>
|
</template>
|
||||||
</q-file>
|
</q-file>
|
||||||
|
<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length == 0">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||||
|
</div> -->
|
||||||
|
<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length">
|
||||||
|
<q-card bordered>
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div> -->
|
||||||
|
<div class="col-12 row" v-if="data">
|
||||||
|
<!-- <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="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="row items-baseline">
|
||||||
|
<div class="col">
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
</div>
|
||||||
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-6 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, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<div class="col-12 row" v-if="!edit">
|
<q-separator class="q-mt-sm" />
|
||||||
<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, index) in formDataBirth.leaveDocument"
|
|
||||||
:key="index"
|
|
||||||
class="q-my-xs"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label class="full-width ellipsis">
|
|
||||||
{{ file.name }}
|
|
||||||
</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 />
|
||||||
<div class="row col-12 q-pt-md">
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
<q-space />
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
<q-btn
|
>
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||||
id="onSubmit"
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
type="submit"
|
>
|
||||||
unelevated
|
</div>
|
||||||
dense
|
</form>
|
||||||
class="q-px-md items-center btnBlue"
|
|
||||||
label="บันทึก"
|
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="data"
|
|
||||||
id="onSubmit"
|
|
||||||
type="button"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center q-ml-sm"
|
|
||||||
color="primary"
|
|
||||||
label="ยื่นใบลา"
|
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,510 +1,463 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import type {
|
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
|
||||||
FormData,
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
FormRef,
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
} from "@/modules/05_leave/interface/request/HelpWifeForm";
|
import http from "@/plugins/http"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import config from "@/app.config"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useQuasar } from "quasar"
|
||||||
import http from "@/plugins/http";
|
import { useRouter } from "vue-router"
|
||||||
import config from "@/app.config";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const {
|
const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
|
||||||
date2Thai,
|
const edit = ref<boolean>(true)
|
||||||
calculateDurationYmd,
|
|
||||||
dateToISO,
|
|
||||||
dialogConfirm,
|
|
||||||
fails,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
} = mixin;
|
|
||||||
const edit = ref<boolean>(true);
|
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataHelpWife = reactive<any>({
|
const formDataHelpWife = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
wifeDayName: "",
|
wifeDayName: "",
|
||||||
wifeDayDateBorn: null,
|
wifeDayDateBorn: null,
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
leaveTotal: "",
|
leaveTotal: "",
|
||||||
leaveNumber: "",
|
leaveNumber: "",
|
||||||
leaveAddress: "",
|
leaveAddress: "",
|
||||||
leaveDetail: "",
|
leaveDetail: "",
|
||||||
leaveDocument: [],
|
leaveDocument: [],
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
const wifeDayNameRef = ref<object | null>(null);
|
const wifeDayNameRef = ref<object | null>(null)
|
||||||
const wifeDayDateBornRef = ref<object | null>(null);
|
const wifeDayDateBornRef = ref<object | null>(null)
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveTotalRef = ref<object | null>(null);
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
const leaveNumberRef = ref<object | null>(null);
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
const leaveAddressRef = ref<object | null>(null);
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
const leaveDetailRef = ref<object | null>(null);
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
const leaveDocumentRef = ref<object | null>(null);
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const FormRef: FormRef = {
|
const FormRef: FormRef = {
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
wifeDayName: wifeDayNameRef,
|
wifeDayName: wifeDayNameRef,
|
||||||
wifeDayDateBorn: wifeDayDateBornRef,
|
wifeDayDateBorn: wifeDayDateBornRef,
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveTotal: leaveTotalRef,
|
leaveTotal: leaveTotalRef,
|
||||||
leaveNumber: leaveNumberRef,
|
leaveNumber: leaveNumberRef,
|
||||||
leaveAddress: leaveAddressRef,
|
leaveAddress: leaveAddressRef,
|
||||||
leaveDetail: leaveDetailRef,
|
leaveDetail: leaveDetailRef,
|
||||||
leaveDocument: leaveDocumentRef,
|
leaveDocument: leaveDocumentRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
const fileUploadDoc = async (files: any) => {
|
const fileUploadDoc = async (files: any) => {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in FormRef) {
|
for (const key in FormRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||||
const property = FormRef[key];
|
const property = FormRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
// if (formDataHelpWife.leaveDocument.length > 0) {
|
formDataHelpWife.leaveDocument.forEach((file: File) => {
|
||||||
// const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
|
formData.append("leaveDocument", file)
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
})
|
||||||
// type: formDataHelpWife.leaveDocument[0].type,
|
formData.append("leaveDocument", formDataHelpWife.leaveDocument)
|
||||||
// })
|
formData.append("type", formDataHelpWife.type)
|
||||||
// formData.append("leaveDocument", newFile)
|
formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
|
||||||
// }
|
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
|
||||||
formData.append("leaveDocument", formDataHelpWife.leaveDocument);
|
formData.append("leaveWrote", formDataHelpWife.leaveWrote)
|
||||||
formData.append("type", formDataHelpWife.type);
|
formData.append("leaveAddress", formDataHelpWife.leaveAddress)
|
||||||
formData.append(
|
formData.append("leaveNumber", formDataHelpWife.leaveNumber)
|
||||||
"leaveStartDate",
|
formData.append("leaveDetail", formDataHelpWife.leaveDetail)
|
||||||
dateToISO(formDataHelpWife.leaveStartDate)
|
formData.append("wifeDayName", formDataHelpWife.wifeDayName)
|
||||||
);
|
formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
|
||||||
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate));
|
props.onSubmit(formData)
|
||||||
formData.append("leaveWrote", formDataHelpWife.leaveWrote);
|
}
|
||||||
formData.append("leaveAddress", formDataHelpWife.leaveAddress);
|
|
||||||
formData.append("leaveNumber", formDataHelpWife.leaveNumber);
|
|
||||||
formData.append("leaveDetail", formDataHelpWife.leaveDetail);
|
|
||||||
formData.append("wifeDayName", formDataHelpWife.wifeDayName);
|
|
||||||
formData.append(
|
|
||||||
"wifeDayDateBorn",
|
|
||||||
dateToISO(formDataHelpWife.wifeDayDateBorn)
|
|
||||||
);
|
|
||||||
props.onSubmit(formData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* function อัพเดทค่า LeaveTotal
|
* function อัพเดทค่า LeaveTotal
|
||||||
*/
|
*/
|
||||||
function updateLeaveTotal() {
|
function updateLeaveTotal() {
|
||||||
const newLeaveTotal = calculateDurationYmd(
|
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
|
||||||
formDataHelpWife.leaveStartDate,
|
formDataHelpWife.leaveTotal = newLeaveTotal
|
||||||
formDataHelpWife.leaveEndDate
|
|
||||||
);
|
|
||||||
formDataHelpWife.leaveTotal = newLeaveTotal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function fetchCheck() {
|
async function fetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
|
StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
|
EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
formDataHelpWife.leaveTotal =
|
formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
data.totalDate - data.sumDateWork - data.sumDateHoliday;
|
// formDataHelpWife.leaveLast = data.totalDate
|
||||||
// formDataHelpWife.leaveLast = data.totalDate
|
} else {
|
||||||
} else {
|
fails($q, "ไม่สามารถลาได้")
|
||||||
fails($q, "ไม่สามารถลาได้");
|
}
|
||||||
}
|
})
|
||||||
})
|
.catch((e: any) => {
|
||||||
.catch((e: any) => {
|
messageError($q, e)
|
||||||
messageError($q, e);
|
})
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const leaveDocumentList = ref<any>()
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
// console.log("data==>", props.data)
|
// console.log("data==>", props.data)
|
||||||
formDataHelpWife.leaveWrote = props.data.leaveWrote;
|
formDataHelpWife.leaveWrote = props.data.leaveWrote
|
||||||
formDataHelpWife.wifeDayName = props.data.wifeDayName;
|
formDataHelpWife.wifeDayName = props.data.wifeDayName
|
||||||
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
|
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
|
||||||
formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
|
formDataHelpWife.leaveStartDate = props.data.leaveStartDate
|
||||||
formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
|
formDataHelpWife.leaveEndDate = props.data.leaveEndDate
|
||||||
formDataHelpWife.leaveTotal = props.data.leaveTotal;
|
formDataHelpWife.leaveTotal = props.data.leaveTotal
|
||||||
formDataHelpWife.leaveNumber = props.data.leaveNumber;
|
formDataHelpWife.leaveNumber = props.data.leaveNumber
|
||||||
formDataHelpWife.leaveAddress = props.data.leaveAddress;
|
formDataHelpWife.leaveAddress = props.data.leaveAddress
|
||||||
formDataHelpWife.leaveDetail = props.data.leaveDetail;
|
formDataHelpWife.leaveDetail = props.data.leaveDetail
|
||||||
// formDataHelpWife.leaveDocument = props.data.leaveDocument;
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
}
|
|
||||||
});
|
// formDataHelpWife.leaveDocument = props.data.leaveDocument;
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent.stop="onValidate">
|
<form @submit.prevent.stop="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
for="leaveWroteRef"
|
for="leaveWroteRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
v-model="formDataHelpWife.leaveWrote"
|
v-model="formDataHelpWife.leaveWrote"
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataHelpWife.leaveStartDate"
|
v-model="formDataHelpWife.leaveStartDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
@update:model-value="formDataHelpWife.leaveEndDate = null"
|
@update:model-value="formDataHelpWife.leaveEndDate = null"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveStartDateRef"
|
ref="leaveStartDateRef"
|
||||||
for="leaveStartDateRef"
|
for="leaveStartDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
|
||||||
formDataHelpWife.leaveStartDate != null
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
? date2Thai(formDataHelpWife.leaveStartDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataHelpWife.leaveEndDate"
|
v-model="formDataHelpWife.leaveEndDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
@update:model-value="updateLeaveTotal, fetchCheck()"
|
@update:model-value="updateLeaveTotal, fetchCheck()"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!formDataHelpWife.leaveStartDate"
|
:readonly="!formDataHelpWife.leaveStartDate"
|
||||||
:min-date="formDataHelpWife.leaveStartDate"
|
:min-date="formDataHelpWife.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
for="leaveEndDateRef"
|
for="leaveEndDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!formDataHelpWife.leaveStartDate"
|
:readonly="!formDataHelpWife.leaveStartDate"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
|
||||||
formDataHelpWife.leaveEndDate != null
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
? date2Thai(formDataHelpWife.leaveEndDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
<q-input
|
||||||
class="cursor-pointer"
|
class="col-12 col-md-2 col-sm-6"
|
||||||
style="color: var(--q-primary)"
|
dense
|
||||||
>
|
outlined
|
||||||
</q-icon>
|
ref="leaveTotalRef"
|
||||||
</template>
|
for="leaveTotalRef"
|
||||||
</q-input>
|
v-model="formDataHelpWife.leaveTotal"
|
||||||
</template>
|
label="จำนวนวันที่ลา"
|
||||||
</datepicker>
|
readonly
|
||||||
<q-input
|
hide-bottom-space
|
||||||
class="col-12 col-md-2 col-sm-6"
|
bg-color="white"
|
||||||
dense
|
/>
|
||||||
outlined
|
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
|
||||||
ref="leaveTotalRef"
|
<q-input
|
||||||
for="leaveTotalRef"
|
class="col-12 col-sm-12"
|
||||||
v-model="formDataHelpWife.leaveTotal"
|
ref="wifeDayNameRef"
|
||||||
label="จำนวนวันที่ลา"
|
for="wifeDayNameRef"
|
||||||
readonly
|
dense
|
||||||
hide-bottom-space
|
bg-color="white"
|
||||||
bg-color="white"
|
outlined
|
||||||
/>
|
hide-bottom-space
|
||||||
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
|
v-model="formDataHelpWife.wifeDayName"
|
||||||
<q-input
|
label="ชื่อภรรยา"
|
||||||
class="col-12 col-sm-12"
|
:readonly="!edit"
|
||||||
ref="wifeDayNameRef"
|
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
|
||||||
for="wifeDayNameRef"
|
/>
|
||||||
dense
|
</div>
|
||||||
bg-color="white"
|
|
||||||
outlined
|
|
||||||
hide-bottom-space
|
|
||||||
v-model="formDataHelpWife.wifeDayName"
|
|
||||||
label="ชื่อภรรยา"
|
|
||||||
:readonly="!edit"
|
|
||||||
:rules="[(val) => !!val || `${'ชื่อภรรยา'}`]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataHelpWife.wifeDayDateBorn"
|
v-model="formDataHelpWife.wifeDayDateBorn"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="wifeDayDateBornRef"
|
ref="wifeDayDateBornRef"
|
||||||
for="wifeDayDateBornRef"
|
for="wifeDayDateBornRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
|
||||||
formDataHelpWife.wifeDayDateBorn != null
|
:label="`${'วันที่คลอด'}`"
|
||||||
? date2Thai(formDataHelpWife.wifeDayDateBorn)
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'วันที่คลอด'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
<div class="full-width">
|
||||||
class="cursor-pointer"
|
<div class="q-col-gutter-sm row">
|
||||||
style="color: var(--q-primary)"
|
<q-input
|
||||||
>
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
</q-icon>
|
dense
|
||||||
</template>
|
outlined
|
||||||
</q-input>
|
ref="leaveNumberRef"
|
||||||
</template>
|
for="leaveNumberRef"
|
||||||
</datepicker>
|
v-model="formDataHelpWife.leaveNumber"
|
||||||
<div class="full-width">
|
mask="(###)-###-####"
|
||||||
<div class="q-col-gutter-sm row">
|
unmasked-value
|
||||||
<q-input
|
hide-bottom-space
|
||||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
bg-color="white"
|
||||||
dense
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
outlined
|
:readonly="!edit"
|
||||||
ref="leaveNumberRef"
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
for="leaveNumberRef"
|
/>
|
||||||
v-model="formDataHelpWife.leaveNumber"
|
|
||||||
mask="(###)-###-####"
|
|
||||||
unmasked-value
|
|
||||||
hide-bottom-space
|
|
||||||
bg-color="white"
|
|
||||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
|
||||||
:readonly="!edit"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
ref="leaveAddressRef"
|
ref="leaveAddressRef"
|
||||||
for="leaveAddressRef"
|
for="leaveAddressRef"
|
||||||
v-model="formDataHelpWife.leaveAddress"
|
v-model="formDataHelpWife.leaveAddress"
|
||||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
/>
|
||||||
]"
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<q-input
|
||||||
</div>
|
hide-bottom-space
|
||||||
<q-input
|
bg-color="white"
|
||||||
hide-bottom-space
|
type="textarea"
|
||||||
bg-color="white"
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
type="textarea"
|
dense
|
||||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
outlined
|
||||||
dense
|
ref="leaveDetailRef"
|
||||||
outlined
|
for="leaveDetailRef"
|
||||||
ref="leaveDetailRef"
|
v-model="formDataHelpWife.leaveDetail"
|
||||||
for="leaveDetailRef"
|
label="รายละเอียด"
|
||||||
v-model="formDataHelpWife.leaveDetail"
|
:readonly="!edit"
|
||||||
label="รายละเอียด"
|
/>
|
||||||
:readonly="!edit"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- multiple -->
|
<!-- multiple -->
|
||||||
<q-file
|
<q-file bg-color="white" ref="leaveDocumentRef" v-model="formDataHelpWife.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips class="q-pl-sm col-12">
|
||||||
bg-color="white"
|
<template v-slot:prepend>
|
||||||
ref="leaveDocumentRef"
|
<q-icon name="attach_file" color="primary" />
|
||||||
v-model="formDataHelpWife.leaveDocument"
|
</template>
|
||||||
@added="fileUploadDoc"
|
</q-file>
|
||||||
dense
|
<div class="col-12" v-if="data">
|
||||||
label="เอกสารประกอบ"
|
<div class="col-12 col-md-12 col-sm-12">
|
||||||
outlined
|
<q-card bordered>
|
||||||
use-chips
|
<!-- <div class="col-12">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||||
class="q-pl-sm col-12"
|
</div> -->
|
||||||
>
|
<q-list separator>
|
||||||
<template v-slot:prepend>
|
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
<q-icon name="attach_file" color="primary" />
|
<q-item-section>
|
||||||
</template>
|
<q-item-label class="row items-baseline">
|
||||||
</q-file>
|
<div class="col">
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
</div>
|
||||||
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-6 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, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</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, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<div class="col-12 row" v-if="!edit">
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="row col-12 q-pt-md">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">
|
<q-space />
|
||||||
เอกสารเพิ่มเติม
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
</div>
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
</div>
|
>
|
||||||
<q-card bordered flat class="full-width">
|
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||||
<q-list separator>
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
<q-item
|
>
|
||||||
v-for="(file, index) in formDataHelpWife.leaveDocument"
|
</div>
|
||||||
:key="index"
|
</form>
|
||||||
class="q-my-xs"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label class="full-width ellipsis">
|
|
||||||
{{ file.name }}
|
|
||||||
</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
|
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
|
||||||
id="onSubmit"
|
|
||||||
type="submit"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center btnBlue"
|
|
||||||
label="บันทึก"
|
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="data"
|
|
||||||
id="onSubmit"
|
|
||||||
type="button"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center q-ml-sm"
|
|
||||||
color="primary"
|
|
||||||
label="ยื่นใบลา"
|
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,504 +1,456 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted, computed } from "vue";
|
import { ref, reactive, onMounted, computed } from "vue"
|
||||||
import type {
|
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
|
||||||
FormData,
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
FormRef,
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
} from "@/modules/05_leave/interface/request/VacationForm";
|
import http from "@/plugins/http"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import config from "@/app.config"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useQuasar } from "quasar"
|
||||||
import http from "@/plugins/http";
|
import { useRouter } from "vue-router"
|
||||||
import config from "@/app.config";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
|
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||||
mixin;
|
const edit = ref<boolean>(true)
|
||||||
const edit = ref<boolean>(true);
|
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataVacation = reactive<any>({
|
const formDataVacation = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
leaveRange: "ALL",
|
leaveRange: "ALL",
|
||||||
restDayOldTotal: "",
|
restDayOldTotal: "",
|
||||||
restDayCurrentTotal: "",
|
restDayCurrentTotal: "",
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
leaveTotal: "",
|
leaveTotal: "",
|
||||||
leaveNumber: "",
|
leaveNumber: "",
|
||||||
leaveAddress: "",
|
leaveAddress: "",
|
||||||
leaveDetail: "",
|
leaveDetail: "",
|
||||||
leaveDocument: [],
|
leaveDocument: [],
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
const restDayOldTotalRef = ref<object | null>(null);
|
const restDayOldTotalRef = ref<object | null>(null)
|
||||||
const restDayCurrentTotalRef = ref<object | null>(null);
|
const restDayCurrentTotalRef = ref<object | null>(null)
|
||||||
const leaveRangeRef = ref<object | null>(null);
|
const leaveRangeRef = ref<object | null>(null)
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveTotalRef = ref<object | null>(null);
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
const leaveNumberRef = ref<object | null>(null);
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
const leaveAddressRef = ref<object | null>(null);
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
const leaveDetailRef = ref<object | null>(null);
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
const leaveDocumentRef = ref<object | null>(null);
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const FormRef: FormRef = {
|
const FormRef: FormRef = {
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
leaveRange: leaveRangeRef,
|
leaveRange: leaveRangeRef,
|
||||||
restDayOldTotal: restDayOldTotalRef,
|
restDayOldTotal: restDayOldTotalRef,
|
||||||
restDayCurrentTotal: restDayCurrentTotalRef,
|
restDayCurrentTotal: restDayCurrentTotalRef,
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveTotal: leaveTotalRef,
|
leaveTotal: leaveTotalRef,
|
||||||
leaveNumber: leaveNumberRef,
|
leaveNumber: leaveNumberRef,
|
||||||
leaveAddress: leaveAddressRef,
|
leaveAddress: leaveAddressRef,
|
||||||
leaveDetail: leaveDetailRef,
|
leaveDetail: leaveDetailRef,
|
||||||
leaveDocument: leaveDocumentRef,
|
leaveDocument: leaveDocumentRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
const fileUploadDoc = async (files: any) => {
|
const fileUploadDoc = async (files: any) => {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in FormRef) {
|
for (const key in FormRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||||
const property = FormRef[key];
|
const property = FormRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
// if (formDataVacation.leaveDocument.length > 0) {
|
formDataVacation.leaveDocument.forEach((file: File) => {
|
||||||
// const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
|
formData.append("leaveDocument", file)
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
})
|
||||||
// type: formDataVacation.leaveDocument[0].type,
|
// formData.append("leaveDocument", formDataVacation.leaveDocument);
|
||||||
// })
|
formData.append("type", formDataVacation.type)
|
||||||
// formData.append("leaveDocument", newFile)
|
formData.append("leaveRange", formDataVacation.leaveRange)
|
||||||
// }
|
formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
|
||||||
formData.append("leaveDocument", formDataVacation.leaveDocument);
|
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
|
||||||
formData.append("type", formDataVacation.type);
|
formData.append("leaveWrote", formDataVacation.leaveWrote)
|
||||||
formData.append("leaveRange", formDataVacation.leaveRange);
|
formData.append("leaveAddress", formDataVacation.leaveAddress)
|
||||||
formData.append(
|
formData.append("leaveNumber", formDataVacation.leaveNumber)
|
||||||
"leaveStartDate",
|
formData.append("leaveDetail", formDataVacation.leaveDetail)
|
||||||
dateToISO(formDataVacation.leaveStartDate)
|
props.onSubmit(formData)
|
||||||
);
|
}
|
||||||
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate));
|
|
||||||
formData.append("leaveWrote", formDataVacation.leaveWrote);
|
|
||||||
formData.append("leaveAddress", formDataVacation.leaveAddress);
|
|
||||||
formData.append("leaveNumber", formDataVacation.leaveNumber);
|
|
||||||
formData.append("leaveDetail", formDataVacation.leaveDetail);
|
|
||||||
props.onSubmit(formData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function fetchCheck() {
|
async function fetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataVacation.leaveStartDate ?? null,
|
StartLeaveDate: formDataVacation.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataVacation.leaveEndDate ?? null,
|
EndLeaveDate: formDataVacation.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
formDataVacation.leaveTotal =
|
formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
data.totalDate - data.sumDateWork - data.sumDateHoliday;
|
// formDataVacation.leaveLast = data.totalDate
|
||||||
// formDataVacation.leaveLast = data.totalDate
|
} else {
|
||||||
} else {
|
fails($q, "ไม่สามารถลาได้")
|
||||||
fails($q, "ไม่สามารถลาได้");
|
}
|
||||||
}
|
})
|
||||||
})
|
.catch((e: any) => {
|
||||||
.catch((e: any) => {
|
messageError($q, e)
|
||||||
messageError($q, e);
|
})
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||||
*/
|
*/
|
||||||
function resetDate() {
|
function resetDate() {
|
||||||
if (
|
if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
|
||||||
formDataVacation.leaveRange === "MORNING" ||
|
formDataVacation.leaveStartDate = null
|
||||||
formDataVacation.leaveRange === "AFTERNOON"
|
formDataVacation.leaveEndDate = null
|
||||||
) {
|
}
|
||||||
formDataVacation.leaveStartDate = null;
|
console.log("testnull")
|
||||||
formDataVacation.leaveEndDate = null;
|
|
||||||
}
|
|
||||||
console.log("testnull");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
|
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
|
||||||
const isReadOnly = computed(() => {
|
const isReadOnly = computed(() => {
|
||||||
const conditionleaveRange =
|
const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
|
||||||
formDataVacation.leaveRange === "MORNING" ||
|
if (conditionleaveRange) {
|
||||||
formDataVacation.leaveRange === "AFTERNOON";
|
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
|
||||||
if (conditionleaveRange) {
|
formDataVacation.leaveTotal = 0.5
|
||||||
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
|
} else {
|
||||||
formDataVacation.leaveTotal = 0.5;
|
formDataVacation.leaveTotal = null
|
||||||
} else {
|
}
|
||||||
formDataVacation.leaveTotal = null;
|
return conditionleaveRange
|
||||||
}
|
})
|
||||||
return conditionleaveRange;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
const leaveDocumentList = ref<any>()
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
// console.log("data==>", props.data)
|
// console.log("data==>", props.data)
|
||||||
formDataVacation.leaveWrote = props.data.leaveWrote;
|
formDataVacation.leaveWrote = props.data.leaveWrote
|
||||||
formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
|
formDataVacation.restDayOldTotal = props.data.restDayOldTotal
|
||||||
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
|
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
|
||||||
formDataVacation.leaveStartDate = props.data.leaveStartDate;
|
formDataVacation.leaveStartDate = props.data.leaveStartDate
|
||||||
formDataVacation.leaveEndDate = props.data.leaveEndDate;
|
formDataVacation.leaveEndDate = props.data.leaveEndDate
|
||||||
formDataVacation.leaveTotal = props.data.leaveTotal;
|
formDataVacation.leaveTotal = props.data.leaveTotal
|
||||||
formDataVacation.leaveNumber = props.data.leaveNumber;
|
formDataVacation.leaveNumber = props.data.leaveNumber
|
||||||
formDataVacation.leaveAddress = props.data.leaveAddress;
|
formDataVacation.leaveAddress = props.data.leaveAddress
|
||||||
formDataVacation.leaveDetail = props.data.leaveDetail;
|
formDataVacation.leaveDetail = props.data.leaveDetail
|
||||||
// formDataVacation.leaveDocument = props.data.leaveDocument;
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
}
|
// formDataVacation.leaveDocument = props.data.leaveDocument;
|
||||||
});
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent.stop="onValidate">
|
<form @submit.prevent.stop="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="row q-pa-sm q-col-gutter-sm">
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
for="leaveWroteRef"
|
for="leaveWroteRef"
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
v-model="formDataVacation.leaveWrote"
|
v-model="formDataVacation.leaveWrote"
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
<div class="col-12 col-md-4 col-sm-6">
|
<div class="col-12 col-md-4 col-sm-6">
|
||||||
<q-radio
|
<q-radio v-model="formDataVacation.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||||
v-model="formDataVacation.leaveRange"
|
<q-radio v-model="formDataVacation.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
val="ALL"
|
<q-radio v-model="formDataVacation.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
label="ลาทั้งวัน"
|
</div>
|
||||||
checked-icon="task_alt"
|
<q-input
|
||||||
/>
|
class="col-12 col-md-4 col-sm-6"
|
||||||
<q-radio
|
ref="restDayOldTotalRef"
|
||||||
v-model="formDataVacation.leaveRange"
|
for="restDayOldTotalRef"
|
||||||
val="MORNING"
|
dense
|
||||||
label="ลาครึ่งวันเช้า"
|
hide-bottom-space
|
||||||
checked-icon="task_alt"
|
bg-color="white"
|
||||||
@update:model-value="resetDate"
|
readonly
|
||||||
/>
|
outlined
|
||||||
<q-radio
|
v-model="dataStore.restDayTotalOld"
|
||||||
v-model="formDataVacation.leaveRange"
|
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
|
||||||
val="AFTERNOON"
|
/>
|
||||||
label="ลาครึ่งวันบ่าย"
|
|
||||||
checked-icon="task_alt"
|
|
||||||
@update:model-value="resetDate"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<q-input
|
|
||||||
class="col-12 col-md-4 col-sm-6"
|
|
||||||
ref="restDayOldTotalRef"
|
|
||||||
for="restDayOldTotalRef"
|
|
||||||
dense
|
|
||||||
hide-bottom-space
|
|
||||||
bg-color="white"
|
|
||||||
readonly
|
|
||||||
outlined
|
|
||||||
v-model="dataStore.restDayTotalOld"
|
|
||||||
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-md-4 col-sm-6"
|
class="col-12 col-md-4 col-sm-6"
|
||||||
ref="restDayCurrentTotalRef"
|
ref="restDayCurrentTotalRef"
|
||||||
for="restDayCurrentTotalRef"
|
for="restDayCurrentTotalRef"
|
||||||
dense
|
dense
|
||||||
readonly
|
readonly
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
v-model="dataStore.restDayCurrentTotal"
|
v-model="dataStore.restDayCurrentTotal"
|
||||||
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataVacation.leaveStartDate"
|
v-model="formDataVacation.leaveStartDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
@update:model-value="formDataVacation.leaveEndDate = null"
|
@update:model-value="formDataVacation.leaveEndDate = null"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveStartDateRef"
|
ref="leaveStartDateRef"
|
||||||
for="leaveStartDateRef"
|
for="leaveStartDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
|
||||||
formDataVacation.leaveStartDate != null
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
? date2Thai(formDataVacation.leaveStartDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataVacation.leaveEndDate"
|
v-model="formDataVacation.leaveEndDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
@update:model-value="fetchCheck()"
|
@update:model-value="fetchCheck()"
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="isReadOnly"
|
:readonly="isReadOnly"
|
||||||
:min-date="formDataVacation.leaveStartDate"
|
:min-date="formDataVacation.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
for="leaveEndDateRef"
|
for="leaveEndDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:readonly="isReadOnly"
|
:readonly="isReadOnly"
|
||||||
:model-value="
|
:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
|
||||||
formDataVacation.leaveEndDate != null
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
? date2Thai(formDataVacation.leaveEndDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
<q-input
|
||||||
class="cursor-pointer"
|
class="col-12 col-md-2 col-sm-6"
|
||||||
style="color: var(--q-primary)"
|
bg-color="white"
|
||||||
>
|
dense
|
||||||
</q-icon>
|
outlined
|
||||||
</template>
|
ref="leaveTotalRef"
|
||||||
</q-input>
|
for="leaveTotalRef"
|
||||||
</template>
|
v-model="formDataVacation.leaveTotal"
|
||||||
</datepicker>
|
label="จำนวนวันที่ลา"
|
||||||
<q-input
|
readonly
|
||||||
class="col-12 col-md-2 col-sm-6"
|
hide-bottom-space
|
||||||
bg-color="white"
|
/>
|
||||||
dense
|
<div class="full-width">
|
||||||
outlined
|
<div class="q-col-gutter-sm row">
|
||||||
ref="leaveTotalRef"
|
<q-input
|
||||||
for="leaveTotalRef"
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
v-model="formDataVacation.leaveTotal"
|
dense
|
||||||
label="จำนวนวันที่ลา"
|
outlined
|
||||||
readonly
|
hide-bottom-space
|
||||||
hide-bottom-space
|
bg-color="white"
|
||||||
/>
|
ref="leaveNumberRef"
|
||||||
<div class="full-width">
|
for="leaveNumberRef"
|
||||||
<div class="q-col-gutter-sm row">
|
v-model="formDataVacation.leaveNumber"
|
||||||
<q-input
|
mask="(###)-###-####"
|
||||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
unmasked-value
|
||||||
dense
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
outlined
|
:readonly="!edit"
|
||||||
hide-bottom-space
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
bg-color="white"
|
/>
|
||||||
ref="leaveNumberRef"
|
|
||||||
for="leaveNumberRef"
|
|
||||||
v-model="formDataVacation.leaveNumber"
|
|
||||||
mask="(###)-###-####"
|
|
||||||
unmasked-value
|
|
||||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
|
||||||
:readonly="!edit"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
ref="leaveAddressRef"
|
ref="leaveAddressRef"
|
||||||
for="leaveAddressRef"
|
for="leaveAddressRef"
|
||||||
v-model="formDataVacation.leaveAddress"
|
v-model="formDataVacation.leaveAddress"
|
||||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
/>
|
||||||
]"
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<q-input
|
||||||
</div>
|
type="textarea"
|
||||||
<q-input
|
hide-bottom-space
|
||||||
type="textarea"
|
bg-color="white"
|
||||||
hide-bottom-space
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
bg-color="white"
|
dense
|
||||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
outlined
|
||||||
dense
|
ref="leaveDetailRef"
|
||||||
outlined
|
for="leaveDetailRef"
|
||||||
ref="leaveDetailRef"
|
v-model="formDataVacation.leaveDetail"
|
||||||
for="leaveDetailRef"
|
label="รายละเอียด"
|
||||||
v-model="formDataVacation.leaveDetail"
|
:readonly="!edit"
|
||||||
label="รายละเอียด"
|
/>
|
||||||
:readonly="!edit"
|
<div class="full-width">
|
||||||
/>
|
<div class="q-col-gutter-sm row">
|
||||||
|
<!-- multiple -->
|
||||||
|
<q-file
|
||||||
|
ref="leaveDocumentRef"
|
||||||
|
bg-color="white"
|
||||||
|
v-model="formDataVacation.leaveDocument"
|
||||||
|
@added="fileUploadDoc"
|
||||||
|
dense
|
||||||
|
label="เอกสารประกอบ"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
use-chips
|
||||||
|
class="q-pl-sm col-12"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
<!-- <div class="col-12" v-if="formDataVacation.leaveDocument.length == 0">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" v-if="data">
|
||||||
|
<div class="col-12 col-md-12 col-sm-12">
|
||||||
|
<q-card bordered>
|
||||||
|
<!-- <div class="col-12">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||||
|
</div> -->
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="row items-baseline">
|
||||||
|
<div class="col">
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
</div>
|
||||||
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-6 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, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<!-- multiple -->
|
<q-separator class="q-mt-sm" />
|
||||||
<q-file
|
<div class="row col-12 q-pt-md">
|
||||||
ref="leaveDocumentRef"
|
<q-space />
|
||||||
bg-color="white"
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
v-model="formDataVacation.leaveDocument"
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
@added="fileUploadDoc"
|
>
|
||||||
dense
|
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||||
label="เอกสารประกอบ"
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
outlined
|
>
|
||||||
use-chips
|
</div>
|
||||||
|
</form>
|
||||||
class="q-pl-sm col-12"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="attach_file" color="primary" />
|
|
||||||
</template>
|
|
||||||
</q-file>
|
|
||||||
|
|
||||||
<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, index) in formDataVacation.leaveDocument"
|
|
||||||
:key="index"
|
|
||||||
class="q-my-xs"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label class="full-width ellipsis">
|
|
||||||
{{ file.name }}
|
|
||||||
</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
|
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
|
||||||
id="onSubmit"
|
|
||||||
type="submit"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center btnBlue"
|
|
||||||
label="บันทึก"
|
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="data"
|
|
||||||
id="onSubmit"
|
|
||||||
type="button"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center q-ml-sm"
|
|
||||||
color="primary"
|
|
||||||
label="ยื่นใบลา"
|
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,439 +1,366 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, onMounted } from "vue";
|
import { reactive, ref, onMounted } from "vue"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
|
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http"
|
||||||
import config from "@/app.config";
|
import config from "@/app.config"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const {
|
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
|
||||||
date2Thai,
|
const edit = ref<boolean>(true)
|
||||||
dialogConfirm,
|
const files = ref<any>(null)
|
||||||
calculateDurationYmd,
|
|
||||||
fails,
|
|
||||||
messageError,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
} = mixin;
|
|
||||||
const edit = ref<boolean>(true);
|
|
||||||
const files = ref<any>(null);
|
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
const leavegovernmentDateRef = ref<object | null>(null);
|
const leavegovernmentDateRef = ref<object | null>(null)
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveDocumentRef = ref<object | null>(null);
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataHaji = reactive<any>({
|
const formDataHaji = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
leavegovernmentDate: null,
|
leavegovernmentDate: null,
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
totalLeave: null,
|
totalLeave: null,
|
||||||
hajjDayStatus: "true",
|
hajjDayStatus: "true",
|
||||||
leaveDocument: null,
|
leaveDocument: null,
|
||||||
});
|
})
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const formRef: HajiForm = {
|
const formRef: HajiForm = {
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
leavegovernmentDate: leavegovernmentDateRef,
|
leavegovernmentDate: leavegovernmentDateRef,
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveDocument: leaveDocumentRef,
|
leaveDocument: leaveDocumentRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
const fileUploadDoc = async (files: any) => {
|
const fileUploadDoc = async (files: any) => {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in formRef) {
|
for (const key in formRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||||
const property = formRef[key];
|
const property = formRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
// if (formDataHaji.leaveDocument.length > 0) {
|
formDataHaji.leaveDocument.forEach((file: File) => {
|
||||||
// const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
|
formData.append("leaveDocument", file)
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
})
|
||||||
// type: formDataHaji.leaveDocument[0].type,
|
// formData.append("leaveDocument", formDataHaji.leaveDocument);
|
||||||
// })
|
formData.append("type", formDataHaji.type)
|
||||||
// formData.append("leaveDocument", newFile)
|
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
|
||||||
// }
|
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
|
||||||
formData.append("leaveDocument", formDataHaji.leaveDocument);
|
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
|
||||||
formData.append("type", formDataHaji.type);
|
formData.append("leaveWrote", formDataHaji.leaveWrote)
|
||||||
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate));
|
formData.append("leaveDetail", formDataHaji.leaveDetail)
|
||||||
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate));
|
props.onSubmit(formData)
|
||||||
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
|
}
|
||||||
formData.append("leaveWrote", formDataHaji.leaveWrote);
|
|
||||||
formData.append("leaveDetail", formDataHaji.leaveDetail);
|
|
||||||
props.onSubmit(formData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function fetchCheck() {
|
async function fetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataHaji.leaveStartDate ?? null,
|
StartLeaveDate: formDataHaji.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataHaji.leaveEndDate ?? null,
|
EndLeaveDate: formDataHaji.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
// formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
// formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
formDataHaji.leaveTotal = data.totalDate;
|
formDataHaji.leaveTotal = data.totalDate
|
||||||
} else {
|
} else {
|
||||||
fails($q, "ไม่สามารถลาได้");
|
fails($q, "ไม่สามารถลาได้")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e);
|
messageError($q, e)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* function อัพเดทค่า LeaveTotal
|
* function อัพเดทค่า LeaveTotal
|
||||||
*/
|
*/
|
||||||
function updateLeaveTotal() {
|
function updateLeaveTotal() {
|
||||||
const newLeaveTotal = calculateDurationYmd(
|
const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
|
||||||
formDataHaji.leaveStartDate,
|
formDataHaji.leaveTotal = newLeaveTotal
|
||||||
formDataHaji.leaveEndDate
|
|
||||||
);
|
|
||||||
formDataHaji.leaveTotal = newLeaveTotal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const leaveDocumentList = ref<any>()
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
formDataHaji.leaveWrote = props.data.leaveWrote
|
||||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
formDataHaji.leaveTotal = props.data.leaveTotal
|
||||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
formDataHaji.leaveStartDate = props.data.leaveStartDate
|
||||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
formDataHaji.leaveEndDate = props.data.leaveEndDate
|
||||||
formDataHaji.totalLeave = props.data.totalLeave;
|
formDataHaji.totalLeave = props.data.totalLeave
|
||||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
formDataHaji.hajjDayStatus = props.data.hajjDayStatus
|
||||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
formDataHaji.leaveDetail = props.data.leaveDetail
|
||||||
// formDataHaji.leaveDocument = props.data.leaveDocument;
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
}
|
// formDataHaji.leaveDocument = props.data.leaveDocument;
|
||||||
});
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent="onValidate" class="full-width">
|
<form @submit.prevent="onValidate" class="full-width">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="row q-pa-sm q-col-gutter-sm">
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formDataHaji.leaveWrote"
|
v-model="formDataHaji.leaveWrote"
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="full-width">
|
<div class="full-width">
|
||||||
<div class="q-col-gutter-sm row">
|
<div class="q-col-gutter-sm row">
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formDataHaji.leaveStartDate"
|
v-model="formDataHaji.leaveStartDate"
|
||||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
@update:model-value="formDataHaji.leaveEndDate = null"
|
@update:model-value="formDataHaji.leaveEndDate = null"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="leaveStartDateRef"
|
ref="leaveStartDateRef"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
:model-value="
|
:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
|
||||||
formDataHaji.leaveStartDate != null
|
>
|
||||||
? date2Thai(formDataHaji.leaveStartDate)
|
<template v-slot:prepend>
|
||||||
: null
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formDataHaji.leaveEndDate"
|
v-model="formDataHaji.leaveEndDate"
|
||||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
@update:model-value="updateLeaveTotal"
|
@update:model-value="updateLeaveTotal"
|
||||||
:readonly="!formDataHaji.leaveStartDate"
|
:readonly="!formDataHaji.leaveStartDate"
|
||||||
:min-date="formDataHaji.leaveStartDate"
|
:min-date="formDataHaji.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
:readonly="!formDataHaji.leaveStartDate"
|
:readonly="!formDataHaji.leaveStartDate"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
@update:model-value="fetchCheck()"
|
@update:model-value="fetchCheck()"
|
||||||
:model-value="
|
:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
|
||||||
formDataHaji.leaveEndDate != null
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
? date2Thai(formDataHaji.leaveEndDate)
|
>
|
||||||
: null
|
<template v-slot:prepend>
|
||||||
"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-md-2 col-sm-6"
|
class="col-12 col-md-2 col-sm-6"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
ref="leaveTotalRef"
|
ref="leaveTotalRef"
|
||||||
for="leaveTotalRef"
|
for="leaveTotalRef"
|
||||||
v-model="formDataHaji.leaveTotal"
|
v-model="formDataHaji.leaveTotal"
|
||||||
label="จำนวนวันที่ลา"
|
label="จำนวนวันที่ลา"
|
||||||
readonly
|
readonly
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
<datepicker
|
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless readonly week-start="0" :locale="'th'" :enableTimePicker="false">
|
||||||
class="col-12 col-md-4 col-sm-6"
|
<template #year="{ year }">
|
||||||
menu-class-name="modalfix"
|
{{ year + 543 }}
|
||||||
autoApply
|
</template>
|
||||||
borderless
|
<template #year-overlay-value="{ value }">
|
||||||
readonly
|
{{ parseInt(value + 543) }}
|
||||||
week-start="0"
|
</template>
|
||||||
:locale="'th'"
|
<template #trigger>
|
||||||
:enableTimePicker="false"
|
<q-input
|
||||||
>
|
ref="leavegovernmentDateRef"
|
||||||
<template #year="{ year }">
|
bg-color="white"
|
||||||
{{ year + 543 }}
|
class="full-width"
|
||||||
</template>
|
outlined
|
||||||
<template #year-overlay-value="{ value }">
|
dense
|
||||||
{{ parseInt(value + 543) }}
|
readonly
|
||||||
</template>
|
hide-bottom-space
|
||||||
<template #trigger>
|
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||||
<q-input
|
:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
|
||||||
ref="leavegovernmentDateRef"
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||||
bg-color="white"
|
>
|
||||||
class="full-width"
|
<template v-slot:prepend>
|
||||||
outlined
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
dense
|
</template>
|
||||||
readonly
|
</q-input>
|
||||||
hide-bottom-space
|
</template>
|
||||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
</datepicker>
|
||||||
:model-value="
|
</div>
|
||||||
dataStore.dateAppoint != null
|
</div>
|
||||||
? date2Thai(dataStore.dateAppoint)
|
|
||||||
: null
|
|
||||||
"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--black)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
|
||||||
เคยไปประกอบพิธีฮัจญ์หรือไม่
|
<div class="col-12">
|
||||||
</div>
|
<q-radio v-model="formDataHaji.hajjDayStatus" :val="'true'" checked-icon="task_alt" label="เคย" />
|
||||||
<div class="col-12">
|
<q-radio v-model="formDataHaji.hajjDayStatus" :val="'false'" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
|
||||||
<q-radio
|
</div>
|
||||||
v-model="formDataHaji.hajjDayStatus"
|
|
||||||
:val="true"
|
|
||||||
checked-icon="task_alt"
|
|
||||||
label="เคย"
|
|
||||||
/>
|
|
||||||
<q-radio
|
|
||||||
v-model="formDataHaji.hajjDayStatus"
|
|
||||||
:val="false"
|
|
||||||
checked-icon="task_alt"
|
|
||||||
label="ไม่เคยไปประกอบพิธีฮัจญ์"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-input
|
<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||||
v-model="formDataHaji.leaveDetail"
|
<div class="full-width">
|
||||||
class="col-12 q-mt-sm cursor-pointer inputgreen"
|
<div class="q-col-gutter-sm row">
|
||||||
bg-color="white"
|
<!-- multiple -->
|
||||||
dense
|
<q-file v-model="formDataHaji.leaveDocument" multiple bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined hide-bottom-space>
|
||||||
outlined
|
<template v-slot:prepend>
|
||||||
type="textarea"
|
<q-icon name="attach_file" color="primary" />
|
||||||
label="รายละเอียด"
|
</template>
|
||||||
/>
|
</q-file>
|
||||||
|
<!-- <div class="col-12" v-if="formDataHaji.leaveDocument.length == 0">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" v-if="data">
|
||||||
|
<div class="col-12 col-md-12 col-sm-12">
|
||||||
|
<q-card bordered>
|
||||||
|
<!-- <div class="col-12">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||||
|
</div> -->
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="row items-baseline">
|
||||||
|
<div class="col">
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
</div>
|
||||||
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12 col-sm-6 row" v-if="!edit">
|
||||||
<!-- multiple -->
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
<q-file
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
v-model="formDataHaji.leaveDocument"
|
</div>
|
||||||
bg-color="white"
|
<q-card bordered flat class="full-width">
|
||||||
label="เอกสารประกอบ"
|
<q-list separator>
|
||||||
use-chips
|
<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
@added="fileUploadDoc"
|
<q-item-section>
|
||||||
dense
|
<q-item-label class="full-width ellipsis">
|
||||||
outlined
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
hide-bottom-space
|
<q-item-label caption> </q-item-label>
|
||||||
>
|
</q-item-section>
|
||||||
<template v-slot:prepend>
|
</q-item>
|
||||||
<q-icon name="attach_file" color="primary" />
|
</q-list>
|
||||||
</template>
|
</q-card>
|
||||||
</q-file>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</q-card>
|
||||||
<div class="col-12 row" v-if="!edit">
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="row col-12 q-pt-md">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">
|
<q-space />
|
||||||
เอกสารเพิ่มเติม
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
</div>
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
</div>
|
>
|
||||||
<q-card bordered flat class="full-width">
|
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||||
<q-list separator>
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
>
|
||||||
<q-item-section>
|
</div>
|
||||||
<q-item-label class="full-width ellipsis">
|
</form>
|
||||||
{{ 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
|
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
|
||||||
id="onSubmit"
|
|
||||||
type="submit"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center btnBlue"
|
|
||||||
label="บันทึก"
|
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="data"
|
|
||||||
id="onSubmit"
|
|
||||||
type="button"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center q-ml-sm"
|
|
||||||
color="primary"
|
|
||||||
label="ยื่นใบลา"
|
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,495 +1,438 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, onMounted } from "vue";
|
import { reactive, ref, onMounted } from "vue"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
|
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http"
|
||||||
import config from "@/app.config";
|
import config from "@/app.config"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const {
|
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
|
||||||
date2Thai,
|
const edit = ref<boolean>(true)
|
||||||
dialogConfirm,
|
const files = ref<any>(null)
|
||||||
calculateDurationYmd,
|
|
||||||
dateToISO,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
fails,
|
|
||||||
} = mixin;
|
|
||||||
const edit = ref<boolean>(true);
|
|
||||||
const files = ref<any>(null);
|
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
const absentDaySummonRef = ref<object | null>(null);
|
const absentDaySummonRef = ref<object | null>(null)
|
||||||
const absentDayLocationRef = ref<object | null>(null);
|
const absentDayLocationRef = ref<object | null>(null)
|
||||||
const absentDayRegistorDateRef = ref<object | null>(null);
|
const absentDayRegistorDateRef = ref<object | null>(null)
|
||||||
const absentDayGetInRef = ref<object | null>(null);
|
const absentDayGetInRef = ref<object | null>(null)
|
||||||
const absentDayAtRef = ref<object | null>(null);
|
const absentDayAtRef = ref<object | null>(null)
|
||||||
const leaveDetailRef = ref<object | null>(null);
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataMilitary = reactive<any>({
|
const formDataMilitary = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
leaveTotal: 0,
|
leaveTotal: 0,
|
||||||
leaveDocument: null,
|
leaveDocument: null,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
absentDaySummon: "",
|
absentDaySummon: "",
|
||||||
absentDayLocation: "",
|
absentDayLocation: "",
|
||||||
absentDayRegistorDate: null,
|
absentDayRegistorDate: null,
|
||||||
absentDayGetIn: "",
|
absentDayGetIn: "",
|
||||||
absentDayAt: "",
|
absentDayAt: "",
|
||||||
leaveDetail: "",
|
leaveDetail: "",
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
const fileUploadDoc = async (files: any) => {
|
const fileUploadDoc = async (files: any) => {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const formRef: MilitaryForm = {
|
const formRef: MilitaryForm = {
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
absentDaySummon: absentDaySummonRef,
|
absentDaySummon: absentDaySummonRef,
|
||||||
absentDayLocation: absentDayLocationRef,
|
absentDayLocation: absentDayLocationRef,
|
||||||
absentDayRegistorDate: absentDayRegistorDateRef,
|
absentDayRegistorDate: absentDayRegistorDateRef,
|
||||||
absentDayGetIn: absentDayGetInRef,
|
absentDayGetIn: absentDayGetInRef,
|
||||||
absentDayAt: absentDayAtRef,
|
absentDayAt: absentDayAtRef,
|
||||||
leaveDetail: leaveDetailRef,
|
leaveDetail: leaveDetailRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in formRef) {
|
for (const key in formRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||||
const property = formRef[key];
|
const property = formRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
// if (formDataMilitary.leaveDocument.length > 0) {
|
formDataMilitary.leaveDocument.forEach((file: File) => {
|
||||||
// const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
|
formData.append("leaveDocument", file)
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
})
|
||||||
// type: formDataMilitary.leaveDocument[0].type,
|
// formData.append("leaveDocument", formDataMilitary.leaveDocument);
|
||||||
// })
|
formData.append("type", formDataMilitary.type)
|
||||||
// formData.append("leaveDocument", newFile)
|
formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
|
||||||
// }
|
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
|
||||||
formData.append("leaveDocument", formDataMilitary.leaveDocument);
|
formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
|
||||||
formData.append("type", formDataMilitary.type);
|
formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
|
||||||
formData.append(
|
formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
|
||||||
"leaveStartDate",
|
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
|
||||||
dateToISO(formDataMilitary.leaveStartDate)
|
formData.append("absentDayAt", formDataMilitary.absentDayAt)
|
||||||
);
|
formData.append("leaveWrote", formDataMilitary.leaveWrote)
|
||||||
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate));
|
formData.append("leaveDetail", formDataMilitary.leaveDetail)
|
||||||
formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
|
props.onSubmit(formData)
|
||||||
formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
|
}
|
||||||
formData.append(
|
|
||||||
"absentDayRegistorDate",
|
|
||||||
dateToISO(formDataMilitary.absentDayRegistorDate)
|
|
||||||
);
|
|
||||||
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
|
|
||||||
formData.append("absentDayAt", formDataMilitary.absentDayAt);
|
|
||||||
formData.append("leaveWrote", formDataMilitary.leaveWrote);
|
|
||||||
formData.append("leaveDetail", formDataMilitary.leaveDetail);
|
|
||||||
props.onSubmit(formData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function fetchCheck() {
|
async function fetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
|
StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
|
EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
// formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
// formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
formDataMilitary.leaveTotal = data.totalDate;
|
formDataMilitary.leaveTotal = data.totalDate
|
||||||
} else {
|
} else {
|
||||||
fails($q, "ไม่สามารถลาได้");
|
fails($q, "ไม่สามารถลาได้")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e);
|
messageError($q, e)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* function อัพเดทค่า LeaveTotal
|
* function อัพเดทค่า LeaveTotal
|
||||||
*/
|
*/
|
||||||
function updateLeaveTotal() {
|
function updateLeaveTotal() {
|
||||||
const newLeaveTotal = calculateDurationYmd(
|
const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
|
||||||
formDataMilitary.leaveStartDate,
|
formDataMilitary.leaveTotal = newLeaveTotal
|
||||||
formDataMilitary.leaveEndDate
|
console.log("test")
|
||||||
);
|
|
||||||
formDataMilitary.leaveTotal = newLeaveTotal;
|
|
||||||
console.log("test");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const leaveDocumentList = ref<any>()
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
formDataMilitary.leaveWrote = props.data.leaveWrote;
|
formDataMilitary.leaveWrote = props.data.leaveWrote
|
||||||
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
|
formDataMilitary.leaveStartDate = props.data.leaveStartDate
|
||||||
formDataMilitary.leaveEndDate = props.data.leaveEndDate;
|
formDataMilitary.leaveEndDate = props.data.leaveEndDate
|
||||||
formDataMilitary.leaveTotal = props.data.leaveTotal;
|
formDataMilitary.leaveTotal = props.data.leaveTotal
|
||||||
formDataMilitary.absentDaySummon = props.data.absentDaySummon;
|
formDataMilitary.absentDaySummon = props.data.absentDaySummon
|
||||||
formDataMilitary.absentDayLocation = props.data.absentDayLocation;
|
formDataMilitary.absentDayLocation = props.data.absentDayLocation
|
||||||
formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
|
formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate
|
||||||
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
|
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn
|
||||||
formDataMilitary.absentDayAt = props.data.absentDayAt;
|
formDataMilitary.absentDayAt = props.data.absentDayAt
|
||||||
formDataMilitary.leaveDetail = props.data.leaveDetail;
|
formDataMilitary.leaveDetail = props.data.leaveDetail
|
||||||
// formDataMilitary.leaveDocument = props.data.leaveDocument;
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
}
|
// formDataMilitary.leaveDocument = props.data.leaveDocument;
|
||||||
});
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent="onValidate">
|
<form @submit.prevent="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="row q-pa-sm q-col-gutter-sm">
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
v-model="formDataMilitary.leaveWrote"
|
v-model="formDataMilitary.leaveWrote"
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataMilitary.leaveStartDate"
|
v-model="formDataMilitary.leaveStartDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
@update:model-value="formDataMilitary.leaveEndDate = null"
|
@update:model-value="formDataMilitary.leaveEndDate = null"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
dense
|
dense
|
||||||
ref="leaveStartDateRef"
|
ref="leaveStartDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
|
||||||
formDataMilitary.leaveStartDate != null
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
? date2Thai(formDataMilitary.leaveStartDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataMilitary.leaveEndDate"
|
v-model="formDataMilitary.leaveEndDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
@update:model-value="updateLeaveTotal, fetchCheck()"
|
@update:model-value="updateLeaveTotal, fetchCheck()"
|
||||||
:readonly="!formDataMilitary.leaveStartDate"
|
:readonly="!formDataMilitary.leaveStartDate"
|
||||||
:min-date="formDataMilitary.leaveStartDate"
|
:min-date="formDataMilitary.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:readonly="!formDataMilitary.leaveStartDate"
|
:readonly="!formDataMilitary.leaveStartDate"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
|
||||||
formDataMilitary.leaveEndDate != null
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
? date2Thai(formDataMilitary.leaveEndDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-md-2 col-sm-6"
|
class="col-12 col-md-2 col-sm-6"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
ref="leaveTotalRef"
|
ref="leaveTotalRef"
|
||||||
for="leaveTotalRef"
|
for="leaveTotalRef"
|
||||||
v-model="formDataMilitary.leaveTotal"
|
v-model="formDataMilitary.leaveTotal"
|
||||||
label="จำนวนวันที่ลา"
|
label="จำนวนวันที่ลา"
|
||||||
readonly
|
readonly
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
<div class="full-width">
|
<div class="full-width">
|
||||||
<div class="q-col-gutter-sm row">
|
<div class="q-col-gutter-sm row">
|
||||||
<q-input
|
<q-input
|
||||||
ref="absentDaySummonRef"
|
ref="absentDaySummonRef"
|
||||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
v-model="formDataMilitary.absentDaySummon"
|
v-model="formDataMilitary.absentDaySummon"
|
||||||
label="ได้รับหมายเรียกของ"
|
label="ได้รับหมายเรียกของ"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
ref="atRef"
|
ref="atRef"
|
||||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
v-model="formDataMilitary.absentDayLocation"
|
v-model="formDataMilitary.absentDayLocation"
|
||||||
label="ที่"
|
label="ที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="full-width">
|
<div class="full-width">
|
||||||
<div class="q-col-gutter-sm row">
|
<div class="q-col-gutter-sm row">
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataMilitary.absentDayRegistorDate"
|
v-model="formDataMilitary.absentDayRegistorDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="absentDayRegistorDateRef"
|
ref="absentDayRegistorDateRef"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
|
||||||
formDataMilitary.absentDayRegistorDate != null
|
:label="`${'ลงวันที่'}`"
|
||||||
? date2Thai(formDataMilitary.absentDayRegistorDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
ref="absentDayGetInRef"
|
ref="absentDayGetInRef"
|
||||||
outlined
|
outlined
|
||||||
v-model="formDataMilitary.absentDayGetIn"
|
v-model="formDataMilitary.absentDayGetIn"
|
||||||
label="ให้เข้ารับการ"
|
label="ให้เข้ารับการ"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
ref="absentDayAtRef"
|
ref="absentDayAtRef"
|
||||||
v-model="formDataMilitary.absentDayAt"
|
v-model="formDataMilitary.absentDayAt"
|
||||||
label="ณ ที่"
|
label="ณ ที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
|
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-input
|
<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
|
||||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
|
||||||
dense
|
|
||||||
bg-color="white"
|
|
||||||
outlined
|
|
||||||
v-model="formDataMilitary.leaveDetail"
|
|
||||||
type="textarea"
|
|
||||||
label="รายละเอียด"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<!-- multiple -->
|
<!-- multiple -->
|
||||||
<q-file
|
<q-file v-model="formDataMilitary.leaveDocument" multiple dense label="เอกสารประกอบ" outlined bg-color="white" hide-bottom-space use-chips @added="fileUploadDoc">
|
||||||
v-model="formDataMilitary.leaveDocument"
|
<template v-slot:prepend>
|
||||||
dense
|
<q-icon name="attach_file" color="primary" />
|
||||||
label="เอกสารประกอบ"
|
</template>
|
||||||
outlined
|
</q-file>
|
||||||
bg-color="white"
|
<div class="col-12" v-if="formDataMilitary.leaveDocument.length == 0">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||||
hide-bottom-space
|
</div>
|
||||||
use-chips
|
<div class="col-12" v-if="data">
|
||||||
@added="fileUploadDoc"
|
<div class="col-12 col-md-12 col-sm-12">
|
||||||
>
|
<q-card bordered>
|
||||||
<template v-slot:prepend>
|
<!-- <div class="col-12">
|
||||||
<q-icon name="attach_file" color="primary" />
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||||
</template>
|
</div> -->
|
||||||
</q-file>
|
<q-list separator>
|
||||||
</div>
|
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="row items-baseline">
|
||||||
|
<div class="col">
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
</div>
|
||||||
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12 row" v-if="!edit">
|
<div class="col-12 col-sm-6 row" v-if="!edit">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<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 class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
เอกสารเพิ่มเติม
|
</div>
|
||||||
</div>
|
<q-card bordered flat class="full-width">
|
||||||
</div>
|
<q-list separator>
|
||||||
<q-card bordered flat class="full-width">
|
<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
<q-list separator>
|
<q-item-section>
|
||||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
<q-item-label class="full-width ellipsis">
|
||||||
<q-item-section>
|
{{ file.name }}
|
||||||
<q-item-label class="full-width ellipsis">
|
</q-item-label>
|
||||||
{{ file.fileName }}
|
<q-item-label caption> </q-item-label>
|
||||||
</q-item-label>
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
<q-item-label caption> </q-item-label>
|
</q-list>
|
||||||
</q-item-section>
|
</q-card>
|
||||||
</q-item>
|
</div>
|
||||||
</q-list>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
<q-separator class="q-mt-sm" />
|
||||||
</div>
|
<div class="row col-12 q-pt-md">
|
||||||
</q-card>
|
<q-space />
|
||||||
<q-separator class="q-mt-sm" />
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
<div class="row col-12 q-pt-md">
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
<q-space />
|
>
|
||||||
<q-btn
|
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
id="onSubmit"
|
>
|
||||||
type="submit"
|
</div>
|
||||||
unelevated
|
</form>
|
||||||
dense
|
|
||||||
class="q-px-md items-center btnBlue"
|
|
||||||
label="บันทึก"
|
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="data"
|
|
||||||
id="onSubmit"
|
|
||||||
type="button"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center q-ml-sm"
|
|
||||||
color="primary"
|
|
||||||
label="ยื่นใบลา"
|
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,309 +1,275 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, watch, onMounted } from "vue";
|
import { ref, reactive, watch, onMounted } from "vue"
|
||||||
import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
|
import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http"
|
||||||
import config from "@/app.config";
|
import config from "@/app.config"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router"
|
||||||
import genReport from "@/plugins/genreport";
|
import genReport from "@/plugins/genreport"
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
|
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = mixin
|
||||||
mixin;
|
const edit = ref<boolean>(true)
|
||||||
const edit = ref<boolean>(true);
|
const router = useRouter()
|
||||||
const router = useRouter();
|
const isSave = ref<boolean>(false)
|
||||||
const isSave = ref<boolean>(false);
|
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataWorkInternational = reactive<any>({
|
const formDataWorkInternational = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
leaveDetail: "",
|
leaveDetail: "",
|
||||||
leaveDocument: null,
|
leaveDocument: null,
|
||||||
leaveDraftDocument: [],
|
leaveDraftDocument: [],
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveDetailRef = ref<object | null>(null);
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
const leaveDocumentRef = ref<object | null>(null);
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const FormRef: FormRef = {
|
const FormRef: FormRef = {
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveDetail: leaveDetailRef,
|
leaveDetail: leaveDetailRef,
|
||||||
leaveDocument: leaveDocumentRef,
|
leaveDocument: leaveDocumentRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const nameFileDraft = ref<string>("");
|
const nameFileDraft = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
const fileUploadDoc = async (files: any) => {
|
const fileUploadDoc = async (files: any) => {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in FormRef) {
|
for (const key in FormRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||||
const property = FormRef[key];
|
const property = FormRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// ถ้า Validate ผ่านให้บันทึกข้อมูล
|
// ถ้า Validate ผ่านให้บันทึกข้อมูล
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
|
|
||||||
if (formDataWorkInternational.leaveDocument) {
|
if (formDataWorkInternational.leaveDocument) {
|
||||||
// //
|
formDataWorkInternational.leaveDocument.forEach((file: File) => {
|
||||||
// if (formDataWorkInternational.leaveDocument.length > 0) {
|
formData.append("leaveDocument", file)
|
||||||
// const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
|
})
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
|
||||||
// type: formDataWorkInternational.leaveDocument[0].type,
|
|
||||||
// })
|
|
||||||
// formData.append("leaveDocument", newFile)
|
|
||||||
// }
|
|
||||||
|
|
||||||
formData.append("leaveDocument", formDataWorkInternational.leaveDocument);
|
// formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (formDataWorkInternational.leaveDraftDocument) {
|
if (formDataWorkInternational.leaveDraftDocument) {
|
||||||
formData.append(
|
formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
|
||||||
"leaveDraftDocument",
|
}
|
||||||
formDataWorkInternational.leaveDraftDocument
|
formData.append("type", formDataWorkInternational.type) //
|
||||||
);
|
formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
|
||||||
}
|
formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
|
||||||
formData.append("type", formDataWorkInternational.type); //
|
formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
|
||||||
formData.append(
|
formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
|
||||||
"leaveStartDate",
|
props.onSubmit(formData)
|
||||||
dateToISO(formDataWorkInternational.leaveStartDate)
|
}
|
||||||
); //
|
|
||||||
formData.append(
|
|
||||||
"leaveEndDate",
|
|
||||||
dateToISO(formDataWorkInternational.leaveEndDate)
|
|
||||||
); //
|
|
||||||
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
|
|
||||||
formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
|
|
||||||
props.onSubmit(formData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//download function
|
//download function
|
||||||
async function onClickDownloadFile(id: string, fileName: string) {
|
async function onClickDownloadFile(id: string, fileName: string) {
|
||||||
showLoader();
|
showLoader()
|
||||||
await http
|
await http
|
||||||
.get(config.API.leaveReport(id))
|
.get(config.API.leaveReport(id))
|
||||||
.then(async (res) => {
|
.then(async res => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
await genReport(data, fileName);
|
await genReport(data, fileName)
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch(err => {
|
||||||
messageError($q, err);
|
messageError($q, err)
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader();
|
hideLoader()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function FetchCheck() {
|
async function FetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
|
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
|
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
formDataWorkInternational.leaveTotal =
|
formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
data.totalDate - data.sumDateWork - data.sumDateHoliday;
|
// formDataWorkInternational.leaveLast = data.totalDate
|
||||||
// formDataWorkInternational.leaveLast = data.totalDate
|
} else {
|
||||||
} else {
|
fails($q, "ไม่สามารถลาได้")
|
||||||
fails($q, "ไม่สามารถลาได้");
|
}
|
||||||
}
|
})
|
||||||
})
|
.catch((e: any) => {
|
||||||
.catch((e: any) => {
|
messageError($q, e)
|
||||||
messageError($q, e);
|
})
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const leaveDraftDocument = ref<string>();
|
const leaveDocumentList = ref<any>()
|
||||||
|
const leaveDraftDocument = ref<string>()
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
formDataWorkInternational.leaveWrote = props.data.leaveWrote
|
||||||
formDataWorkInternational.leaveStartDate = new Date(
|
formDataWorkInternational.leaveStartDate = new Date(props.data.leaveStartDate)
|
||||||
props.data.leaveStartDate
|
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate)
|
||||||
);
|
formDataWorkInternational.leaveDetail = props.data.leaveDetail
|
||||||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
|
||||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
leaveDraftDocument.value = props.data.leaveDraftDocument
|
||||||
// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
}
|
||||||
}
|
})
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent.stop="onValidate">
|
<form @submit.prevent.stop="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
for="leaveWroteRef"
|
for="leaveWroteRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="formDataWorkInternational.leaveWrote"
|
v-model="formDataWorkInternational.leaveWrote"
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataWorkInternational.leaveStartDate"
|
v-model="formDataWorkInternational.leaveStartDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveStartDateRef"
|
ref="leaveStartDateRef"
|
||||||
for="leaveStartDateRef"
|
for="leaveStartDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
|
||||||
formDataWorkInternational.leaveStartDate != null
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
? date2Thai(formDataWorkInternational.leaveStartDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="formDataWorkInternational.leaveEndDate"
|
v-model="formDataWorkInternational.leaveEndDate"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
borderless
|
borderless
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
@update:model-value="FetchCheck()"
|
@update:model-value="FetchCheck()"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:readonly="!formDataWorkInternational.leaveStartDate"
|
:readonly="!formDataWorkInternational.leaveStartDate"
|
||||||
:min-date="formDataWorkInternational.leaveStartDate"
|
:min-date="formDataWorkInternational.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
for="leaveEndDateRef"
|
for="leaveEndDateRef"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
:readonly="!formDataWorkInternational.leaveStartDate"
|
:readonly="!formDataWorkInternational.leaveStartDate"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
:model-value="
|
:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
|
||||||
formDataWorkInternational.leaveEndDate != null
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
? date2Thai(formDataWorkInternational.leaveEndDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
<!-- <q-input
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
<!-- <q-input
|
|
||||||
class="col-md-3 col-sm-12"
|
class="col-md-3 col-sm-12"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
|
|
@ -316,155 +282,139 @@ onMounted(() => {
|
||||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||||
/> -->
|
/> -->
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
type="textarea"
|
type="textarea"
|
||||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
dense
|
dense
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
ref="leaveDetailRef"
|
ref="leaveDetailRef"
|
||||||
for="leaveDetailRef"
|
for="leaveDetailRef"
|
||||||
v-model="formDataWorkInternational.leaveDetail"
|
v-model="formDataWorkInternational.leaveDetail"
|
||||||
label="รายละเอียด"
|
label="รายละเอียด"
|
||||||
:readonly="!edit"
|
:readonly="!edit"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-file
|
<q-file
|
||||||
ref="fileRef"
|
ref="fileRef"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
v-model="formDataWorkInternational.leaveDocument"
|
v-model="formDataWorkInternational.leaveDocument"
|
||||||
@added="fileUploadDoc"
|
multiple
|
||||||
dense
|
@added="fileUploadDoc"
|
||||||
label="เอกสารประกอบ"
|
dense
|
||||||
outlined
|
label="เอกสารประกอบ"
|
||||||
use-chips
|
outlined
|
||||||
class="q-pl-sm col-12"
|
use-chips
|
||||||
>
|
class="q-pl-sm col-12"
|
||||||
<template v-slot:prepend>
|
>
|
||||||
<q-icon name="attach_file" color="primary" />
|
<template v-slot:prepend>
|
||||||
</template>
|
<q-icon name="attach_file" color="primary" />
|
||||||
</q-file>
|
</template>
|
||||||
|
</q-file>
|
||||||
|
<!-- <div class="col-12" v-if="formDataWorkInternational.leaveDocument.length == 0">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||||
|
</div> -->
|
||||||
|
<div class="col-12" v-if="data">
|
||||||
|
<div class="col-12 col-md-12 col-sm-12">
|
||||||
|
<q-card bordered>
|
||||||
|
<!-- <div class="col-12">
|
||||||
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||||
|
</div> -->
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="row items-baseline">
|
||||||
|
<div class="col">
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
</div>
|
||||||
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12 row" v-if="!edit">
|
<div class="col-12 col-sm-6 row" v-if="!edit">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<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 class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
เอกสารเพิ่มเติม
|
</div>
|
||||||
</div>
|
<q-card bordered flat class="full-width">
|
||||||
</div>
|
<q-list separator>
|
||||||
<q-card bordered flat class="full-width">
|
<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
<q-list separator>
|
<q-item-section>
|
||||||
<q-item
|
<q-item-label class="full-width ellipsis">
|
||||||
v-for="(file, index) in formDataWorkInternational.leaveDocument"
|
{{ file.name }}
|
||||||
:key="index"
|
</q-item-label>
|
||||||
class="q-my-xs"
|
<q-item-label caption> </q-item-label>
|
||||||
>
|
</q-item-section>
|
||||||
<q-item-section>
|
</q-item>
|
||||||
<q-item-label class="full-width ellipsis">
|
</q-list>
|
||||||
{{ file.name }}
|
</q-card>
|
||||||
</q-item-label>
|
</div>
|
||||||
<q-item-label caption> </q-item-label>
|
</div>
|
||||||
</q-item-section>
|
</q-card>
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<div v-if="data && data.id" class="q-mt-md">
|
<div v-if="data && data.id" class="q-mt-md">
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">
|
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||||
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
|
</div>
|
||||||
</div>
|
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||||
</div>
|
<div class="row">
|
||||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
<div class="col-sm-3 q-my-sm">
|
||||||
<div class="row">
|
<div class="column q-mx-xs">
|
||||||
<div class="col-sm-3 q-my-sm">
|
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||||
<div class="column q-mx-xs">
|
|
||||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
|
||||||
ดาวน์โหลด
|
ดาวน์โหลด
|
||||||
</div> -->
|
</div> -->
|
||||||
<q-btn
|
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
|
||||||
color="primary"
|
</div>
|
||||||
icon="download"
|
</div>
|
||||||
label="ดาวน์โหลดแบบฟอร์ม"
|
<div class="col-sm-5 q-my-sm">
|
||||||
@click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
|
<div class="column q-mx-xs">
|
||||||
/>
|
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-5 q-my-sm">
|
|
||||||
<div class="column q-mx-xs">
|
|
||||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
|
||||||
อัปโหลด
|
อัปโหลด
|
||||||
</div> -->
|
</div> -->
|
||||||
<q-file
|
<q-file v-model="formDataWorkInternational.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
|
||||||
v-model="formDataWorkInternational.leaveDraftDocument"
|
<template v-slot:prepend>
|
||||||
use-chips
|
<q-icon name="attach_file" color="primary" />
|
||||||
dense
|
</template>
|
||||||
label="อัปโหลดแบบฟอร์ม"
|
</q-file>
|
||||||
outlined
|
</div>
|
||||||
bg-color="white"
|
</div>
|
||||||
accept="application/pdf"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="attach_file" color="primary" />
|
|
||||||
</template>
|
|
||||||
</q-file>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||||
<div class="column q-mx-xs">
|
<div class="column q-mx-xs">
|
||||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||||
ดูไฟล์อัปโหลด
|
ดูไฟล์อัปโหลด
|
||||||
</div> -->
|
</div> -->
|
||||||
<q-btn
|
<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
|
||||||
icon="visibility"
|
</div>
|
||||||
color="blue"
|
</div>
|
||||||
label="ดาวน์โหลดไฟล์"
|
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||||
:href="leaveDraftDocument"
|
|
||||||
target="_blank"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
|
||||||
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
||||||
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
||||||
>
|
>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="!isSave">
|
<div v-if="!isSave">
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
id="onSubmit"
|
>
|
||||||
type="submit"
|
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||||
unelevated
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
dense
|
>
|
||||||
class="q-px-md items-center btnBlue"
|
</div>
|
||||||
label="บันทึก"
|
</div>
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
</form>
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="data"
|
|
||||||
id="onSubmit"
|
|
||||||
type="button"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center q-ml-sm"
|
|
||||||
color="primary"
|
|
||||||
label="ยื่นใบลา"
|
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,439 +1,378 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, onMounted } from "vue";
|
import { reactive, ref, onMounted } from "vue"
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
|
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http"
|
||||||
import config from "@/app.config";
|
import config from "@/app.config"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router"
|
||||||
import genReport from "@/plugins/genreport";
|
import genReport from "@/plugins/genreport"
|
||||||
|
|
||||||
/** Use */
|
/** Use */
|
||||||
const dataStore = useLeaveStore();
|
const dataStore = useLeaveStore()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
|
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = mixin
|
||||||
mixin;
|
const router = useRouter()
|
||||||
const router = useRouter();
|
const edit = ref<boolean>(true)
|
||||||
const edit = ref<boolean>(true);
|
const isSave = ref<boolean>(false)
|
||||||
const isSave = ref<boolean>(false);
|
const files = ref<any>(null)
|
||||||
const files = ref<any>(null);
|
|
||||||
|
|
||||||
/** ตัวแปร ref สำหรับแสดง validate */
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
const leaveStartDateRef = ref<object | null>(null);
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
const leaveEndDateRef = ref<object | null>(null);
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
const leaveWroteRef = ref<object | null>(null);
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
onSubmit: {
|
onSubmit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
onConfirm: {
|
onConfirm: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => "",
|
default: () => "",
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
/** ข้อมูล v-model ของฟอร์ม */
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
const formDataRehabilitation = reactive<any>({
|
const formDataRehabilitation = reactive<any>({
|
||||||
type: dataStore.typeId,
|
type: dataStore.typeId,
|
||||||
leaveWrote: "",
|
leaveWrote: "",
|
||||||
leaveStartDate: null,
|
leaveStartDate: null,
|
||||||
leaveEndDate: null,
|
leaveEndDate: null,
|
||||||
leaveDocument: "",
|
leaveDocument: "",
|
||||||
leaveDetail: "",
|
leaveDetail: "",
|
||||||
leaveDraftDocument: null,
|
leaveDraftDocument: null,
|
||||||
});
|
})
|
||||||
|
|
||||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
const formRef: RehabilitationForm = {
|
const formRef: RehabilitationForm = {
|
||||||
leaveStartDate: leaveStartDateRef,
|
leaveStartDate: leaveStartDateRef,
|
||||||
leaveEndDate: leaveEndDateRef,
|
leaveEndDate: leaveEndDateRef,
|
||||||
leaveWrote: leaveWroteRef,
|
leaveWrote: leaveWroteRef,
|
||||||
};
|
}
|
||||||
|
|
||||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
function onValidate() {
|
function onValidate() {
|
||||||
const hasError = [];
|
const hasError = []
|
||||||
for (const key in formRef) {
|
for (const key in formRef) {
|
||||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||||
const property = formRef[key];
|
const property = formRef[key]
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
if (property.value && typeof property.value.validate === "function") {
|
||||||
const isValid = property.value.validate();
|
const isValid = property.value.validate()
|
||||||
hasError.push(isValid);
|
hasError.push(isValid)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every(result => result === true)) {
|
||||||
const formData = new FormData();
|
const formData = new FormData()
|
||||||
|
|
||||||
if (formDataRehabilitation.leaveDocument) {
|
if (formDataRehabilitation.leaveDocument) {
|
||||||
// if (formDataRehabilitation.leaveDocument.length > 0) {
|
formDataRehabilitation.leaveDocument.forEach((file: File) => {
|
||||||
// const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
|
formData.append("leaveDocument", file)
|
||||||
// const newFile = new File(blob, nameFile.value, {
|
})
|
||||||
// type: formDataRehabilitation.leaveDocument[0].type,
|
// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
|
||||||
// })
|
}
|
||||||
// formData.append("leaveDocument", newFile)
|
|
||||||
// } //
|
|
||||||
|
|
||||||
formData.append("leaveDocument", formDataRehabilitation.leaveDocument);
|
if (formDataRehabilitation.leaveDraftDocument) {
|
||||||
}
|
formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
|
||||||
|
}
|
||||||
|
|
||||||
if (formDataRehabilitation.leaveDraftDocument) {
|
formData.append("type", formDataRehabilitation.type) //
|
||||||
formData.append(
|
formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
|
||||||
"leaveDraftDocument",
|
formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
|
||||||
formDataRehabilitation.leaveDraftDocument
|
formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
|
||||||
);
|
formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
|
||||||
}
|
props.onSubmit(formData)
|
||||||
|
}
|
||||||
formData.append("type", formDataRehabilitation.type); //
|
|
||||||
formData.append(
|
|
||||||
"leaveStartDate",
|
|
||||||
dateToISO(formDataRehabilitation.leaveStartDate)
|
|
||||||
); //
|
|
||||||
formData.append(
|
|
||||||
"leaveEndDate",
|
|
||||||
dateToISO(formDataRehabilitation.leaveEndDate)
|
|
||||||
); //
|
|
||||||
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
|
|
||||||
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
|
|
||||||
props.onSubmit(formData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
const nameFile = ref<string>("");
|
const nameFile = ref<string>("")
|
||||||
const nameFileDraft = ref<string>("");
|
const nameFileDraft = ref<string>("")
|
||||||
const fileDocDataUpload = ref<File[]>([]);
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
const fileUploadDoc = async (files: any) => {
|
const fileUploadDoc = async (files: any) => {
|
||||||
files.forEach((file: any) => {
|
files.forEach((file: any) => {
|
||||||
fileDocDataUpload.value.push(file);
|
fileDocDataUpload.value.push(file)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* check ว่าลาได้ไหม จาก api
|
* check ว่าลาได้ไหม จาก api
|
||||||
* @param formData
|
* @param formData
|
||||||
*/
|
*/
|
||||||
const isLeave = ref<boolean>(true);
|
const isLeave = ref<boolean>(true)
|
||||||
async function FetchCheck() {
|
async function FetchCheck() {
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveCheck(), {
|
.post(config.API.leaveCheck(), {
|
||||||
type: dataStore.typeId ?? null,
|
type: dataStore.typeId ?? null,
|
||||||
StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
|
StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
|
||||||
EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
|
EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
|
||||||
})
|
})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
isLeave.value = data.isLeave;
|
isLeave.value = data.isLeave
|
||||||
if (data.isLeave === true) {
|
if (data.isLeave === true) {
|
||||||
// formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
// formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
// formDataRehabilitation.leaveTotal = data.totalDate
|
// formDataRehabilitation.leaveTotal = data.totalDate
|
||||||
} else {
|
} else {
|
||||||
fails($q, "ไม่สามารถลาได้");
|
fails($q, "ไม่สามารถลาได้")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e);
|
messageError($q, e)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//download function
|
//download function
|
||||||
async function onClickDownloadFile(id: string, fileName: string) {
|
async function onClickDownloadFile(id: string, fileName: string) {
|
||||||
showLoader();
|
showLoader()
|
||||||
await http
|
await http
|
||||||
.get(config.API.leaveReport(id))
|
.get(config.API.leaveReport(id))
|
||||||
.then(async (res) => {
|
.then(async res => {
|
||||||
const data = res.data.result;
|
const data = res.data.result
|
||||||
await genReport(data, fileName);
|
await genReport(data, fileName)
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch(err => {
|
||||||
messageError($q, err);
|
messageError($q, err)
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader();
|
hideLoader()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const leaveDraftDocument = ref<string>();
|
const leaveDocumentList = ref<any>()
|
||||||
|
const leaveDraftDocument = ref<string>()
|
||||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
formDataRehabilitation.leaveWrote = props.data.leaveWrote
|
||||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate)
|
||||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate)
|
||||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
formDataRehabilitation.leaveDetail = props.data.leaveDetail
|
||||||
// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
|
// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
|
||||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
leaveDraftDocument.value = props.data.leaveDraftDocument
|
||||||
}
|
leaveDocumentList.value = props.data.leaveDocument
|
||||||
});
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent="onValidate">
|
<form @submit.prevent="onValidate">
|
||||||
<q-card bordered class="q-pa-md bg-grey-1">
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
<div class="row q-pa-sm q-col-gutter-sm">
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
v-model="formDataRehabilitation.leaveWrote"
|
v-model="formDataRehabilitation.leaveWrote"
|
||||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
ref="leaveWroteRef"
|
ref="leaveWroteRef"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
label="เขียนที่"
|
label="เขียนที่"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formDataRehabilitation.leaveStartDate"
|
v-model="formDataRehabilitation.leaveStartDate"
|
||||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="leaveStartDateRef"
|
ref="leaveStartDateRef"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
lazy-rules
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:model-value="
|
:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
|
||||||
formDataRehabilitation.leaveStartDate != null
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
? date2Thai(formDataRehabilitation.leaveStartDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<datepicker
|
<datepicker
|
||||||
v-model="formDataRehabilitation.leaveEndDate"
|
v-model="formDataRehabilitation.leaveEndDate"
|
||||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
week-start="0"
|
week-start="0"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
@update:model-value="FetchCheck()"
|
@update:model-value="FetchCheck()"
|
||||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
:min-date="formDataRehabilitation.leaveStartDate"
|
:min-date="formDataRehabilitation.leaveStartDate"
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<template #year="{ year }">
|
||||||
{{ year + 543 }}
|
{{ year + 543 }}
|
||||||
</template>
|
</template>
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
ref="leaveEndDateRef"
|
ref="leaveEndDateRef"
|
||||||
class="full-width datepicker"
|
class="full-width datepicker"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
lazy-rules
|
||||||
bg-color="white"
|
bg-color="white"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||||
:model-value="
|
:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
|
||||||
formDataRehabilitation.leaveEndDate != null
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
? date2Thai(formDataRehabilitation.leaveEndDate)
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
: null
|
>
|
||||||
"
|
<template v-slot:prepend>
|
||||||
:label="`${'ลาถึงวันที่'}`"
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
</template>
|
||||||
>
|
</q-input>
|
||||||
<template v-slot:prepend>
|
</template>
|
||||||
<q-icon
|
</datepicker>
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<q-input
|
<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||||
v-model="formDataRehabilitation.leaveDetail"
|
|
||||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
|
||||||
bg-color="white"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
type="textarea"
|
|
||||||
label="รายละเอียด"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<!-- multiple -->
|
<!-- multiple -->
|
||||||
<q-file
|
<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" multiple use-chips bg-color="white" dense outlined label="เอกสารประกอบ">
|
||||||
v-model="formDataRehabilitation.leaveDocument"
|
<template v-slot:prepend>
|
||||||
@added="fileUploadDoc"
|
<q-icon name="attach_file" color="primary" />
|
||||||
use-chips
|
</template>
|
||||||
bg-color="white"
|
</q-file>
|
||||||
dense
|
<!-- <div class="col-12" v-if="formDataRehabilitation.leaveDocument.length == 0">
|
||||||
outlined
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||||
label="เอกสารประกอบ"
|
</div> -->
|
||||||
>
|
<div class="col-12" v-if="data">
|
||||||
<template v-slot:prepend>
|
<div class="col-12 col-md-12 col-sm-12">
|
||||||
<q-icon name="attach_file" color="primary" />
|
<q-card bordered>
|
||||||
</template>
|
<!-- <div class="col-12">
|
||||||
</q-file>
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||||
</div>
|
</div> -->
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="row items-baseline">
|
||||||
|
<div class="col">
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
</div>
|
||||||
|
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-12 row" v-if="!edit">
|
<div class="col-12 col-sm-6 row" v-if="!edit">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<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 class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
เอกสารเพิ่มเติม
|
</div>
|
||||||
</div>
|
<q-card bordered flat class="full-width">
|
||||||
</div>
|
<q-list separator>
|
||||||
<q-card bordered flat class="full-width">
|
<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||||
<q-list separator>
|
<q-item-section>
|
||||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
<q-item-label class="full-width ellipsis">
|
||||||
<q-item-section>
|
{{ file.name }}
|
||||||
<q-item-label class="full-width ellipsis">
|
</q-item-label>
|
||||||
{{ file.fileName }}
|
<q-item-label caption> </q-item-label>
|
||||||
</q-item-label>
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<q-item-label caption> </q-item-label>
|
<div v-if="data && data.id" class="q-mt-md">
|
||||||
</q-item-section>
|
<div style="display: flex; align-items: center">
|
||||||
</q-item>
|
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||||
</q-list>
|
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||||
</q-card>
|
</div>
|
||||||
</div>
|
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||||
</div>
|
<div class="row">
|
||||||
</q-card>
|
<div class="col-sm-3 q-my-sm">
|
||||||
|
<div class="column q-mx-xs">
|
||||||
<div v-if="data && data.id" class="q-mt-md">
|
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||||
<div style="display: flex; align-items: center">
|
|
||||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">
|
|
||||||
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-3 q-my-sm">
|
|
||||||
<div class="column q-mx-xs">
|
|
||||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
|
||||||
ดาวน์โหลด
|
ดาวน์โหลด
|
||||||
</div> -->
|
</div> -->
|
||||||
<q-btn
|
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
|
||||||
color="primary"
|
</div>
|
||||||
icon="download"
|
</div>
|
||||||
label="ดาวน์โหลดแบบฟอร์ม"
|
<div class="col-sm-5 q-my-sm">
|
||||||
@click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
|
<div class="column q-mx-xs">
|
||||||
/>
|
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-5 q-my-sm">
|
|
||||||
<div class="column q-mx-xs">
|
|
||||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
|
||||||
อัปโหลด
|
อัปโหลด
|
||||||
</div> -->
|
</div> -->
|
||||||
<q-file
|
<q-file v-model="formDataRehabilitation.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
|
||||||
v-model="formDataRehabilitation.leaveDraftDocument"
|
<template v-slot:prepend>
|
||||||
use-chips
|
<q-icon name="attach_file" color="primary" />
|
||||||
dense
|
</template>
|
||||||
label="อัปโหลดแบบฟอร์ม"
|
</q-file>
|
||||||
outlined
|
</div>
|
||||||
bg-color="white"
|
</div>
|
||||||
accept="application/pdf"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="attach_file" color="primary" />
|
|
||||||
</template>
|
|
||||||
</q-file>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||||
<div class="column q-mx-xs">
|
<div class="column q-mx-xs">
|
||||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||||
ดูไฟล์อัปโหลด
|
ดูไฟล์อัปโหลด
|
||||||
</div> -->
|
</div> -->
|
||||||
<q-btn
|
<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
|
||||||
icon="visibility"
|
</div>
|
||||||
color="blue"
|
</div>
|
||||||
label="ดาวน์โหลดไฟล์"
|
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||||
:href="leaveDraftDocument"
|
|
||||||
target="_blank"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
|
||||||
<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
||||||
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
||||||
>
|
>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="!isSave">
|
<div v-if="!isSave">
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn
|
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||||
id="onSubmit"
|
>
|
||||||
type="submit"
|
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||||
unelevated
|
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||||
dense
|
>
|
||||||
class="q-px-md items-center btnBlue"
|
</div>
|
||||||
label="บันทึก"
|
</div>
|
||||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
</form>
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="data"
|
|
||||||
id="onSubmit"
|
|
||||||
type="button"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center q-ml-sm"
|
|
||||||
color="primary"
|
|
||||||
label="ยื่นใบลา"
|
|
||||||
@click="onConfirm"
|
|
||||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,82 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
console.log(props);
|
console.log(props)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="q-pa-md q-gutter-md">
|
<div class="q-pa-md q-gutter-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เรื่อง</div>
|
<div class="col text-grey-8">เรื่อง</div>
|
||||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เขียนที่</div>
|
<div class="col text-grey-8">เขียนที่</div>
|
||||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||||
<div class="col">{{ props.data.leaveCount }}</div>
|
<div class="col">{{ props.data.leaveCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
|
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
|
||||||
<div class="col">{{ props.data.absentDaySummon }}</div>
|
<div class="col">{{ props.data.absentDaySummon }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ที่</div>
|
<div class="col text-grey-8">ที่</div>
|
||||||
<div class="col">{{ props.data.absentDayLocation }}</div>
|
<div class="col">{{ props.data.absentDayLocation }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลงวันที่</div>
|
<div class="col text-grey-8">ลงวันที่</div>
|
||||||
<div class="col">{{ props.data.absentDayRegistorDate }}</div>
|
<div class="col">{{ props.data.absentDayRegistorDate }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
||||||
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ณ ที่</div>
|
<div class="col text-grey-8">ณ ที่</div>
|
||||||
<div class="col">{{ props.data.absentDayAt }}</div>
|
<div class="col">{{ props.data.absentDayAt }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">รายละเอียด</div>
|
<div class="col text-grey-8">รายละเอียด</div>
|
||||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
:href="props.data.leaveDocument"
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
target="_blank"
|
<div>
|
||||||
outline
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
color="blue"
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
label="ดาวน์โหลด"
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
size="12px"
|
</q-btn>
|
||||||
>
|
</div>
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
<div v-else>-</div>
|
||||||
<div class="col" v-else>-</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,76 +1,76 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="q-pa-md q-gutter-md">
|
<div class="q-pa-md q-gutter-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เรื่อง</div>
|
<div class="col text-grey-8">เรื่อง</div>
|
||||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เขียนที่</div>
|
<div class="col text-grey-8">เขียนที่</div>
|
||||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||||
<div class="col">{{ props.data.leaveCount }}</div>
|
<div class="col">{{ props.data.leaveCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ชื่อภรรยา</div>
|
<div class="col text-grey-8">ชื่อภรรยา</div>
|
||||||
<div class="col">{{ props.data.wifeDayName }}</div>
|
<div class="col">{{ props.data.wifeDayName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่คลอด</div>
|
<div class="col text-grey-8">วันที่คลอด</div>
|
||||||
<div class="col">{{ props.data.wifeDayDateBorn }}</div>
|
<div class="col">{{ props.data.wifeDayDateBorn }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">รายละเอียด</div>
|
<div class="col text-grey-8">รายละเอียด</div>
|
||||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
:href="props.data.leaveDocument"
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
target="_blank"
|
<div>
|
||||||
outline
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
color="blue"
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
label="ดาวน์โหลด"
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
size="12px"
|
</q-btn>
|
||||||
>
|
</div>
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
<div v-else>-</div>
|
||||||
<div class="col" v-else>-</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,69 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="q-pa-md q-gutter-md">
|
<div class="q-pa-md q-gutter-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เรื่อง</div>
|
<div class="col text-grey-8">เรื่อง</div>
|
||||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เขียนที่</div>
|
<div class="col text-grey-8">เขียนที่</div>
|
||||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||||
<div class="col">{{ props.data.leaveCount }}</div>
|
<div class="col">{{ props.data.leaveCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
||||||
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">รายละเอียด</div>
|
<div class="col text-grey-8">รายละเอียด</div>
|
||||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
:href="props.data.leaveDocument"
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
target="_blank"
|
<div>
|
||||||
outline
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
color="blue"
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
label="ดาวน์โหลด"
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
size="12px"
|
</q-btn>
|
||||||
>
|
</div>
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
<div v-else>-</div>
|
||||||
<div class="col" v-else>-</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,81 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="q-pa-md q-gutter-md">
|
<div class="q-pa-md q-gutter-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เรื่อง</div>
|
<div class="col text-grey-8">เรื่อง</div>
|
||||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เขียนที่</div>
|
<div class="col text-grey-8">เขียนที่</div>
|
||||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
|
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
|
||||||
<div class="col">{{ props.data.restDayOldTotal }}</div>
|
<div class="col">{{ props.data.restDayOldTotal }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
|
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
|
||||||
<div class="col">{{ props.data.restDayCurrentTotal }}</div>
|
<div class="col">{{ props.data.restDayCurrentTotal }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||||
<div class="col">{{ props.data.leaveCount }}</div>
|
<div class="col">{{ props.data.leaveCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8"></div>
|
<div class="col text-grey-8"></div>
|
||||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">รายละเอียด</div>
|
<div class="col text-grey-8">รายละเอียด</div>
|
||||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
:href="props.data.leaveDocument"
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
target="_blank"
|
<div>
|
||||||
outline
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
color="blue"
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
label="ดาวน์โหลด"
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
size="12px"
|
</q-btn>
|
||||||
>
|
</div>
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
<div v-else>-</div>
|
||||||
<div class="col" v-else>-</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,77 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="q-pa-md q-gutter-md">
|
<div class="q-pa-md q-gutter-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เรื่อง</div>
|
<div class="col text-grey-8">เรื่อง</div>
|
||||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เขียนที่</div>
|
<div class="col text-grey-8">เขียนที่</div>
|
||||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||||
<div class="col">{{ props.data.leaveCount }}</div>
|
<div class="col">{{ props.data.leaveCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8"></div>
|
<div class="col text-grey-8"></div>
|
||||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">
|
<div class="col text-grey-8">ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่</div>
|
||||||
ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
|
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
<div class="row">
|
||||||
</div>
|
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||||
<div class="row">
|
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
</div>
|
||||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
<div class="row">
|
||||||
</div>
|
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||||
<div class="row">
|
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
</div>
|
||||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
<div class="row">
|
||||||
</div>
|
<div class="col text-grey-8">รายละเอียด</div>
|
||||||
<div class="row">
|
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||||
<div class="col text-grey-8">รายละเอียด</div>
|
</div>
|
||||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
<div class="row">
|
||||||
</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="row">
|
<div class="col">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
<q-btn
|
<div>
|
||||||
:href="props.data.leaveDocument"
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
target="_blank"
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
outline
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
color="blue"
|
</q-btn>
|
||||||
label="ดาวน์โหลด"
|
</div>
|
||||||
size="12px"
|
</div>
|
||||||
>
|
</div>
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
<div v-else>-</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" v-else>-</div>
|
</div>
|
||||||
</div>
|
</q-card-section>
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,98 +1,96 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="q-pa-md q-gutter-md">
|
<div class="q-pa-md q-gutter-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เรื่อง</div>
|
<div class="col text-grey-8">เรื่อง</div>
|
||||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เขียนที่</div>
|
<div class="col text-grey-8">เขียนที่</div>
|
||||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||||
<div class="col">{{ props.data.leaveCount }}</div>
|
<div class="col">{{ props.data.leaveCount }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||||
<div class="col">
|
<div class="col">{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})</div>
|
||||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
||||||
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ณ สถานที่</div>
|
<div class="col text-grey-8">ณ สถานที่</div>
|
||||||
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ประเทศ</div>
|
<div class="col text-grey-8">ประเทศ</div>
|
||||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ด้วยทุน</div>
|
<div class="col text-grey-8">ด้วยทุน</div>
|
||||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">รายละเอียด</div>
|
<div class="col text-grey-8">รายละเอียด</div>
|
||||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
:href="props.data.leaveDocument"
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
target="_blank"
|
<div>
|
||||||
outline
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
color="blue"
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
label="ดาวน์โหลด"
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
size="12px"
|
</q-btn>
|
||||||
>
|
</div>
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
<div v-else>-</div>
|
||||||
<div class="col" v-else>-</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -41,11 +41,20 @@ const props = defineProps({
|
||||||
<div class="col" v-else>-</div>
|
<div class="col" v-else>-</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDraftDocument">
|
<div class="col">
|
||||||
<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
|
<div>
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>-</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" v-else>-</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
|
||||||
|
|
@ -84,10 +84,19 @@ const props = defineProps({
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
|
<div>
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>-</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" v-else>-</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
|
||||||
|
|
@ -80,10 +80,19 @@ const props = defineProps({
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
|
<div>
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>-</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" v-else>-</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
|
||||||
|
|
@ -1,94 +1,94 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="q-pa-md q-gutter-md">
|
<div class="q-pa-md q-gutter-md">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เรื่อง</div>
|
<div class="col text-grey-8">เรื่อง</div>
|
||||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เขียนที่</div>
|
<div class="col text-grey-8">เขียนที่</div>
|
||||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||||
<div class="col">{{ props.data.leaveLastEnd }}</div>
|
<div class="col">{{ props.data.leaveLastEnd }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||||
<div class="col">{{ props.data.leaveTotal }}</div>
|
<div class="col">{{ props.data.leaveTotal }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">สถานที่บวช</div>
|
<div class="col text-grey-8">สถานที่บวช</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
{{ props.data.ordainDayLocationName }}
|
{{ props.data.ordainDayLocationName }}
|
||||||
{{ props.data.ordainDayLocationAddress }}
|
{{ props.data.ordainDayLocationAddress }}
|
||||||
{{ props.data.ordainDayLocationNumber }}
|
{{ props.data.ordainDayLocationNumber }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">วันอุปสมบท</div>
|
<div class="col text-grey-8">วันอุปสมบท</div>
|
||||||
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
{{ props.data.ordainDayBuddhistLentName }}
|
{{ props.data.ordainDayBuddhistLentName }}
|
||||||
{{ props.data.ordainDayBuddhistLentAddress }}
|
{{ props.data.ordainDayBuddhistLentAddress }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">รายละเอียด</div>
|
<div class="col text-grey-8">รายละเอียด</div>
|
||||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDocument">
|
<div class="col">
|
||||||
<q-btn
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
:href="props.data.leaveDocument"
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
target="_blank"
|
<div>
|
||||||
outline
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
color="blue"
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
label="ดาวน์โหลด"
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
size="12px"
|
</q-btn>
|
||||||
>
|
</div>
|
||||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
<div v-else>-</div>
|
||||||
<div class="col" v-else>-</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -41,11 +41,20 @@ const props = defineProps({
|
||||||
<div class="col" v-else>-</div>
|
<div class="col" v-else>-</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
|
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||||
<div class="col" v-if="props.data.leaveDraftDocument">
|
<div class="col">
|
||||||
<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||||
|
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||||
|
<div>
|
||||||
|
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||||
|
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>-</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col" v-else>-</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ const formData = reactive<any>({
|
||||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||||
leaveDetail: "", //รายละเอียดการลา
|
leaveDetail: "", //รายละเอียดการลา
|
||||||
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
leaveDocument: [], //อัปโหลดเอกสารประกอบรายละเอียด
|
||||||
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
||||||
leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||||
leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||||
|
|
@ -216,18 +216,18 @@ function onSubmit(formData: FormData) {
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader()
|
hideLoader()
|
||||||
|
fetchDataDetail(personalId.value)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function onConfirm() {
|
function onConfirm(id: string) {
|
||||||
console.log(personalId.value)
|
|
||||||
dialogConfirm(
|
dialogConfirm(
|
||||||
$q,
|
$q,
|
||||||
async () => {
|
async () => {
|
||||||
showLoader()
|
showLoader()
|
||||||
await http
|
await http
|
||||||
.get(config.API.leaveUserSendId(personalId.value))
|
.put(config.API.leaveUserSendId(personalId.value), { reason: "" })
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// router.push("/leave")
|
// router.push("/leave")
|
||||||
success($q, "ยื่นใบลาสำเร็จ")
|
success($q, "ยื่นใบลาสำเร็จ")
|
||||||
|
|
@ -259,7 +259,7 @@ onMounted(() => {
|
||||||
<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
|
<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
|
||||||
<div>
|
<div>
|
||||||
แก้ไขใบลา
|
แก้ไขใบลา
|
||||||
{{ formData.leaveTypeName }} {{ personalId }}
|
{{ formData.leaveTypeName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<q-form ref="myform" class="col-12">
|
<q-form ref="myform" class="col-12">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue