hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

แก้ไขการแสดงผลการลา

Browse source
This commit is contained in:
AnandaTon 2024-01-08 14:00:57 +07:00
parent 0cb80ca91d
commit 14217fd9af
6 changed files with 656 additions and 787 deletions
Download patch file Download diff file Expand all files Collapse all files

879
src/modules/05_leave/components/DialogDetail.vue
View file

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

96
src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
View file

@ -1,54 +1,52 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); })
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col">{{ props.data.leaveDetail }}</div> <div class="col">{{ props.data.leaveDetail }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารประกอบ</div>
<div class="col" v-if="props.data.leaveDocument"> <div class="col" v-if="props.data.leaveDocument">
<q-btn <q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
:href="props.data.leaveDocument" </div>
target="_blank" <div class="col" v-else>-</div>
outline </div>
color="blue" <div class="row">
label="ดาวน์โหลด" <div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
size="12px" <div class="col" v-if="props.data.leaveDraftDocument">
> <q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn </div>
> <div class="col" v-else>-</div>
</div> </div>
<div class="col" v-else>-</div> </div>
</div> </q-card-section>
</div>
</q-card-section>
</template> </template>

189
src/modules/05_leave/components/formDetail/formSpouse.vue
View file

@ -1,105 +1,94 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); })
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">{{ props.data.leaveCount }}</div> <div class="col">{{ props.data.leaveCount }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div> <div class="col text-grey-8">วันเดือนปีเกิด</div>
<div class="col">{{ props.data.leavebirthDate }}</div> <div class="col">{{ props.data.leavebirthDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div> <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
<div class="col">{{ props.data.leavegovernmentDate }}</div> <div class="col">{{ props.data.leavegovernmentDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div> <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
<div class="col"> <div class="col">{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})</div>
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }}) </div>
</div> <div class="row">
</div> <div class="col text-grey-8">ชื่อคู่สมรส</div>
<div class="row"> <div class="col">{{ props.data.coupleDayName }}</div>
<div class="col text-grey-8">ชื่อคู่สมรส</div> </div>
<div class="col">{{ props.data.coupleDayName }}</div> <div class="row">
</div> <div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
<div class="row"> <div class="col">{{ props.data.coupleDayPosition }}</div>
<div class="col text-grey-8">ตำแหน่งคู่สมรส</div> </div>
<div class="col">{{ props.data.coupleDayPosition }}</div> <div class="row">
</div> <div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
<div class="row"> <div class="col">{{ props.data.coupleDayLevelCountry }}</div>
<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div> </div>
<div class="col">{{ props.data.coupleDayLevelCountry }}</div> <div class="row">
</div> <div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
<div class="row"> </div>
<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div> <div class="row q-mt-xs">
</div> <div class="col text-grey-8">
<div class="row q-mt-xs"> <div class="q-ml-md" style="list-style-type: circle">
<div class="col text-grey-8"> <li>ประเทศ</li>
<div class="q-ml-md" style="list-style-type: circle"> <li>จำนวนวัน</li>
<li>ประเทศ</li> <li>ตั้งแต่วันที่</li>
<li>จำนวนวัน</li> <li>ถึงวันที่</li>
<li>ตั้งแต่วันที่</li> <li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
<li>ถึงวันที่</li> </div>
<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li> </div>
</div> <div class="col">
</div> <div>{{ props.data.coupleDayCountryHistory }}</div>
<div class="col"> <div>{{ props.data.coupleDayTotalHistory }}</div>
<div>{{ props.data.coupleDayCountryHistory }}</div> <div>{{ props.data.coupleDayStartDateHistory }}</div>
<div>{{ props.data.coupleDayTotalHistory }}</div> <div>{{ props.data.coupleDayEndDateHistory }}</div>
<div>{{ props.data.coupleDayStartDateHistory }}</div> <div>{{ props.data.coupleDaySumTotalHistory }}</div>
<div>{{ props.data.coupleDayEndDateHistory }}</div> </div>
<div>{{ props.data.coupleDaySumTotalHistory }}</div> </div>
</div> <div class="row">
</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="row"> <div class="col">{{ props.data.leaveDetail }}</div>
<div class="col text-grey-8">รายละเอียด</div> </div>
<div class="col">{{ props.data.leaveDetail }}</div> <div class="row">
</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="row"> <div class="col" v-if="props.data.leaveDocument">
<div class="col text-grey-8">เอกสารแนบ</div> <q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
<div class="col" v-if="props.data.leaveDocument"> </div>
<q-btn <div class="col" v-else>-</div>
:href="props.data.leaveDocument" </div>
target="_blank" </div>
outline </q-card-section>
color="blue"
label="ดาวน์โหลด"
size="12px"
>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
</div>
<div class="col" v-else>-</div>
</div>
</div>
</q-card-section>
</template> </template>

179
src/modules/05_leave/components/formDetail/formStudy.vue
View file

