Merge branch 'develop'
This commit is contained in:
commit
a6aea32aad
52 changed files with 6849 additions and 4526 deletions
|
|
@ -54,6 +54,8 @@ export default {
|
|||
dataUserSalary: `${profileOrg}/salary/user`,
|
||||
dataUserSalaryByType: (type: string) => `${org}/profile${type}/salary/user`,
|
||||
dataUserAssessments: `${profileOrg}/assessments/user`,
|
||||
dataUserPortfolio: `${env.API_URI}/development/portfolio/user`,
|
||||
dataUserPerformance: `${env.API_URI}/evaluation/performance/user`,
|
||||
dataUserNopaid: `${profileOrg}/nopaid/user`,
|
||||
dataUserNopaidByType: (type: string) => `${org}/profile${type}/nopaid/user`,
|
||||
|
||||
|
|
@ -61,8 +63,7 @@ export default {
|
|||
dataUserCertificateByType: (emType: string, type: string) =>
|
||||
`${org}/profile${emType}/${type}/user`,
|
||||
|
||||
dataUserEvaByType: (type: string) =>
|
||||
`${org}/profile/${type}/user`,
|
||||
dataUserEvaByType: (type: string) => `${org}/profile/${type}/user`,
|
||||
|
||||
dataUserOther: `${profileOrg}/other/user`,
|
||||
dataUserOtherByType: (type: string) => `${org}/profile${type}/other/user`,
|
||||
|
|
|
|||
|
|
@ -140,6 +140,8 @@ const formData = reactive<FremDetail>({
|
|||
approveStep: "",
|
||||
dear: "",
|
||||
leaveRange: "",
|
||||
leaveRangeEnd: "",
|
||||
leaveSubTypeName: "",
|
||||
});
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
|
|
@ -154,6 +156,7 @@ const formDataCancle = reactive<FromCancelDetail>({
|
|||
leaveAddress: "",
|
||||
leaveNumber: "",
|
||||
leaveDetail: "",
|
||||
leaveSubTypeName: "",
|
||||
leaveTotal: 0,
|
||||
leaveStartDate: new Date(),
|
||||
leaveEndDate: new Date(),
|
||||
|
|
@ -194,8 +197,7 @@ async function fetchDataDetail(id: string) {
|
|||
formData.dateSendLeave =
|
||||
data.dateSendLeave && date2Thai(data.dateSendLeave);
|
||||
formData.status = data.status ?? "-";
|
||||
formData.leaveDateStart =
|
||||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formData.leaveCount = calculateDurationYmd(
|
||||
data.leaveStartDate,
|
||||
|
|
@ -205,9 +207,11 @@ async function fetchDataDetail(id: string) {
|
|||
formData.leaveAddress = data.leaveAddress ?? "-";
|
||||
formData.leaveNumber = data.leaveNumber ?? "-";
|
||||
formData.leaveDetail = data.leaveDetail ?? "-";
|
||||
formData.leaveSubTypeName = data.leaveSubTypeName ?? null;
|
||||
formData.leaveDocument = data.leaveDocument;
|
||||
formData.leaveDraftDocument = data.leaveDraftDocument;
|
||||
formData.leaveRange = data.leaveRange;
|
||||
formData.leaveRangeEnd = data.leaveRangeEnd;
|
||||
formData.leaveLastStart =
|
||||
data.leaveLastStart && date2Thai(data.leaveLastStart);
|
||||
formData.leaveLastEnd =
|
||||
|
|
@ -226,7 +230,7 @@ async function fetchDataDetail(id: string) {
|
|||
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
|
||||
formData.restDayOldTotal = data.restDayOldTotal ?? "-";
|
||||
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
|
||||
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
|
||||
formData.ordainDayStatus = data.ordainDayStatus;
|
||||
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
|
||||
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
|
||||
|
|
@ -236,9 +240,7 @@ async function fetchDataDetail(id: string) {
|
|||
data.ordainDayBuddhistLentName ?? "-";
|
||||
formData.ordainDayBuddhistLentAddress =
|
||||
data.ordainDayBuddhistLentAddress ?? "-";
|
||||
formData.hajjDayStatus = data.hajjDayStatus
|
||||
? "เคย"
|
||||
: "ไม่เคยไปประกอบพิธีฮัจญ์";
|
||||
formData.hajjDayStatus = data.hajjDayStatus;
|
||||
formData.absentDaySummon = data.absentDaySummon ?? "-";
|
||||
formData.absentDayLocation = data.absentDayLocation ?? "-";
|
||||
formData.absentDayRegistorDate =
|
||||
|
|
@ -301,15 +303,24 @@ function checkLeaveType(
|
|||
checkForm.value = "FormChildbirth";
|
||||
} else if (type === "LV-005") {
|
||||
checkForm.value = "FormHoliday";
|
||||
} else if (type === "LV-006" && ordainDayLocationName === "") {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-006") {
|
||||
} else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
|
||||
checkForm.value = "FormUpasom";
|
||||
} else if (
|
||||
type === "LV-006" &&
|
||||
formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
|
||||
) {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-007") {
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (type === "LV-008" && studyDayTrainingSubject === "") {
|
||||
} else if (
|
||||
type === "LV-008" &&
|
||||
formData.leaveSubTypeName === "ลาไปศึกษาต่อ"
|
||||
) {
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (type === "LV-008") {
|
||||
} else if (
|
||||
type === "LV-008" &&
|
||||
formData.leaveSubTypeName === "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน"
|
||||
) {
|
||||
checkForm.value = "FormLeaveToTraining";
|
||||
} else if (type === "LV-009") {
|
||||
checkForm.value = "FormLeaveToWorkInternational";
|
||||
|
|
@ -344,6 +355,7 @@ async function fetchDataCancelDetail(id: string) {
|
|||
formDataCancle.leaveNumber = data.leaveNumber ?? "-";
|
||||
formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
|
||||
formDataCancle.leaveDetail = data.leaveDetail ?? "-";
|
||||
formDataCancle.leaveSubTypeName = data.leaveSubTypeName ?? null;
|
||||
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -498,7 +510,7 @@ watch(
|
|||
/>
|
||||
|
||||
<!-- ข้าราชการแสดงเฉพาะที่ยื่นใบลาไปแล้วเท่านั้น ลูกจ้างไม่มี workflow -->
|
||||
<Workflow
|
||||
<!-- <Workflow
|
||||
v-if="leaveStatus != 'DRAFT'"
|
||||
:id="props.leaveId"
|
||||
:sys-name="
|
||||
|
|
@ -506,7 +518,7 @@ watch(
|
|||
? 'SYS_LEAVE_LIST'
|
||||
: 'SYS_LEAVE_LIST_EMP'
|
||||
"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -15,7 +15,14 @@ const typeForm = defineModel<string>("type", { required: true });
|
|||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveDocumentRef = ref<any>(null);
|
||||
|
||||
|
|
@ -46,6 +53,7 @@ const formDataSick = reactive<any>({
|
|||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveTotal: "",
|
||||
leaveLast: null,
|
||||
leaveDetail: "",
|
||||
|
|
@ -121,6 +129,7 @@ function onValidate() {
|
|||
|
||||
formData.append("type", formDataSick.type);
|
||||
formData.append("leaveRange", formDataSick.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataSick.leaveRangeEnd);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataSick.leaveStartDate) ?? ""
|
||||
|
|
@ -144,12 +153,29 @@ function onValidate() {
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataSick.leaveStartDate) ==
|
||||
convertDateToAPI(formDataSick.leaveEndDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataSick.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataSick.leaveEndDate) ?? null,
|
||||
leaveRange: formDataSick.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataSick.leaveRange
|
||||
: formDataSick.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
|
|
@ -162,39 +188,14 @@ async function fetchCheck() {
|
|||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
leaveDocumentRef.value.resetValidation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
|
||||
*/
|
||||
const isReadOnly = computed(() => {
|
||||
const conditionleaveRange =
|
||||
formDataSick.leaveRange === "MORNING" ||
|
||||
formDataSick.leaveRange === "AFTERNOON";
|
||||
if (conditionleaveRange) {
|
||||
formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
|
||||
formDataSick.leaveTotal = 0.5;
|
||||
} else {
|
||||
formDataSick.leaveTotal = null;
|
||||
}
|
||||
return conditionleaveRange;
|
||||
});
|
||||
|
||||
/**
|
||||
* แก้ไขClassเมื่อ status เป็น edit
|
||||
* @param val status edit true/false
|
||||
*/
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
|
||||
const dateEndInputStyle = computed(() => {
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
|
|
@ -212,6 +213,7 @@ watch(props.data, () => {
|
|||
formDataSick.leaveTotal = props.data.leaveTotal;
|
||||
formDataSick.leaveDetail = props.data.leaveDetail;
|
||||
formDataSick.leaveRange = props.data.leaveRange;
|
||||
formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataSick.leaveDocument = [];
|
||||
|
|
@ -228,6 +230,7 @@ onMounted(() => {
|
|||
formDataSick.leaveTotal = props.data.leaveTotal;
|
||||
formDataSick.leaveDetail = props.data.leaveDetail;
|
||||
formDataSick.leaveRange = props.data.leaveRange;
|
||||
formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -243,255 +246,297 @@ onMounted(() => {
|
|||
</div>
|
||||
<q-form greedy @submit.prevent @validation-success="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataSick.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
val="ALL"
|
||||
label="ลาทั้งวัน"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
val="MORNING"
|
||||
label="ลาครึ่งวันเช้า"
|
||||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
val="AFTERNOON"
|
||||
label="ลาครึ่งวันบ่าย"
|
||||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataSick.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataSick.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
class="full-width cursor-pointer inputgreen"
|
||||
:model-value="
|
||||
formDataSick.leaveStartDate != null
|
||||
? date2Thai(formDataSick.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!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
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
@update:model-value="fetchCheck()"
|
||||
:min-date="formDataSick.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="isReadOnly"
|
||||
:class="inputEdit(isReadOnly)"
|
||||
:model-value="
|
||||
formDataSick.leaveEndDate != null
|
||||
? date2Thai(formDataSick.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataSick.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataSick.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataSick.leaveStartDate != null
|
||||
? date2Thai(formDataSick.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataSick.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataSick.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataSick.leaveEndDate != null
|
||||
? date2Thai(formDataSick.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataSick.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataSick.leaveTotal"
|
||||
label="จำนวนวันที่ลา (วัน)"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
lazy-rules
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
<div class="col-12 col-md-3 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
lazy-rules
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
<div class="col-12 col-md-9 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataSick.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
/>
|
||||
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
type="textarea"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataSick.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
ref="leaveDocumentRef"
|
||||
for="leaveDocumentRef"
|
||||
v-model="formDataSick.leaveDocument"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
lazy-rules
|
||||
multiple
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 q-pl-sm col-12"
|
||||
:rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
|
||||
<div class="col-12 q-pl-sm col-12">
|
||||
<q-file
|
||||
ref="leaveDocumentRef"
|
||||
for="leaveDocumentRef"
|
||||
v-model="formDataSick.leaveDocument"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
lazy-rules
|
||||
multiple
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
|
||||
(val:string) => !!val && val.length >= 30 || `${'กรุณาแนบเอกสารประกอบ หรือ ใบรับรองแพทย์ กรณีลาป่วยตั้งเเต่ 30 วันขึ้นไป'}`,
|
||||
]:[]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,14 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
|
|||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
|
@ -46,6 +53,8 @@ const formDataBirth = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveLast: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
});
|
||||
|
|
@ -115,6 +124,8 @@ function onValidate() {
|
|||
formData.append("leaveNumber", dataStore.telephoneNumber);
|
||||
formData.append("leaveDetail", formDataBirth.leaveDetail);
|
||||
formData.append("leaveTotal", formDataBirth.leaveTotal);
|
||||
formData.append("leaveRange", formDataBirth.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataBirth.leaveRangeEnd);
|
||||
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
|
|
@ -122,18 +133,36 @@ function onValidate() {
|
|||
|
||||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataBirth.leaveEndDate) ==
|
||||
convertDateToAPI(formDataBirth.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
|
||||
leaveRange: formDataBirth.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataBirth.leaveRange
|
||||
: formDataBirth.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
hideLoader();
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataBirth.leaveTotal = data.totalDate;
|
||||
|
|
@ -142,6 +171,7 @@ async function fetchCheck() {
|
|||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
})
|
||||
.catch((e: any) => {
|
||||
hideLoader();
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
|
@ -161,6 +191,7 @@ watch(props.data, () => {
|
|||
formDataBirth.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataBirth.leaveDocument = [];
|
||||
|
|
@ -176,6 +207,8 @@ onMounted(() => {
|
|||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataBirth.leaveRange = props.data.leaveRange;
|
||||
formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
|
|
@ -190,222 +223,293 @@ onMounted(() => {
|
|||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataBirth.leaveWrote"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataBirth.leaveWrote"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataBirth.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveStartDate != null
|
||||
? date2Thai(formDataBirth.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataBirth.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveStartDate != null
|
||||
? date2Thai(formDataBirth.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
:min-date="formDataBirth.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
:model-value="
|
||||
formDataBirth.leaveEndDate != null
|
||||
? date2Thai(formDataBirth.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
lazy-rules
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataBirth.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataBirth.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveEndDate != null
|
||||
? date2Thai(formDataBirth.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataBirth.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา (วัน)"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<div class="col-12 col-md-3 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
lazy-rules
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-9 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
type="textarea"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
multiple
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="q-pl-sm col-12">
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
multiple
|
||||
use-chips
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row" v-if="data">
|
||||
|
|
|
|||
|
|
@ -14,8 +14,17 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
|
|||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
|
|
@ -49,6 +58,8 @@ const formDataHelpWife = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDocument: [],
|
||||
});
|
||||
|
||||
|
|
@ -115,20 +126,22 @@ function onValidate() {
|
|||
formData.append("type", formDataHelpWife.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataHelpWife.leaveStartDate)??''
|
||||
convertDateToAPI(formDataHelpWife.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataHelpWife.leaveEndDate)??''
|
||||
convertDateToAPI(formDataHelpWife.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("leaveWrote", formDataHelpWife.leaveWrote);
|
||||
formData.append("leaveAddress", dataStore.currentAddress);
|
||||
formData.append("leaveNumber", dataStore.telephoneNumber);
|
||||
formData.append("leaveDetail", formDataHelpWife.leaveDetail);
|
||||
formData.append("wifeDayName", formDataHelpWife.wifeDayName);
|
||||
formData.append("leaveRange", formDataHelpWife.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataHelpWife.leaveRangeEnd);
|
||||
formData.append(
|
||||
"wifeDayDateBorn",
|
||||
convertDateToAPI(formDataHelpWife.wifeDayDateBorn)??''
|
||||
convertDateToAPI(formDataHelpWife.wifeDayDateBorn) ?? ""
|
||||
);
|
||||
formData.append("leaveTotal", formDataHelpWife.leaveTotal);
|
||||
|
||||
|
|
@ -136,48 +149,53 @@ function onValidate() {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataHelpWife.leaveStartDate,
|
||||
formDataHelpWife.leaveEndDate
|
||||
);
|
||||
formDataHelpWife.leaveTotal = newLeaveTotal;
|
||||
}
|
||||
|
||||
const reasonLeave = ref<string>("");
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataHelpWife.leaveEndDate) ==
|
||||
convertDateToAPI(formDataHelpWife.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataHelpWife.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataHelpWife.leaveEndDate) ?? null,
|
||||
leaveRange: formDataHelpWife.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataHelpWife.leaveRange
|
||||
: formDataHelpWife.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataHelpWife.leaveTotal =
|
||||
data.totalDate - data.sumDateWork - data.sumDateHoliday;
|
||||
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataHelpWife.leaveWrote = props.data.leaveWrote;
|
||||
formDataHelpWife.wifeDayName = props.data.wifeDayName;
|
||||
|
|
@ -185,6 +203,8 @@ watch(props.data, () => {
|
|||
formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHelpWife.leaveTotal = props.data.leaveTotal;
|
||||
formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataHelpWife.leaveRange = props.data.leaveRange;
|
||||
formDataHelpWife.leaveDetail = props.data.leaveDetail;
|
||||
formDataHelpWife.leaveDocument = [];
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
|
|
@ -193,7 +213,7 @@ watch(props.data, () => {
|
|||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataHelpWife.leaveWrote = props.data.leaveWrote;
|
||||
formDataHelpWife.wifeDayName = props.data.wifeDayName;
|
||||
|
|
@ -203,6 +223,8 @@ onMounted(() => {
|
|||
formDataHelpWife.leaveTotal = props.data.leaveTotal;
|
||||
formDataHelpWife.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataHelpWife.leaveRange = props.data.leaveRange;
|
||||
formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
|
|
@ -217,139 +239,204 @@ onMounted(() => {
|
|||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
v-model="formDataHelpWife.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataHelpWife.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveStartDate != null
|
||||
? date2Thai(formDataHelpWife.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
v-model="formDataHelpWife.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="updateLeaveTotal, fetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
:min-date="formDataHelpWife.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveEndDate != null
|
||||
? date2Thai(formDataHelpWife.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHelpWife.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataHelpWife.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveStartDate != null
|
||||
? date2Thai(formDataHelpWife.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataHelpWife.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataHelpWife.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveEndDate != null
|
||||
? date2Thai(formDataHelpWife.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataHelpWife.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHelpWife.leaveTotal"
|
||||
label="จำนวนวันที่ลา (วัน)"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-8 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="wifeDayNameRef"
|
||||
|
|
@ -365,122 +452,130 @@ onMounted(() => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.wifeDayDateBorn"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="wifeDayDateBornRef"
|
||||
for="wifeDayDateBornRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.wifeDayDateBorn != null
|
||||
? date2Thai(formDataHelpWife.wifeDayDateBorn)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่คลอด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12 col-md-4 col-sm-12 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.wifeDayDateBorn"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="wifeDayDateBornRef"
|
||||
for="wifeDayDateBornRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.wifeDayDateBorn != null
|
||||
? date2Thai(formDataHelpWife.wifeDayDateBorn)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่คลอด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
<div class="col-12 col-md-3 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
<div class="col-12 col-md-9 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataHelpWife.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
type="textarea"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataHelpWife.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-file
|
||||
bg-color="white"
|
||||
ref="leaveDocumentRef"
|
||||
v-model="formDataHelpWife.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
multiple
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="q-pl-sm col-12">
|
||||
<q-file
|
||||
bg-color="white"
|
||||
ref="leaveDocumentRef"
|
||||
v-model="formDataHelpWife.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -9,12 +8,20 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
import type { FormRef } from "@/modules/05_leave/interface/request/VacationForm";
|
||||
import type { DataOption } from "@/modules/14_IDP/interface/Main";
|
||||
|
||||
/** Use */
|
||||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dateToISO, messageError,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
|
@ -50,6 +57,7 @@ const formDataVacation = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveDetail: "",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDocument: [],
|
||||
});
|
||||
|
||||
|
|
@ -93,20 +101,6 @@ const fileUploadDoc = async (files: any) => {
|
|||
const leaveDocumentList = ref<any>();
|
||||
const statusCheck = ref<string>("");
|
||||
|
||||
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
|
||||
const isReadOnly = computed(() => {
|
||||
const conditionleaveRange =
|
||||
formDataVacation.leaveRange === "MORNING" ||
|
||||
formDataVacation.leaveRange === "AFTERNOON";
|
||||
if (conditionleaveRange) {
|
||||
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
|
||||
formDataVacation.leaveTotal = 0.5;
|
||||
} else {
|
||||
formDataVacation.leaveTotal = null;
|
||||
}
|
||||
return conditionleaveRange;
|
||||
});
|
||||
|
||||
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
|
||||
const dateEndInputStyle = computed(() => {
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
|
|
@ -134,13 +128,14 @@ function onValidate() {
|
|||
// formData.append("leaveDocument", formDataVacation.leaveDocument);
|
||||
formData.append("type", formDataVacation.type);
|
||||
formData.append("leaveRange", formDataVacation.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataVacation.leaveRangeEnd);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataVacation.leaveStartDate)??''
|
||||
convertDateToAPI(formDataVacation.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataVacation.leaveEndDate)??''
|
||||
convertDateToAPI(formDataVacation.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("leaveWrote", formDataVacation.leaveWrote);
|
||||
formData.append("leaveAddress", dataStore.currentAddress);
|
||||
|
|
@ -158,12 +153,28 @@ function onValidate() {
|
|||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataVacation.leaveEndDate) ==
|
||||
convertDateToAPI(formDataVacation.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataVacation.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataVacation.leaveEndDate) ?? null,
|
||||
leaveRange: formDataVacation.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataVacation.leaveRange
|
||||
: formDataVacation.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
|
|
@ -174,9 +185,11 @@ async function fetchCheck() {
|
|||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -203,6 +216,7 @@ watch(props.data, () => {
|
|||
formDataVacation.leaveTotal = props.data.leaveTotal;
|
||||
|
||||
formDataVacation.leaveDetail = props.data.leaveDetail;
|
||||
formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataVacation.leaveRange = props.data.leaveRange;
|
||||
|
|
@ -224,6 +238,7 @@ onMounted(() => {
|
|||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataVacation.leaveRange = props.data.leaveRange;
|
||||
formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
});
|
||||
|
|
@ -237,20 +252,175 @@ onMounted(() => {
|
|||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataVacation.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataVacation.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataVacation.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataVacation.leaveStartDate != null
|
||||
? date2Thai(formDataVacation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataVacation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataVacation.leaveEndDate != null
|
||||
? date2Thai(formDataVacation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12 col-md-4 col-sm-6">
|
||||
<q-radio
|
||||
v-model="formDataVacation.leaveRange"
|
||||
val="ALL"
|
||||
|
|
@ -271,222 +441,134 @@ onMounted(() => {
|
|||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataVacation.leaveTotal"
|
||||
label="จำนวนวันที่ลา (วัน)"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</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
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
ref="restDayCurrentTotalRef"
|
||||
for="restDayCurrentTotalRef"
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="dataStore.restDayCurrentTotal"
|
||||
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||
/>
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
ref="restDayOldTotalRef"
|
||||
for="restDayOldTotalRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
readonly
|
||||
outlined
|
||||
v-model="dataStore.restDayTotalOld"
|
||||
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataVacation.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataVacation.leaveStartDate != null
|
||||
? date2Thai(formDataVacation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
ref="restDayCurrentTotalRef"
|
||||
for="restDayCurrentTotalRef"
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="dataStore.restDayCurrentTotal"
|
||||
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
:min-date="formDataVacation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:readonly="isReadOnly"
|
||||
:model-value="
|
||||
formDataVacation.leaveEndDate != null
|
||||
? date2Thai(formDataVacation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataVacation.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
lazy-rules
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
<div class="col-12 col-md-3 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="dataStore.telephoneNumber"
|
||||
mask="(###)-###-####"
|
||||
lazy-rules
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
<div class="col-12 col-md-9 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="dataStore.currentAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataVacation.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataVacation.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<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="q-pl-sm col-12">
|
||||
<q-file
|
||||
ref="leaveDocumentRef"
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
multiple
|
||||
outlined
|
||||
use-chips
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -13,10 +13,19 @@ import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
|
|||
const dataStore = useLeaveStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calculateDurationYmd, messageError, dateToISO,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
messageError,
|
||||
dateToISO,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<any>("");
|
||||
const leaveText = ref<string>("");
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null);
|
||||
|
|
@ -52,10 +61,12 @@ const formDataHaji = reactive<any>({
|
|||
leavegovernmentDate: null,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: 0,
|
||||
leaveTotal: 0,
|
||||
hajjDayStatus: true,
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
|
|
@ -99,16 +110,18 @@ function onValidate() {
|
|||
formData.append("type", formDataHaji.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataHaji.leaveStartDate)??''
|
||||
convertDateToAPI(formDataHaji.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataHaji.leaveEndDate)??''
|
||||
convertDateToAPI(formDataHaji.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
|
||||
formData.append("leaveWrote", formDataHaji.leaveWrote);
|
||||
formData.append("leaveDetail", formDataHaji.leaveDetail);
|
||||
formData.append("leaveTotal", formDataHaji.leaveTotal);
|
||||
formData.append("leaveRange", formDataHaji.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataHaji.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -119,38 +132,49 @@ function onValidate() {
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataHaji.leaveEndDate) ==
|
||||
convertDateToAPI(formDataHaji.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
|
||||
leaveRange: formDataHaji.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataHaji.leaveRange
|
||||
: formDataHaji.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataHaji.leaveTotal = data.totalDate;
|
||||
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataHaji.leaveStartDate,
|
||||
formDataHaji.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataHaji.leaveStartDate,
|
||||
formDataHaji.leaveEndDate
|
||||
);
|
||||
formDataHaji.leaveTotal = newLeaveTotal;
|
||||
}
|
||||
|
||||
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
|
||||
const dateEndInputStyle = computed(() => {
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
|
|
@ -159,15 +183,16 @@ const dateEndInputStyle = computed(() => {
|
|||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
const leaveDocumentList = ref<any>();
|
||||
const statusCheck = ref<any>("");
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataHaji.leaveRange = props.data.leaveRange;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataHaji.leaveDocument = [];
|
||||
|
|
@ -175,16 +200,17 @@ watch(props.data, () => {
|
|||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataHaji.leaveRange = props.data.leaveRange;
|
||||
formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
statusCheck.value = props.data.status;
|
||||
// formDataHaji.leaveDocument = props.data.leaveDocument;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -203,7 +229,7 @@ onMounted(() => {
|
|||
<q-input
|
||||
v-model="formDataHaji.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
class="col-12 col-sm-12 inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -213,19 +239,22 @@ onMounted(() => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-3 col-sm-6 inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
v-model="formDataHaji.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataHaji.leaveEndDate = null"
|
||||
@update:model-value="
|
||||
(formDataHaji.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -235,20 +264,21 @@ onMounted(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHaji.leaveStartDate != null
|
||||
? date2Thai(formDataHaji.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -261,18 +291,41 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataHaji.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-3 col-sm-6 inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataHaji.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
|
|
@ -283,23 +336,20 @@ onMounted(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
:readonly="
|
||||
!formDataHaji.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHaji.leaveEndDate != null
|
||||
? date2Thai(formDataHaji.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
@update:model-value="fetchCheck()"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -312,31 +362,57 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHaji.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataHaji.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHaji.leaveTotal"
|
||||
label="จำนวนวันที่ลา (วัน)"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
|
|
@ -404,16 +480,18 @@ onMounted(() => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveDetail"
|
||||
class="col-12 q-mt-sm cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
|
|
|
|||
|
|
@ -13,10 +13,18 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
|
|||
const dataStore = useLeaveStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null);
|
||||
const leaveEndDateRef = ref<object | null>(null);
|
||||
|
|
@ -60,6 +68,8 @@ const formDataMilitary = reactive<any>({
|
|||
absentDayLocation: "",
|
||||
absentDayRegistorDate: null,
|
||||
absentDayGetIn: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
absentDayAt: "",
|
||||
leaveDetail: "",
|
||||
});
|
||||
|
|
@ -117,49 +127,74 @@ function onValidate() {
|
|||
formData.append("type", formDataMilitary.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataMilitary.leaveStartDate)??''
|
||||
convertDateToAPI(formDataMilitary.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataMilitary.leaveEndDate)??''
|
||||
convertDateToAPI(formDataMilitary.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
|
||||
formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
|
||||
formData.append(
|
||||
"absentDayRegistorDate",
|
||||
convertDateToAPI(formDataMilitary.absentDayRegistorDate)??''
|
||||
convertDateToAPI(formDataMilitary.absentDayRegistorDate) ?? ""
|
||||
);
|
||||
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
|
||||
formData.append("absentDayAt", formDataMilitary.absentDayAt);
|
||||
formData.append("leaveWrote", formDataMilitary.leaveWrote);
|
||||
formData.append("leaveDetail", formDataMilitary.leaveDetail);
|
||||
formData.append("leaveTotal", formDataMilitary.leaveTotal);
|
||||
|
||||
formData.append("leaveRange", formDataMilitary.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataMilitary.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataMilitary.leaveEndDate) ==
|
||||
convertDateToAPI(formDataMilitary.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataMilitary.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataMilitary.leaveEndDate) ?? null,
|
||||
leaveRange: formDataMilitary.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataMilitary.leaveRange
|
||||
: formDataMilitary.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataMilitary.leaveTotal = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataMilitary.leaveStartDate,
|
||||
formDataMilitary.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -174,7 +209,7 @@ function updateLeaveTotal() {
|
|||
formDataMilitary.leaveTotal = newLeaveTotal;
|
||||
}
|
||||
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataMilitary.leaveWrote = props.data.leaveWrote;
|
||||
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
|
||||
|
|
@ -185,6 +220,13 @@ watch(props.data, () => {
|
|||
formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
|
||||
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
|
||||
formDataMilitary.absentDayAt = props.data.absentDayAt;
|
||||
formDataMilitary.leaveRange = props.data.leaveRange;
|
||||
formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
formDataMilitary.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
|
|
@ -193,7 +235,7 @@ watch(props.data, () => {
|
|||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataMilitary.leaveWrote = props.data.leaveWrote;
|
||||
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
|
||||
|
|
@ -205,6 +247,14 @@ onMounted(() => {
|
|||
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
|
||||
formDataMilitary.absentDayAt = props.data.absentDayAt;
|
||||
formDataMilitary.leaveDetail = props.data.leaveDetail;
|
||||
|
||||
formDataMilitary.leaveRange = props.data.leaveRange;
|
||||
formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -220,172 +270,237 @@ onMounted(() => {
|
|||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formDataMilitary.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formDataMilitary.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataMilitary.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveStartDate != null
|
||||
? date2Thai(formDataMilitary.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataMilitary.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveStartDate != null
|
||||
? date2Thai(formDataMilitary.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal, fetchCheck()"
|
||||
:readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
|
||||
:min-date="formDataMilitary.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="
|
||||
!formDataMilitary.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveEndDate != null
|
||||
? date2Thai(formDataMilitary.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <div class="col-12 col-sm-3 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataMilitary.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataMilitary.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataMilitary.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveEndDate != null
|
||||
? date2Thai(formDataMilitary.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12 col-sm-3 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataMilitary.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
ref="absentDaySummonRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDaySummon"
|
||||
label="ได้รับหมายเรียกของ"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||
/>
|
||||
<div class="q-col-gutter-sm row"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
ref="atRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDayLocation"
|
||||
label="ที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
|
||||
/>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-8 col-sm-6 inputgreen">
|
||||
<q-input
|
||||
ref="absentDaySummonRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDaySummon"
|
||||
label="ได้รับหมายเรียกของ"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-6 inputgreen">
|
||||
<q-input
|
||||
ref="atRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDayLocation"
|
||||
label="ที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-4 col-sm-6 inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.absentDayRegistorDate"
|
||||
:locale="'th'"
|
||||
|
|
@ -431,7 +546,7 @@ onMounted(() => {
|
|||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-4 col-sm-6 inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
ref="absentDayGetInRef"
|
||||
|
|
@ -444,7 +559,7 @@ onMounted(() => {
|
|||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-4 col-sm-12 inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
|
|
@ -458,16 +573,17 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.leaveDetail"
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataMilitary.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-if="statusCheck != 'NEW'">
|
||||
<!-- multiple -->
|
||||
|
|
|
|||
|
|
@ -19,9 +19,12 @@ const {
|
|||
dateToISO,
|
||||
messageError,
|
||||
arabicNumberToText,
|
||||
convertDateToAPI
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
const leaveStartDateRef = ref<object | null>(null);
|
||||
|
|
@ -76,6 +79,8 @@ const formDataStudy = reactive<any>({
|
|||
leaveDocument: [], //
|
||||
leaveDetail: "",
|
||||
leaveTotal: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveTotalDay: "", //จำนวนวันลา
|
||||
});
|
||||
|
||||
|
|
@ -133,11 +138,11 @@ function onValidate() {
|
|||
formData.append("type", formDataStudy.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataStudy.leaveStartDate)??''
|
||||
convertDateToAPI(formDataStudy.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataStudy.leaveEndDate)??''
|
||||
convertDateToAPI(formDataStudy.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("studyDaySubject", formDataStudy.studyDaySubject);
|
||||
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
|
||||
|
|
@ -155,30 +160,56 @@ function onValidate() {
|
|||
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
|
||||
formData.append("leaveAddress", dataStore.currentAddress); //
|
||||
formData.append("leaveNumber", dataStore.telephoneNumber); //
|
||||
formData.append("leaveTotal", formDataStudy.leaveTotalDay); //
|
||||
formData.append("leaveTotal", formDataStudy.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataStudy.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataStudy.leaveRangeEnd);
|
||||
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataStudy.leaveEndDate) ==
|
||||
convertDateToAPI(formDataStudy.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataStudy.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataStudy.leaveEndDate) ?? null,
|
||||
leaveRange: formDataStudy.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataStudy.leaveRange
|
||||
: formDataStudy.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataStudy.leaveTotalDay = data.totalDate;
|
||||
formDataStudy.leaveTotal = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataStudy.leaveStartDate,
|
||||
formDataStudy.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -211,13 +242,15 @@ watch(props.data, async () => {
|
|||
formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
|
||||
formDataStudy.studyDaySubject = props.data.studyDaySubject;
|
||||
formDataStudy.leaveDetail = props.data.leaveDetail;
|
||||
formDataStudy.leaveRange = props.data.leaveRange;
|
||||
formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataStudy.leaveDocument = [];
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataStudy.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
});
|
||||
|
|
@ -228,7 +261,6 @@ onMounted(async () => {
|
|||
formDataStudy.leaveWrote = props.data.leaveWrote;
|
||||
formDataStudy.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataStudy.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataStudy.leaveTotal = props.data.leaveTotal;
|
||||
formDataStudy.leavebirthDate = props.data.leavebirthDate;
|
||||
formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
|
||||
formDataStudy.leaveSalary = props.data.leaveSalary;
|
||||
|
|
@ -240,12 +272,18 @@ onMounted(async () => {
|
|||
formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
|
||||
formDataStudy.studyDaySubject = props.data.studyDaySubject;
|
||||
formDataStudy.leaveDetail = props.data.leaveDetail;
|
||||
|
||||
formDataStudy.leaveRange = props.data.leaveRange;
|
||||
formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataStudy.leaveTotal = props.data.leaveTotal;
|
||||
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataStudy.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
|
|
@ -260,368 +298,447 @@ onMounted(async () => {
|
|||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataStudy.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="
|
||||
formDataStudy.leaveStartDate != null
|
||||
? date2Thai(formDataStudy.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataStudy.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataStudy.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataStudy.leaveStartDate != null
|
||||
? date2Thai(formDataStudy.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataStudy.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:model-value="
|
||||
formDataStudy.leaveEndDate != null
|
||||
? date2Thai(formDataStudy.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <div class="col-12 col-sm-3 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataStudy.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataStudy.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataStudy.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataStudy.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataStudy.leaveEndDate != null
|
||||
? date2Thai(formDataStudy.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12 col-sm-3 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataStudy.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width"
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
dataStore.dateAppoint != null
|
||||
? date2Thai(dataStore.dateAppoint)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width"
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
dataStore.dateAppoint != null
|
||||
? date2Thai(dataStore.dateAppoint)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="
|
||||
dataStore.birthDate != null
|
||||
? date2Thai(dataStore.birthDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="
|
||||
dataStore.birthDate != null
|
||||
? date2Thai(dataStore.birthDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
:model-value="dataStore.salary"
|
||||
ref="leaveSalaryRef"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
/>
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:model-value="dataStore.salary"
|
||||
ref="leaveSalaryRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
:model-value="dataStore.salaryText"
|
||||
ref="leaveSalaryRef"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:model-value="dataStore.salaryText"
|
||||
ref="leaveSalaryRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayUniversityName"
|
||||
ref="studyDayUniversityNameRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ชื่อสถานศึกษา"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayUniversityName"
|
||||
ref="studyDayUniversityNameRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ชื่อสถานศึกษา"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayDegreeLevel"
|
||||
ref="studyDayDegreeLevelRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ชั้นปริญญา"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayDegreeLevel"
|
||||
ref="studyDayDegreeLevelRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ชั้นปริญญา"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDaySubject"
|
||||
ref="studyDaySubjectRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ศึกษาวิชา"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDaySubject"
|
||||
ref="studyDaySubjectRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ศึกษาวิชา"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="dataStore.telephoneNumber"
|
||||
ref="leaveNumberRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="dataStore.currentAddress"
|
||||
ref="leaveAddressRef"
|
||||
class="col-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<div class="col-12 col-md-4 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
v-model="dataStore.telephoneNumber"
|
||||
ref="leaveNumberRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-8 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
v-model="dataStore.currentAddress"
|
||||
ref="leaveAddressRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-if="statusCheck != 'NEW'">
|
||||
<q-file
|
||||
|
|
|
|||
|
|
@ -17,11 +17,13 @@ const {
|
|||
date2Thai,
|
||||
arabicNumberToText,
|
||||
calculateDurationYmd,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<any>("");
|
||||
|
||||
|
|
@ -58,6 +60,8 @@ const formDataTrain = reactive<any>({
|
|||
studyDayScholarship: "",
|
||||
studyDayCountry: "",
|
||||
studyDayTrainingSubject: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
studyDayTrainingName: "",
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
|
|
@ -123,11 +127,11 @@ function onValidate() {
|
|||
formData.append("type", formDataTrain.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataTrain.leaveStartDate)??''
|
||||
convertDateToAPI(formDataTrain.leaveStartDate) ?? ""
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataTrain.leaveEndDate)??''
|
||||
convertDateToAPI(formDataTrain.leaveEndDate) ?? ""
|
||||
); //
|
||||
formData.append("studyDayCountry", formDataTrain.studyDayCountry);
|
||||
formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
|
||||
|
|
@ -142,31 +146,55 @@ function onValidate() {
|
|||
formData.append("leaveNumber", dataStore.telephoneNumber); //
|
||||
formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
|
||||
formData.append("leaveSalary", formDataTrain.leaveSalary); //
|
||||
formData.append("leaveTotal", formDataTrain.leaveTotalDay); //
|
||||
formData.append("leaveTotal", formDataTrain.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataTrain.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataTrain.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataTrain.leaveEndDate) ==
|
||||
convertDateToAPI(formDataTrain.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataTrain.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataTrain.leaveEndDate) ?? null,
|
||||
leaveRange: formDataTrain.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataTrain.leaveRange
|
||||
: formDataTrain.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataTrain.leaveTotalDay = data.totalDate;
|
||||
|
||||
formDataTrain.leaveTotal = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataTrain.leaveStartDate,
|
||||
formDataTrain.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -196,12 +224,14 @@ watch(props.data, async () => {
|
|||
formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
|
||||
formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
|
||||
formDataTrain.leaveDetail = props.data.leaveDetail;
|
||||
formDataTrain.leaveRange = props.data.leaveRange;
|
||||
formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataTrain.leaveDocument = [];
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataTrain.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
|
|
@ -221,6 +251,10 @@ onMounted(async () => {
|
|||
formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
|
||||
formDataTrain.studyDayCountry = props.data.studyDayCountry;
|
||||
formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
|
||||
|
||||
formDataTrain.leaveRange = props.data.leaveRange;
|
||||
formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
|
||||
formDataTrain.leaveDetail = props.data.leaveDetail;
|
||||
// formDataTrain.leaveDocument = props.data.leaveDocument;
|
||||
|
|
@ -228,7 +262,7 @@ onMounted(async () => {
|
|||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataTrain.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -244,312 +278,386 @@ onMounted(async () => {
|
|||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataTrain.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="
|
||||
formDataTrain.leaveStartDate != null
|
||||
? date2Thai(formDataTrain.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataTrain.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataTrain.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataTrain.leaveStartDate != null
|
||||
? date2Thai(formDataTrain.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataTrain.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:model-value="
|
||||
formDataTrain.leaveEndDate != null
|
||||
? date2Thai(formDataTrain.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <div class="col-12 col-sm-3 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataTrain.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataTrain.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataTrain.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataTrain.leaveEndDate != null
|
||||
? date2Thai(formDataTrain.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataTrain.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- <div class="col-12 col-sm-3 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataTrain.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavegovernmentDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width"
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
dataStore.dateAppoint != null
|
||||
? date2Thai(dataStore.dateAppoint)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
<div class="col-12 col-sm-3">
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavegovernmentDate"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width"
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
dataStore.dateAppoint != null
|
||||
? date2Thai(dataStore.dateAppoint)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavebirthDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="
|
||||
dataStore.birthDate != null
|
||||
? date2Thai(dataStore.birthDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(---black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12 col-sm-3">
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavebirthDate"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="
|
||||
dataStore.birthDate != null
|
||||
? date2Thai(dataStore.birthDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(---black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="dataStore.salary"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
/>
|
||||
<div class="col-12 col-sm-3">
|
||||
<q-input
|
||||
v-model="dataStore.salary"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="dataStore.salaryText"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
/>
|
||||
<div class="col-12 col-sm-3">
|
||||
<q-input
|
||||
v-model="dataStore.salaryText"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<div class="col-12 col-sm-8 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayTrainingSubject"
|
||||
ref="studyDayTrainingSubjectRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้าน/หลักสูตร"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-4 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayTrainingName"
|
||||
ref="studyDayTrainingNameRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ณ สถานที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-4 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-8 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayTrainingSubject"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
ref="studyDayTrainingSubjectRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้าน/หลักสูตร"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayTrainingName"
|
||||
ref="studyDayTrainingNameRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ณ สถานที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="dataStore.telephoneNumber"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
class="col-12 col-sm-4 inputgreen"
|
||||
ref="leaveNumberRef"
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -567,7 +675,7 @@ onMounted(async () => {
|
|||
<q-input
|
||||
v-model="dataStore.currentAddress"
|
||||
ref="leaveAddressRef"
|
||||
class="col-12 cursor-pointer inputgreen"
|
||||
class="col-12 col-sm-8 inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -581,16 +689,17 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveDetail"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-if="statusCheck != 'NEW'">
|
||||
<q-file
|
||||
|
|
|
|||
|
|
@ -15,11 +15,19 @@ import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternati
|
|||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dateToISO, messageError, showLoader, hideLoader,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDateToAPI,
|
||||
} = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const isSave = ref<boolean>(false);
|
||||
const leaveId = ref<string>("");
|
||||
const leaveText = ref<string>("");
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -48,6 +56,8 @@ const formDataWorkInternational = reactive<any>({
|
|||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDocument: [],
|
||||
leaveDraftDocument: null,
|
||||
});
|
||||
|
|
@ -109,15 +119,19 @@ async function onValidate() {
|
|||
formData.append("type", formDataWorkInternational.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate)??''
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? ""
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate)??''
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? ""
|
||||
); //
|
||||
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataWorkInternational.leaveDetail);
|
||||
formData.append("leaveTotal", formDataWorkInternational.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataWorkInternational.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataWorkInternational.leaveRangeEnd);
|
||||
|
||||
await props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -141,6 +155,17 @@ async function onClickDownloadFile(id: string, fileName: string) {
|
|||
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate) ==
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
|
|
@ -150,14 +175,24 @@ async function fetchCheck() {
|
|||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
|
||||
StartLeaveDate:
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
|
||||
EndLeaveDate:
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
|
||||
leaveRange: formDataWorkInternational.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataWorkInternational.leaveRange
|
||||
: formDataWorkInternational.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataWorkInternational.leaveTotal = data.totalDate;
|
||||
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataWorkInternational.leaveStartDate,
|
||||
formDataWorkInternational.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
|
|
@ -177,7 +212,7 @@ const leaveDocumentList = ref<any>();
|
|||
const leaveDraftDocument = ref<string>();
|
||||
const statusCheck = ref<string>("");
|
||||
|
||||
watch(props, () => {
|
||||
watch(props, async () => {
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
|
|
@ -186,10 +221,18 @@ watch(props, () => {
|
|||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
formDataWorkInternational.leaveRange = props.data.leaveRange;
|
||||
formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataWorkInternational.leaveTotal = props.data.leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataWorkInternational.leaveDraftDocument = null;
|
||||
formDataWorkInternational.leaveDocument = [];
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -206,9 +249,14 @@ watch(
|
|||
);
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
|
||||
formDataWorkInternational.leaveRange = props.data.leaveRange;
|
||||
formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataWorkInternational.leaveTotal = props.data.leaveTotal;
|
||||
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
props.data.leaveStartDate
|
||||
);
|
||||
|
|
@ -218,6 +266,11 @@ onMounted(() => {
|
|||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -230,141 +283,212 @@ onMounted(() => {
|
|||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataWorkInternational.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataWorkInternational.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveStartDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataWorkInternational.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveStartDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:min-date="formDataWorkInternational.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate ||
|
||||
statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveEndDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataWorkInternational.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataWorkInternational.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveEndDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-if="!checkDate"
|
||||
bg-color="white"
|
||||
v-model="formDataWorkInternational.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 inputgreen">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataWorkInternational.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataWorkInternational.leaveDetail"
|
||||
label="สาเหตุการลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-file
|
||||
|
|
|
|||
|
|
@ -21,9 +21,23 @@ const {
|
|||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataFollowSpouse.leaveEndDate) ==
|
||||
convertDateToAPI(formDataFollowSpouse.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -54,6 +68,8 @@ const formDataFollowSpouse = reactive<any>({
|
|||
leaveTotal: "", //จำนวนวันลา
|
||||
leaveTotalDay: "", //จำนวนวันลา
|
||||
leaveSalaryText: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveSalary: 0, //เงินเดือนปัจจุบัน
|
||||
coupleDayName: "", //ชื่อคู่สมรส
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส
|
||||
|
|
@ -173,7 +189,10 @@ function onValidate() {
|
|||
formDataFollowSpouse.coupleDayPosition
|
||||
); //
|
||||
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
|
||||
formData.append("leaveTotal", formDataFollowSpouse.leaveTotalDay); //
|
||||
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataFollowSpouse.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataFollowSpouse.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -186,23 +205,34 @@ const reasonLeave = ref<string>("");
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate:
|
||||
convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
|
||||
leaveRange: formDataFollowSpouse.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataFollowSpouse.leaveRange
|
||||
: formDataFollowSpouse.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataFollowSpouse.leaveTotalDay = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataFollowSpouse.leaveStartDate,
|
||||
formDataFollowSpouse.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -250,6 +280,8 @@ watch(props.data, async () => {
|
|||
formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
|
||||
formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
|
||||
formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
|
||||
formDataFollowSpouse.leaveRange = props.data.leaveRange;
|
||||
formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataFollowSpouse.coupleDayLevelCountry =
|
||||
props.data.coupleDayLevelCountry;
|
||||
formDataFollowSpouse.coupleDayCountryHistory =
|
||||
|
|
@ -266,7 +298,8 @@ watch(props.data, async () => {
|
|||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataFollowSpouse.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
|
||||
const coupleDayTotalHistory = await calculateDurationYmd(
|
||||
props.data.coupleDayStartDateHistory,
|
||||
props.data.coupleDayEndDateHistory
|
||||
|
|
@ -285,6 +318,9 @@ onMounted(async () => {
|
|||
formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
|
||||
formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
|
||||
formDataFollowSpouse.leaveRange = props.data.leaveRange;
|
||||
formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
|
||||
formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
|
||||
formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
|
||||
|
|
@ -306,7 +342,8 @@ onMounted(async () => {
|
|||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataFollowSpouse.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
|
||||
const coupleDayTotalHistory = await calculateDurationYmd(
|
||||
props.data.coupleDayStartDateHistory,
|
||||
props.data.coupleDayEndDateHistory
|
||||
|
|
@ -326,144 +363,199 @@ onMounted(async () => {
|
|||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataFollowSpouse.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataFollowSpouse.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveStartDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataFollowSpouse.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="
|
||||
!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:min-date="formDataFollowSpouse.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="
|
||||
!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveEndDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataFollowSpouse.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataFollowSpouse.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveStartDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataFollowSpouse.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveEndDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-3 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
|
|
@ -477,7 +569,7 @@ onMounted(async () => {
|
|||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<div class="col-12 col-md-9 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
|
|
@ -494,7 +586,7 @@ onMounted(async () => {
|
|||
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
class="col-12 col-sm-12 inputgreen"
|
||||
hide-bottom-space
|
||||
ref="coupleDayNameRef"
|
||||
for="coupleDayNameRef"
|
||||
|
|
@ -509,7 +601,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
class="col-12 col-sm-12 inputgreen"
|
||||
hide-bottom-space
|
||||
ref="coupleDayPositionRef"
|
||||
for="coupleDayPositionRef"
|
||||
|
|
@ -524,7 +616,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
class="col-12 col-sm-12 inputgreen"
|
||||
ref="coupleDayLevelRef"
|
||||
for="coupleDayLevelRef"
|
||||
dense
|
||||
|
|
@ -539,7 +631,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
class="col-12 col-sm-12 inputgreen"
|
||||
ref="coupleDayLevelCountryRef"
|
||||
for="coupleDayLevelCountryRef"
|
||||
hide-bottom-space
|
||||
|
|
@ -555,6 +647,7 @@ onMounted(async () => {
|
|||
<div class="text-weight-bold text-dark col-12">
|
||||
ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -612,6 +705,7 @@ onMounted(async () => {
|
|||
borderless
|
||||
:enableTimePicker="false"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:min-date="formDataFollowSpouse.coupleDayStartDateHistory"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveHistoryTotal()"
|
||||
>
|
||||
|
|
@ -681,7 +775,7 @@ onMounted(async () => {
|
|||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-12 col-sm-12 inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const dataStore = useLeaveStore();
|
|||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
calculateDurationYmd,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
|
|
@ -27,6 +27,7 @@ const leaveId = ref<any>("");
|
|||
const leaveStartDateRef = ref<object | null>(null);
|
||||
const leaveEndDateRef = ref<object | null>(null);
|
||||
const leaveWroteRef = ref<object | null>(null);
|
||||
const leaveText = ref<string>("");
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -56,6 +57,8 @@ const formDataRehabilitation = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDraftDocument: null,
|
||||
});
|
||||
|
||||
|
|
@ -94,6 +97,9 @@ async function onValidate() {
|
|||
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
|
||||
formData.append("leaveTotal", formDataRehabilitation.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataRehabilitation.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataRehabilitation.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
|
||||
|
|
@ -108,11 +114,22 @@ const fileUploadDoc = async (files: any) => {
|
|||
const reasonLeave = ref<string>("");
|
||||
const isLeave = ref<boolean>(true);
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataRehabilitation.leaveEndDate) ==
|
||||
convertDateToAPI(formDataRehabilitation.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function FetchCheck() {
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
|
|
@ -121,11 +138,19 @@ async function FetchCheck() {
|
|||
convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? null,
|
||||
EndLeaveDate:
|
||||
convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? null,
|
||||
leaveRange: formDataRehabilitation.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataRehabilitation.leaveRange
|
||||
: formDataRehabilitation.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataRehabilitation.leaveTotal = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataRehabilitation.leaveStartDate,
|
||||
formDataRehabilitation.leaveEndDate
|
||||
);
|
||||
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
|
|
@ -165,7 +190,7 @@ const dateEndInputStyle = computed(() => {
|
|||
const leaveDocumentList = ref<any>();
|
||||
const leaveDraftDocument = ref<string>();
|
||||
const statusCheck = ref<string>("");
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
|
|
@ -173,24 +198,41 @@ watch(props.data, () => {
|
|||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataRehabilitation.leaveRange = props.data.leaveRange;
|
||||
formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataRehabilitation.leaveDraftDocument = null;
|
||||
formDataRehabilitation.leaveDocument = [];
|
||||
statusCheck.value = props.data.status;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
}
|
||||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
|
||||
formDataRehabilitation.leaveRange = props.data.leaveRange;
|
||||
formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
FetchCheck();
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
|
||||
fetchCheck();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -204,154 +246,207 @@ onMounted(() => {
|
|||
<q-form greedy @submit.prevent @validation-success="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveWrote"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveStartDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataRehabilitation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataRehabilitation.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveStartDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveEndDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataRehabilitation.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm"> -->
|
||||
<div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveEndDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
v-model="formDataRehabilitation.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="coupleDayTotalHistoryRef"
|
||||
for="coupleDayTotalHistoryRef"
|
||||
v-model="formDataRehabilitation.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
/>
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
<div class="col-12 col-md-12 col-sm-12 inputgreen">
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="สาเหตุการลา"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-if="statusCheck != 'NEW'">
|
||||
<q-file
|
||||
|
|
|
|||
|
|
@ -84,9 +84,10 @@ onMounted(() => {
|
|||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.dear"
|
||||
v-model="dataStore.commanderPosition"
|
||||
label="เรียน"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ onMounted(async () => {
|
|||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ convert(props.row) }}
|
||||
{{ props.row.leaveTypeName ? `${props.row.leaveTypeName} ${props.row.leaveSubTypeName ? `(${props.row.leaveSubTypeName})`:''}`: '-' }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="dateLeave"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const store = useLeaveStore();
|
||||
const { converstType } = store;
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,22 +30,16 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{
|
||||
props.data.leaveRange == "ALL"
|
||||
? props.data.leaveTotal + " วัน"
|
||||
: props.data.leaveRange == "MORNING"
|
||||
? "ลาครึ่งวันเช้า (0.5)"
|
||||
: "ลาครึ่งวันบ่าย (0.5)"
|
||||
}}
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const store = useLeaveStore();
|
||||
const { converstType } = store;
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -38,22 +42,16 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{
|
||||
props.data.leaveRange == "ALL"
|
||||
? props.data.leaveTotal + " วัน"
|
||||
: props.data.leaveRange == "MORNING"
|
||||
? "ลาครึ่งวันเช้า (0.5)"
|
||||
: "ลาครึ่งวันบ่าย (0.5)"
|
||||
}}
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -18,7 +22,7 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
|
||||
<div class="col-xs-12 col-md-6">ลาไปศึกษาต่อ</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -17,7 +21,7 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
|
||||
<div class="col-xs-12 col-md-6">ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const store = useLeaveStore();
|
||||
const { converstType } = store;
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -20,7 +24,13 @@ const props = defineProps({
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ประเภทการลา</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{ props.data.leaveTypeName ? props.data.leaveTypeName : "-" }}
|
||||
{{
|
||||
props.data.leaveSubTypeName
|
||||
? props.data.leaveSubTypeName
|
||||
: props.data.leaveTypeName
|
||||
? props.data.leaveTypeName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -38,13 +48,31 @@ const props = defineProps({
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{ props.data.leaveStartDate ? props.data.leaveStartDate : "-" }}
|
||||
{{ props.data.leaveDateStart }}
|
||||
{{
|
||||
`${
|
||||
props.data.leaveRange && props.data.leaveRange !== "ALL"
|
||||
? `(${converstType(props.data.leaveRange)})`
|
||||
: ""
|
||||
}`
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{ props.data.leaveEndDate ? props.data.leaveEndDate : "-" }}
|
||||
{{ props.data.leaveDateEnd }}
|
||||
{{
|
||||
`${
|
||||
props.data.leaveDateStart !== props.data.leaveDateEnd
|
||||
? `${
|
||||
props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
|
||||
? `(${converstType(props.data.leaveRangeEnd)})`
|
||||
: ""
|
||||
}`
|
||||
: ""
|
||||
}`
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -122,7 +122,9 @@ interface FormData {
|
|||
coupleDaySumTotalHistory: string;
|
||||
approveStep: string;
|
||||
dear: string;
|
||||
leaveRangeEnd: string;
|
||||
leaveLast: string;
|
||||
leaveSubTypeName: string;
|
||||
leaveRange: string;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ interface OrdinationForm {
|
|||
leavebirthDate: object | null;
|
||||
leaveStartDate: object | null;
|
||||
leaveEndDate: object | null;
|
||||
totalLeave: object | null;
|
||||
leaveTotal: object | null;
|
||||
ordainDayOrdination: object | null;
|
||||
ordainDayLocationName: object | null;
|
||||
ordainDayLocationNumber: object | null;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ interface ListLeave {
|
|||
fullName: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
dateSendLeave: Date | null; //วันที่ยื่นใบลา
|
||||
status: string; //สถานะการของลา
|
||||
leaveSubTypeName: string;
|
||||
leaveRange: string;
|
||||
leaveRangeEnd: string;
|
||||
isDelete: boolean; //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
|
||||
hajjDayStatus: boolean;
|
||||
}
|
||||
|
|
@ -18,6 +21,9 @@ interface ListLeaveTable {
|
|||
fullName: string;
|
||||
dateSendLeave: string | null;
|
||||
status: string;
|
||||
leaveSubTypeName: string;
|
||||
leaveRange: string;
|
||||
leaveRangeEnd: string;
|
||||
isDelete: boolean;
|
||||
hajjDayStatus: boolean;
|
||||
}
|
||||
|
|
@ -82,6 +88,8 @@ interface FremDetail {
|
|||
approveStep: string;
|
||||
dear: string;
|
||||
leaveRange: string;
|
||||
leaveRangeEnd: string;
|
||||
leaveSubTypeName: string;
|
||||
}
|
||||
|
||||
interface FromCancelDetail {
|
||||
|
|
@ -90,6 +98,7 @@ interface FromCancelDetail {
|
|||
fullname: String; //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
status: String; //สถานะการของลา
|
||||
leaveDocDelete: string; //เอกสารการยกเลิกการลา
|
||||
leaveSubTypeName: string;
|
||||
leaveResonDelete: String; //เหตุผลการยกเลิกการลา
|
||||
leaveWrote: String; //เขียนที่
|
||||
leaveAddress: String; //สถานที่ติดต่อขณะลา
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import type {
|
|||
ListLeave,
|
||||
ListLeaveTable,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
import type { DataOption } from "../14_IDP/interface/Main";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
|
||||
|
|
@ -41,9 +42,22 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
fullName: e.fullName,
|
||||
dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave, false, true),
|
||||
dateLeave:
|
||||
date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate),
|
||||
e.leaveStartDate && e.leaveEndDate
|
||||
? e.leaveStartDate === e.leaveEndDate
|
||||
? date2Thai(e.leaveEndDate)
|
||||
: `${date2Thai(e.leaveStartDate)}${
|
||||
e.leaveRange !== "ALL" ? ` (${converstType(e.leaveRange)})` : ""
|
||||
} - ${date2Thai(e.leaveEndDate)}${
|
||||
e.leaveRangeEnd !== "ALL"
|
||||
? ` (${converstType(e.leaveRangeEnd)})`
|
||||
: ""
|
||||
}`
|
||||
: "-",
|
||||
status: e.status,
|
||||
hajjDayStatus: e.hajjDayStatus,
|
||||
leaveRange: e.leaveRange,
|
||||
leaveRangeEnd: e.leaveRangeEnd,
|
||||
leaveSubTypeName: e.leaveSubTypeName,
|
||||
statusConvert: convertStatud(e.status),
|
||||
isDelete: e.isDelete,
|
||||
}));
|
||||
|
|
@ -143,17 +157,39 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
}
|
||||
}
|
||||
|
||||
const rangeOptions = ref<DataOption[]>([
|
||||
{
|
||||
id: "ALL",
|
||||
name: "เต็มวัน",
|
||||
},
|
||||
{
|
||||
id: "MORNING",
|
||||
name: "ครึ่งวันเช้า",
|
||||
},
|
||||
{
|
||||
id: "AFTERNOON",
|
||||
name: "ครึ่งวันบ่าย",
|
||||
},
|
||||
]);
|
||||
|
||||
function converstType(val: string) {
|
||||
switch (val) {
|
||||
case "ALL":
|
||||
return "";
|
||||
case "MORNING":
|
||||
return "ครึ่งวันเช้า";
|
||||
case "AFTERNOON":
|
||||
return "ครึ่งวันบ่าย";
|
||||
}
|
||||
}
|
||||
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
|
||||
const optionsSpecific = ref<OptionData[]>([
|
||||
{ id: "s1", name: "ลาไปศึกษาต่อ", code: "s1" },
|
||||
{ id: "s2", name: "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน", code: "s2" },
|
||||
const optionsSpecific = ref<string[]>([
|
||||
"ลาไปศึกษาต่อ",
|
||||
"ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน",
|
||||
]);
|
||||
|
||||
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
|
||||
const optionsOrdination = ref<OptionData[]>([
|
||||
{ id: "b1", name: "ลาอุปสมบท", code: "b1" },
|
||||
{ id: "b2", name: "ลาประกอบพิธีฮัจญ์", code: "b2" },
|
||||
]);
|
||||
const optionsOrdination = ref<string[]>(["ลาอุปสมบท", "ลาประกอบพิธีฮัจญ์"]);
|
||||
|
||||
/** data table filter & column ของรายการลา */
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -233,24 +269,6 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
return options.value.find((x) => x.code == val)?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจญ์ ย่อย
|
||||
* @param val ค่า string
|
||||
* @returns ส่งค่าที่แปลงแล้ว
|
||||
*/
|
||||
function convertSubtitleInfo(val: string) {
|
||||
return optionsOrdination.value.find((x) => x.id == val)?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
*ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
|
||||
* @param val ค่า string
|
||||
* @returns ส่งค่าที่แปลงแล้ว
|
||||
*/
|
||||
function convertSubtitleInfo2(val: string) {
|
||||
return optionsSpecific.value.find((x) => x.id == val)?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
*ฟังก์ชั่นหา id จาก api
|
||||
* @param val ค่า string
|
||||
|
|
@ -266,6 +284,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
const dateSendLeave = ref<Date>(); //วันที่ยื่นใบลา
|
||||
const leaveTypeName = ref<string>(""); //Name ประเภทการลา
|
||||
const dear = ref<string>(""); //เรียน
|
||||
const commanderPosition = ref<string>(""); //ตำแหน่งผู้บังคับบัญชา
|
||||
const fullName = ref<string>(""); //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
|
||||
const positionName = ref<string>(""); //ตำแหน่งผู้ยื่นขอ
|
||||
const positionLevelName = ref<string>(""); //ระดับผู้ยื่นขอ
|
||||
|
|
@ -294,6 +313,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
dateSendLeave.value = data.dateSendLeave;
|
||||
leaveTypeName.value = data.leaveTypeName;
|
||||
dear.value = data.dear;
|
||||
commanderPosition.value = data.commanderPosition;
|
||||
fullName.value = data.fullName;
|
||||
positionName.value = data.positionName;
|
||||
positionLevelName.value = data.positionLevelName;
|
||||
|
|
@ -352,6 +372,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
dateSendLeave.value = data.dateSendLeave;
|
||||
typeLeave.value = data.leaveTypeName;
|
||||
dear.value = data.dear;
|
||||
commanderPosition.value = data.commanderPosition;
|
||||
fullName.value = data.fullName;
|
||||
positionName.value = data.positionName;
|
||||
positionLevelName.value = data.positionLevelName;
|
||||
|
|
@ -365,6 +386,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
dateSendLeave.value = undefined;
|
||||
leaveTypeName.value = "";
|
||||
dear.value = "";
|
||||
commanderPosition.value = "";
|
||||
fullName.value = "";
|
||||
positionName.value = "";
|
||||
positionLevelName.value = "";
|
||||
|
|
@ -409,6 +431,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
dateSendLeave,
|
||||
leaveTypeName,
|
||||
dear,
|
||||
commanderPosition,
|
||||
fullName,
|
||||
positionName,
|
||||
positionLevelName,
|
||||
|
|
@ -432,5 +455,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
statusOptionsMain,
|
||||
telephoneNumber,
|
||||
currentAddress,
|
||||
rangeOptions,
|
||||
converstType,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -29,7 +29,14 @@ const myform = ref<QForm | null>(null);
|
|||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { fetchLeaveType } = dataStore;
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDateToAPI,
|
||||
} = mixin;
|
||||
|
||||
const model = ref<string>("");
|
||||
const modelSpecific = ref<string>("");
|
||||
|
|
@ -53,8 +60,16 @@ function onSubmit(postData: FormData, isLeave: boolean = true) {
|
|||
if (isLeave) {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
if (model.value === "LV-006" || model.value === "LV-008") {
|
||||
postData.append("leaveSubTypeName", modelSpecific.value);
|
||||
}
|
||||
if (postData.get("leaveEndDate") === postData.get("leaveStartDate")) {
|
||||
postData.set("leaveRangeEnd", postData.get("leaveRange") as string);
|
||||
}
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), postData)
|
||||
|
||||
.then((res) => {
|
||||
router.push(`/leave/edit/${res.data.result.id}`);
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
|
|
@ -126,7 +141,7 @@ onMounted(async () => {
|
|||
<div class="row">
|
||||
<q-select
|
||||
dense
|
||||
class="col-12 col-sm-6 col-md-4 inputgreen"
|
||||
class="col-12 col-sm-9 col-md-6 inputgreen"
|
||||
outlined
|
||||
v-model="model"
|
||||
:options="option"
|
||||
|
|
@ -155,7 +170,7 @@ onMounted(async () => {
|
|||
|
||||
<div class="row q-mt-sm">
|
||||
<div
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
v-if="model === 'LV-006' || model === 'LV-008'"
|
||||
>
|
||||
<q-select
|
||||
|
|
@ -167,14 +182,11 @@ onMounted(async () => {
|
|||
? dataStore.optionsOrdination
|
||||
: dataStore.optionsSpecific
|
||||
"
|
||||
option-value="code"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทการลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -208,11 +220,13 @@ onMounted(async () => {
|
|||
/>
|
||||
<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
|
||||
<OrdinationForm
|
||||
v-if="model === 'LV-006' && modelSpecific == 'b1'"
|
||||
v-if="model === 'LV-006' && modelSpecific == 'ลาอุปสมบท'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<HajjForm
|
||||
v-if="model === 'LV-006' && modelSpecific == 'b2'"
|
||||
v-if="
|
||||
model === 'LV-006' && modelSpecific == 'ลาประกอบพิธีฮัจญ์'
|
||||
"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<MilitaryForm
|
||||
|
|
@ -221,15 +235,14 @@ onMounted(async () => {
|
|||
:on-submit="onSubmit"
|
||||
/>
|
||||
<StudyForm
|
||||
v-if="model === 'LV-008' && modelSpecific === 's1'"
|
||||
v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
|
||||
style="width: 100%"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<TrainForm
|
||||
v-if="
|
||||
model === 'LV-008' &&
|
||||
modelSpecific != 's1' &&
|
||||
modelSpecific != ''
|
||||
modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
|
||||
"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -99,9 +99,11 @@ const formData = reactive<FormData>({
|
|||
coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
approveStep: "",
|
||||
leaveRangeEnd: "",
|
||||
dear: "",
|
||||
leaveLast: "",
|
||||
leaveRange: "",
|
||||
leaveSubTypeName: "",
|
||||
});
|
||||
|
||||
const model = computed(() => {
|
||||
|
|
@ -109,23 +111,7 @@ const model = computed(() => {
|
|||
dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
|
||||
);
|
||||
});
|
||||
const modelSpecific = computed(() => {
|
||||
const code = dataStore.options.find(
|
||||
(x) => x.id == formData.leaveTypeId
|
||||
)?.code;
|
||||
|
||||
if (code == "LV-006" && formData.ordainDayLocationName != "") {
|
||||
return "b1";
|
||||
} else if (code == "LV-006" && formData.ordainDayLocationName == "") {
|
||||
return "b2";
|
||||
} else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
|
||||
return "s1";
|
||||
} else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
|
||||
return "s2";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
});
|
||||
const modelSpecific = ref<string>("");
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลการลา
|
||||
|
|
@ -208,6 +194,11 @@ async function fetchDataDetail(id: string) {
|
|||
formData.dear = data.dear ?? "-";
|
||||
formData.leaveLast = data.leaveLast ?? "-";
|
||||
formData.leaveRange = data.leaveRange;
|
||||
formData.leaveRangeEnd =
|
||||
data.leaveRangeEnd == "AFTERNOON" ? "ALL" : data.leaveRangeEnd;
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
|
||||
formData.ordainDayStatus = data.ordainDayStatus;
|
||||
modelSpecific.value = data.leaveSubTypeName;
|
||||
|
||||
dataStore.telephoneNumber =
|
||||
data.leaveNumber && data.leaveNumber !== "-" ? data.leaveNumber : null;
|
||||
|
|
@ -228,10 +219,16 @@ async function fetchDataDetail(id: string) {
|
|||
* @param formData ข้อมูลใน formdata
|
||||
* @param isLeave ตัวแปรเช็คว่าใช้หน้า edit หรือไม่
|
||||
*/
|
||||
function onSubmit(formData: FormData, isLeave: boolean = true) {
|
||||
function onSubmit(formData: any, isLeave: boolean = true) {
|
||||
if (isLeave) {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
if (model.value === "LV-006" || model.value === "LV-008") {
|
||||
formData.append("leaveSubTypeName", modelSpecific.value);
|
||||
}
|
||||
if (formData.get("leaveEndDate") === formData.get("leaveStartDate")) {
|
||||
formData.set("leaveRangeEnd", formData.get("leaveRange") as string);
|
||||
}
|
||||
await http
|
||||
.put(config.API.leaveUserId(personalId.value), formData)
|
||||
.then(async () => {
|
||||
|
|
@ -361,7 +358,7 @@ onMounted(async () => {
|
|||
<q-select
|
||||
readonly
|
||||
dense
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
class="col-12 col-sm-9 col-md-6"
|
||||
outlined
|
||||
v-model="formData.leaveTypeName"
|
||||
option-value="code"
|
||||
|
|
@ -373,7 +370,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="row q-mt-sm">
|
||||
<div
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
v-if="model === 'LV-006' || model === 'LV-008'"
|
||||
>
|
||||
<q-select
|
||||
|
|
@ -386,14 +383,11 @@ onMounted(async () => {
|
|||
? dataStore.optionsOrdination
|
||||
: dataStore.optionsSpecific
|
||||
"
|
||||
option-value="code"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทการลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -447,14 +441,16 @@ onMounted(async () => {
|
|||
:click-delete="clickDelete"
|
||||
/>
|
||||
<OrdinationForm
|
||||
v-if="model === 'LV-006' && modelSpecific === 'b1'"
|
||||
v-if="model === 'LV-006' && modelSpecific === 'ลาอุปสมบท'"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
:on-confirm="onConfirm"
|
||||
:click-delete="clickDelete"
|
||||
/>
|
||||
<HajjForm
|
||||
v-if="model === 'LV-006' && modelSpecific === 'b2'"
|
||||
v-if="
|
||||
model === 'LV-006' && modelSpecific === 'ลาประกอบพิธีฮัจญ์'
|
||||
"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
:on-confirm="onConfirm"
|
||||
|
|
@ -469,7 +465,7 @@ onMounted(async () => {
|
|||
:click-delete="clickDelete"
|
||||
/>
|
||||
<StudyForm
|
||||
v-if="model === 'LV-008' && modelSpecific === 's1'"
|
||||
v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
|
||||
style="width: 100%"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
|
|
@ -479,8 +475,7 @@ onMounted(async () => {
|
|||
<TrainForm
|
||||
v-if="
|
||||
model === 'LV-008' &&
|
||||
modelSpecific != 's1' &&
|
||||
modelSpecific != ''
|
||||
modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
|
||||
"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
|
|
|
|||
|
|
@ -135,11 +135,14 @@ async function fetchStatsTable() {
|
|||
: el.leaveTypeName === "ลากิจส่วนตัว"
|
||||
? "text-deep-purple"
|
||||
: "text-indigo",
|
||||
value: Math.round(
|
||||
(Number(el.leaveCountApprove) /
|
||||
(Number(el.leaveLimit) + Number(el.leaveExtend))) *
|
||||
100
|
||||
),
|
||||
value:
|
||||
el.leaveLimit > 0 || el.leaveExtend > 0
|
||||
? Math.round(
|
||||
(Number(el.leaveCountApprove) /
|
||||
(Number(el.leaveLimit) + Number(el.leaveExtend))) *
|
||||
100
|
||||
)
|
||||
: 0,
|
||||
all: Number(el.leaveLimit) + Number(el.leaveExtend),
|
||||
use: el.leaveCountApprove,
|
||||
remain:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, reactive, onMounted, watch, nextTick } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ async function onCilckNextStep() {
|
|||
store.step === 1
|
||||
? checkSelectForm()
|
||||
: store.step === 2 || store.step === 6
|
||||
? validateForm()
|
||||
? onSubmitFormData()
|
||||
: store.step == 3 || store.step == 7
|
||||
? dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -85,35 +85,42 @@ async function onCilckNextStep() {
|
|||
}
|
||||
|
||||
/** function validateForm Step 2,4*/
|
||||
async function validateForm() {
|
||||
async function onSubmitFormData() {
|
||||
store.checkFileupload = !store.checkFileupload;
|
||||
const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
|
||||
const hasError = [];
|
||||
for (const key in formCommandRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
|
||||
const property = formCommandRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
if (emptyValues.length > 0 && store.statusUpload === true) {
|
||||
} else if (store.step === 2) {
|
||||
if (store.statusUpload === false) {
|
||||
saveStep2();
|
||||
} else {
|
||||
if (store.step === 2) {
|
||||
if (!store.statusUpload) {
|
||||
saveStep2();
|
||||
} else {
|
||||
if (!downloadFile.value.some((e: string) => e === "")) {
|
||||
nextTostep3();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!store.statusUpload6) {
|
||||
saveStep6();
|
||||
} else {
|
||||
if (store.statusUpload6 === false) {
|
||||
saveStep6();
|
||||
} else {
|
||||
if (!downloadFile.value.some((e: string) => e === "")) {
|
||||
nextTostep7();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
|
||||
// const hasError = [];
|
||||
// for (const key in formCommandRef) {
|
||||
// if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
|
||||
// const property = formCommandRef[key];
|
||||
|
||||
// if (property.value && typeof property.value.validate === "function") {
|
||||
// const isValid = property.value.validate();
|
||||
// hasError.push(isValid);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// if (hasError.every((result) => result === true)) {
|
||||
// if (emptyValues.length > 0 && store.statusUpload === true) {
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
const pdfSrc = ref<any>();
|
||||
|
|
@ -250,19 +257,7 @@ function checkSelectForm() {
|
|||
/** function บันทักตรวจสอบคุณสมบัติ*/
|
||||
async function saveStep1() {
|
||||
showLoader();
|
||||
|
||||
const salaries = formDetail.value.salaries.map((e: any) => ({
|
||||
// amount: e.amount,
|
||||
// date: e.date,
|
||||
// mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
|
||||
// posNo: e.posNo,
|
||||
// position: e.position,
|
||||
// positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
|
||||
// refCommandDate: e.refCommandDate,
|
||||
// refCommandNo: e.refCommandNo ? e.refCommandNo : "",
|
||||
// salaryClass: e.salaryClass ? e.salaryClass : "",
|
||||
// salaryRef: e.salaryRef ? e.salaryRef : "",
|
||||
// salaryStatus: e.salaryStatus ? e.salariesStatus : "",
|
||||
profileId: e.profileId,
|
||||
commandCode: e.commandCode,
|
||||
commandNo: e.commandNo,
|
||||
|
|
@ -317,16 +312,32 @@ async function saveStep1() {
|
|||
startDate: e.startDate,
|
||||
}));
|
||||
|
||||
const assessments = formDetail.value.assessments.map((e: any) => ({
|
||||
date: e.date,
|
||||
point1: e.point1,
|
||||
point1Total: e.point1Total,
|
||||
point2: e.point2,
|
||||
point2Total: e.point2Total,
|
||||
pointSum: e.pointSum,
|
||||
pointSumTotal: e.pointSumTotal,
|
||||
const certificates = formDetail.value.certificates.map((e: any) => ({
|
||||
...e,
|
||||
}));
|
||||
|
||||
const trainings = formDetail.value.trainings.map((e: any) => ({
|
||||
...e,
|
||||
}));
|
||||
|
||||
const performances = formDetail.value.assessments.map(
|
||||
({ id, isAdd, ...rest }: any) => ({
|
||||
...rest,
|
||||
})
|
||||
);
|
||||
const portfolios = formDetail.value.experience.map(
|
||||
({
|
||||
id,
|
||||
lastUpdatedAt,
|
||||
lastUpdateFullName,
|
||||
createdFullName,
|
||||
createdAt,
|
||||
...rest
|
||||
}: any) => ({
|
||||
...rest,
|
||||
})
|
||||
);
|
||||
|
||||
const evaluateType = route.params.type.toString();
|
||||
const form = {
|
||||
root: formDetail.value.root,
|
||||
|
|
@ -351,12 +362,15 @@ async function saveStep1() {
|
|||
isHaveSpecificQft: formSpec.isHaveSpecificQft,
|
||||
isHaveProLicense: formSpec.isHaveProLicense,
|
||||
isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
|
||||
posExecutive: formDetail.value.posExecutive ?? "",
|
||||
positionArea: formDetail.value.positionArea ?? "",
|
||||
reason: "",
|
||||
educations: [...educations],
|
||||
certificates: [...formDetail.value.certificates],
|
||||
certificates: [...certificates],
|
||||
salaries: [...salaries],
|
||||
trainings: [...formDetail.value.trainings],
|
||||
assessments: [...assessments],
|
||||
trainings: [...trainings],
|
||||
performances: [...performances],
|
||||
portfolios: [...portfolios],
|
||||
};
|
||||
|
||||
await http
|
||||
|
|
@ -378,41 +392,20 @@ const statusUpload = ref<boolean>(false);
|
|||
const formCommand = reactive<FormCommand>({
|
||||
commanderFullname: "",
|
||||
commanderPosition: "",
|
||||
commanderPositionOld: "",
|
||||
commanderOrg: "",
|
||||
commanderOrgOld: "",
|
||||
commanderAboveFullname: "",
|
||||
commanderAbovePosition: "",
|
||||
commanderAbovePositionOld: "",
|
||||
commanderAboveOrgOld: "",
|
||||
commanderAboveOrg: "",
|
||||
author: "",
|
||||
subject: "",
|
||||
subject: [],
|
||||
assignedPosition: "",
|
||||
});
|
||||
const commanderFullnameRef = ref<object | null>(null);
|
||||
const commanderPositionRef = ref<object | null>(null);
|
||||
const commanderAboveFullnameRef = ref<object | null>(null);
|
||||
const commanderAbovePositionRef = ref<object | null>(null);
|
||||
const fileEvaluation1Ref = ref<object | null>(null);
|
||||
const fileEvaluation2Ref = ref<object | null>(null);
|
||||
const fileEvaluation3Ref = ref<object | null>(null);
|
||||
const fileEvaluation4Ref = ref<object | null>(null);
|
||||
const fileEvaluation5Ref = ref<object | null>(null);
|
||||
const fileEvaluation6Ref = ref<object | null>(null);
|
||||
const performanceRef = ref<object | null>(null);
|
||||
const performanceOwnerRef = ref<object | null>(null);
|
||||
const assignedPositionRef = ref<object | null>(null);
|
||||
const formCommandRef: FormCommandRef = {
|
||||
commanderFullname: commanderFullnameRef,
|
||||
commanderPosition: commanderPositionRef,
|
||||
commanderAboveFullname: commanderAboveFullnameRef,
|
||||
commanderAbovePosition: commanderAbovePositionRef,
|
||||
fileEvaluation1: fileEvaluation1Ref,
|
||||
fileEvaluation2: fileEvaluation2Ref,
|
||||
fileEvaluation3: fileEvaluation3Ref,
|
||||
fileEvaluation4: fileEvaluation4Ref,
|
||||
fileEvaluation5: fileEvaluation5Ref,
|
||||
fileEvaluation6: fileEvaluation6Ref,
|
||||
performance: performanceRef,
|
||||
performanceOwner: performanceOwnerRef,
|
||||
assignedPosition: assignedPositionRef,
|
||||
};
|
||||
const downloadFileRef = ref<any>();
|
||||
const downloadFile = ref<string[]>([]);
|
||||
|
||||
/**
|
||||
* function อัปเดท ผลงาน,ผู้เซ็นเอกสาร, Ref
|
||||
* @param val ผู้เซ็นเอกสาร
|
||||
|
|
@ -421,38 +414,22 @@ const downloadFileRef = ref<any>();
|
|||
function updateformCommand(val: any, ref: any) {
|
||||
formCommand.commanderFullname = val.commanderFullname;
|
||||
formCommand.commanderPosition = val.commanderPosition;
|
||||
formCommand.commanderPositionOld = val.commanderPositionOld;
|
||||
formCommand.commanderOrg = val.commanderOrg;
|
||||
formCommand.commanderOrgOld = val.commanderOrgOld;
|
||||
formCommand.commanderAboveFullname = val.commanderAboveFullname;
|
||||
formCommand.commanderAbovePosition = val.commanderAbovePosition;
|
||||
formCommand.commanderAbovePositionOld = val.commanderAbovePositionOld;
|
||||
formCommand.commanderAboveOrgOld = val.commanderAboveOrgOld;
|
||||
formCommand.commanderAboveOrg = val.commanderAboveOrg;
|
||||
formCommand.author = val.author;
|
||||
formCommand.subject = val.subject;
|
||||
formCommand.assignedPosition = val.assignedPosition;
|
||||
commanderFullnameRef.value = ref.commanderFullnameRef;
|
||||
commanderPositionRef.value = ref.commanderPositionRef;
|
||||
commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
|
||||
commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
|
||||
fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
|
||||
fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
|
||||
fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
|
||||
fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
|
||||
fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
|
||||
fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
|
||||
downloadFileRef.value = ref.downloadFile;
|
||||
performanceRef.value = ref.performance;
|
||||
performanceOwnerRef.value = ref.performanceOwner;
|
||||
assignedPositionRef.value = ref.assignedPosition;
|
||||
downloadFile.value = ref.downloadFile;
|
||||
statusUpload.value = ref.statusUpload;
|
||||
}
|
||||
/** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
|
||||
async function saveStep2() {
|
||||
const body = {
|
||||
commanderFullname: formCommand.commanderFullname,
|
||||
commanderPosition: formCommand.commanderPosition,
|
||||
commanderAboveFullname: formCommand.commanderAboveFullname,
|
||||
commanderAbovePosition: formCommand.commanderAbovePosition,
|
||||
author: formCommand.author,
|
||||
subject: formCommand.subject,
|
||||
};
|
||||
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
|
|
@ -465,10 +442,10 @@ async function saveStep2() {
|
|||
route.params.id.toString(),
|
||||
"director"
|
||||
),
|
||||
body
|
||||
{ ...formCommand, assignedPosition: undefined }
|
||||
)
|
||||
.then(() => {
|
||||
route.params.id && fetchCheckStep(route.params.id.toString());
|
||||
.then(async () => {
|
||||
route.params.id && (await fetchCheckStep(route.params.id.toString()));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -530,8 +507,14 @@ async function saveStep6() {
|
|||
const body = {
|
||||
commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
|
||||
commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
|
||||
commanderAbovePositionOldDoc2: formCommand.commanderAbovePositionOld,
|
||||
commanderAboveOrgOldDoc2: formCommand.commanderAboveOrgOld,
|
||||
commanderAboveOrgDoc2: formCommand.commanderAboveOrg,
|
||||
commanderFullnameDoc2: formCommand.commanderFullname,
|
||||
commanderPositionDoc2: formCommand.commanderPosition,
|
||||
commanderPositionOldDoc2: formCommand.commanderPositionOld,
|
||||
commanderOrgDoc2: formCommand.commanderOrg,
|
||||
commanderOrgOldDoc2: formCommand.commanderOrgOld,
|
||||
authorDoc2: formCommand.author,
|
||||
subjectDoc2: formCommand.subject,
|
||||
assignedPosition: formCommand.assignedPosition,
|
||||
|
|
@ -551,8 +534,8 @@ async function saveStep6() {
|
|||
),
|
||||
body
|
||||
)
|
||||
.then(() => {
|
||||
route.params.id && fetchCheckStep(route.params.id.toString());
|
||||
.then(async () => {
|
||||
route.params.id && (await fetchCheckStep(route.params.id.toString()));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -679,164 +662,172 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
|
||||
<div class="col-12 row items-center">
|
||||
<div class="toptitle2">
|
||||
{{ store.step }}.{{ store.title[store.step - 1] }}
|
||||
<q-form
|
||||
class="col-xs-12 col-sm-9"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onCilckNextStep"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
|
||||
<div class="col-12 row items-center">
|
||||
<div class="toptitle2">
|
||||
{{ store.step }}.{{ store.title[store.step - 1] }}
|
||||
</div>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="store.step === 1"
|
||||
:href="externalLink"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
dense
|
||||
class="q-px-md"
|
||||
no-caps
|
||||
>
|
||||
ตรวจสอบคุณสมบัติกับ ก.พ.
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="store.step === 1"
|
||||
:href="externalLink"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
dense
|
||||
class="q-px-md"
|
||||
no-caps
|
||||
>
|
||||
ตรวจสอบคุณสมบัติกับ ก.พ.
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-pt-sm">
|
||||
<div class="q-col-gutter-md col-12 row">
|
||||
<div
|
||||
:class="
|
||||
store.step === 2 ||
|
||||
store.step === 4 ||
|
||||
store.step === 5 ||
|
||||
store.step === 6 ||
|
||||
store.step === 8 ||
|
||||
store.step === 9
|
||||
? 'col-12 row'
|
||||
: 'col-xs-12 col-sm-5 row'
|
||||
"
|
||||
>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 shadow-0"
|
||||
:style="
|
||||
$q.screen.lt.sm
|
||||
? ''
|
||||
: 'max-height: 60vh; overflow: scroll;'
|
||||
<div class="col-12 q-pt-sm">
|
||||
<div class="q-col-gutter-md col-12 row">
|
||||
<div
|
||||
:class="
|
||||
store.step === 2 ||
|
||||
store.step === 4 ||
|
||||
store.step === 5 ||
|
||||
store.step === 6 ||
|
||||
store.step === 8 ||
|
||||
store.step === 9
|
||||
? 'col-12 row'
|
||||
: 'col-xs-12 col-sm-5 row'
|
||||
"
|
||||
>
|
||||
<Step1
|
||||
v-if="store.step === 1"
|
||||
@update:spec="updateCheckSpec"
|
||||
:data="formDataStep1"
|
||||
:educations="formDetail?.educations"
|
||||
/>
|
||||
<Step2
|
||||
v-if="store.step === 2"
|
||||
@update:form="updateformCommand"
|
||||
/>
|
||||
<Step3
|
||||
v-if="store.step === 3"
|
||||
@update:file="updateFilePDF"
|
||||
/>
|
||||
<Step4 v-if="store.step === 4" />
|
||||
<Step5 v-if="store.step === 5" />
|
||||
<Step6
|
||||
v-if="store.step === 6"
|
||||
@update:form="updateformCommand"
|
||||
/>
|
||||
<Step7
|
||||
v-if="store.step === 7"
|
||||
@update:file="updateFilePDF"
|
||||
/>
|
||||
<Step8 v-if="store.step === 8" />
|
||||
<Step9 v-if="store.step === 9" />
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-12 col-sm-7"
|
||||
v-if="
|
||||
store.step === 1 || store.step === 3 || store.step === 7
|
||||
"
|
||||
>
|
||||
<div class="col-12">
|
||||
<ViewStep1
|
||||
v-if="store.step === 1"
|
||||
@update:formDeital="updateFormDetail"
|
||||
:data="formDataStep1"
|
||||
/>
|
||||
<ViewStep3
|
||||
v-if="store.step === 3 && pdfSrc"
|
||||
:pdfSrc="pdfSrc"
|
||||
:urlDownloadFile="urlDownloadFile"
|
||||
/>
|
||||
<ViewStep7
|
||||
v-if="store.step === 7 && pdfSrc"
|
||||
:pdfSrc="pdfSrc"
|
||||
:urlDownloadFile="urlDownloadFile"
|
||||
/>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 shadow-0"
|
||||
:style="
|
||||
$q.screen.lt.sm
|
||||
? ''
|
||||
: 'max-height: 60vh; overflow: scroll;'
|
||||
"
|
||||
>
|
||||
<Step1
|
||||
v-if="store.step === 1"
|
||||
@update:spec="updateCheckSpec"
|
||||
:data="formDataStep1"
|
||||
:educations="formDetail?.educations"
|
||||
/>
|
||||
<Step2
|
||||
v-if="store.step === 2"
|
||||
@update:form="updateformCommand"
|
||||
/>
|
||||
<Step3
|
||||
v-if="store.step === 3"
|
||||
@update:file="updateFilePDF"
|
||||
/>
|
||||
<Step4 v-if="store.step === 4" />
|
||||
<Step5 v-if="store.step === 5" />
|
||||
<Step6
|
||||
v-if="store.step === 6"
|
||||
@update:form="updateformCommand"
|
||||
/>
|
||||
<Step7
|
||||
v-if="store.step === 7"
|
||||
@update:file="updateFilePDF"
|
||||
/>
|
||||
<Step8 v-if="store.step === 8" />
|
||||
<Step9 v-if="store.step === 9" />
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-12 col-sm-7"
|
||||
v-if="
|
||||
store.step === 1 || store.step === 3 || store.step === 7
|
||||
"
|
||||
>
|
||||
<div class="col-12">
|
||||
<ViewStep1
|
||||
v-if="store.step === 1"
|
||||
@update:formDeital="updateFormDetail"
|
||||
:data="formDataStep1"
|
||||
/>
|
||||
<ViewStep3
|
||||
v-if="store.step === 3 && pdfSrc"
|
||||
:pdfSrc="pdfSrc"
|
||||
:urlDownloadFile="urlDownloadFile"
|
||||
/>
|
||||
<ViewStep7
|
||||
v-if="store.step === 7 && pdfSrc"
|
||||
:pdfSrc="pdfSrc"
|
||||
:urlDownloadFile="urlDownloadFile"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-actions
|
||||
class="q-pt-sm q-pa-none q-gutter-sm"
|
||||
align="right"
|
||||
>
|
||||
<q-btn
|
||||
v-if="
|
||||
store.step >= store.currentStep &&
|
||||
store.statusUpload === false &&
|
||||
store.step !== 3 &&
|
||||
store.step !== 4 &&
|
||||
store.step !== 5 &&
|
||||
store.step !== 7 &&
|
||||
store.step !== 8 &&
|
||||
store.step !== 9
|
||||
"
|
||||
unelevated
|
||||
:label="
|
||||
store.step === 2 || store.step === 6
|
||||
? 'บันทึกข้อมูล'
|
||||
: 'ดำเนินการต่อ'
|
||||
"
|
||||
color="public"
|
||||
type="submit"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-else-if="
|
||||
store.step >= store.currentStep &&
|
||||
(store.step == 3 || store.step == 7)
|
||||
"
|
||||
unelevated
|
||||
label="ยื่นเอกสาร"
|
||||
color="public"
|
||||
type="submit"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="
|
||||
store.step >= store.currentStep &&
|
||||
store.step == 2 &&
|
||||
store.statusUpload
|
||||
"
|
||||
unelevated
|
||||
label="ดำเนินการต่อ"
|
||||
color="public"
|
||||
type="submit"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="
|
||||
store.step >= store.currentStep &&
|
||||
store.step == 6 &&
|
||||
store.statusUpload
|
||||
"
|
||||
unelevated
|
||||
label="ดำเนินการต่อ"
|
||||
color="public"
|
||||
type="submit"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
<q-card-actions class="q-pt-sm q-pa-none q-gutter-sm" align="right">
|
||||
<q-btn
|
||||
v-if="
|
||||
store.step >= store.currentStep &&
|
||||
store.statusUpload === false &&
|
||||
store.step !== 3 &&
|
||||
store.step !== 4 &&
|
||||
store.step !== 5 &&
|
||||
store.step !== 7 &&
|
||||
store.step !== 8 &&
|
||||
store.step !== 9
|
||||
"
|
||||
unelevated
|
||||
:label="
|
||||
store.step === 2 || store.step === 6
|
||||
? 'บันทึกข้อมูล'
|
||||
: 'ดำเนินการต่อ'
|
||||
"
|
||||
color="public"
|
||||
@click="onCilckNextStep()"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-else-if="
|
||||
store.step >= store.currentStep &&
|
||||
(store.step == 3 || store.step == 7)
|
||||
"
|
||||
unelevated
|
||||
label="ยื่นเอกสาร"
|
||||
color="public"
|
||||
@click="onCilckNextStep()"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="
|
||||
store.step >= store.currentStep &&
|
||||
store.step == 2 &&
|
||||
store.statusUpload
|
||||
"
|
||||
unelevated
|
||||
label="ดำเนินการต่อ"
|
||||
color="public"
|
||||
@click="onCilckNextStep()"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="
|
||||
downloadFileRef &&
|
||||
store.step >= store.currentStep &&
|
||||
store.step == 6 &&
|
||||
store.statusUpload
|
||||
"
|
||||
unelevated
|
||||
label="ดำเนินการต่อ"
|
||||
color="public"
|
||||
@click="onCilckNextStep()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,26 +31,53 @@ const emit = defineEmits(["update:form"]);
|
|||
const formCommand = reactive<FormCommand>({
|
||||
commanderFullname: "",
|
||||
commanderPosition: "",
|
||||
commanderPositionOld: "",
|
||||
commanderOrg: "",
|
||||
commanderOrgOld: "",
|
||||
commanderAboveFullname: "",
|
||||
commanderAbovePosition: "",
|
||||
commanderAbovePositionOld: "",
|
||||
commanderAboveOrgOld: "",
|
||||
commanderAboveOrg: "",
|
||||
author: "",
|
||||
subject: "",
|
||||
subject: [""],
|
||||
assignedPosition: "",
|
||||
});
|
||||
|
||||
/** formRef */
|
||||
const commanderFullnameRef = ref<object | null>(null);
|
||||
const commanderPositionRef = ref<object | null>(null);
|
||||
const commanderAboveFullnameRef = ref<object | null>(null);
|
||||
const commanderAbovePositionRef = ref<object | null>(null);
|
||||
const fileEvaluation1Ref = ref<object | null>(null);
|
||||
const fileEvaluation2Ref = ref<object | null>(null);
|
||||
const fileEvaluation3Ref = ref<object | null>(null);
|
||||
const fileEvaluation4Ref = ref<object | null>(null);
|
||||
const fileEvaluation5Ref = ref<object | null>(null);
|
||||
const fileEvaluation6Ref = ref<object | null>(null);
|
||||
const performanceRef = ref<object | null>(null);
|
||||
const performanceOwnerRef = ref<object | null>(null);
|
||||
const formTemplates = ref<any[]>([
|
||||
{
|
||||
code: "EV1_005",
|
||||
templateName: "template-1",
|
||||
title: "แบบพิจารณาคุณสมบัติบุคคล",
|
||||
fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
{
|
||||
code: "EV1_006",
|
||||
templateName: "template-2",
|
||||
title: "แบบแสดงรายละเอียดการเสนอผลงาน",
|
||||
fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
{
|
||||
code: "EV1_008",
|
||||
templateName: "template-4",
|
||||
title: "แบบประเมินคุณลักษณะบุคคล",
|
||||
fileName: "4-แบบประเมินคุณลักษณะบุคคล",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
{
|
||||
code: "EV1_010",
|
||||
templateName: "template-6",
|
||||
title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
||||
fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* function updateFormref
|
||||
|
|
@ -58,39 +85,12 @@ const performanceOwnerRef = ref<object | null>(null);
|
|||
*/
|
||||
function updateInput(val: any) {
|
||||
const ref = {
|
||||
commanderFullnameRef: commanderFullnameRef.value,
|
||||
commanderPositionRef: commanderPositionRef.value,
|
||||
commanderAboveFullnameRef: commanderAboveFullnameRef.value,
|
||||
commanderAbovePositionRef: commanderAbovePositionRef.value,
|
||||
fileEvaluation1Ref: fileEvaluation1Ref.value,
|
||||
fileEvaluation2Ref: fileEvaluation2Ref.value,
|
||||
fileEvaluation3Ref: fileEvaluation3Ref.value,
|
||||
fileEvaluation4Ref: fileEvaluation4Ref.value,
|
||||
fileEvaluation5Ref: fileEvaluation5Ref.value,
|
||||
fileEvaluation6Ref: fileEvaluation6Ref.value,
|
||||
downloadFile: [
|
||||
downloadFile1.value,
|
||||
downloadFile2.value,
|
||||
downloadFile3.value,
|
||||
downloadFile4.value,
|
||||
downloadFile5.value,
|
||||
downloadFile6.value,
|
||||
],
|
||||
performance: performanceRef.value,
|
||||
performanceOwner: performanceOwnerRef.value,
|
||||
statusUpload: store.statusUpload,
|
||||
statusUpload: false,
|
||||
downloadFile: formTemplates.value.map((e) => e.downloadFile),
|
||||
};
|
||||
emit("update:form", val, ref); // ส่งข้อมูลไปอัปเดท
|
||||
}
|
||||
|
||||
/** ตัวแปร file*/
|
||||
const fileEvaluation1 = ref<File | null>();
|
||||
const fileEvaluation2 = ref<File | null>();
|
||||
const fileEvaluation3 = ref<File | null>();
|
||||
const fileEvaluation4 = ref<File | null>();
|
||||
const fileEvaluation5 = ref<File | null>();
|
||||
const fileEvaluation6 = ref<File | null>();
|
||||
|
||||
const modalView = ref<boolean>(false);
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
|
|
@ -123,13 +123,13 @@ async function onClickDowloadFile(
|
|||
fileName: string
|
||||
) {
|
||||
showLoader();
|
||||
|
||||
const body = {
|
||||
template: tp,
|
||||
reportName: templateName,
|
||||
data: profile.value,
|
||||
};
|
||||
await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
|
||||
hideLoader();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -170,10 +170,9 @@ async function fetchPathUpload(
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {
|
||||
// hideLoader();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -195,9 +194,6 @@ async function uploadfile(uploadUrl: string, file: any) {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -206,16 +202,20 @@ async function uploadfile(uploadUrl: string, file: any) {
|
|||
* @param id evaluate ID
|
||||
*/
|
||||
function fetcheSigner(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.evaluationSignerDoc1(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
|
||||
formCommand.commanderFullname = data.commanderFullname;
|
||||
formCommand.commanderPosition = data.commanderPosition;
|
||||
formCommand.commanderPositionOld = data.commanderPositionOld;
|
||||
formCommand.commanderOrg = data.commanderOrg;
|
||||
formCommand.commanderOrgOld = data.commanderOrgOld;
|
||||
formCommand.commanderAboveFullname = data.commanderAboveFullname;
|
||||
formCommand.commanderAbovePosition = data.commanderAbovePosition;
|
||||
formCommand.commanderAbovePositionOld = data.commanderAbovePositionOld;
|
||||
formCommand.commanderAboveOrgOld = data.commanderAboveOrgOld;
|
||||
formCommand.commanderAboveOrg = data.commanderAboveOrg;
|
||||
formCommand.author = data.author;
|
||||
formCommand.subject = data.subject;
|
||||
store.statusUpload = true;
|
||||
|
|
@ -223,11 +223,6 @@ function fetcheSigner(id: string) {
|
|||
.catch(() => {
|
||||
store.statusUpload = false;
|
||||
getCommander();
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -236,7 +231,6 @@ function fetcheSigner(id: string) {
|
|||
* @param id evaluate ID
|
||||
*/
|
||||
async function fetchCheckSpec(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.evaluationReportCheckspecByid(id))
|
||||
.then((res) => {
|
||||
|
|
@ -245,85 +239,31 @@ async function fetchCheckSpec(id: string) {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
const downloadFile1 = ref<string>("");
|
||||
const downloadFile2 = ref<string>("");
|
||||
const downloadFile3 = ref<string>("");
|
||||
const downloadFile4 = ref<string>("");
|
||||
const downloadFile5 = ref<string>("");
|
||||
const downloadFile6 = ref<string>("");
|
||||
|
||||
/**
|
||||
* function ดาวน์โหลดไฟล์
|
||||
* @param fileName ชื่อไฟล์
|
||||
*/
|
||||
async function downloadFile(fileName: string) {
|
||||
// showLoader();
|
||||
await http
|
||||
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
|
||||
.then((res) => {
|
||||
if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
|
||||
downloadFile1.value = res.data.downloadUrl;
|
||||
// fileEvaluation1.value = res.data.upload;
|
||||
} else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
|
||||
downloadFile2.value = res.data.downloadUrl;
|
||||
// fileEvaluation2.value = res.data.upload;
|
||||
} else if (
|
||||
fileName ===
|
||||
"3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
|
||||
) {
|
||||
downloadFile3.value = res.data.downloadUrl;
|
||||
// fileEvaluation3.value = res.data.upload;
|
||||
} else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
|
||||
downloadFile4.value = res.data.downloadUrl;
|
||||
// fileEvaluation4.value = res.data.upload;
|
||||
} else if (
|
||||
fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
|
||||
) {
|
||||
downloadFile5.value = res.data.downloadUrl;
|
||||
// fileEvaluation5.value = res.data.upload;
|
||||
} else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
|
||||
downloadFile6.value = res.data.downloadUrl;
|
||||
// fileEvaluation6.value = res.data.upload;
|
||||
const index = formTemplates.value.findIndex(
|
||||
(item) => item.fileName === fileName
|
||||
);
|
||||
if (index !== -1) {
|
||||
formTemplates.value[index].downloadFile = res.data.downloadUrl;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
const ref = {
|
||||
commanderFullnameRef: commanderFullnameRef.value,
|
||||
commanderPositionRef: commanderPositionRef.value,
|
||||
commanderAboveFullnameRef: commanderAboveFullnameRef.value,
|
||||
commanderAbovePositionRef: commanderAbovePositionRef.value,
|
||||
fileEvaluation1Ref: fileEvaluation1Ref.value,
|
||||
fileEvaluation2Ref: fileEvaluation2Ref.value,
|
||||
fileEvaluation3Ref: fileEvaluation3Ref.value,
|
||||
fileEvaluation4Ref: fileEvaluation4Ref.value,
|
||||
fileEvaluation5Ref: fileEvaluation5Ref.value,
|
||||
fileEvaluation6Ref: fileEvaluation6Ref.value,
|
||||
performance: performanceRef.value,
|
||||
performanceOwner: performanceOwnerRef.value,
|
||||
downloadFile: [
|
||||
downloadFile1.value,
|
||||
downloadFile2.value,
|
||||
downloadFile3.value,
|
||||
downloadFile4.value,
|
||||
downloadFile5.value,
|
||||
downloadFile6.value,
|
||||
],
|
||||
statusUpload: false,
|
||||
downloadFile: formTemplates.value.map((e) => e.downloadFile),
|
||||
};
|
||||
|
||||
emit("update:form", formCommand, ref);
|
||||
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -339,32 +279,24 @@ function getCommander() {
|
|||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
// messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
function onAddSubject() {
|
||||
formCommand.subject.push("");
|
||||
}
|
||||
|
||||
function onDeleteSubject(index: number) {
|
||||
formCommand.subject.splice(index, 1);
|
||||
}
|
||||
|
||||
/** callback function */
|
||||
watch(
|
||||
() => store.checkFileupload,
|
||||
() => {
|
||||
const fileEvaluationValues = [
|
||||
fileEvaluation1,
|
||||
fileEvaluation2,
|
||||
fileEvaluation3,
|
||||
fileEvaluation4,
|
||||
fileEvaluation5,
|
||||
fileEvaluation6,
|
||||
];
|
||||
const downloadFileValues = [
|
||||
downloadFile1,
|
||||
downloadFile2,
|
||||
downloadFile3,
|
||||
downloadFile4,
|
||||
downloadFile5,
|
||||
downloadFile6,
|
||||
];
|
||||
for (let i = 0; i < downloadFileValues.length; i++) {
|
||||
if (downloadFileValues[i].value === "") {
|
||||
fileEvaluationValues[i].value = null;
|
||||
for (let i = 0; i < formTemplates.value.length; i++) {
|
||||
if (formTemplates.value[i].downloadFile === "") {
|
||||
formTemplates.value[i].file = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -385,19 +317,29 @@ onMounted(async () => {
|
|||
if (user) {
|
||||
formCommand.author = user.name;
|
||||
}
|
||||
showLoader();
|
||||
await Promise.all([
|
||||
fetcheSigner(evaluateId.value),
|
||||
fetchCheckSpec(evaluateId.value),
|
||||
downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
|
||||
downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
|
||||
downloadFile(
|
||||
"3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
|
||||
),
|
||||
downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
|
||||
downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
|
||||
downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
|
||||
]);
|
||||
|
||||
try {
|
||||
showLoader();
|
||||
await Promise.all([
|
||||
fetcheSigner(evaluateId.value),
|
||||
fetchCheckSpec(evaluateId.value),
|
||||
formTemplates.value.forEach((e) => {
|
||||
downloadFile(e.fileName);
|
||||
}),
|
||||
// downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
|
||||
// downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
|
||||
// downloadFile(
|
||||
// "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
|
||||
// ),
|
||||
// downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
|
||||
// downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
|
||||
// downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
|
||||
]);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -412,32 +354,67 @@ onMounted(async () => {
|
|||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
ref="performanceRef"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
label="ชื่อผลงาน"
|
||||
v-model="formCommand.subject"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
ref="performanceOwnerRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.author"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="เจ้าของผลงาน"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.author"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="เจ้าของผลงาน"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-12"
|
||||
v-if="store.currentStep === 2 && !store.statusUpload"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="onAddSubject"
|
||||
>
|
||||
<q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div
|
||||
class="row col-12 q-col-gutter-sm"
|
||||
v-for="(item, index) in formCommand.subject"
|
||||
:key="index"
|
||||
>
|
||||
<div class="col-11">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อผลงาน"
|
||||
v-model="formCommand.subject[index]"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="row col-1 items-centet justify-center"
|
||||
v-if="index !== 0"
|
||||
>
|
||||
<q-btn
|
||||
v-if="store.currentStep === 2 && !store.statusUpload"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="delete"
|
||||
@click="onDeleteSubject(index)"
|
||||
>
|
||||
<q-tooltip>ลบ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -459,7 +436,6 @@ onMounted(async () => {
|
|||
<div class="row col-12 q-col-gutter-sm q-pa-sm">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
ref="commanderFullnameRef"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
|
|
@ -470,19 +446,55 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
ref="commanderPositionRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderPosition"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderPosition"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderOrg"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="สังกัด"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderPositionOld"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="ตำแหน่งเดิม"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderOrgOld"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="สังกัดเดิม"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -494,7 +506,6 @@ onMounted(async () => {
|
|||
<div class="row col-12 q-col-gutter-md q-pa-sm">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
ref="commanderAboveFullnameRef"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
|
|
@ -505,19 +516,55 @@ onMounted(async () => {
|
|||
@update:model-value="updateInput(formCommand)"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
ref="commanderAbovePositionRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAbovePosition"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAbovePosition"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAboveOrg"
|
||||
label="สังกัด"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAbovePositionOld"
|
||||
label="ตำแหน่งเดิม"
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 2 || store.statusUpload"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAboveOrgOld"
|
||||
label="สังกัดเดิม"
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -527,8 +574,97 @@ onMounted(async () => {
|
|||
|
||||
<!-- v-if="store.statusUpload -->
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div
|
||||
class="col-6"
|
||||
v-if="store.currentStep === 2"
|
||||
v-for="(item, index) in formTemplates"
|
||||
:key="index"
|
||||
>
|
||||
<q-card bordered class="cardSp1">
|
||||
<div
|
||||
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
|
||||
>
|
||||
<div>{{ item.title }}</div>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="download"
|
||||
color="indigo"
|
||||
@click="
|
||||
onClickDowloadFile(item.code, item.templateName, item.title)
|
||||
"
|
||||
>
|
||||
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="item.downloadFile != ''"
|
||||
:href="item.downloadFile"
|
||||
target="_blank"
|
||||
class="q-ml-sm"
|
||||
color="blue"
|
||||
flat
|
||||
dense
|
||||
icon="visibility"
|
||||
>
|
||||
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-pa-sm">
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<q-file
|
||||
v-model="item.file"
|
||||
:disable="!store.statusUpload"
|
||||
class="col-xs-12 col-sm-12"
|
||||
label="อัปโหลดไฟล์"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
accept=".pdf"
|
||||
:rules="
|
||||
item.downloadFile === ''
|
||||
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
|
||||
: []
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
:disable="!store.statusUpload"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="mdi-upload"
|
||||
@click="
|
||||
fetchPathUpload(
|
||||
'เล่ม 1',
|
||||
evaluateId,
|
||||
item.fileName,
|
||||
item.file
|
||||
)
|
||||
"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- แบบพิจารณาคุณสมบัติบุคคล -->
|
||||
<div class="col-6" v-if="store.currentStep === 2">
|
||||
<!-- <div class="col-6" v-if="store.currentStep === 2">
|
||||
<q-card bordered class="cardSp1">
|
||||
<div
|
||||
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
|
||||
|
|
@ -615,10 +751,10 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- แบบแสดงรายละเอียดการเสนอผลงาน -->
|
||||
<div class="col-6" v-if="store.currentStep === 2">
|
||||
<!-- <div class="col-6" v-if="store.currentStep === 2">
|
||||
<q-card bordered class="cardSp1">
|
||||
<div
|
||||
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
|
||||
|
|
@ -705,10 +841,10 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
|
||||
<div class="col-6" v-if="store.currentStep === 2">
|
||||
<!-- <div class="col-6" v-if="store.currentStep === 2">
|
||||
<q-card bordered class="cardSp1">
|
||||
<div
|
||||
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
|
||||
|
|
@ -795,10 +931,10 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
|
||||
<div class="col-6" v-if="store.currentStep === 2">
|
||||
<!-- <div class="col-6" v-if="store.currentStep === 2">
|
||||
<q-card bordered class="cardSp1">
|
||||
<div
|
||||
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
|
||||
|
|
@ -884,10 +1020,10 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- แบบประเมินคุณลักษณะบุคคล -->
|
||||
<div class="col-6" v-if="store.currentStep === 2">
|
||||
<!-- <div class="col-6" v-if="store.currentStep === 2">
|
||||
<q-card bordered class="cardSp1">
|
||||
<div
|
||||
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
|
||||
|
|
@ -972,10 +1108,10 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
|
||||
<div class="col-6" v-if="store.currentStep === 2">
|
||||
<!-- <div class="col-6" v-if="store.currentStep === 2">
|
||||
<q-card bordered class="cardSp1">
|
||||
<div
|
||||
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
|
||||
|
|
@ -1060,7 +1196,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,13 +22,23 @@ const evaluateId = ref<string>(route.params.id.toString());
|
|||
const emit = defineEmits(["update:file"]);
|
||||
|
||||
const selectedItem = ref(1);
|
||||
const fileName = ref([
|
||||
"1-แบบพิจารณาคุณสมบัติบุคคล",
|
||||
"2-แบบแสดงรายละเอียดการเสนอผลงาน",
|
||||
"3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
|
||||
"4-แบบประเมินคุณลักษณะบุคคล",
|
||||
"5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
|
||||
"6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
||||
const formTemplates = ref([
|
||||
{
|
||||
title: "แบบพิจารณาคุณสมบัติบุคคล",
|
||||
fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
|
||||
},
|
||||
{
|
||||
title: "แบบแสดงรายละเอียดการเสนอผลงาน",
|
||||
fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
|
||||
},
|
||||
{
|
||||
title: "แบบประเมินคุณลักษณะบุคคล",
|
||||
fileName: "4-แบบประเมินคุณลักษณะบุคคล",
|
||||
},
|
||||
{
|
||||
title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
||||
fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
|
|
@ -38,7 +48,7 @@ const fileName = ref([
|
|||
function handleItemClick(itemNumber: number) {
|
||||
store.tabPanels = itemNumber.toString();
|
||||
selectedItem.value = itemNumber;
|
||||
fetchDocument(fileName.value[itemNumber - 1]);
|
||||
fetchDocument(formTemplates.value[itemNumber - 1].fileName);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -50,14 +60,14 @@ async function fetchDocument(fileName: string) {
|
|||
evaluateId.value &&
|
||||
(await http
|
||||
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
|
||||
.then((res) => {
|
||||
downloadFile(res.data.downloadUrl);
|
||||
.then(async (res) => {
|
||||
await downloadFile(res.data.downloadUrl);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
showLoader();
|
||||
hideLoader();
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +76,6 @@ async function fetchDocument(fileName: string) {
|
|||
* @param url ลิงก์ดาวน์โหลดไฟล์
|
||||
*/
|
||||
async function downloadFile(url: string) {
|
||||
showLoader();
|
||||
await axios
|
||||
.get(url, {
|
||||
responseType: "blob",
|
||||
|
|
@ -81,84 +90,28 @@ async function downloadFile(url: string) {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** HooK lifecycle*/
|
||||
onMounted(async () => {
|
||||
await fetchDocument(fileName.value[selectedItem.value - 1]);
|
||||
await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-list separator>
|
||||
<q-item
|
||||
v-for="(item, index) in formTemplates"
|
||||
:key="index"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="selectedItem === 1 ? true : false"
|
||||
:active="selectedItem === index + 1 ? true : false"
|
||||
active-class="text-primary"
|
||||
@click="handleItemClick(1)"
|
||||
@click="handleItemClick(index + 1)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="selectedItem === 2 ? true : false"
|
||||
active-class="text-primary"
|
||||
@click="handleItemClick(2)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="selectedItem === 3 ? true : false"
|
||||
active-class="text-primary"
|
||||
@click="handleItemClick(3)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-item-section
|
||||
>แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
|
||||
(เอกสารแบบ ก)</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="selectedItem === 4 ? true : false"
|
||||
active-class="text-primary"
|
||||
@click="handleItemClick(4)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="selectedItem === 5 ? true : false"
|
||||
active-class="text-primary"
|
||||
@click="handleItemClick(5)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-item-section>
|
||||
แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="selectedItem === 6 ? true : false"
|
||||
active-class="text-primary"
|
||||
@click="handleItemClick(6)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
|
||||
<q-item-section>{{ item.title }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,215 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import axios from "axios";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const store = useEvaluateStore();
|
||||
const { showLoader, hideLoader, messageError, success } = useCounterMixin();
|
||||
|
||||
const formTemplates = ref<any[]>([
|
||||
{
|
||||
code: "EV1_005",
|
||||
templateName: "template-1",
|
||||
title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
|
||||
fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
{
|
||||
code: "EV1_006",
|
||||
templateName: "template-2",
|
||||
title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
|
||||
fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
{
|
||||
code: "EV1_008",
|
||||
templateName: "template-4",
|
||||
title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
|
||||
fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
{
|
||||
code: "EV1_010",
|
||||
templateName: "template-6",
|
||||
title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
|
||||
fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
|
||||
downloadFile: "",
|
||||
file: null,
|
||||
},
|
||||
]);
|
||||
|
||||
const evaluateId = ref<string>(route.params.id.toString());
|
||||
const status = ref<string>("WAIT_CHECK_DOC_V1");
|
||||
|
||||
const profile = ref<any>();
|
||||
const author = ref<string>("");
|
||||
const subject = ref<string>("");
|
||||
|
||||
/**
|
||||
* function
|
||||
* @param id evaluate ID
|
||||
*/
|
||||
async function fetchCheckSpec(id: string) {
|
||||
await http
|
||||
.get(config.API.evaluationReportCheckspecByid(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
profile.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fecth รายชื่อผู้เซ็นเอกสาร
|
||||
* @param id evaluate ID
|
||||
*/
|
||||
function fetcheSigner(id: string) {
|
||||
http
|
||||
.get(config.API.evaluationSignerDoc1(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
author.value = data.author;
|
||||
subject.value = data.subject;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* funcion ดาวน์โหลดไฟล์
|
||||
* @param tp templatname
|
||||
* @param templateName
|
||||
* @param fileName ชือ่ไฟล์
|
||||
*/
|
||||
async function onClickDowloadFile(
|
||||
tp: string,
|
||||
templateName: string,
|
||||
fileName: string
|
||||
) {
|
||||
showLoader();
|
||||
const body = {
|
||||
template: tp,
|
||||
reportName: templateName,
|
||||
data: profile.value,
|
||||
};
|
||||
await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
|
||||
hideLoader();
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ลิงก์อัปโหลดไฟล์
|
||||
* @param volume เล่ม
|
||||
* @param id evaluate ID
|
||||
* @param type ประเภทไฟล์
|
||||
* @param file ไฟล์
|
||||
*/
|
||||
async function fetchPathUpload(
|
||||
volume: string,
|
||||
id: string | undefined,
|
||||
type: string,
|
||||
file: any
|
||||
) {
|
||||
const body = {
|
||||
fileList: {
|
||||
fileName: type,
|
||||
metadata: {
|
||||
subject: subject.value,
|
||||
author: author.value,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
if (id && file) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.loadPathDocument(volume, id), body)
|
||||
.then(async (res) => {
|
||||
const foundKey: string | undefined = Object.keys(res.data).find(
|
||||
(key) =>
|
||||
res.data[key]?.fileName !== undefined &&
|
||||
res.data[key]?.fileName !== ""
|
||||
);
|
||||
foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
|
||||
await downloadFile(type);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* functoin อัปโหลดไฟล์
|
||||
* @param uploadUrl link อัปโหลด
|
||||
* @param file ไฟล์
|
||||
*/
|
||||
async function uploadfile(uploadUrl: string, file: any) {
|
||||
await axios
|
||||
.put(uploadUrl, file, {
|
||||
headers: {
|
||||
"Content-Type": file.type,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
success($q, "อัปโหลไฟล์สำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function ดาวน์โหลดไฟล์
|
||||
* @param fileName ชื่อไฟล์
|
||||
*/
|
||||
async function downloadFile(fileName: string) {
|
||||
await http
|
||||
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
|
||||
.then((res) => {
|
||||
const index = formTemplates.value.findIndex(
|
||||
(item) => item.fileName === fileName
|
||||
);
|
||||
if (index !== -1) {
|
||||
formTemplates.value[index].downloadFile = res.data.downloadUrl;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**lifecycle Hooks*/
|
||||
onMounted(async () => {
|
||||
try {
|
||||
showLoader();
|
||||
await Promise.all([
|
||||
fetcheSigner(evaluateId.value),
|
||||
fetchCheckSpec(evaluateId.value),
|
||||
formTemplates.value.forEach((e) => {
|
||||
downloadFile(e.fileName);
|
||||
}),
|
||||
]);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -15,6 +223,99 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
|
|||
style="font-size: 16px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-6" v-for="(item, index) in formTemplates" :key="index">
|
||||
<q-card
|
||||
bordered
|
||||
class="cardSp1"
|
||||
v-if="
|
||||
(store.currentStep !== 4 &&
|
||||
formTemplates.some((e) => e.downloadFile !== '')) ||
|
||||
store.currentStep == 4
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
|
||||
>
|
||||
<div>{{ item.title }}</div>
|
||||
<q-space />
|
||||
<!-- <div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="download"
|
||||
color="indigo"
|
||||
@click="
|
||||
onClickDowloadFile(item.code, item.templateName, item.title)
|
||||
"
|
||||
>
|
||||
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
|
||||
>
|
||||
</div> -->
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="item.downloadFile != ''"
|
||||
:href="item.downloadFile"
|
||||
target="_blank"
|
||||
class="q-ml-sm"
|
||||
color="blue"
|
||||
flat
|
||||
dense
|
||||
icon="visibility"
|
||||
>
|
||||
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row" v-if="store.currentStep === 4">
|
||||
<div class="col-12 q-pa-sm">
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<q-file
|
||||
v-model="item.file"
|
||||
class="col-xs-12 col-sm-12"
|
||||
label="อัปโหลดไฟล์"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
accept=".pdf"
|
||||
:rules="
|
||||
item.downloadFile === ''
|
||||
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
|
||||
: []
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
:disable="!item.file"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="mdi-upload"
|
||||
@click="
|
||||
fetchPathUpload(
|
||||
'เล่ม 1',
|
||||
evaluateId,
|
||||
item.fileName,
|
||||
item.file
|
||||
)
|
||||
"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -34,36 +34,25 @@ const fileEvaluation1 = ref<any>();
|
|||
const formCommand = reactive<FormCommand>({
|
||||
commanderFullname: "",
|
||||
commanderPosition: "",
|
||||
commanderPositionOld: "",
|
||||
commanderOrg: "",
|
||||
commanderOrgOld: "",
|
||||
commanderAboveFullname: "",
|
||||
commanderAbovePosition: "",
|
||||
commanderAbovePositionOld: "",
|
||||
commanderAboveOrgOld: "",
|
||||
commanderAboveOrg: "",
|
||||
author: "",
|
||||
subject: "",
|
||||
subject: [""],
|
||||
assignedPosition: "",
|
||||
});
|
||||
/** ref input*/
|
||||
const commanderFullnameRef = ref<object | null>(null);
|
||||
const commanderPositionRef = ref<object | null>(null);
|
||||
const commanderAboveFullnameRef = ref<object | null>(null);
|
||||
const commanderAbovePositionRef = ref<object | null>(null);
|
||||
const fileEvaluation1Ref = ref<object | null>(null);
|
||||
const performanceRef = ref<object | null>(null);
|
||||
const performanceOwnerRef = ref<object | null>(null);
|
||||
const assignedPositionRef = ref<object | null>(null);
|
||||
|
||||
const modalView = ref<boolean>(false);
|
||||
|
||||
/** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
|
||||
function updateInput(value: any) {
|
||||
const ref = {
|
||||
commanderFullnameRef: commanderFullnameRef.value,
|
||||
commanderPositionRef: commanderPositionRef.value,
|
||||
commanderAboveFullnameRef: commanderAboveFullnameRef.value,
|
||||
commanderAbovePositionRef: commanderAbovePositionRef.value,
|
||||
fileEvaluation1Ref: fileEvaluation1Ref.value,
|
||||
downloadFile: [downloadUrl.value],
|
||||
performance: performanceRef.value,
|
||||
performanceOwner: performanceOwnerRef.value,
|
||||
assignedPosition: assignedPositionRef.value,
|
||||
};
|
||||
emit("update:form", value, ref);
|
||||
}
|
||||
|
|
@ -146,17 +135,25 @@ async function fetcheSigner(id: string) {
|
|||
const data = res.data.result;
|
||||
formCommand.commanderFullname = data.commanderFullnameDoc2;
|
||||
formCommand.commanderPosition = data.commanderPositionDoc2;
|
||||
formCommand.commanderPositionOld = data.commanderPositionOldDoc2;
|
||||
formCommand.commanderOrg = data.commanderOrgDoc2;
|
||||
formCommand.commanderOrgOld = data.commanderOrgOldDoc2;
|
||||
formCommand.commanderAboveFullname = data.commanderAboveFullnameDoc2;
|
||||
formCommand.commanderAbovePosition = data.commanderAbovePositionDoc2;
|
||||
formCommand.commanderAbovePositionOld =
|
||||
data.commanderAbovePositionOldDoc2;
|
||||
formCommand.commanderAboveOrgOld = data.commanderAboveOrgOldDoc2;
|
||||
formCommand.commanderAboveOrg = data.commanderAboveOrgDoc2;
|
||||
formCommand.author = data.authorDoc2;
|
||||
formCommand.subject = data.subjectDoc2;
|
||||
formCommand.assignedPosition = data.assignedPosition;
|
||||
|
||||
store.statusUpload6 = data.commanderFullnameDoc2 === null ? false : true;
|
||||
store.statusUpload6 = data.isUpdated;
|
||||
})
|
||||
.catch(() => {
|
||||
store.statusUpload6 = false;
|
||||
getCommander();
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
// store.statusUpload6 = false;
|
||||
// getCommander();
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -181,28 +178,17 @@ async function fetchCheckDate() {
|
|||
|
||||
const downloadUrl = ref<string>("");
|
||||
/** function เช็คไฟล์อัปโหลด*/
|
||||
function checkDoc() {
|
||||
// showLoader();
|
||||
http
|
||||
async function checkDoc() {
|
||||
await http
|
||||
.get(
|
||||
config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
|
||||
)
|
||||
.then((res: any) => {
|
||||
downloadUrl.value = res.data.downloadUrl;
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
// hideLoader();
|
||||
const ref = {
|
||||
commanderFullnameRef: commanderFullnameRef.value,
|
||||
commanderPositionRef: commanderPositionRef.value,
|
||||
commanderAboveFullnameRef: commanderAboveFullnameRef.value,
|
||||
commanderAbovePositionRef: commanderAbovePositionRef.value,
|
||||
fileEvaluation1Ref: fileEvaluation1Ref.value,
|
||||
downloadFile: [downloadUrl.value],
|
||||
performance: performanceRef.value,
|
||||
performanceOwner: performanceOwnerRef.value,
|
||||
assignedPosition: assignedPositionRef.value,
|
||||
};
|
||||
|
||||
emit("update:form", formCommand, ref);
|
||||
|
|
@ -221,8 +207,15 @@ function getCommander() {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
});
|
||||
}
|
||||
|
||||
function onAddSubject() {
|
||||
formCommand.subject.push("");
|
||||
}
|
||||
|
||||
function onDeleteSubject(index: number) {
|
||||
formCommand.subject.splice(index, 1);
|
||||
}
|
||||
|
||||
watch(
|
||||
|
|
@ -273,27 +266,12 @@ onMounted(async () => {
|
|||
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<div class="row col-12 q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-12 q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6"
|
||||
ref="performanceRef"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
label="ชื่อผลงาน"
|
||||
v-model="formCommand.subject"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6"
|
||||
ref="performanceOwnerRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
:readonly="store.currentStep != 6 || store.statusUpload6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.author"
|
||||
|
|
@ -303,9 +281,10 @@ onMounted(async () => {
|
|||
:rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6"
|
||||
ref="assignedPositionRef"
|
||||
:readonly="store.currentStep != 6 || store.statusUpload6"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -314,12 +293,62 @@ onMounted(async () => {
|
|||
label="ตำแหน่งที่ได้รับ"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
|
||||
]"
|
||||
(val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-12"
|
||||
v-if="store.currentStep === 6 && !store.statusUpload6"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="onAddSubject"
|
||||
>
|
||||
<q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row col-12 q-col-gutter-sm"
|
||||
v-for="(item, index) in formCommand.subject"
|
||||
:key="index"
|
||||
>
|
||||
<div class="col-11">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6 || store.statusUpload6"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อผลงาน"
|
||||
v-model="formCommand.subject[index]"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="row col-1 items-centet justify-center"
|
||||
v-if="index !== 0"
|
||||
>
|
||||
<q-btn
|
||||
v-if="store.currentStep === 6 && !store.statusUpload6"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="delete"
|
||||
@click="onDeleteSubject(index)"
|
||||
>
|
||||
<q-tooltip>ลบ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -340,8 +369,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="row col-12 q-col-gutter-sm q-pa-sm">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6"
|
||||
ref="commanderFullnameRef"
|
||||
:readonly="store.currentStep != 6 || store.statusUpload6"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
|
|
@ -352,19 +380,63 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6"
|
||||
ref="commanderPositionRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderPosition"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderPosition"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderOrg"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="สังกัด"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderPositionOld"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="ตำแหน่งเดิม"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderOrgOld"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="สังกัดเดิม"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -376,8 +448,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="row col-12 q-col-gutter-sm q-pa-sm">
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6"
|
||||
ref="commanderAboveFullnameRef"
|
||||
:readonly="store.currentStep != 6 || store.statusUpload6"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
|
|
@ -388,19 +459,63 @@ onMounted(async () => {
|
|||
@update:model-value="updateInput(formCommand)"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="store.currentStep != 6"
|
||||
ref="commanderAbovePositionRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAbovePosition"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAbovePosition"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAboveOrg"
|
||||
label="สังกัด"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAbovePositionOld"
|
||||
label="ตำแหน่งเดิม"
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="
|
||||
store.currentStep != 6 || store.statusUpload6
|
||||
"
|
||||
class="col-xs-6 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.commanderAboveOrgOld"
|
||||
label="สังกัดเดิม"
|
||||
hide-bottom-space
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -434,7 +549,6 @@ onMounted(async () => {
|
|||
<div class="col-12">
|
||||
<q-file
|
||||
:disable="!store.statusUpload6"
|
||||
ref="fileEvaluation1Ref"
|
||||
v-model="fileEvaluation1"
|
||||
class="col-12"
|
||||
outlined
|
||||
|
|
|
|||
|
|
@ -35,11 +35,14 @@ async function fetchDocument() {
|
|||
"1-เอกสารเล่ม 2"
|
||||
)
|
||||
)
|
||||
.then((res) => {
|
||||
downloadFile(res.data.downloadUrl);
|
||||
.then(async (res) => {
|
||||
await downloadFile(res.data.downloadUrl);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -63,9 +66,6 @@ async function downloadFile(url: string) {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,20 +69,20 @@ async function fetchPathUpload(
|
|||
showLoader();
|
||||
await http
|
||||
.post(config.API.loadPathDocument(volume, id), body)
|
||||
.then((res) => {
|
||||
.then(async (res) => {
|
||||
const foundKey: string | undefined = Object.keys(res.data).find(
|
||||
(key) =>
|
||||
res.data[key]?.fileName !== undefined &&
|
||||
res.data[key]?.fileName !== ""
|
||||
);
|
||||
foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
|
||||
foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
// .finally(() => {
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,16 +103,12 @@ async function uploadfile(uploadUrl: string, file: any) {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const downloadUrl = ref<string>("");
|
||||
/** function เช็คไฟล์อัปโหลด*/
|
||||
function checkDoc() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.loadFileDocument(
|
||||
|
|
@ -123,12 +119,6 @@ function checkDoc() {
|
|||
)
|
||||
.then((res: any) => {
|
||||
downloadUrl.value = res.data.downloadUrl;
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -141,7 +131,6 @@ const assignedPosition = ref<string>("");
|
|||
* @param id ประเมิน
|
||||
*/
|
||||
async function fetcheSigner(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.evaluationSignerDoc2(id))
|
||||
.then((res) => {
|
||||
|
|
@ -151,16 +140,21 @@ async function fetcheSigner(id: string) {
|
|||
assignedPosition.value = data.assignedPosition;
|
||||
evaluationResult.value = data.evaluationResult;
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/** lifecycleHook*/
|
||||
onMounted(async () => {
|
||||
await checkDoc();
|
||||
await fetcheSigner(evaluateId.value);
|
||||
try {
|
||||
showLoader();
|
||||
await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -178,7 +172,12 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div
|
||||
class="col-12"
|
||||
v-if="
|
||||
(store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
|
||||
"
|
||||
>
|
||||
<q-card class="shadow-0" bordered>
|
||||
<div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
|
||||
<div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const row = ref<any>();
|
||||
const row = ref<any[]>([]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลประวัติการประเมิน
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
div
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted } from "vue";
|
||||
import { reactive, onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
|
|
@ -7,6 +8,7 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
|
||||
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
|
|
@ -16,10 +18,12 @@ import type {
|
|||
|
||||
/** importComponents*/
|
||||
import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
|
||||
import HeaderDialog from "@/components/DialogHeader.vue";
|
||||
|
||||
/** use*/
|
||||
const mixin = useCounterMixin();
|
||||
const store = useEvaluateDetailStore();
|
||||
const storeEva = useEvaluateStore();
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
|
||||
|
|
@ -28,7 +32,7 @@ const {
|
|||
columnsCertificates,
|
||||
columnSalaries,
|
||||
columnTraining,
|
||||
columnProjectsProposed,
|
||||
columnExperience,
|
||||
columnAssessments,
|
||||
} = store;
|
||||
|
||||
|
|
@ -58,21 +62,23 @@ const formDetail = reactive<any>({
|
|||
month: 0,
|
||||
day: 0,
|
||||
},
|
||||
posExecutive: "",
|
||||
positionArea: "",
|
||||
educations: [] as EducationForm[],
|
||||
certificates: [],
|
||||
salaries: [],
|
||||
trainings: [],
|
||||
assessments: [],
|
||||
experience: [],
|
||||
honor: [],
|
||||
});
|
||||
|
||||
/** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
|
||||
async function fetchDetail() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.positionBykeycloak())
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
formDetail.root = data.root;
|
||||
formDetail.rootId = data.rootId;
|
||||
formDetail.userId = data.id;
|
||||
|
|
@ -88,58 +94,67 @@ async function fetchDetail() {
|
|||
formDetail.birthDate = data.birthDate;
|
||||
// formDetail.govAge = data.govAge; // ยังไม่มี
|
||||
formDetail.salary = data.salary;
|
||||
|
||||
http.get(config.API.dataUserEducations).then((res) => {
|
||||
formDetail.educations = res.data.result;
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserCertificate("certificate")).then((res) => {
|
||||
formDetail.certificates = res.data.result.map(
|
||||
(e: CertificatesForm) => ({
|
||||
certificateNo: e.certificateNo,
|
||||
certificateType: e.certificateType,
|
||||
expireDate: e.expireDate,
|
||||
issueDate: e.issueDate,
|
||||
issuer: e.issuer,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserSalary).then((res) => {
|
||||
formDetail.salaries = res.data.result;
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserCertificate("training")).then((res) => {
|
||||
formDetail.trainings = res.data.result.map((e: any) => ({
|
||||
dateOrder: e.dateOrder,
|
||||
department: e.department,
|
||||
duration: e.duration,
|
||||
endDate: e.endDate,
|
||||
name: e.name,
|
||||
numberOrder: e.numberOrder,
|
||||
place: e.place,
|
||||
startDate: e.startDate,
|
||||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}));
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserAssessments).then((res) => {
|
||||
formDetail.assessments = res.data.result;
|
||||
});
|
||||
formDetail.posExecutive = data.posExecutive;
|
||||
formDetail.positionArea = data.positionArea;
|
||||
await fetchDataAllDetail();
|
||||
|
||||
emit("update:formDeital", formDetail);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 2500);
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchDataAllDetail() {
|
||||
// ดึงข้อมูลประวัติการศึกษา
|
||||
http.get(config.API.dataUserEducations).then((res) => {
|
||||
formDetail.educations = res.data.result;
|
||||
});
|
||||
|
||||
// ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
|
||||
http.get(config.API.dataUserCertificate("certificate")).then((res) => {
|
||||
formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
|
||||
certificateNo: e.certificateNo,
|
||||
certificateType: e.certificateType,
|
||||
expireDate: e.expireDate,
|
||||
issueDate: e.issueDate,
|
||||
issuer: e.issuer,
|
||||
}));
|
||||
});
|
||||
|
||||
// ดึงข้อมูลประวัติการรับราชการ
|
||||
http.get(config.API.dataUserSalary).then((res) => {
|
||||
formDetail.salaries = res.data.result;
|
||||
});
|
||||
|
||||
// ดึงข้อมูลประวัติการฝึกอบรมดูงาน
|
||||
http.get(config.API.dataUserCertificate("training")).then((res) => {
|
||||
formDetail.trainings = res.data.result.map((e: any) => ({
|
||||
dateOrder: e.dateOrder,
|
||||
department: e.department,
|
||||
duration: e.duration,
|
||||
endDate: e.endDate,
|
||||
name: e.name,
|
||||
numberOrder: e.numberOrder,
|
||||
place: e.place,
|
||||
startDate: e.startDate,
|
||||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}));
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserPerformance).then((res) => {
|
||||
formDetail.assessments = res.data.result.map((e: any) => ({
|
||||
...e,
|
||||
isAdd: false,
|
||||
}));
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserPortfolio).then((res) => {
|
||||
formDetail.experience = res.data.result;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetchData ตรวจสอบคุณสมบัติ
|
||||
* @param id ประเมิน
|
||||
|
|
@ -164,27 +179,7 @@ async function fetchCheckSpec(data: any) {
|
|||
issueDate: date2Thai(e.issueDate),
|
||||
issuer: e.issuer,
|
||||
}));
|
||||
formDetail.salaries = data.salaries
|
||||
// .map((e: any) => ({
|
||||
// amount: e.amount,
|
||||
// date: e.date,
|
||||
// mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
|
||||
// posNo: e.posNo,
|
||||
// position: e.position,
|
||||
// positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
|
||||
// refCommandDate: e.refCommandDate ? e.refCommandDate : "",
|
||||
// salaryClass: e.salaryClass ? e.salaryClass : "",
|
||||
// salaryRef: e.salaryRef ? e.salaryRef : "",
|
||||
// salaryStatus: e.salaryStatus ? e.salariesStatus : "",
|
||||
// //
|
||||
// oc: "-",
|
||||
// lineWork: "-",
|
||||
// side: "-",
|
||||
// positionType: "-",
|
||||
// level: "-",
|
||||
// positionsAdministrative: "-",
|
||||
// aspectAdministrative: "-",
|
||||
// }));
|
||||
formDetail.salaries = data.salaries;
|
||||
formDetail.trainings = data.trainings.map((e: any) => ({
|
||||
dateOrder: date2Thai(e.dateOrder),
|
||||
department: e.department,
|
||||
|
|
@ -197,7 +192,8 @@ async function fetchCheckSpec(data: any) {
|
|||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}));
|
||||
formDetail.assessments = data.assessments;
|
||||
formDetail.assessments = data.performances;
|
||||
formDetail.experience = data.portfolios;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -214,7 +210,6 @@ function formattedNumber(x: number) {
|
|||
|
||||
/** get data */
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserGovernment)
|
||||
.then(async (res) => {
|
||||
|
|
@ -226,28 +221,94 @@ function getData() {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 2500);
|
||||
});
|
||||
}
|
||||
|
||||
/** ผลงานที่เคยเสนอขอ*/
|
||||
const modalPerformance = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const isIndex = ref<number>();
|
||||
const formPerformance = reactive<any>({
|
||||
year: null,
|
||||
type: "",
|
||||
subject: "",
|
||||
evaluationResult: "",
|
||||
});
|
||||
const typeOptions = ref<string[]>([
|
||||
"ประเมินชำนาญการ",
|
||||
"ประเมินชำนาญการพิเศษ",
|
||||
"ประเมินเชี่ยวชาญ",
|
||||
]);
|
||||
|
||||
const resultOptions = ref<any[]>([
|
||||
{ label: "ผ่าน", value: "ผ่าน" },
|
||||
{ label: "ไม่ผ่าน", value: "ไม่ผ่าน" },
|
||||
]);
|
||||
|
||||
function onOpenDialogPerformance(
|
||||
stetusEdit: boolean = false,
|
||||
index: number | null = null
|
||||
) {
|
||||
if (stetusEdit && index) {
|
||||
isIndex.value = index;
|
||||
const data = formDetail.assessments[index];
|
||||
formPerformance.year = data.year ? Number(data.year) - 543 : null;
|
||||
formPerformance.type = data.type;
|
||||
formPerformance.subject = data.subject;
|
||||
formPerformance.evaluationResult = data.evaluationResult;
|
||||
}
|
||||
isEdit.value = stetusEdit;
|
||||
modalPerformance.value = true;
|
||||
}
|
||||
|
||||
function onCloseDialogPerformance() {
|
||||
modalPerformance.value = false;
|
||||
formPerformance.year = null;
|
||||
formPerformance.type = "";
|
||||
formPerformance.subject = "";
|
||||
formPerformance.evaluationResult = "";
|
||||
}
|
||||
|
||||
function onSubmitPerformance() {
|
||||
const body = {
|
||||
...formPerformance,
|
||||
year: formPerformance.year ? Number(formPerformance.year) + 543 : null,
|
||||
isAdd: true,
|
||||
};
|
||||
|
||||
if (isEdit.value && isIndex.value) {
|
||||
formDetail.assessments[isIndex.value] = body;
|
||||
} else {
|
||||
formDetail.assessments.push(body);
|
||||
}
|
||||
onCloseDialogPerformance();
|
||||
}
|
||||
|
||||
function onDeletePerformance(index: number) {
|
||||
formDetail.assessments.splice(index, 1);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const promises = [];
|
||||
try {
|
||||
showLoader();
|
||||
const promises = [];
|
||||
|
||||
if (route.name === "evaluate-add") {
|
||||
promises.push(fetchDetail());
|
||||
if (route.name === "evaluate-add") {
|
||||
promises.push(fetchDetail());
|
||||
}
|
||||
|
||||
if (props.data) {
|
||||
promises.push(fetchCheckSpec(props.data));
|
||||
}
|
||||
|
||||
promises.push(getData());
|
||||
|
||||
await Promise.all(promises);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
|
||||
if (props.data) {
|
||||
promises.push(fetchCheckSpec(props.data));
|
||||
}
|
||||
|
||||
promises.push(getData());
|
||||
|
||||
await Promise.all(promises);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -556,7 +617,6 @@ onMounted(async () => {
|
|||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<!-- <TableData :columns="columnSalaries" :row="formDetail.salaries" /> -->
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
|
|
@ -577,24 +637,187 @@ onMounted(async () => {
|
|||
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 q-pa-sm">-</div>
|
||||
<TableData
|
||||
class="col-12"
|
||||
:columns="columnExperience"
|
||||
:row="formDetail.experience"
|
||||
/>
|
||||
</q-card>
|
||||
|
||||
<q-card class="col-12 cardSp1" bordered>
|
||||
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
||||
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
|
||||
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี) </span>
|
||||
<q-btn
|
||||
v-if="storeEva.currentStep === 1"
|
||||
class="q-ml-sm"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click.stop="onOpenDialogPerformance(false)"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 q-pa-sm">-</div>
|
||||
<!-- <div class="col-10">
|
||||
<TableData
|
||||
:columns="columnAssessments"
|
||||
:row="formDetail.assessments"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-10">
|
||||
<div class="q-pa-sm row col-12">
|
||||
<d-table
|
||||
flat
|
||||
bordered
|
||||
:columns="columnAssessments"
|
||||
:rows="formDetail.assessments"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
virtual-scroll
|
||||
class="row col-12"
|
||||
:style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props" class="bg-grey-2">
|
||||
<q-th auto-widt v-if="storeEva.currentStep === 1" />
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span class="text-body2 text-black">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td auto-widt v-if="storeEva.currentStep === 1">
|
||||
<q-btn
|
||||
v-if="props.row.isAdd"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="edit"
|
||||
icon="edit"
|
||||
@Click.stop.prevent="
|
||||
onOpenDialogPerformance(true, props.rowIndex)
|
||||
"
|
||||
>
|
||||
<q-tooltip>แก้ไข</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-if="props.row.isAdd"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="red"
|
||||
icon="delete"
|
||||
@click.stop.pervent="onDeletePerformance(props.rowIndex)"
|
||||
>
|
||||
<q-tooltip>ลบ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div>
|
||||
{{ !col.value ? "-" : col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modalPerformance" persistent>
|
||||
<q-card style="min-width: 35%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitPerformance">
|
||||
<HeaderDialog
|
||||
:tittle="'ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)'"
|
||||
:close="onCloseDialogPerformance"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formPerformance.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
!formPerformance.year
|
||||
? null
|
||||
: Number(formPerformance.year) + 543
|
||||
"
|
||||
:label="`${'ปี พ.ศ.'}`"
|
||||
:rules="[(val:string) => !!val || 'กรุณาเลือกปี พ.ศ.']"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
label="ระดับตอนที่ยืนขอ"
|
||||
hide-bottom-space
|
||||
v-model="formPerformance.type"
|
||||
:options="typeOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formPerformance.subject"
|
||||
label="เรื่อง/ชื่อเรื่อง"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-option-group
|
||||
:options="resultOptions"
|
||||
type="radio"
|
||||
v-model="formPerformance.evaluationResult"
|
||||
inline
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="public" type="submit" />
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -38,10 +38,16 @@ interface FormSpec {
|
|||
interface FormCommand {
|
||||
commanderFullname: string;
|
||||
commanderPosition: string;
|
||||
commanderPositionOld: string;
|
||||
commanderOrgOld: string;
|
||||
commanderOrg: string;
|
||||
commanderAboveFullname: string;
|
||||
commanderAbovePosition: string;
|
||||
commanderAbovePositionOld: string;
|
||||
commanderAboveOrgOld: string;
|
||||
commanderAboveOrg: string;
|
||||
author: string;
|
||||
subject: string;
|
||||
subject: string[];
|
||||
assignedPosition: string;
|
||||
}
|
||||
|
||||
|
|
@ -134,5 +140,5 @@ export type {
|
|||
ListMenu,
|
||||
FormRef,
|
||||
FormData,
|
||||
FormCommandSe
|
||||
FormCommandSe,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
|
|||
const mixin = useCounterMixin();
|
||||
const { date2Thai, findOrgNameHtml, findOrgName } = mixin;
|
||||
|
||||
//ใบอนุญาตประกอบวิชาชีพ
|
||||
const columnsCertificates = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "certificateType",
|
||||
|
|
@ -57,6 +58,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
|
|||
},
|
||||
]);
|
||||
|
||||
//ประวัติการรับราชการ
|
||||
const columnSalaries = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "commandDateAffect",
|
||||
|
|
@ -237,6 +239,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
|
|||
},
|
||||
]);
|
||||
|
||||
//ประวัติการฝึกอบรมดูงาน
|
||||
const columnTraining = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
|
|
@ -354,97 +357,65 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
|
|||
},
|
||||
]);
|
||||
|
||||
/** ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)*/
|
||||
//ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)
|
||||
const columnAssessments = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "date",
|
||||
name: "year",
|
||||
align: "left",
|
||||
label: "วันที่ได้รับ",
|
||||
label: "ปี พ.ศ.",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
},
|
||||
{
|
||||
name: "point1Total",
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ส่วนที่1 (น้ำหนัก)",
|
||||
label: "ระดับตอนที่ยื่นขอ",
|
||||
sortable: true,
|
||||
field: "point1Total",
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point1",
|
||||
name: "subject",
|
||||
align: "left",
|
||||
label: "ผลประเมินส่วนที่1 (คะแนน)",
|
||||
label: "เรื่อง/ชื่อเรื่อง",
|
||||
sortable: true,
|
||||
field: "point1",
|
||||
field: "subject",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point2Total",
|
||||
name: "evaluationResult",
|
||||
align: "left",
|
||||
label: "ส่วนที่2 (น้ำหนัก)",
|
||||
label: "ผลการประเมิน (ผ่าน/ไม่ผ่าน)",
|
||||
sortable: true,
|
||||
field: "point2Total",
|
||||
field: "evaluationResult",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point2",
|
||||
align: "left",
|
||||
label: "ผลประเมินส่วนที่2 (คะแนน)",
|
||||
sortable: true,
|
||||
field: "point2",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "pointSumTotal",
|
||||
align: "left",
|
||||
label: "ผลรวม (น้ำหนัก)",
|
||||
sortable: true,
|
||||
field: "pointSumTotal",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "pointSum",
|
||||
align: "left",
|
||||
label: "ผลประเมินรวม (คะแนน)",
|
||||
sortable: true,
|
||||
field: "pointSum",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
//ประสบการณ์ในการปฏิบัติงาน
|
||||
const columnExperience = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผลประเมิน",
|
||||
label: "ชื่อผลงาน",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
format(val, row) {
|
||||
return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "รายละเอียดผลงาน",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
@ -473,6 +444,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
|
|||
columnSalaries,
|
||||
columnTraining,
|
||||
columnProjectsProposed,
|
||||
columnExperience,
|
||||
columnAssessments,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ interface FormsSholarship {
|
|||
totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
|
||||
planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
|
||||
isNoUseBudget: boolean; //
|
||||
budgetSourceOther: string; //
|
||||
}
|
||||
|
||||
interface DataSholarship {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -41,8 +41,12 @@ const scholarshipTypeOp = ref<DataOptions[]>([
|
|||
name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
|
||||
},
|
||||
{
|
||||
id: "RESEARCH",
|
||||
name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
|
||||
id: "STUDY",
|
||||
name: "ทุนการศึกษา ณ ต่างประเทศ",
|
||||
},
|
||||
{
|
||||
id: "TRAINING",
|
||||
name: "ทุนฝึกอบรม ณ ต่างประเทศ",
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
@ -144,8 +148,10 @@ function convertType(val: string) {
|
|||
return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
|
||||
case "EXECUTIVE":
|
||||
return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
|
||||
case "RESEARCH":
|
||||
return "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ";
|
||||
case "STUDY":
|
||||
return "ทุนการศึกษา ณ ต่างประเทศ";
|
||||
case "TRAINING":
|
||||
return "ทุนฝึกอบรม ณ ต่างประเทศ";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
|
|||
"ขอแก้ไขข้อมูลประวัติการฝึกอบรม",
|
||||
"ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
|
||||
"ขอแก้ไขที่อยู่ปัจจุบัน",
|
||||
"ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
|
||||
]);
|
||||
const optionStatus = ref<DataOption[]>([
|
||||
{ id: "", name: "ทั้งหมด" },
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ export const useDataStore = defineStore("dataMain", () => {
|
|||
const storeRegistry = useRegistryInFormationStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, showLoader, hideLoader, findPosMasterNo,findOrgName } = mixin;
|
||||
const { messageError, showLoader, hideLoader, findPosMasterNo, findOrgName } =
|
||||
mixin;
|
||||
// ref() คือการประกาศ state เหมือน vuex
|
||||
const formData = reactive<ProfileData>({
|
||||
profileId: "",
|
||||
|
|
@ -26,7 +27,7 @@ export const useDataStore = defineStore("dataMain", () => {
|
|||
posTypeName: "",
|
||||
posLevelName: "",
|
||||
salary: null,
|
||||
birthDate: '',
|
||||
birthDate: "",
|
||||
posNo: "",
|
||||
org: "",
|
||||
dateStart: "",
|
||||
|
|
@ -100,7 +101,6 @@ export const useDataStore = defineStore("dataMain", () => {
|
|||
async function getData(dataPerson: any) {
|
||||
const data = await dataPerson;
|
||||
isProbation.value = data.isProbation;
|
||||
|
||||
formData.profileId = data.profileId;
|
||||
formData.rank = data.rank;
|
||||
formData.prefix = data.prefix;
|
||||
|
|
@ -112,7 +112,12 @@ export const useDataStore = defineStore("dataMain", () => {
|
|||
formData.birthDate = data.birthDate;
|
||||
formData.posTypeName = data.posTypeName;
|
||||
formData.posExecutiveName = data.posExecutiveName;
|
||||
formData.posLevelName = data.posLevelName;
|
||||
formData.posLevelName =
|
||||
data.profileType === "EMPLOYEE"
|
||||
? data.posTypeShortName
|
||||
? `${data.posTypeShortName} ${data.posLevelName}`
|
||||
: `${data.posLevelName}`
|
||||
: data.posLevelName;
|
||||
formData.dateStart = data.dateStart;
|
||||
formData.dateRetireLaw = data.dateRetireLaw;
|
||||
formData.posNo = findPosMasterNo(data);
|
||||
|
|
|
|||
|
|
@ -1096,7 +1096,7 @@ export const useCounterMixin = defineStore("mixin", () => {
|
|||
? obj.child1ShortName
|
||||
: obj.rootShortName != null
|
||||
? obj.rootShortName
|
||||
: "") + (obj.posMasterNo != null ? obj.posMasterNo : "");
|
||||
: "") + (obj.posMasterNo != null ? ` ${obj.posMasterNo}` : "");
|
||||
return shortName == "" ? "-" : shortName;
|
||||
} else {
|
||||
return "";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue