เพิ่ม api รายการลา || หน้ารายการลา

This commit is contained in:
AnandaTon 2023-12-14 16:23:32 +07:00
parent 2fe53dd931
commit b29fe788b7
4 changed files with 893 additions and 864 deletions

View file

@ -1,247 +1,241 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { ref, reactive, watch } from "vue"
import { useQuasar } from "quasar"
import http from "@/plugins/http"
import config from "@/app.config"
/** import type*/
import type {
FremDetail,
FormDelete,
FormDeleteRef,
} from "@/modules/05_leave/interface/response/leave";
import type { FremDetail, FormDelete, FormDeleteRef, FromCancelDetail } from "@/modules/05_leave/interface/response/leave"
/** import componest*/
import FormLeave from "@/modules/05_leave/components/formDetail/formLeave.vue";
import FormChildbirth from "@/modules/05_leave/components/formDetail/formChildbirth.vue";
import FormHoliday from "@/modules/05_leave/components/formDetail/formHoliday.vue";
import FormUpasom from "@/modules/05_leave/components/formDetail/formUpasom.vue";
import FormHajj from "@/modules/05_leave/components/formDetail/formHajj.vue";
import FormCheckSelect from "@/modules/05_leave/components/formDetail/formCheckSelect.vue";
import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue";
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue";
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue";
import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue";
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue";
import FormLeave from "@/modules/05_leave/components/formDetail/formLeave.vue"
import FormChildbirth from "@/modules/05_leave/components/formDetail/formChildbirth.vue"
import FormHoliday from "@/modules/05_leave/components/formDetail/formHoliday.vue"
import FormUpasom from "@/modules/05_leave/components/formDetail/formUpasom.vue"
import FormHajj from "@/modules/05_leave/components/formDetail/formHajj.vue"
import FormCheckSelect from "@/modules/05_leave/components/formDetail/formCheckSelect.vue"
import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue"
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue"
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue"
import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue"
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue"
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
/** import stort*/
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
date2Thai,
success,
dialogConfirm,
} = mixin;
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
const $q = useQuasar();
const dataStore = useLeaveStore()
const { convertStatud } = dataStore
const mixin = useCounterMixin()
const { showLoader, hideLoader, messageError, date2Thai, success, dialogConfirm } = mixin
const $q = useQuasar()
const props = defineProps({
modal: {
type: Boolean,
require: true,
},
leaveId: {
type: String,
require: true,
},
onClickClose: {
type: Function,
require: true,
},
leaveType: {
type: Object,
require: true,
},
leaveStatus: {
type: String,
require: true,
},
fetchDataTable: {
type: Function,
require: true,
},
});
modal: {
type: Boolean,
require: true,
},
leaveId: {
type: String,
require: true,
},
onClickClose: {
type: Function,
require: true,
},
leaveType: {
type: Object,
require: true,
},
leaveStatus: {
type: String,
require: true,
},
fetchDataTable: {
type: Function,
require: true,
},
})
const titleMain = ref<string>("รายละเอียดการลาของ");
const titleName = ref<string>("");
const titleMain = ref<string>("รายละเอียดการลาของ")
const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ")
const titleName = ref<string>("")
/**checkForm Form การลา*/
const checkForm = ref<string>("");
const checkForm = ref<string>("")
/** Form รายละเอียดข้อมูล*/
const formData = reactive<FremDetail>({
id: "", //Id
leaveTypeName: "", // Name
leaveTypeId: "", //Id
fullname: "", //
dateSendLeave: new Date(), //
status: "", //
leaveDateStart: new Date(), //
leaveDateEnd: new Date(), //
leaveCount: 0, //
leaveWrote: "", //
leaveAddress: "", //
leaveNumber: "", //
leaveDetail: "", //
leaveDocument: "", //
leaveDraftDocument: "", //
leaveLastStart: new Date(), // ( )(Auto)
leaveLastEnd: new Date(), // ( )(Auto)
leaveTotal: 0, //(Auto)
leavebirthDate: new Date(), //(Auto)
leavegovernmentDate: new Date(), //(Auto)
leaveSalary: 0, //(Auto)
leaveSalaryText: "", //()
leaveTypeDay: "", //
wifeDayName: "", //()
wifeDayDateBorn: new Date(), //()
restDayOldTotal: 0, // ()(Auto)
restDayCurrentTotal: 0, //()(Auto)
ordainDayStatus: "", /// () ()
ordainDayLocationName: "", // ()
ordainDayLocationAddress: "", // ()
ordainDayLocationNumber: "", // ()
ordainDayOrdination: new Date(), // ()
ordainDayBuddhistLentName: "", // ()
ordainDayBuddhistLentAddress: "", // ()
hajjDayStatus: "", /// () ()
absentDaySummon: "", // ()
absentDayLocation: "", // ()
absentDayRegistorDate: new Date(), // ()
absentDayGetIn: "", // ()
absentDayAt: "", // ()
studyDaySubject: "", // ( )
studyDayDegreeLevel: "", // ( )
studyDayUniversityName: "", // ( )
studyDayTrainingSubject: "", // / ( )
studyDayTrainingName: "", // ( )
studyDayCountry: "", // ( )
studyDayScholarship: "", // ( )
coupleDayName: "", // ()
coupleDayPosition: "", // ()
coupleDayLevel: "", // ()
coupleDayLevelCountry: "", // ()
coupleDayCountryHistory: "", // ()
coupleDayTotalHistory: "", // ()
coupleDayStartDateHistory: new Date(), // ()
coupleDayEndDateHistory: new Date(), // ()
coupleDaySumTotalHistory: "", // ()
approveStep: "",
dear: "",
});
id: "", //Id
leaveTypeName: "", // Name
leaveTypeId: "", //Id
fullname: "", //
dateSendLeave: new Date(), //
status: "", //
leaveDateStart: new Date(), //
leaveDateEnd: new Date(), //
leaveCount: 0, //
leaveWrote: "", //
leaveAddress: "", //
leaveNumber: "", //
leaveDetail: "", //
leaveDocument: "", //
leaveDraftDocument: "", //
leaveLastStart: new Date(), // ( )(Auto)
leaveLastEnd: new Date(), // ( )(Auto)
leaveTotal: 0, //(Auto)
leavebirthDate: new Date(), //(Auto)
leavegovernmentDate: new Date(), //(Auto)
leaveSalary: 0, //(Auto)
leaveSalaryText: "", //()
leaveTypeDay: "", //
wifeDayName: "", //()
wifeDayDateBorn: new Date(), //()
restDayOldTotal: 0, // ()(Auto)
restDayCurrentTotal: 0, //()(Auto)
ordainDayStatus: "", /// () ()
ordainDayLocationName: "", // ()
ordainDayLocationAddress: "", // ()
ordainDayLocationNumber: "", // ()
ordainDayOrdination: new Date(), // ()
ordainDayBuddhistLentName: "", // ()
ordainDayBuddhistLentAddress: "", // ()
hajjDayStatus: "", /// () ()
absentDaySummon: "", // ()
absentDayLocation: "", // ()
absentDayRegistorDate: new Date(), // ()
absentDayGetIn: "", // ()
absentDayAt: "", // ()
studyDaySubject: "", // ( )
studyDayDegreeLevel: "", // ( )
studyDayUniversityName: "", // ( )
studyDayTrainingSubject: "", // / ( )
studyDayTrainingName: "", // ( )
studyDayCountry: "", // ( )
studyDayScholarship: "", // ( )
coupleDayName: "", // ()
coupleDayPosition: "", // ()
coupleDayLevel: "", // ()
coupleDayLevelCountry: "", // ()
coupleDayCountryHistory: "", // ()
coupleDayTotalHistory: "", // ()
coupleDayStartDateHistory: new Date(), // ()
coupleDayEndDateHistory: new Date(), // ()
coupleDaySumTotalHistory: "", // ()
approveStep: "",
dear: "",
})
/** Form รายละเอียดข้อมูล*/
const formDataCancle = reactive<FromCancelDetail>({
id: "",
leaveTypeName: "",
fullname: "",
status: "",
leaveDocDelete: "",
leaveResonDelete: "",
leaveWrote: "",
leaveAddress: "",
leaveNumber: "",
leaveDetail: "",
leaveTotal: 0,
leaveStartDate: new Date(),
leaveEndDate: new Date(),
})
/** form ขอยกเลิก*/
const formDelete = reactive<FormDelete>({
writeAt: "",
reason: "",
doc: null,
});
writeAt: "",
reason: "",
doc: null,
})
/**Validate ข้อมูล */
const writeAtRef = ref<Object | null>(null);
const reasonRef = ref<Object | null>(null);
const docRef = ref<Object | null>(null);
const writeAtRef = ref<Object | null>(null)
const reasonRef = ref<Object | null>(null)
const docRef = ref<Object | null>(null)
const formDeleteRef: FormDeleteRef = {
writeAt: writeAtRef,
reason: reasonRef,
doc: docRef,
};
writeAt: writeAtRef,
reason: reasonRef,
doc: docRef,
}
/**
* function เรยกขอมลการลา
* @param id การลา
*/
async function fetchDataDetail(id: string) {
showLoader();
await http
.get(config.API.leaveUserId(id), {})
.then((res) => {
const data = res.data.result;
titleName.value = data.fullName ?? "-";
formData.id = data.id ?? "-";
formData.leaveTypeName = data.leaveTypeName ?? "-";
formData.leaveTypeId = data.leaveTypeId ?? "-";
formData.fullname = data.fullName ?? "-";
formData.dateSendLeave =
data.dateSendLeave && date2Thai(data.dateSendLeave);
formData.status = data.status ?? "-";
formData.leaveDateStart =
data.leaveStartDate && date2Thai(data.leaveStartDate);
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
formData.leaveCount = data.leaveTotal ?? "-";
formData.leaveWrote = data.leaveWrote ?? "-";
formData.leaveAddress = data.leaveAddress ?? "-";
formData.leaveNumber = data.leaveNumber ?? "-";
formData.leaveDetail = data.leaveDetail ?? "-";
formData.leaveDocument = data.leaveDocument;
formData.leaveDraftDocument = data.leaveDraftDocument;
formData.leaveLastStart =
data.leaveLastStart && date2Thai(data.leaveLastStart);
formData.leaveLastEnd =
data.leaveLastStart && date2Thai(data.leaveLastEnd);
formData.leaveTotal = data.leaveTotal;
formData.leavebirthDate =
data.leavebirthDate && date2Thai(data.leavebirthDate);
formData.leavegovernmentDate =
data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
formData.leaveSalary = data.leaveSalary ?? "-";
formData.leaveSalaryText = data.leaveSalaryText ?? "-";
formData.wifeDayName = data.wifeDayName ?? "-";
formData.wifeDayDateBorn =
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
formData.restDayOldTotal = data.restDayOldTotal ?? "-";
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
formData.ordainDayOrdination =
data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
formData.ordainDayBuddhistLentName =
data.ordainDayBuddhistLentName ?? "-";
formData.ordainDayBuddhistLentAddress =
data.ordainDayBuddhistLentAddress ?? "-";
formData.hajjDayStatus = data.hajjDayStatus
? "เคย"
: "ไม่เคยไปประกอบพิธีฮัจญ์";
formData.absentDaySummon = data.absentDaySummon ?? "-";
formData.absentDayLocation = data.absentDayLocation ?? "-";
formData.absentDayRegistorDate =
data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
formData.absentDayGetIn = data.absentDayGetIn ?? "-";
formData.absentDayAt = data.absentDayAt ?? "-";
formData.studyDaySubject = data.studyDaySubject ?? "-";
formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
formData.studyDayTrainingSubject =
data.studyDayTrainingSubject ?? "-" ?? "-";
formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
formData.studyDayCountry = data.studyDayCountry ?? "-";
formData.studyDayScholarship = data.studyDayScholarship ?? "-";
formData.coupleDayName = data.coupleDayName ?? "-";
formData.coupleDayPosition = data.coupleDayPosition ?? "-";
formData.coupleDayLevel = data.coupleDayLevel ?? "-";
formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
formData.coupleDayStartDateHistory =
data.coupleDayStartDateHistory &&
date2Thai(data.coupleDayStartDateHistory);
formData.coupleDayEndDateHistory =
data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
formData.approveStep = data.approveStep ?? "-";
formData.dear = data.dear ?? "-";
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
})
.catch((err) => {
props.onClickClose?.();
messageError($q, err);
})
.finally(() => {
hideLoader();
});
showLoader()
await http
.get(config.API.leaveUserId(id), {})
.then(res => {
const data = res.data.result
titleName.value = data.fullName ?? "-"
formData.id = data.id ?? "-"
formData.leaveTypeName = data.leaveTypeName ?? "-"
formData.leaveTypeId = data.leaveTypeId ?? "-"
formData.fullname = data.fullName ?? "-"
formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave)
formData.status = data.status ?? "-"
formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate)
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
formData.leaveCount = data.leaveTotal ?? "-"
formData.leaveWrote = data.leaveWrote ?? "-"
formData.leaveAddress = data.leaveAddress ?? "-"
formData.leaveNumber = data.leaveNumber ?? "-"
formData.leaveDetail = data.leaveDetail ?? "-"
formData.leaveDocument = data.leaveDocument
formData.leaveDraftDocument = data.leaveDraftDocument
formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart)
formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd)
formData.leaveTotal = data.leaveTotal
formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
formData.leaveSalary = data.leaveSalary ?? "-"
formData.leaveSalaryText = data.leaveSalaryText ?? "-"
formData.wifeDayName = data.wifeDayName ?? "-"
formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn)
formData.restDayOldTotal = data.restDayOldTotal ?? "-"
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-"
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช"
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-"
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-"
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-"
formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination)
formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-"
formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-"
formData.hajjDayStatus = data.hajjDayStatus ? "เคย" : "ไม่เคยไปประกอบพิธีฮัจญ์"
formData.absentDaySummon = data.absentDaySummon ?? "-"
formData.absentDayLocation = data.absentDayLocation ?? "-"
formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate)
formData.absentDayGetIn = data.absentDayGetIn ?? "-"
formData.absentDayAt = data.absentDayAt ?? "-"
formData.studyDaySubject = data.studyDaySubject ?? "-"
formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-"
formData.studyDayUniversityName = data.studyDayUniversityName ?? "-"
formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-"
formData.studyDayTrainingName = data.studyDayTrainingName ?? "-"
formData.studyDayCountry = data.studyDayCountry ?? "-"
formData.studyDayScholarship = data.studyDayScholarship ?? "-"
formData.coupleDayName = data.coupleDayName ?? "-"
formData.coupleDayPosition = data.coupleDayPosition ?? "-"
formData.coupleDayLevel = data.coupleDayLevel ?? "-"
formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-"
formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-"
formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-"
formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory && date2Thai(data.coupleDayStartDateHistory)
formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory)
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
formData.approveStep = data.approveStep ?? "-"
formData.dear = data.dear ?? "-"
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
})
.catch(err => {
props.onClickClose?.()
messageError($q, err)
})
.finally(() => {
hideLoader()
})
}
/**
@ -250,33 +244,33 @@ async function fetchDataDetail(id: string) {
* @param leaveTypeName ประเภทการลา
*/
function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
if (props.leaveType) {
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
const type = filtertype.code;
if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
checkForm.value = "FormLeave";
} else if (type === "LV-004") {
checkForm.value = "FormChildbirth";
} else if (type === "LV-005") {
checkForm.value = "FormHoliday";
} else if (type === "LV-006") {
checkForm.value = "FormUpasom";
} else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
checkForm.value = "FormHajj";
} else if (type === "LV-007") {
checkForm.value = "FormCheckSelect";
} else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
checkForm.value = "FormStudy";
} else if (type === "LV-008") {
checkForm.value = "FormLeaveToTraining";
} else if (type === "LV-009") {
checkForm.value = "FormLeaveToWorkInternational";
} else if (type === "LV-010") {
checkForm.value = "FormSpouse";
} else if (type === "LV-011") {
checkForm.value = "FormVocationalRehabilitation";
}
}
if (props.leaveType) {
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId)
const type = filtertype.code
if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
checkForm.value = "FormLeave"
} else if (type === "LV-004") {
checkForm.value = "FormChildbirth"
} else if (type === "LV-005") {
checkForm.value = "FormHoliday"
} else if (type === "LV-006") {
checkForm.value = "FormUpasom"
} else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
checkForm.value = "FormHajj"
} else if (type === "LV-007") {
checkForm.value = "FormCheckSelect"
} else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
checkForm.value = "FormStudy"
} else if (type === "LV-008") {
checkForm.value = "FormLeaveToTraining"
} else if (type === "LV-009") {
checkForm.value = "FormLeaveToWorkInternational"
} else if (type === "LV-010") {
checkForm.value = "FormSpouse"
} else if (type === "LV-011") {
checkForm.value = "FormVocationalRehabilitation"
}
}
}
/**
@ -284,221 +278,198 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
* @param id ยกเลกการลา
*/
async function fetchDataCancelDetail(id: string) {
showLoader();
await http
.get(config.API.leaveCancelById(id))
.then((res) => {
console.log(res);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
showLoader()
await http
.get(config.API.leaveCancelById(id))
.then(res => {
const data = res.data.result
formDataCancle.leaveTypeName = data.leaveTypeName ?? "-"
formDataCancle.leaveWrote = data.leaveWrote ?? "-"
formDataCancle.fullname = data.fullName ?? "-"
formDataCancle.status = convertStatud(data.status) ?? "-"
formDataCancle.leaveStartDate = data.leaveStartDate && date2Thai(data.leaveStartDate)
formDataCancle.leaveEndDate = data.leaveEndDate && date2Thai(data.leaveEndDate)
formDataCancle.leaveTotal = data.leaveTotal ?? "-"
formDataCancle.leaveAddress = data.leaveAddress ?? "-"
formDataCancle.leaveNumber = data.leaveNumber ?? "-"
formDataCancle.leaveResonDelete = data.leaveResonDelete ?? "-"
formDataCancle.leaveDetail = data.leaveDetail ?? "-"
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null
console.log(res)
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
hideLoader()
})
}
/** function ยินยันการบันทึกข้อมูล*/
async function onClickSave() {
const hasError = [];
for (const key in formDeleteRef) {
if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
const property = formDeleteRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm(
$q,
() => {
onSubmit();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
} else {
console.log(hasError);
}
const hasError = []
for (const key in formDeleteRef) {
if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
const property = formDeleteRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
dialogConfirm(
$q,
() => {
onSubmit()
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
)
} else {
console.log(hasError)
}
}
/** function บันทึกข้อมูล*/
async function onSubmit() {
showLoader();
const id = props.leaveId ? props.leaveId : "";
const formData = new FormData();
formData.append("leaveWrote", formDelete.writeAt);
formData.append("reason", formDelete.reason);
formData.append("doc", formDelete.doc);
await http
.post(config.API.leaveCancelById(id), formData)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
props.fetchDataTable?.();
hideLoader();
});
showLoader()
const id = props.leaveId ? props.leaveId : ""
const formData = new FormData()
formData.append("leaveWrote", formDelete.writeAt)
formData.append("reason", formDelete.reason)
formData.append("doc", formDelete.doc)
await http
.post(config.API.leaveCancelById(id), formData)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ")
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
props.fetchDataTable?.()
hideLoader()
})
}
watch(
() => props.modal,
() => {
if (props.modal === true) {
formDelete.writeAt = "";
formDelete.reason = "";
formDelete.doc = null;
() => props.modal,
() => {
if (props.modal === true) {
formDelete.writeAt = ""
formDelete.reason = ""
formDelete.doc = null
props.leaveStatus === "DELETE"
? props.leaveId && fetchDataCancelDetail(props.leaveId)
: props.leaveId && fetchDataDetail(props.leaveId);
}
}
);
props.leaveStatus === "DELETE" ? props.leaveId && fetchDataCancelDetail(props.leaveId) : props.leaveId && fetchDataDetail(props.leaveId)
}
}
)
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card q-card style="min-width: 70%">
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
@click="props.onClickClose"
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row q-gutter-y-md">
<div
flat
:class="
props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
"
>
<div class="col-12 q-col-gutter-sm row items-center"></div>
<!-- ลาปวย ลาคลอดบตร และลากจสวนต -->
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
<q-dialog v-model="props.modal" persistent>
<q-card q-card style="min-width: 70%" v-if="props.leaveStatus != 'DELETE'">
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
<q-space />
<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row q-gutter-y-md">
<div flat :class="props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'">
<div class="col-12 q-col-gutter-sm row items-center"></div>
<!-- ลาปวย ลาคลอดบตร และลากจสวนต -->
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
<!-- ลาไปชวยเหลอภรยาทคลอดบตร -->
<FormChildbirth
v-else-if="checkForm === 'FormChildbirth'"
:data="formData"
/>
<!-- ลาไปชวยเหลอภรยาทคลอดบตร -->
<FormChildbirth v-else-if="checkForm === 'FormChildbirth'" :data="formData" />
<!-- ลาพกผอน -->
<FormHoliday
v-else-if="checkForm === 'FormHoliday'"
:data="formData"
/>
<!-- ลาพกผอน -->
<FormHoliday v-else-if="checkForm === 'FormHoliday'" :data="formData" />
<!-- ลาอปสมบท -->
<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
<!-- ลาอปสมบท -->
<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
<!-- ลาประกอบพจญ -->
<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
<!-- ลาประกอบพจญ -->
<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
<!-- ลาเขารบการตรวจเลอกหรอเขารบการเตรยมพล -->
<FormCheckSelect
v-else-if="checkForm === 'FormCheckSelect'"
:data="formData"
/>
<!-- ลาเขารบการตรวจเลอกหรอเขารบการเตรยมพล -->
<FormCheckSelect v-else-if="checkForm === 'FormCheckSelect'" :data="formData" />
<!-- ลาไปศกษา -->
<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
<!-- ลาไปศกษา -->
<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
<!-- ลาไปฝกอบรม ปฏการว หรอดงาน -->
<FormLeaveToTraining
v-else-if="checkForm === 'FormLeaveToTraining'"
:data="formData"
/>
<!-- ลาไปฝกอบรม ปฏการว หรอดงาน -->
<FormLeaveToTraining v-else-if="checkForm === 'FormLeaveToTraining'" :data="formData" />
<!-- ลาไปปฏงานในองคการระหวางประเทศ -->
<FormLeaveToWorkInternational
v-else-if="checkForm === 'FormLeaveToWorkInternational'"
:data="formData"
/>
<!-- ลาไปปฏงานในองคการระหวางประเทศ -->
<FormLeaveToWorkInternational v-else-if="checkForm === 'FormLeaveToWorkInternational'" :data="formData" />
<!-- ลาตดตามคสมรส -->
<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
<!-- ลาตดตามคสมรส -->
<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
<!-- ลาไปฟนฟสมรรถภาพดานอาช -->
<FormVocationalRehabilitation
v-else-if="checkForm === 'FormVocationalRehabilitation'"
:data="formData"
/>
</div>
<!-- ลาไปฟนฟสมรรถภาพดานอาช -->
<FormVocationalRehabilitation v-else-if="checkForm === 'FormVocationalRehabilitation'" :data="formData" />
</div>
<div
flat
class="col-xs-6 col-sm-6"
v-if="props.leaveStatus === 'CANCEL'"
>
<q-card-section>
<q-input
ref="writeAtRef"
v-model="formDelete.writeAt"
label="เขียนที่"
:rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
lazy-rules
outlined
dense
/>
<q-input
ref="reasonRef"
v-model="formDelete.reason"
type="textarea"
label="กรอกเหตุผล"
:rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
lazy-rules
class="q-mt-md"
outlined
dense
/>
<q-file
ref="docRef"
outlined
v-model="formDelete.doc"
label="เลือกไฟล์เอกสารหลักฐาน"
:rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
lazy-rules
class="q-mt-md"
use-chips
dense
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</q-card-section>
</div>
</q-card-section>
<q-separator />
<q-card-section
class="row items-center q-pa-sm"
v-if="props.leaveStatus === 'CANCEL'"
>
<q-space />
<q-btn
label="ยืนยัน"
unelevated
color="secondary"
dense
class="q-px-md"
@click="onClickSave"
/>
</q-card-section>
</q-card>
</q-dialog>
<div flat class="col-xs-6 col-sm-6" v-if="props.leaveStatus === 'CANCEL'">
<q-card-section>
<q-input ref="writeAtRef" v-model="formDelete.writeAt" label="เขียนที่" :rules="[val => !!val || 'กรุณากรอกเขียนที่']" lazy-rules outlined dense />
<q-input
ref="reasonRef"
v-model="formDelete.reason"
type="textarea"
label="กรอกเหตุผล"
:rules="[val => !!val || 'กรูณากรอกเหตุผล']"
lazy-rules
class="q-mt-md"
outlined
dense
/>
<q-file
ref="docRef"
outlined
v-model="formDelete.doc"
label="เลือกไฟล์เอกสารหลักฐาน"
:rules="[val => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
lazy-rules
class="q-mt-md"
use-chips
dense
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</q-card-section>
</div>
</q-card-section>
<q-separator />
<q-card-section class="row items-center q-pa-sm" v-if="props.leaveStatus === 'CANCEL'">
<q-space />
<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" @click="onClickSave" />
</q-card-section>
</q-card>
<q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">{{ titleMainCancle }}{{ titleName }}</div>
<q-space />
<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row q-gutter-y-md">
<div flat class="col-12">
<div class="col-12 q-col-gutter-sm row items-center"></div>
<!-- FormCancel -->
<FormCancel :data="formDataCancle" />
</div>
</q-card-section>
<q-separator />
</q-card>
</q-dialog>
</template>
<style scoped></style>