@ -1,103 +1,92 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); })
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col">{{ props.data.leaveCount }}</div> <div class="col">{{ props.data.leaveCount }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div> <div class="col text-grey-8">วันเดือนปีเกิด</div>
<div class="col">{{ props.data.leavebirthDate }}</div> <div class="col">{{ props.data.leavebirthDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div> <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
<div class="col">{{ props.data.leavegovernmentDate }}</div> <div class="col">{{ props.data.leavegovernmentDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div> <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
<div class="col"> <div class="col">{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})</div>
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }}) </div>
</div> <div class="row">
</div> <div class="col text-grey-8">ศึกษาวิชา</div>
<div class="row"> <div class="col">{{ props.data.studyDaySubject }}</div>
<div class="col text-grey-8">ศึกษาวิชา</div> </div>
<div class="col">{{ props.data.studyDaySubject }}</div> <div class="row">
</div> <div class="col text-grey-8">ขั้นปริญญา</div>
<div class="row"> <div class="col">{{ props.data.studyDayDegreeLevel }}</div>
<div class="col text-grey-8">ขั้นปริญญา</div> </div>
<div class="col">{{ props.data.studyDayDegreeLevel }}</div> <div class="row">
</div> <div class="col text-grey-8">ชื่อสถานศึกษา</div>
<div class="row"> <div class="col">{{ props.data.studyDayUniversityName }}</div>
<div class="col text-grey-8">ชื่อสถานศึกษา</div> </div>
<div class="col">{{ props.data.studyDayUniversityName }}</div> <div class="row">
</div> <div class="col text-grey-8">ประเทศ</div>
<div class="row"> <div class="col">{{ props.data.studyDayCountry }}</div>
<div class="col text-grey-8">ประเทศ</div> </div>
<div class="col">{{ props.data.studyDayCountry }}</div> <div class="row">
</div> <div class="col text-grey-8">ด้วยทุน</div>
<div class="row"> <div class="col">{{ props.data.studyDayScholarship }}</div>
<div class="col text-grey-8">ด้วยทุน</div> </div>
<div class="col">{{ props.data.studyDayScholarship }}</div> <div class="row">
</div> <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
<div class="row"> <div class="col">{{ props.data.leaveNumber }}</div>
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div> </div>
<div class="col">{{ props.data.leaveNumber }}</div> <div class="row">
</div> <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
<div class="row"> <div class="col">{{ props.data.leaveAddress }}</div>
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div> </div>
<div class="col">{{ props.data.leaveAddress }}</div> <div class="row">
</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="row"> <div class="col">{{ props.data.leaveDetail }}</div>
<div class="col text-grey-8">รายละเอียด</div> </div>
<div class="col">{{ props.data.leaveDetail }}</div> <div class="row">
</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="row"> <div class="col" v-if="props.data.leaveDocument">
<div class="col text-grey-8">เอกสารแนบ</div> <q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
<div class="col" v-if="props.data.leaveDocument"> </div>
<q-btn <div class="col" v-else>-</div>
:href="props.data.leaveDocument" </div>
target="_blank" </div>
outline </q-card-section>
color="blue"
label="ดาวน์โหลด"
size="12px"
>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
</div>
<div class="col" v-else>-</div>
</div>
</div>
</q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

96
src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
View file

@ -1,54 +1,52 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); })
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col">{{ props.data.leaveDetail }}</div> <div class="col">{{ props.data.leaveDetail }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารประกอบ</div>
<div class="col" v-if="props.data.leaveDocument"> <div class="col" v-if="props.data.leaveDocument">
<q-btn <q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
:href="props.data.leaveDocument" </div>
target="_blank" <div class="col" v-else>-</div>
outline </div>
color="blue" <div class="row">
label="ดาวน์โหลด" <div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
size="12px" <div class="col" v-if="props.data.leaveDraftDocument">
> <q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn </div>
> <div class="col" v-else>-</div>
</div> </div>
<div class="col" v-else>-</div> </div>
</div> </q-card-section>
</div>
</q-card-section>
</template> </template>

4
src/modules/05_leave/interface/response/leave.ts
View file

@ -27,7 +27,7 @@ interface FremDetail {
status: string //สถานะการของลา status: string //สถานะการของลา
leaveDateStart: Date //วันเริ่มการลา leaveDateStart: Date //วันเริ่มการลา
leaveDateEnd: Date //วันสิ้นสุดการลา leaveDateEnd: Date //วันสิ้นสุดการลา
leaveCount: number //จำนวนวันลา leaveCount: string //จำนวนวันลา
leaveWrote: string //เขียนที่ leaveWrote: string //เขียนที่
leaveAddress: string //สถานที่ติดต่อขณะลา leaveAddress: string //สถานที่ติดต่อขณะลา
leaveNumber: string //หมายเลขที่ติดต่อขณะลา leaveNumber: string //หมายเลขที่ติดต่อขณะลา
@ -36,7 +36,7 @@ interface FremDetail {
leaveDraftDocument: string //อัปโหลดแบบฟอร์มการลา leaveDraftDocument: string //อัปโหลดแบบฟอร์มการลา
leaveLastStart: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto) leaveLastStart: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
leaveLastEnd: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto) leaveLastEnd: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
leaveTotal: number //จำนวนวันที่ลา(Auto) leaveTotal: string //จำนวนวันที่ลา(Auto)
leavebirthDate: Date //วันเดือนปีเกิด(Auto) leavebirthDate: Date //วันเดือนปีเกิด(Auto)
leavegovernmentDate: Date //วันที่เข้ารับราชการ(Auto) leavegovernmentDate: Date //วันที่เข้ารับราชการ(Auto)
leaveSalary: number //เงินเดือนปัจจุบัน(Auto) leaveSalary: number //เงินเดือนปัจจุบัน(Auto)