View file

@ -0,0 +1,68 @@
<script setup lang="ts">
const props = defineProps({
data: {
type: Object,
required: true,
},
})
</script>
<template>
<q-card-section>
<div class="q-pa-md q-gutter-md">
<div class="row">
<div class="col text-grey-8">เขยนท</div>
<div class="col">{{ props.data.leaveWrote }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ประเภทการลา</div>
<div class="col">{{ props.data.leaveTypeName }}</div>
</div>
<div class="row">
<div class="col text-grey-8">-นามสก</div>
<div class="col">{{ props.data.fullname }}</div>
</div>
<div class="row">
<div class="col text-grey-8">สถานะการของลา</div>
<div class="col">{{ props.data.status }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาตงแตนท</div>
<div class="col">{{ props.data.leaveStartDate }}</div>
</div>
<div class="row">
<div class="col text-grey-8">ลาถงวนท</div>
<div class="col">{{ props.data.leaveEndDate }}</div>
</div>
<div class="row">
<div class="col text-grey-8">จำนวนวนทลา</div>
<div class="col">{{ props.data.leaveTotal }}</div>
</div>
<div class="row">
<div class="col text-grey-8">สถานทดตอขณะลา</div>
<div class="col">{{ props.data.leaveAddress }}</div>
</div>
<div class="row">
<div class="col text-grey-8">หมายเลขทดตอขณะลา</div>
<div class="col">{{ props.data.leaveNumber }}</div>
</div>
<div class="row">
<div class="col text-grey-8">เหตผลการยกเลกการลา</div>
<div class="col">{{ props.data.leaveResonDelete }}</div>
</div>
<div class="row">
<div class="col text-grey-8">รายละเอยดการลา</div>
<div class="col">{{ props.data.leaveDetail }}</div>
</div>
<div class="row">
<div class="col text-grey-8">เอกสารการยกเลกการลา</div>
<div class="col" v-if="props.data.leaveDocDelete">
<q-btn :href="props.data.leaveDocDelete" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn>
</div>
<div class="col" v-else>-</div>
</div>
</div>
</q-card-section>
</template>
<style scoped></style>