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:
Warunee Tamkoo 2024-01-04 15:17:42 +07:00
parent 346ba79606
commit 2c351bbb15
46 changed files with 8182 additions and 11803 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,241 +1,270 @@
<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, FromCancelDetail } 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 FormCancel from "@/modules/05_leave/components/formDetail/formCancel.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"
import { useLeaveStore } from "@/modules/05_leave/store"
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
const dataStore = useLeaveStore()
const { convertStatud } = dataStore
const mixin = useCounterMixin()
const { showLoader, hideLoader, messageError, date2Thai, success, dialogConfirm } = mixin
const dataStore = useLeaveStore();
const { convertStatud } = dataStore;
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
date2Thai,
success,
dialogConfirm,
} = mixin;
const $q = useQuasar()
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 titleMainCancle = 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(),
})
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();
});
}
/**
@ -244,33 +273,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";
}
}
}
/**
@ -278,199 +307,260 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
* @param id ยกเลิกการลา
*/
async function fetchDataCancelDetail(id: string) {
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.leaveReasonDelete ?? "-"
formDataCancle.leaveDetail = data.leaveDetail ?? "-"
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null
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.leaveReasonDelete ?? "-";
formDataCancle.leaveDetail = data.leaveDetail ?? "-";
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
console.log(res)
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
hideLoader()
})
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, "บันทึกข้อมูลสำเร็จ")
props.onClickClose?.()
})
.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, "บันทึกข้อมูลสำเร็จ");
props.onClickClose?.();
})
.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%" 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" />
<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>
<div
flat
class="col-xs-6 col-sm-6"
v-if="props.leaveStatus === 'CANCEL'"
>
<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
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-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>
<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>

509
src/modules/05_leave/components/FormLeave/01_SickForm.vue Normal file
View file

@ -0,0 +1,509 @@
<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from "vue";
import type {
FormData,
FormRef,
} from "@/modules/05_leave/interface/request/SickForm";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const router = useRouter();
const {
date2Thai,
dateToISO,
dialogConfirm,
success,
messageError,
fails,
showLoader,
hideLoader,
} = mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
}
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataSick = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveRange: "ALL",
leaveTotal: "",
leaveLast: null,
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
});
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveRangeRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const leaveLastRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveRange: leaveRangeRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
}
/**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (
formDataSick.leaveRange === "MORNING" ||
formDataSick.leaveRange === "AFTERNOON"
) {
formDataSick.leaveStartDate = null;
formDataSick.leaveEndDate = null;
}
console.log("testnull");
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = [];
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataSick.leaveDocument.length > 0) {
// const blob = formDataSick.leaveDocument.slice(
// 0,
// formDataSick.leaveDocument[0].size
// );
// const newFile = new File(blob, nameFile.value, {
// type: formDataSick.leaveDocument[0].type,
// });
// formData.append("leaveDocument", newFile);
// }
formData.append("leaveDocument", formDataSick.leaveDocument);
formData.append("type", formDataSick.type);
formData.append("leaveRange", formDataSick.leaveRange);
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
formData.append("leaveWrote", formDataSick.leaveWrote);
formData.append("leaveAddress", formDataSick.leaveAddress);
formData.append("leaveNumber", formDataSick.leaveNumber);
formData.append("leaveDetail", formDataSick.leaveDetail);
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataSick.leaveStartDate ?? null,
EndLeaveDate: formDataSick.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
formDataSick.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday;
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
*/
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;
});
function inputEdit(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
function resetEndDate(type: string) {
if (type === "day") {
formDataSick.EndLeaveDate === null;
}
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataSick.leaveWrote = props.data.leaveWrote;
formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
formDataSick.contractTel = props.data.contractTel;
formDataSick.leaveTotal = props.data.leaveTotal;
formDataSick.leaveNumber = props.data.leaveNumber;
formDataSick.leaveDetail = props.data.leaveDetail;
// formDataSick.leaveDocument = props.data.leaveDocument;
formDataSick.leaveAddress = props.data.leaveAddress;
formDataSick.leaveAddress = props.data.leaveAddress;
}
});
</script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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
hide-bottom-space
bg-color="white"
outlined
v-model="formDataSick.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<div class="col-12 col-md-4 col-sm-12">
<q-radio
v-model="formDataSick.leaveRange"
val="ALL"
label="ลาทั้งวัน"
checked-icon="task_alt"
/>
<q-radio
v-model="formDataSick.leaveRange"
val="MORNING"
label="ลาครึ่งวันเช้า"
checked-icon="task_alt"
@update:model-value="resetDate"
/>
<q-radio
v-model="formDataSick.leaveRange"
val="AFTERNOON"
label="ลาครึ่งวันบ่าย"
checked-icon="task_alt"
@update:model-value="resetDate"
/>
</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"
@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"
bg-color="white"
class="full-width cursor-pointer inputgreen"
:model-value="
formDataSick.leaveStartDate != null
? date2Thai(formDataSick.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
style="color: var(--q-primary)"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
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="!formDataSick.leaveStartDate"
@update:model-value="FetchCheck(), isReadOnly"
: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="!formDataSick.leaveStartDate"
:class="inputEdit(isReadOnly)"
:model-value="
formDataSick.leaveEndDate != null
? date2Thai(formDataSick.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
bg-color="white"
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataSick.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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>
</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="formDataSick.leaveNumber"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
dense
outlined
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formDataSick.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
hide-bottom-space
bg-color="white"
/>
</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"
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-file
for="leaveDocumentRef"
v-model="formDataSick.leaveDocument"
dense
label="เอกสารประกอบ"
outlined
use-chips
bg-color="white"
class="col-12 q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-12 col-sm-6 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item
v-for="(file, index) in formDataSick.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

422
src/modules/05_leave/components/FormLeave/03_Birth.vue Normal file
View file

@ -0,0 +1,422 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
/** Use */
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const router = useRouter();
const $q = useQuasar();
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataBirth = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveLast: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
});
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = [];
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataBirth.leaveDocument.length > 0) {
// const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataBirth.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataBirth.leaveDocument);
formData.append("type", formDataBirth.type);
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate));
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate));
formData.append("leaveWrote", formDataBirth.leaveWrote);
formData.append("leaveAddress", formDataBirth.leaveAddress);
formData.append("leaveNumber", formDataBirth.leaveNumber);
formData.append("leaveDetail", formDataBirth.leaveDetail);
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function fetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataBirth.leaveStartDate ?? null,
EndLeaveDate: formDataBirth.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
formDataBirth.leaveTotal = data.totalDate;
// formDataBirth.leaveLast = data.sumDateWork
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataBirth.leaveWrote = props.data.leaveWrote;
formDataBirth.leaveStartDate = props.data.leaveStartDate;
formDataBirth.leaveEndDate = props.data.leaveEndDate;
formDataBirth.leaveTotal = props.data.leaveTotal;
formDataBirth.leaveNumber = props.data.leaveNumber;
formDataBirth.leaveDetail = props.data.leaveDetail;
// formDataBirth.leaveDocument = props.data.leaveDocument;
}
});
</script>
<!-- ฟอร์มลาคลอดบุตร-->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<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"
@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"
class="full-width datepicker"
:model-value="
formDataBirth.leaveStartDate != null
? date2Thai(formDataBirth.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-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
bg-color="white"
:readonly="!formDataBirth.leaveStartDate"
class="full-width datepicker"
:model-value="
formDataBirth.leaveEndDate != null
? date2Thai(formDataBirth.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataBirth.leaveTotal"
label="จำนวนวันที่ลา"
bg-color="white"
readonly
hide-bottom-space
/>
<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="formDataBirth.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!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="formDataBirth.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</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"
/>
<q-file
for="leaveDocumentRef"
hide-bottom-space
v-model="formDataBirth.leaveDocument"
@added="fileUploadDoc"
dense
bg-color="white"
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item
v-for="(file, index) in formDataBirth.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

507
src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue Normal file
View file

@ -0,0 +1,507 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type {
FormData,
FormRef,
} from "@/modules/05_leave/interface/request/HelpWifeForm";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
/** Use */
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const router = useRouter();
const $q = useQuasar();
const {
date2Thai,
calculateDurationYmd,
dateToISO,
dialogConfirm,
fails,
success,
messageError,
} = mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataHelpWife = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
wifeDayName: "",
wifeDayDateBorn: null,
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
});
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const wifeDayNameRef = ref<object | null>(null);
const wifeDayDateBornRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
wifeDayName: wifeDayNameRef,
wifeDayDateBorn: wifeDayDateBornRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = [];
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataHelpWife.leaveDocument.length > 0) {
// const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataHelpWife.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataHelpWife.leaveDocument);
formData.append("type", formDataHelpWife.type);
formData.append(
"leaveStartDate",
dateToISO(formDataHelpWife.leaveStartDate)
);
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate));
formData.append("leaveWrote", formDataHelpWife.leaveWrote);
formData.append("leaveAddress", formDataHelpWife.leaveAddress);
formData.append("leaveNumber", formDataHelpWife.leaveNumber);
formData.append("leaveDetail", formDataHelpWife.leaveDetail);
formData.append("wifeDayName", formDataHelpWife.wifeDayName);
formData.append(
"wifeDayDateBorn",
dateToISO(formDataHelpWife.wifeDayDateBorn)
);
props.onSubmit(formData);
}
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataHelpWife.leaveStartDate,
formDataHelpWife.leaveEndDate
);
formDataHelpWife.leaveTotal = newLeaveTotal;
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function fetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
formDataHelpWife.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday;
// formDataHelpWife.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
// console.log("data==>", props.data)
formDataHelpWife.leaveWrote = props.data.leaveWrote;
formDataHelpWife.wifeDayName = props.data.wifeDayName;
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
formDataHelpWife.leaveTotal = props.data.leaveTotal;
formDataHelpWife.leaveNumber = props.data.leaveNumber;
formDataHelpWife.leaveDetail = props.data.leaveDetail;
// formDataHelpWife.leaveDocument = props.data.leaveDocument;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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-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"
:rules="[(val) => !!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"
@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"
class="full-width datepicker"
:model-value="
formDataHelpWife.leaveStartDate != null
? date2Thai(formDataHelpWife.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-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) => !!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
hide-bottom-space
bg-color="white"
/>
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
<q-input
class="col-12 col-sm-12"
ref="wifeDayNameRef"
for="wifeDayNameRef"
dense
bg-color="white"
outlined
hide-bottom-space
v-model="formDataHelpWife.wifeDayName"
label="ชื่อภรรยา"
:readonly="!edit"
:rules="[(val) => !!val || `${'ชื่อภรรยา'}`]"
/>
</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"
>
<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"
class="full-width datepicker"
:model-value="
formDataHelpWife.wifeDayDateBorn != null
? date2Thai(formDataHelpWife.wifeDayDateBorn)
: null
"
:label="`${'วันที่คลอด'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<div 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="formDataHelpWife.leaveNumber"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
bg-color="white"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!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="formDataHelpWife.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</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"
/>
<q-file
bg-color="white"
ref="leaveDocumentRef"
v-model="formDataHelpWife.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item
v-for="(file, index) in formDataHelpWife.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

501
src/modules/05_leave/components/FormLeave/05_VacationForm.vue Normal file
View file

@ -0,0 +1,501 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import type {
FormData,
FormRef,
} from "@/modules/05_leave/interface/request/VacationForm";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
/** Use */
const $q = useQuasar();
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const router = useRouter();
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataVacation = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveRange: "ALL",
restDayOldTotal: "",
restDayCurrentTotal: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
});
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const restDayOldTotalRef = ref<object | null>(null);
const restDayCurrentTotalRef = ref<object | null>(null);
const leaveRangeRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveRange: leaveRangeRef,
restDayOldTotal: restDayOldTotalRef,
restDayCurrentTotal: restDayCurrentTotalRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = [];
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataVacation.leaveDocument.length > 0) {
// const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataVacation.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataVacation.leaveDocument);
formData.append("type", formDataVacation.type);
formData.append("leaveRange", formDataVacation.leaveRange);
formData.append(
"leaveStartDate",
dateToISO(formDataVacation.leaveStartDate)
);
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate));
formData.append("leaveWrote", formDataVacation.leaveWrote);
formData.append("leaveAddress", formDataVacation.leaveAddress);
formData.append("leaveNumber", formDataVacation.leaveNumber);
formData.append("leaveDetail", formDataVacation.leaveDetail);
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function fetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataVacation.leaveStartDate ?? null,
EndLeaveDate: formDataVacation.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
formDataVacation.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday;
// formDataVacation.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (
formDataVacation.leaveRange === "MORNING" ||
formDataVacation.leaveRange === "AFTERNOON"
) {
formDataVacation.leaveStartDate = null;
formDataVacation.leaveEndDate = null;
}
console.log("testnull");
}
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
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;
});
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
// console.log("data==>", props.data)
formDataVacation.leaveWrote = props.data.leaveWrote;
formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
formDataVacation.leaveStartDate = props.data.leaveStartDate;
formDataVacation.leaveEndDate = props.data.leaveEndDate;
formDataVacation.leaveTotal = props.data.leaveTotal;
formDataVacation.leaveNumber = props.data.leaveNumber;
formDataVacation.leaveDetail = props.data.leaveDetail;
// formDataVacation.leaveDocument = props.data.leaveDocument;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<div class="col-12 col-md-4 col-sm-6">
<q-radio
v-model="formDataVacation.leaveRange"
val="ALL"
label="ลาทั้งวัน"
checked-icon="task_alt"
/>
<q-radio
v-model="formDataVacation.leaveRange"
val="MORNING"
label="ลาครึ่งวันเช้า"
checked-icon="task_alt"
@update:model-value="resetDate"
/>
<q-radio
v-model="formDataVacation.leaveRange"
val="AFTERNOON"
label="ลาครึ่งวันบ่าย"
checked-icon="task_alt"
@update:model-value="resetDate"
/>
</div>
<q-input
class="col-12 col-md-4 col-sm-6"
ref="restDayOldTotalRef"
for="restDayOldTotalRef"
dense
hide-bottom-space
bg-color="white"
readonly
outlined
v-model="dataStore.restDayTotalOld"
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
/>
<q-input
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.leaveRemain"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
/>
<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"
@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"
class="full-width datepicker"
:model-value="
formDataVacation.leaveStartDate != null
? date2Thai(formDataVacation.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-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) => !!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"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataVacation.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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="formDataVacation.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<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="formDataVacation.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</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"
/>
<q-file
ref="leaveDocumentRef"
bg-color="white"
v-model="formDataVacation.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item
v-for="(file, index) in formDataVacation.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

671
src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue Normal file
View file

@ -0,0 +1,671 @@
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
calculateDurationYmd,
fails,
dateToISO,
success,
messageError,
} = mixin;
const edit = ref<boolean>(true);
const files = ref<any>(null);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ตัวแปร ref สำหรับแสดง validate */
const ordainDayLocationNumberRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null);
const leavebirthDateRef = ref<object | null>(null);
const leavegovernmentDateRef = ref<object | null>(null);
const totalLeaveRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const ordainDayOrdinationRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const ordainDayLocationAddressRef = ref<object | null>(null);
const ordainDayBuddhistLentAddressRef = ref<object | null>(null);
const ordainDayLocationNameRef = ref<object | null>(null);
const ordainDayBuddhistLentNameRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);
/** ข้อมูล v-model ของฟอร์ม */
const formDataOrdination = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leavegovernmentDate: new Date(),
leavebirthDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
ordainDayOrdination: new Date(),
ordainDayLocationName: "",
ordainDayLocationNumber: null,
ordainDayLocationAddress: "",
ordainDayBuddhistLentName: "",
ordainDayBuddhistLentAddress: "",
ordainDayStatus: "true",
leaveDocument: null,
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: OrdinationForm = {
leaveWrote: leaveWroteRef,
leavegovernmentDate: leavegovernmentDateRef,
leavebirthDate: leavebirthDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
totalLeave: totalLeaveRef,
ordainDayOrdination: ordainDayOrdinationRef,
ordainDayLocationName: ordainDayLocationNameRef,
ordainDayLocationNumber: ordainDayLocationNumberRef,
ordainDayLocationAddress: ordainDayLocationAddressRef,
ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
leaveDocument: leaveDocumentRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataOrdination.leaveDocument.length > 0) {
// const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataOrdination.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataOrdination.leaveDocument);
formData.append("type", formDataOrdination.type);
formData.append(
"leaveStartDate",
dateToISO(formDataOrdination.leaveStartDate)
);
formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate));
formData.append(
"ordainDayOrdination",
dateToISO(formDataOrdination.ordainDayOrdination)
);
formData.append(
"ordainDayLocationName",
formDataOrdination.ordainDayLocationName
);
formData.append(
"ordainDayLocationNumber",
formDataOrdination.ordainDayLocationNumber
);
formData.append(
"ordainDayLocationAddress",
formDataOrdination.ordainDayLocationAddress
);
formData.append(
"ordainDayBuddhistLentName",
formDataOrdination.ordainDayBuddhistLentName
);
formData.append(
"ordainDayBuddhistLentAddress",
formDataOrdination.ordainDayBuddhistLentAddress
);
formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus);
formData.append("leaveWrote", formDataOrdination.leaveWrote);
formData.append("leaveDetail", formDataOrdination.leaveDetail);
formData.append(
"leavebirthDate",
dateToISO(formDataOrdination.leavebirthDate)
);
formData.append(
"leavegovernmentDate",
dateToISO(formDataOrdination.leavegovernmentDate)
);
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function fetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
// formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
formDataOrdination.leaveTotal = data.totalDate;
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataOrdination.leaveStartDate,
formDataOrdination.leaveEndDate
);
formDataOrdination.leaveTotal = newLeaveTotal;
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataOrdination.leaveWrote = props.data.leaveWrote;
formDataOrdination.leaveStartDate = props.data.leaveStartDate;
formDataOrdination.leaveEndDate = props.data.leaveEndDate;
formDataOrdination.totalLeave = props.data.leaveTotal;
formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
formDataOrdination.ordainDayLocationNumber =
props.data.ordainDayLocationNumber;
formDataOrdination.ordainDayLocationAddress =
props.data.ordainDayLocationAddress;
formDataOrdination.ordainDayBuddhistLentName =
props.data.ordainDayBuddhistLentName;
formDataOrdination.ordainDayBuddhistLentAddress =
props.data.ordainDayBuddhistLentAddress;
formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
formDataOrdination.leaveDetail = props.data.leaveDetail;
// formDataOrdination.leaveDocument = props.data.leaveDocument;
}
});
</script>
<!-- ฟอร์ม ลาอุปสมบท -->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent="onValidate" class="full-width">
<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="formDataOrdination.leaveWrote"
label="เขียนที่"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataOrdination.leaveStartDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="formDataOrdination.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
class="full-width datepicker"
:model-value="
formDataOrdination.leaveStartDate != null
? date2Thai(formDataOrdination.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataOrdination.leaveEndDate"
:locale="'th'"
autoApply
borderless
@update:model-value="updateLeaveTotal, fetchCheck()"
:readonly="!formDataOrdination.leaveStartDate"
:enableTimePicker="false"
:min-date="formDataOrdination.leaveStartDate"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveEndDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="
formDataOrdination.leaveEndDate != null
? date2Thai(formDataOrdination.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:readonly="!formDataOrdination.leaveStartDate"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataOrdination.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formDataOrdination.leavegovernmentDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavegovernmentDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="
formDataOrdination.leavegovernmentDate != null
? date2Thai(formDataOrdination.leavegovernmentDate)
: null
"
:label="`${'วันที่เข้ารับราชการ'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formDataOrdination.leavebirthDate"
:locale="'th'"
autoApply
borderless
readonly
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavebirthDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="
formDataOrdination.leavebirthDate != null
? date2Thai(formDataOrdination.leavebirthDate)
: null
"
:label="`${'วันเดือนปีเกิด'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">
เคยบวชหรือไม่
</div>
<div class="col-12">
<q-radio
v-model="formDataOrdination.ordainDayStatus"
val="true"
label="เคยบวช"
checked-icon="task_alt "
hide-bottom-space
/>
<q-radio
v-model="formDataOrdination.ordainDayStatus"
val="false"
label="ไม่เคยบวช"
checked-icon="task_alt"
hide-bottom-space
/>
</div>
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataOrdination.ordainDayOrdination"
:locale="'th'"
autoApply
full-width
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="ordainDayOrdinationRef"
dense
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="
formDataOrdination.ordainDayOrdination != null
? date2Thai(formDataOrdination.ordainDayOrdination)
: null
"
:label="`${'วันอุปสมบท'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
hide-bottom-space
ref="ordainDayLocationNameRef"
bg-color="white"
outlined
full-width
v-model="formDataOrdination.ordainDayLocationName"
label="ชื่อวัด"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="ordainDayLocationNumberRef"
dense
full-width
outlined
v-model="formDataOrdination.ordainDayLocationNumber"
bg-color="white"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
label="หมายเลขโทรศัพท์"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/>
<q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense
ref="ordainDayLocationAddressRef"
bg-color="white"
outlined
hide-bottom-space
v-model="formDataOrdination.ordainDayLocationAddress"
label="ที่อยู่"
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
/>
<div class="q-pl-sm text-weight-bold text-dark col-12">
สถานที่จำพรรษา
</div>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
ref="ordainDayBuddhistLentNameRef"
bg-color="white"
hide-bottom-space
outlined
v-model="formDataOrdination.ordainDayBuddhistLentName"
label="ชื่อวัด"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 cursor-pointer inputgreen"
dense
ref="ordainDayBuddhistLentAddressRef"
bg-color="white"
outlined
v-model="formDataOrdination.ordainDayBuddhistLentAddress"
label="ที่อยู่"
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
hide-bottom-space
/>
<q-input
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="formDataOrdination.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<div class="col-12 col-sm-6">
<q-file
ref="leaveDocumentRef"
v-model="formDataOrdination.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
bg-color="white"
multiple
use-chips
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

442
src/modules/05_leave/components/FormLeave/07_HajjForm.vue Normal file
View file

@ -0,0 +1,442 @@
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
/** Use */
const router = useRouter();
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
calculateDurationYmd,
fails,
messageError,
success,
dateToISO,
} = mixin;
const edit = ref<boolean>(true);
const files = ref<any>(null);
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const leavegovernmentDateRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataHaji = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leavegovernmentDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
hajjDayStatus: "true",
leaveDocument: null,
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: HajiForm = {
leaveWrote: leaveWroteRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDocument: leaveDocumentRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataHaji.leaveDocument.length > 0) {
// const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataHaji.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataHaji.leaveDocument);
formData.append("type", formDataHaji.type);
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate));
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate));
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
formData.append("leaveWrote", formDataHaji.leaveWrote);
formData.append("leaveDetail", formDataHaji.leaveDetail);
formData.append(
"leavegovernmentDate",
dateToISO(formDataHaji.leavegovernmentDate)
);
props.onSubmit(FormData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function fetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataHaji.leaveStartDate ?? null,
EndLeaveDate: formDataHaji.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
// formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
formDataHaji.leaveTotal = data.totalDate;
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataHaji.leaveStartDate,
formDataHaji.leaveEndDate
);
formDataHaji.leaveTotal = newLeaveTotal;
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataHaji.leaveWrote = props.data.leaveWrote;
formDataHaji.leavegovernmentDate = props.data.leavegovernmentDate;
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.leaveDocument = props.data.leaveDocument;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formDataHaji.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="เขียนที่"
hide-bottom-space
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formDataHaji.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'"
@update:model-value="formDataHaji.leaveEndDate = null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leaveStartDateRef"
bg-color="white"
class="full-width datepicker"
outlined
dense
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="
formDataHaji.leaveStartDate != null
? date2Thai(formDataHaji.leaveStartDate)
: null
"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formDataHaji.leaveEndDate"
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'"
@update:model-value="updateLeaveTotal"
:readonly="!formDataHaji.leaveStartDate"
:min-date="formDataHaji.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"
bg-color="white"
outlined
dense
:readonly="!formDataHaji.leaveStartDate"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
@update:model-value="fetchCheck()"
:model-value="
formDataHaji.leaveEndDate != null
? date2Thai(formDataHaji.leaveEndDate)
: null
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataHaji.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<datepicker
v-model="formDataHaji.leavegovernmentDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
readonly
week-start="0"
:locale="'th'"
:enableTimePicker="false"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leavegovernmentDateRef"
bg-color="white"
class="full-width"
outlined
dense
readonly
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="
formDataHaji.leavegovernmentDate != null
? date2Thai(formDataHaji.leavegovernmentDate)
: null
"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">
เคยไปประกอบพิธีฮัจญ์หรือไม่
</div>
<div class="col-12">
<q-radio
v-model="formDataHaji.hajjDayStatus"
val="true"
checked-icon="task_alt"
label="เคย"
/>
<q-radio
v-model="formDataHaji.hajjDayStatus"
val="false"
checked-icon="task_alt"
label="ไม่เคยไปประกอบพิธีฮัจญ์"
/>
</div>
<q-input
v-model="formDataHaji.leaveDetail"
class="col-12 q-mt-sm cursor-pointer inputgreen"
bg-color="white"
dense
outlined
type="textarea"
label="รายละเอียด"
/>
<div class="col-12 col-sm-6">
<q-file
v-model="formDataHaji.leaveDocument"
bg-color="white"
label="เอกสารประกอบ"
use-chips
@added="fileUploadDoc"
dense
outlined
multiple
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

493
src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue Normal file
View file

@ -0,0 +1,493 @@
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
/** Use */
const router = useRouter();
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
calculateDurationYmd,
dateToISO,
success,
messageError,
fails,
} = mixin;
const edit = ref<boolean>(true);
const files = ref<any>(null);
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null);
const absentDaySummonRef = ref<object | null>(null);
const absentDayLocationRef = ref<object | null>(null);
const absentDayRegistorDateRef = ref<object | null>(null);
const absentDayGetInRef = ref<object | null>(null);
const absentDayAtRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataMilitary = reactive<any>({
type: dataStore.typeId,
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: 0,
leaveDocument: null,
leaveWrote: "",
absentDaySummon: "",
absentDayLocation: "",
absentDayRegistorDate: null,
absentDayGetIn: "",
absentDayAt: "",
leaveDetail: "",
});
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: MilitaryForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
absentDaySummon: absentDaySummonRef,
absentDayLocation: absentDayLocationRef,
absentDayRegistorDate: absentDayRegistorDateRef,
absentDayGetIn: absentDayGetInRef,
absentDayAt: absentDayAtRef,
leaveDetail: leaveDetailRef,
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataMilitary.leaveDocument.length > 0) {
// const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataMilitary.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataMilitary.leaveDocument);
formData.append("type", formDataMilitary.type);
formData.append(
"leaveStartDate",
dateToISO(formDataMilitary.leaveStartDate)
);
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate));
formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
formData.append(
"absentDayRegistorDate",
dateToISO(formDataMilitary.absentDayRegistorDate)
);
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
formData.append("absentDayAt", formDataMilitary.absentDayAt);
formData.append("leaveWrote", formDataMilitary.leaveWrote);
formData.append("leaveDetail", formDataMilitary.leaveDetail);
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function fetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
// formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
formDataMilitary.leaveTotal = data.totalDate;
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataMilitary.leaveStartDate,
formDataMilitary.leaveEndDate
);
formDataMilitary.leaveTotal = newLeaveTotal;
console.log("test");
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataMilitary.leaveWrote = props.data.leaveWrote;
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
formDataMilitary.leaveEndDate = props.data.leaveEndDate;
formDataMilitary.leaveTotal = props.data.leaveTotal;
formDataMilitary.absentDaySummon = props.data.absentDaySummon;
formDataMilitary.absentDayLocation = props.data.absentDayLocation;
formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
formDataMilitary.absentDayAt = props.data.absentDayAt;
formDataMilitary.leaveDetail = props.data.leaveDetail;
// formDataMilitary.leaveDocument = props.data.leaveDocument;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="เขียนที่"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<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"
@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
class="full-width datepicker"
:model-value="
formDataMilitary.leaveStartDate != null
? date2Thai(formDataMilitary.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6 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"
: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"
class="full-width datepicker"
:model-value="
formDataMilitary.leaveEndDate != null
? date2Thai(formDataMilitary.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataMilitary.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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
:rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/>
<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
:rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
/>
</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"
menu-class-name="modalfix"
v-model="formDataMilitary.absentDayRegistorDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="absentDayRegistorDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="
formDataMilitary.absentDayRegistorDate != null
? date2Thai(formDataMilitary.absentDayRegistorDate)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
ref="absentDayGetInRef"
outlined
v-model="formDataMilitary.absentDayGetIn"
label="ให้เข้ารับการ"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
ref="absentDayAtRef"
v-model="formDataMilitary.absentDayAt"
label="ณ ที่"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
/>
</div>
</div>
<q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
v-model="formDataMilitary.leaveDetail"
type="textarea"
label="รายละเอียด"
/>
<div class="col-12 col-sm-6">
<q-file
v-model="formDataMilitary.leaveDocument"
dense
label="เอกสารประกอบ"
outlined
bg-color="white"
multiple
hide-bottom-space
use-chips
@added="fileUploadDoc"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

646
src/modules/05_leave/components/FormLeave/09_StudyForm.vue Normal file
View file

@ -0,0 +1,646 @@
<script setup lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
calculateDurationYmd,
fails,
dateToISO,
success,
messageError,
arabicNumberToText,
} = mixin;
const edit = ref<boolean>(true);
const files = ref<any>(null);
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leavebirthDateRef = ref<object | null>(null);
const leavegovernmentDateRef = ref<object | null>(null);
const leaveSalaryRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const studyDayScholarshipRef = ref<object | null>(null);
const studyDayCountryRef = ref<object | null>(null);
const studyDayUniversityNameRef = ref<object | null>(null);
const studyDayDegreeLevelRef = ref<object | null>(null);
const studyDaySubjectRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataStudy = reactive<any>({
type: dataStore.typeId, //
leaveWrote: "", //
leaveStartDate: null,
leaveEndDate: null,
leavebirthDate: new Date(),
leavegovernmentDate: new Date(),
leaveSalary: 10000,
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "",
studyDayScholarship: "",
studyDayCountry: "",
studyDayUniversityName: "", //
studyDayDegreeLevel: "", //
studyDaySubject: "", //
leaveDocument: "", //
leaveDetail: "",
leaveTotal: "",
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: studyDaySubjectForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leavebirthDate: leavebirthDateRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveSalary: leaveSalaryRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
studyDayCountry: studyDayCountryRef,
studyDayUniversityName: studyDayUniversityNameRef,
studyDayDegreeLevel: studyDayDegreeLevelRef,
studyDaySubject: studyDaySubjectRef,
leaveWrote: leaveWroteRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataStudy.leaveDocument.length > 0) {
// const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataStudy.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataStudy.leaveDocument);
formData.append("type", formDataStudy.type); //
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)); //
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)); //
formData.append("studyDaySubject", formDataStudy.studyDaySubject);
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
formData.append(
"leavegovernmentDate",
dateToISO(formDataStudy.leavegovernmentDate)
);
formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate));
formData.append(
"studyDayUniversityName",
formDataStudy.studyDayUniversityName
);
formData.append("studyDayCountry", formDataStudy.studyDayCountry);
formData.append("leaveWrote", formDataStudy.leaveWrote); //
formData.append("leaveDetail", formDataStudy.leaveDetail); //
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
formData.append("leaveAddress", formDataStudy.leaveAddress); //
formData.append("leaveNumber", formDataStudy.leaveNumber); //
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataStudy.leaveStartDate ?? null,
EndLeaveDate: formDataStudy.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
formDataStudy.leaveTotal =
data.fetchCheck - data.sumDateWork - data.sumDateHoliday;
// formDataStudy.leaveLast = data.fetchCheck
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataStudy.leaveStartDate,
formDataStudy.leaveEndDate
);
formDataStudy.leaveTotal = newLeaveTotal;
console.log("test");
}
/**
* แปลงตัวเลขเงินเดือน
*/
const formattedleaveSalary = computed(() => {
return dataStore.salary !== null
? dataStore.salary.toLocaleString("th-TH")
: "";
});
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataMilitary.leaveWrote = props.data.leaveWrote;
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
formDataMilitary.leaveEndDate = props.data.leaveEndDate;
formDataMilitary.leaveTotal = props.data.leaveTotal;
formDataMilitary.leavebirthDate = props.data.leavebirthDate;
formDataMilitary.leavegovernmentDate = props.data.leavegovernmentDate;
formDataMilitary.leaveSalary = props.data.leaveSalary;
formDataMilitary.leaveSalaryText = props.data.leaveSalaryText;
formDataMilitary.leaveNumber = props.data.leaveNumber;
formDataMilitary.leaveAddress = props.data.leaveAddress;
formDataMilitary.studyDayScholarship = props.data.studyDayScholarship;
formDataMilitary.studyDayCountry = props.data.studyDayCountry;
formDataMilitary.studyDayUniversityName = props.data.studyDayUniversityName;
formDataMilitary.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
formDataMilitary.studyDaySubject = props.data.studyDaySubject;
// formDataMilitary.leaveDocument = props.data.leaveDocument;
formDataMilitary.leaveDetail = props.data.leaveDetail;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<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'"
@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
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="
formDataStudy.leaveStartDate != null
? date2Thai(formDataStudy.leaveStartDate)
: null
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="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"
: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"
:model-value="
formDataStudy.leaveEndDate != null
? date2Thai(formDataStudy.leaveEndDate)
: null
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataStudy.leaveTotal"
label="มีกำหนด"
readonly
hide-bottom-space
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formDataStudy.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"
bg-color="white"
outlined
readonly
dense
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="
dataStore.dateAppoint != null
? date2Thai(dataStore.dateAppoint)
: null
"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formDataStudy.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
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
v-model="formattedleaveSalary"
ref="leaveSalaryRef"
class="col-12 col-sm-6 col-md-3"
bg-color="white"
dense
outlined
readonly
label="เงินเดือนปัจจุบัน"
/>
<q-input
v-model="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) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
/>
</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
label="ชื่อสถานศึกษา"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
/>
<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
label="ชั้นปริญญา"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
/>
<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
label="ศึกษาวิชา"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
/>
<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
label="ประเทศ"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
/>
<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
label="ด้วยทุน"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/>
<q-input
v-model="formDataStudy.leaveNumber"
ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
unmasked-value
hide-bottom-space
mask="(###)-###-####"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input
v-model="formDataStudy.leaveAddress"
ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
hide-bottom-space
:rules="[
(val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</div>
</div>
<q-input
v-model="formDataStudy.leaveDetail"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
type="textarea"
label="รายละเอียด"
/>
<div class="col-12 col-sm-6">
<q-file
v-model="formDataStudy.leaveDocument"
bg-color="white"
dense
outlined
multiple
use-chips
@added="fileUploadDoc"
label="เอกสารประกอบ"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

622
src/modules/05_leave/components/FormLeave/10_TrainForm.vue Normal file
View file

@ -0,0 +1,622 @@
<script setup lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
import { useQuasar } from "quasar";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
arabicNumberToText,
calculateDurationYmd,
fails,
dateToISO,
success,
messageError,
} = mixin;
const edit = ref<boolean>(true);
const files = ref<any>(null);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataTrain = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leavebirthDate: new Date(),
leavegovernmentDate: new Date(),
leaveSalary: 10000,
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "",
studyDayScholarship: "",
studyDayCountry: "",
studyDayTrainingSubject: "",
studyDayTrainingName: "",
leaveDocument: "",
leaveDetail: "",
});
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leavebirthDateRef = ref<object | null>(null);
const leavegovernmentDateRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const studyDayScholarshipRef = ref<object | null>(null);
const studyDayCountryRef = ref<object | null>(null);
const studyDayTrainingSubjectRef = ref<object | null>(null);
const studyDayTrainingNameRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: TrainForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leavebirthDate: leavebirthDateRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
studyDayCountry: studyDayCountryRef,
studyDayTrainingSubject: studyDayTrainingSubjectRef,
studyDayTrainingName: studyDayTrainingNameRef,
leaveWrote: leaveWroteRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataTrain.leaveDocument.length > 0) {
// const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataTrain.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// } //
formData.append("leaveDocument", formDataTrain.leaveDocument);
formData.append("type", formDataTrain.type); //
formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)); //
formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)); //
formData.append("studyDayCountry", formDataTrain.studyDayCountry);
formData.append(
"leavegovernmentDate",
dateToISO(formDataTrain.leavegovernmentDate)
);
formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate));
formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
formData.append(
"studyDayTrainingSubject",
formDataTrain.studyDayTrainingSubject
);
formData.append("leaveWrote", formDataTrain.leaveWrote); //
formData.append("leaveDetail", formDataTrain.leaveDetail); //
formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
formData.append("leaveAddress", formDataTrain.leaveAddress); //
formData.append("leaveNumber", formDataTrain.leaveNumber); //
formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
formData.append("leaveSalary", formDataTrain.leaveSalary); //
formData.append("leaveTotal", formDataTrain.leaveTotal); //
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataTrain.leaveStartDate ?? null,
EndLeaveDate: formDataTrain.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
// formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataTrain.leaveTotal = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataTrain.leaveStartDate,
formDataTrain.leaveEndDate
);
formDataTrain.leaveTotal = newLeaveTotal;
console.log("test");
}
/**
* แปลงตัวเลขเงินเดือน
*/
const formattedSalary = computed(() => {
return formDataTrain.leaveSalary !== null
? formDataTrain.leaveSalary.toLocaleString("th-TH")
: "";
});
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataTrain.leaveWrote = props.data.leaveWrote;
formDataTrain.leaveStartDate = props.data.leaveStartDate;
formDataTrain.leaveEndDate = props.data.leaveEndDate;
formDataTrain.leavebirthDate = props.data.leavebirthDate;
formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
formDataTrain.leaveSalary = props.data.leaveSalary;
formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
formDataTrain.leaveNumber = props.data.leaveNumber;
formDataTrain.leaveAddress = props.data.leaveAddress;
formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
formDataTrain.studyDayCountry = props.data.studyDayCountry;
formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
formDataTrain.leaveDetail = props.data.leaveDetail;
// formDataTrain.leaveDocument = props.data.leaveDocument;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="เขียนที่"
hide-bottom-space
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<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'"
@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
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="
formDataTrain.leaveStartDate != null
? date2Thai(formDataTrain.leaveStartDate)
: null
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="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"
: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"
:model-value="
formDataTrain.leaveEndDate != null
? date2Thai(formDataTrain.leaveEndDate)
: null
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataTrain.leaveTotal"
label="มีกำหนด"
readonly
hide-bottom-space
/>
<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="
formDataTrain.leavegovernmentDate != null
? date2Thai(formDataTrain.leavegovernmentDate)
: null
"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<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="
formDataTrain.leavebirthDate != null
? date2Thai(formDataTrain.leavebirthDate)
: null
"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(---black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
v-model="formattedSalary"
class="col-12 col-sm-6 col-md-3"
bg-color="white"
dense
outlined
readonly
label="เงินเดือนปัจจุบัน"
/>
<q-input
v-model="formDataTrain.leaveSalaryText"
class="col-12 col-sm-6 col-md-3"
dense
readonly
outlined
bg-color="white"
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
/>
</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
:rules="[(val) => !!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
:rules="[(val) => !!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
:rules="[(val) => !!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
:rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/>
<q-input
v-model="formDataTrain.leaveNumber"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="leaveNumberRef"
dense
outlined
unmasked-value
hide-bottom-space
bg-color="white"
mask="(###)-###-####"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input
v-model="formDataTrain.leaveAddress"
ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
hide-bottom-space
:rules="[
(val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</div>
</div>
<q-input
v-model="formDataTrain.leaveDetail"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
type="textarea"
label="รายละเอียด"
/>
<div class="col-12 col-sm-6">
<q-file
v-model="formDataTrain.leaveDocument"
bg-color="white"
dense
outlined
multiple
label="เอกสารประกอบ"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

461
src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue Normal file
View file

@ -0,0 +1,461 @@
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import genReport from "@/plugins/genreport";
/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
mixin;
const edit = ref<boolean>(true);
const router = useRouter();
const isSave = ref<boolean>(false);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataWorkInternational = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDetail: "",
leaveDocument: null,
leaveDraftDocument: null,
});
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const nameFileDraft = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = [];
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
// ถ้า Validate ผ่านให้บันทึกข้อมูล
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// //
// if (formDataWorkInternational.leaveDocument.length > 0) {
// const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataWorkInternational.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
if (formDataWorkInternational.leaveDocument) {
formData.append("leaveDocument", formDataWorkInternational.leaveDocument);
}
if (formDataWorkInternational.leaveDraftDocument) {
formData.append(
"leaveDraftDocument",
formDataWorkInternational.leaveDraftDocument
);
}
formData.append("type", formDataWorkInternational.type); //
formData.append(
"leaveStartDate",
dateToISO(formDataWorkInternational.leaveStartDate)
); //
formData.append(
"leaveEndDate",
dateToISO(formDataWorkInternational.leaveEndDate)
); //
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
props.onSubmit(FormData);
}
}
//download function
async function onClickDownloadFile(id: string, fileName: string) {
// showLoader();
await http
.get(config.API.leaveReport(id))
.then(async (res) => {
const data = res.data.result;
await genReport(data, fileName);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
formDataWorkInternational.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday;
// formDataWorkInternational.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
formDataWorkInternational.leaveStartDate = new Date(
props.data.leaveStartDate
);
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
// formDataWorkInternational.leaveDraftDocument =
// props.data.leaveDraftDocument;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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"
hide-bottom-space
bg-color="white"
for="leaveWroteRef"
dense
outlined
v-model="formDataWorkInternational.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<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"
@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"
class="full-width datepicker"
:model-value="
formDataWorkInternational.leaveStartDate != null
? date2Thai(formDataWorkInternational.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
@update:model-value="FetchCheck()"
week-start="0"
:readonly="!formDataWorkInternational.leaveStartDate"
: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"
:readonly="!formDataWorkInternational.leaveStartDate"
class="full-width datepicker"
:model-value="
formDataWorkInternational.leaveEndDate != null
? date2Thai(formDataWorkInternational.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<!-- <q-input
class="col-md-3 col-sm-12"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
type="number"
v-model="formDataWorkInternational.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/> -->
<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"
/>
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataWorkInternational.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item
v-for="(file, index) in formDataWorkInternational.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div
v-if="
formDataWorkInternational.leaveWrote &&
formDataWorkInternational.leaveEndDate &&
formDataWorkInternational.leaveStartDate
"
class="q-mt-md"
>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
</div>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">
ดาวน์โหลด
</div>
<q-btn
color="primary"
icon="download"
label="ดาวน์โหลดแบบฟอร์ม"
@click="
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
"
/>
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">
อัปโหลด
</div>
<q-file
v-model="formDataWorkInternational.leaveDraftDocument"
dense
label="แบบฟอร์ม"
outlined
bg-color="white"
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<!-- <div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
><q-tooltip>อัปโหลด</q-tooltip></q-btn
>
</div> -->
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</div>
</form>
</template>

681
src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue Normal file
View file

@ -0,0 +1,681 @@
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import type {
FormData,
FormRef,
} from "@/modules/05_leave/interface/request/FollowSpouseForm";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const router = useRouter();
const {
dialogConfirm,
date2Thai,
arabicNumberToText,
calculateDurationYmd,
dateToISO,
fails,
success,
messageError,
} = mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataFollowSpouse = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "", //จำนวนวันลา
leaveSalaryText: 25000,
leaveSalary: 25000, //เงินเดือนปัจจุบัน
coupleDayName: "", //ชื่อคู่สมรส
coupleDayPosition: "", //ตำแหน่งคู่สมรส
coupleDayLevel: "", //ระดับคู่สมรส
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
followHistoryTime: "0 วัน",
followHistoryStart: new Date(),
followHistoryEnd: new Date(),
leaveDetail:
"ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
leaveDocument: [], //เอกสารปะกอบ
});
/** แปลงตัวแปร Salary */
const formattleaveSalaryText = arabicNumberToText(
formDataFollowSpouse.leaveSalaryText
);
const formattSalary = computed(() => {
return formDataFollowSpouse.leaveSalary !== null
? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH")
: "";
});
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveSalaryRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const coupleDayNameRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const coupleDayPositionRef = ref<object | null>(null);
const coupleDayLevelRef = ref<object | null>(null);
const coupleDayLevelCountryRef = ref<object | null>(null);
const followHistoryCountryRef = ref<object | null>(null);
const followHistoryTimeRef = ref<object | null>(null);
const followHistoryStartRef = ref<object | null>(null);
const followHistoryEndRef = ref<object | null>(null);
const leaveDocumentRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef, //เขียนที่***
leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
leaveTotal: leaveTotalRef, //จำนวนวันลา
leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
leaveDetail: leaveDetailRef, //รายละเอียดการลา
leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
leaveDocument: leaveDocumentRef,
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = [];
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataFollowSpouse.leaveDocument.length > 0) {
// const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataFollowSpouse.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// } //
formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
formData.append("type", formDataFollowSpouse.type); //
formData.append(
"leaveStartDate",
dateToISO(formDataFollowSpouse.leaveStartDate)
); //
formData.append(
"leaveEndDate",
dateToISO(formDataFollowSpouse.leaveEndDate)
); //
formData.append(
"followHistoryStart",
dateToISO(formDataFollowSpouse.followHistoryStart)
); //
formData.append(
"followHistoryEnd",
dateToISO(formDataFollowSpouse.followHistoryEnd)
); //
formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
formData.append(
"followHistoryTime",
formDataFollowSpouse.followHistoryTime
); //
formData.append(
"followHistoryCountry",
formDataFollowSpouse.followHistoryCountry
); //
formData.append(
"coupleDayLevelCountry",
formDataFollowSpouse.coupleDayLevelCountry
); //
formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
formData.append(
"coupleDayPosition",
formDataFollowSpouse.coupleDayPosition
); //
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
props.onSubmit(formData);
}
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
formDataFollowSpouse.leaveTotal =
// data.totalDate - data.sumDateWork - data.sumDateHoliday;
formDataFollowSpouse.leaveTotal = data.totalDate;
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataFollowSpouse.leaveStartDate,
formDataFollowSpouse.leaveEndDate
);
formDataFollowSpouse.leaveTotal = newLeaveTotal;
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
if (props.data) {
formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
formDataFollowSpouse.leaveDocument = props.data.leaveDocument;
formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
formDataFollowSpouse.coupleDayLevelCountry =
props.data.coupleDayLevelCountry;
formDataFollowSpouse.followHistoryCountry = props.data.followHistoryCountry;
formDataFollowSpouse.followHistoryTime = props.data.followHistoryTime;
formDataFollowSpouse.followHistoryStart = props.data.followHistoryStart;
formDataFollowSpouse.followHistoryEnd = props.data.followHistoryEnd;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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
hide-bottom-space
bg-color="white"
outlined
v-model="formDataFollowSpouse.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[(val) => !!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"
@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"
class="full-width datepicker"
:model-value="
formDataFollowSpouse.leaveStartDate != null
? date2Thai(formDataFollowSpouse.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-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"
: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"
class="full-width datepicker"
:model-value="
formDataFollowSpouse.leaveEndDate != null
? date2Thai(formDataFollowSpouse.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataFollowSpouse.leaveTotal"
label="เป็นเวลา"
readonly
hide-bottom-space
/>
<div class="col-12 col-md-6 col-sm-12">
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattSalary"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-12 col-md-6 col-sm-12">
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattleaveSalaryText"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space
ref="coupleDayNameRef"
for="coupleDayNameRef"
dense
bg-color="white"
outlined
v-model="formDataFollowSpouse.coupleDayName"
label="ชื่อคู่สมรส"
:readonly="!edit"
:rules="[(val) => !!val || `${'ชื่อคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space
ref="coupleDayPositionRef"
for="coupleDayPositionRef"
dense
outlined
bg-color="white"
v-model="formDataFollowSpouse.coupleDayPosition"
label="ตำแหน่งคู่สมรส"
:readonly="!edit"
:rules="[(val) => !!val || `${'ตำแหน่งคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelRef"
for="coupleDayLevelRef"
dense
hide-bottom-space
outlined
bg-color="white"
v-model="formDataFollowSpouse.coupleDayLevel"
label="ระดับคู่สมรส"
:readonly="!edit"
:rules="[(val) => !!val || `${'ระดับคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelCountryRef"
for="coupleDayLevelCountryRef"
hide-bottom-space
dense
outlined
bg-color="white"
v-model="formDataFollowSpouse.coupleDayLevelCountry"
label="ไปปฏิบัติราชการ ณ ประเทศ"
:readonly="!edit"
:rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
/>
</div>
<div class="text-weight-bold text-dark col-12">
ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
</div>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formDataFollowSpouse.followHistoryStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="followHistoryStartRef"
for="followHistoryStartRef"
hide-bottom-space
readonly
bg-color="white"
class="full-width"
:model-value="
formDataFollowSpouse.followHistoryStart != null
? date2Thai(formDataFollowSpouse.followHistoryStart)
: null
"
:label="`${'ตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formDataFollowSpouse.followHistoryEnd"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="followHistoryEndRef"
for="followHistoryEndRef"
hide-bottom-space
bg-color="white"
readonly
class="full-width"
:model-value="
formDataFollowSpouse.followHistoryEnd != null
? date2Thai(formDataFollowSpouse.followHistoryEnd)
: null
"
:label="`${'ถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="followHistoryCountryRef"
for="followHistoryCountryRef"
v-model="formDataFollowSpouse.followHistoryCountry"
label="ประเทศ"
:rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
readonly
/>
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
:readonly="formDataFollowSpouse.followHistoryTime !== ''"
hide-bottom-space
bg-color="white"
ref="followHistoryTimeRef"
for="followHistoryTimeRef"
v-model="formDataFollowSpouse.followHistoryTime"
label="เป็นเวลา"
/>
<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="formDataFollowSpouse.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataFollowSpouse.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item
v-for="(file, index) in formDataFollowSpouse.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template>

437
src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue Normal file
View file

@ -0,0 +1,437 @@
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import genReport from "@/plugins/genreport";
/** Use */
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
mixin;
const router = useRouter();
const edit = ref<boolean>(true);
const isSave = ref<boolean>(false);
const files = ref<any>(null);
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
onConfirm: {
type: Function,
default: () => "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formDataRehabilitation = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDocument: "",
leaveDetail: "",
leaveDraftDocument: null,
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: RehabilitationForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
// if (formDataRehabilitation.leaveDraftDocument.length > 0) {
// const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
// const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
// type: formDataRehabilitation.leaveDraftDocument[0].type,
// })
// formData.append("leaveDraftDocument", newFileDraft) //
// }
// if (formDataRehabilitation.leaveDocument.length > 0) {
// const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataRehabilitation.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// } //
formData.append(
"leaveDraftDocument",
formDataRehabilitation.leaveDraftDocument
);
formData.append("leaveDocument", formDataRehabilitation.leaveDocument);
formData.append("type", formDataRehabilitation.type); //
formData.append(
"leaveStartDate",
dateToISO(formDataRehabilitation.leaveStartDate)
); //
formData.append(
"leaveEndDate",
dateToISO(formDataRehabilitation.leaveEndDate)
); //
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
props.onSubmit(formData);
}
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const nameFileDraft = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true);
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
if (data.isLeave === true) {
// formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataRehabilitation.leaveTotal = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
}
//download function
async function onClickDownloadFile(id: string, fileName: string) {
showLoader();
await http
.get(config.API.leaveReport(id))
.then(async (res) => {
console.log(res);
const data = res.data.result;
await genReport(data, fileName);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
onMounted(() => {
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.leaveDocument = props.data.leaveDocument;
// formDataRehabilitation.leaveDraftDocument =
// props.data.leaveDraftDocument;
}
});
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="formDataRehabilitation.leaveWrote"
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
dense
outlined
bg-color="white"
label="เขียนที่"
hide-bottom-space
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<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'"
@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
:model-value="
formDataRehabilitation.leaveStartDate != null
? date2Thai(formDataRehabilitation.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
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"
: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
bg-color="white"
hide-bottom-space
:readonly="!formDataRehabilitation.leaveStartDate"
:model-value="
formDataRehabilitation.leaveEndDate != null
? date2Thai(formDataRehabilitation.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
v-model="formDataRehabilitation.leaveDetail"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
type="textarea"
label="รายละเอียด"
/>
<div class="col-12 col-sm-6">
<q-file
v-model="formDataRehabilitation.leaveDocument"
@added="fileUploadDoc"
use-chips
bg-color="white"
dense
outlined
multiple
label="เอกสารประกอบ"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div
v-if="
formDataRehabilitation.leaveWrote &&
formDataRehabilitation.leaveStartDate &&
formDataRehabilitation.leaveEndDate
"
class="q-mt-md"
>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
</div>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">
ดาวน์โหลด
</div>
<q-btn
color="primary"
icon="download"
label="ดาวน์โหลดแบบฟอร์ม"
@click="
onClickDownloadFile(
'08dc05c8-4cfd-4603-81f8-92a401571717',
'แบบฟอร์ม'
)
"
/>
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">
อัปโหลด
</div>
<q-file
v-model="formDataRehabilitation.leaveDraftDocument"
use-chips
dense
label="แบบฟอร์ม"
outlined
bg-color="white"
multiple
accept="application/pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<!-- <div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
><q-tooltip>อัปโหลด</q-tooltip></q-btn
>
</div> -->
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
>
<q-btn
v-if="data"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</div>
</form>
</template>

171
src/modules/05_leave/components/FormLeave/Form.vue Normal file
View file

@ -0,0 +1,171 @@
<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";
const mixin = useCounterMixin();
const dataStore = useLeaveStore();
const { date2Thai } = mixin;
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
model: {
type: String,
default: "",
},
});
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
dateStart: new Date(),
subject: "เรื่อง",
who: "เรียนผู้ใด",
requestName: "ชื่อผู้ยื่น",
position: "ตำแหน่ง",
level: "ระดับ",
ocRequest: "สังกัด",
leaveabsentDaySummon: "2",
leaveUse: "1",
leaveRemaining: "1",
});
onMounted(() => {
dataStore.typeLeave = "";
});
</script>
<template>
<q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<datepicker
class="col-12 col-sm-4"
menu-class-name="modalfix"
v-model="dataStore.dateSendLeave"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="
dataStore.dateSendLeave != null
? date2Thai(dataStore.dateSendLeave)
: null
"
:label="`${'วันที่ยื่นใบลา'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer inputblack"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-4"
dense
bg-color="white"
outlined
readonly
v-model="dataStore.typeLeave"
label="เรื่อง"
/>
<q-input
class="col-12 col-sm-4"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.dear"
label="เรียน"
/>
<q-input
class="col-12 col-sm-3"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.fullName"
label="ชื่อผู้ยื่นขอ"
/>
<q-input
class="col-12 col-sm-3"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.positionName"
label="ตำแหน่งผู้ยื่นขอ"
/>
<q-input
class="col-12 col-sm-3"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.positionLevelName"
label="ระดับผู้ยื่นขอ"
/>
<q-input
class="col-12 col-sm-3"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.organizationName"
label="สังกัดผู้ยื่นขอ"
/>
<q-input
v-if="props.model === 'LV-005'"
class="col-12 col-sm-4"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.leaveLimit"
label="จำนวนสิทธิ์การลาที่ได้รับ"
/>
<q-input
class="col-12 col-sm-4"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.leaveTotal"
label="จำนวนสิทธิ์การลาที่ใช้ไป"
/>
<q-input
v-if="props.model === 'LV-005'"
class="col-12 col-sm-4"
dense
outlined
readonly
bg-color="white"
v-model="dataStore.leaveRemain"
label="จำนวนสิทธิ์การลาคงเหลือ"
/>
</div>
</q-card>
</template>

441
src/modules/05_leave/components/Forms/01_SickForm.vue
View file

@ -1,441 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const router = useRouter()
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataSick = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveRange: "ALL",
leaveTotal: "",
leaveLast: null,
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveRangeRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveLastRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveRange: leaveRangeRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataSick.leaveWrote = props.data.leaveWrote
formDataSick.leaveStartDate = props.data.leaveStartDate
formDataSick.leaveEndDate = props.data.leaveEndDate
formDataSick.contractTel = props.data.contractTel
formDataSick.leaveTotal = props.data.leaveTotal
formDataSick.leaveNumber = props.data.leaveNumber
formDataSick.leaveDetail = props.data.leaveDetail
formDataSick.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
formDataSick.leaveStartDate = null
formDataSick.leaveEndDate = null
}
console.log("testnull")
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
showLoader()
const formData = new FormData()
// if (formDataSick.leaveDocument.length > 0) {
// const blob = formDataSick.leaveDocument.slice(
// 0,
// formDataSick.leaveDocument[0].size
// );
// const newFile = new File(blob, nameFile.value, {
// type: formDataSick.leaveDocument[0].type,
// });
// formData.append("leaveDocument", newFile);
// }
formData.append("leaveDocument", formDataSick.leaveDocument)
formData.append("type", formDataSick.type)
formData.append("leaveRange", formDataSick.leaveRange)
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
formData.append("leaveWrote", formDataSick.leaveWrote)
formData.append("leaveAddress", formDataSick.leaveAddress)
formData.append("leaveNumber", formDataSick.leaveNumber)
formData.append("leaveDetail", formDataSick.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then(() => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
.finally(() => {
hideLoader()
})
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataSick.leaveStartDate ?? null,
EndLeaveDate: formDataSick.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
*/
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
})
function inputEdit(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
}
}
function resetEndDate(type: string) {
if (type === "day") {
formDataSick.EndLeaveDate === null
}
}
</script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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
hide-bottom-space
bg-color="white"
outlined
v-model="formDataSick.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="col-12 col-md-4 col-sm-12">
<q-radio v-model="formDataSick.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="formDataSick.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="formDataSick.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</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"
@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"
bg-color="white"
class="full-width cursor-pointer inputgreen"
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
style="color: var(--q-primary)"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
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="!formDataSick.leaveStartDate"
@update:model-value="FetchCheck(), isReadOnly"
: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="!formDataSick.leaveStartDate"
:class="inputEdit(isReadOnly)"
:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
bg-color="white"
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataSick.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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>
</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="formDataSick.leaveNumber"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
dense
outlined
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formDataSick.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
hide-bottom-space
bg-color="white"
/>
</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"
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-12 col-sm-6 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

391
src/modules/05_leave/components/Forms/03_Birth.vue
View file

@ -1,391 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import { useQuasar } from "quasar"
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const router = useRouter()
const $q = useQuasar()
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataBirth = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveLast: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataBirth.leaveWrote = props.data.leaveWrote
formDataBirth.leaveStartDate = props.data.leaveStartDate
formDataBirth.leaveEndDate = props.data.leaveEndDate
formDataBirth.leaveTotal = props.data.leaveTotal
formDataBirth.leaveNumber = props.data.leaveNumber
formDataBirth.leaveDetail = props.data.leaveDetail
formDataBirth.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataBirth.leaveLast = data.sumDateWork
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataBirth.leaveDocument.length > 0) {
// const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataBirth.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataBirth.leaveDocument)
formData.append("type", formDataBirth.type)
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
formData.append("leaveWrote", formDataBirth.leaveWrote)
formData.append("leaveAddress", formDataBirth.leaveAddress)
formData.append("leaveNumber", formDataBirth.leaveNumber)
formData.append("leaveDetail", formDataBirth.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<!-- ฟอร์มลาคลอดบุตร-->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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"
@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"
class="full-width datepicker"
:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-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
bg-color="white"
:readonly="!formDataBirth.leaveStartDate"
class="full-width datepicker"
:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataBirth.leaveTotal"
label="จำนวนวันที่ลา"
bg-color="white"
readonly
hide-bottom-space
/>
<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="formDataBirth.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!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="formDataBirth.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</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"
/>
<q-file
for="leaveDocumentRef"
hide-bottom-space
v-model="formDataBirth.leaveDocument"
@added="fileUploadDoc"
dense
bg-color="white"
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

447
src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
View file

@ -1,447 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const router = useRouter()
const $q = useQuasar()
const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataHelpWife = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
wifeDayName: "",
wifeDayDateBorn: null,
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const wifeDayNameRef = ref<object | null>(null)
const wifeDayDateBornRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
wifeDayName: wifeDayNameRef,
wifeDayDateBorn: wifeDayDateBornRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataHelpWife.leaveWrote = props.data.leaveWrote
formDataHelpWife.wifeDayName = props.data.wifeDayName
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
formDataHelpWife.leaveStartDate = props.data.leaveStartDate
formDataHelpWife.leaveEndDate = props.data.leaveEndDate
formDataHelpWife.leaveTotal = props.data.leaveTotal
formDataHelpWife.leaveNumber = props.data.leaveNumber
formDataHelpWife.leaveDetail = props.data.leaveDetail
formDataHelpWife.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
formDataHelpWife.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHelpWife.leaveStartDate ?? null, EndLeaveDate: formDataHelpWife.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataHelpWife.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataHelpWife.leaveDocument.length > 0) {
// const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataHelpWife.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataHelpWife.leaveDocument)
formData.append("type", formDataHelpWife.type)
formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
formData.append("leaveWrote", formDataHelpWife.leaveWrote)
formData.append("leaveAddress", formDataHelpWife.leaveAddress)
formData.append("leaveNumber", formDataHelpWife.leaveNumber)
formData.append("leaveDetail", formDataHelpWife.leaveDetail)
formData.append("wifeDayName", formDataHelpWife.wifeDayName)
formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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-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"
:rules="[val => !!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"
@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"
class="full-width datepicker"
:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-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 => !!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
hide-bottom-space
bg-color="white"
/>
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
<q-input
class="col-12 col-sm-12"
ref="wifeDayNameRef"
for="wifeDayNameRef"
dense
bg-color="white"
outlined
hide-bottom-space
v-model="formDataHelpWife.wifeDayName"
label="ชื่อภรรยา"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
/>
</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"
>
<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"
class="full-width datepicker"
:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
:label="`${'วันที่คลอด'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<div 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="formDataHelpWife.leaveNumber"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
bg-color="white"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!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="formDataHelpWife.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</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"
/>
<q-file
bg-color="white"
ref="leaveDocumentRef"
v-model="formDataHelpWife.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

442
src/modules/05_leave/components/Forms/05_VacationForm.vue
View file

@ -1,442 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
/** Use */
const $q = useQuasar()
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const router = useRouter()
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataVacation = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveRange: "ALL",
restDayOldTotal: "",
restDayCurrentTotal: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const restDayOldTotalRef = ref<object | null>(null)
const restDayCurrentTotalRef = ref<object | null>(null)
const leaveRangeRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveRange: leaveRangeRef,
restDayOldTotal: restDayOldTotalRef,
restDayCurrentTotal: restDayCurrentTotalRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataVacation.leaveWrote = props.data.leaveWrote
formDataVacation.restDayOldTotal = props.data.restDayOldTotal
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
formDataVacation.leaveStartDate = props.data.leaveStartDate
formDataVacation.leaveEndDate = props.data.leaveEndDate
formDataVacation.leaveTotal = props.data.leaveTotal
formDataVacation.leaveNumber = props.data.leaveNumber
formDataVacation.leaveDetail = props.data.leaveDetail
formDataVacation.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataVacation.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataVacation.leaveDocument.length > 0) {
// const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataVacation.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataVacation.leaveDocument)
formData.append("type", formDataVacation.type)
formData.append("leaveRange", formDataVacation.leaveRange)
formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
formData.append("leaveWrote", formDataVacation.leaveWrote)
formData.append("leaveAddress", formDataVacation.leaveAddress)
formData.append("leaveNumber", formDataVacation.leaveNumber)
formData.append("leaveDetail", formDataVacation.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
formDataVacation.leaveStartDate = null
formDataVacation.leaveEndDate = null
}
console.log("testnull")
}
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
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
})
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="col-12 col-md-4 col-sm-6">
<q-radio v-model="formDataVacation.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="formDataVacation.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="formDataVacation.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</div>
<q-input
class="col-12 col-md-4 col-sm-6"
ref="restDayOldTotalRef"
for="restDayOldTotalRef"
dense
hide-bottom-space
bg-color="white"
readonly
outlined
v-model="dataStore.restDayTotalOld"
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
/>
<q-input
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.leaveRemain"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
/>
<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"
@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"
class="full-width datepicker"
:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-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 => !!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"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataVacation.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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="formDataVacation.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<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="formDataVacation.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</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"
/>
<q-file
ref="leaveDocumentRef"
bg-color="white"
v-model="formDataVacation.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formDataVacation.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

545
src/modules/05_leave/components/Forms/06_OrdinationForm.vue
View file

@ -1,545 +0,0 @@
<script setup lang="ts">
import { reactive, ref, watch } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ตัวแปร ref สำหรับแสดง validate */
const ordainDayLocationNumberRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const totalLeaveRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const ordainDayOrdinationRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const ordainDayLocationAddressRef = ref<object | null>(null)
const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
const ordainDayLocationNameRef = ref<object | null>(null)
const ordainDayBuddhistLentNameRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** ข้อมูล v-model ของฟอร์ม */
const formDataOrdination = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leavegovernmentDate: new Date(),
leavebirthDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
ordainDayOrdination: new Date(),
ordainDayLocationName: "",
ordainDayLocationNumber: null,
ordainDayLocationAddress: "",
ordainDayBuddhistLentName: "",
ordainDayBuddhistLentAddress: "",
ordainDayStatus: "true",
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: OrdinationForm = {
leaveWrote: leaveWroteRef,
leavegovernmentDate: leavegovernmentDateRef,
leavebirthDate: leavebirthDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
totalLeave: totalLeaveRef,
ordainDayOrdination: ordainDayOrdinationRef,
ordainDayLocationName: ordainDayLocationNameRef,
ordainDayLocationNumber: ordainDayLocationNumberRef,
ordainDayLocationAddress: ordainDayLocationAddressRef,
ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
leaveDocument: leaveDocumentRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
// // Watch for changes in leaveEndDate and update leaveTotal accordingly
// watch(formDataOrdination.leaveEndDate, async () => {
// if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
// const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
// formDataOrdination.leaveTotal = newLeaveTotal
// console.log(newLeaveTotal)
// }
// // Update the leaveTotal value
// console.log("test")
// })
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataOrdination.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataOrdination.leaveDocument.length > 0) {
// const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataOrdination.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataOrdination.leaveDocument)
formData.append("type", formDataOrdination.type)
formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
formData.append("leaveWrote", formDataOrdination.leaveWrote)
formData.append("leaveDetail", formDataOrdination.leaveDetail)
formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
formDataOrdination.leaveTotal = newLeaveTotal
}
</script>
<!-- ฟอร์ม ลาอุปสมบท -->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent="onValidate" class="full-width">
<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="formDataOrdination.leaveWrote"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataOrdination.leaveStartDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="formDataOrdination.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
class="full-width datepicker"
:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataOrdination.leaveEndDate"
:locale="'th'"
autoApply
borderless
@update:model-value="updateLeaveTotal, FetchCheck()"
:readonly="!formDataOrdination.leaveStartDate"
:enableTimePicker="false"
:min-date="formDataOrdination.leaveStartDate"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveEndDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:readonly="!formDataOrdination.leaveStartDate"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataOrdination.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formDataOrdination.leavegovernmentDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavegovernmentDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="formDataOrdination.leavegovernmentDate != null ? date2Thai(formDataOrdination.leavegovernmentDate) : null"
:label="`${'วันที่เข้ารับราชการ'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formDataOrdination.leavebirthDate"
:locale="'th'"
autoApply
borderless
readonly
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavebirthDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="formDataOrdination.leavebirthDate != null ? date2Thai(formDataOrdination.leavebirthDate) : null"
:label="`${'วันเดือนปีเกิด'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
<div class="col-12">
<q-radio v-model="formDataOrdination.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
<q-radio v-model="formDataOrdination.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
</div>
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataOrdination.ordainDayOrdination"
:locale="'th'"
autoApply
full-width
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="ordainDayOrdinationRef"
dense
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
:label="`${'วันอุปสมบท'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
hide-bottom-space
ref="ordainDayLocationNameRef"
bg-color="white"
outlined
full-width
v-model="formDataOrdination.ordainDayLocationName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="ordainDayLocationNumberRef"
dense
full-width
outlined
v-model="formDataOrdination.ordainDayLocationNumber"
bg-color="white"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
label="หมายเลขโทรศัพท์"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/>
<q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense
ref="ordainDayLocationAddressRef"
bg-color="white"
outlined
hide-bottom-space
v-model="formDataOrdination.ordainDayLocationAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
/>
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
ref="ordainDayBuddhistLentNameRef"
bg-color="white"
hide-bottom-space
outlined
v-model="formDataOrdination.ordainDayBuddhistLentName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 cursor-pointer inputgreen"
dense
ref="ordainDayBuddhistLentAddressRef"
bg-color="white"
outlined
v-model="formDataOrdination.ordainDayBuddhistLentAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
hide-bottom-space
/>
<q-input
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="formDataOrdination.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<div class="col-12 col-sm-6">
<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

354
src/modules/05_leave/components/Forms/07_HajjForm.vue
View file

@ -1,354 +0,0 @@
<script setup lang="ts">
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const router = useRouter()
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataHaji = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leavegovernmentDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
hajjDayStatus: "true",
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: HajiForm = {
leaveWrote: leaveWroteRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDocument: leaveDocumentRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataHaji.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataHaji.leaveDocument.length > 0) {
// const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataHaji.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataHaji.leaveDocument)
formData.append("type", formDataHaji.type)
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
formData.append("leaveWrote", formDataHaji.leaveWrote)
formData.append("leaveDetail", formDataHaji.leaveDetail)
formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
formDataHaji.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formDataHaji.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formDataHaji.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'"
@update:model-value="formDataHaji.leaveEndDate = null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leaveStartDateRef"
bg-color="white"
class="full-width datepicker"
outlined
dense
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formDataHaji.leaveEndDate"
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'"
@update:model-value="updateLeaveTotal"
:readonly="!formDataHaji.leaveStartDate"
:min-date="formDataHaji.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"
bg-color="white"
outlined
dense
:readonly="!formDataHaji.leaveStartDate"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
@update:model-value="FetchCheck()"
:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataHaji.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<datepicker
v-model="formDataHaji.leavegovernmentDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
readonly
week-start="0"
:locale="'th'"
:enableTimePicker="false"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leavegovernmentDateRef"
bg-color="white"
class="full-width"
outlined
dense
readonly
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="formDataHaji.leavegovernmentDate != null ? date2Thai(formDataHaji.leavegovernmentDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
<div class="col-12">
<q-radio v-model="formDataHaji.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
</div>
<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

412
src/modules/05_leave/components/Forms/08_MilitaryForm.vue
View file

@ -1,412 +0,0 @@
<script setup lang="ts">
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const router = useRouter()
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const absentDaySummonRef = ref<object | null>(null)
const absentDayLocationRef = ref<object | null>(null)
const absentDayRegistorDateRef = ref<object | null>(null)
const absentDayGetInRef = ref<object | null>(null)
const absentDayAtRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataMilitary = reactive<any>({
type: dataStore.typeId,
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: 0,
leaveDocument: null,
leaveWrote: "",
absentDaySummon: "",
absentDayLocation: "",
absentDayRegistorDate: null,
absentDayGetIn: "",
absentDayAt: "",
leaveDetail: "",
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: MilitaryForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
absentDaySummon: absentDaySummonRef,
absentDayLocation: absentDayLocationRef,
absentDayRegistorDate: absentDayRegistorDateRef,
absentDayGetIn: absentDayGetInRef,
absentDayAt: absentDayAtRef,
leaveDetail: leaveDetailRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataMilitary.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataMilitary.leaveDocument.length > 0) {
// const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataMilitary.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataMilitary.leaveDocument)
formData.append("type", formDataMilitary.type)
formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
formData.append("absentDayAt", formDataMilitary.absentDayAt)
formData.append("leaveWrote", formDataMilitary.leaveWrote)
formData.append("leaveDetail", formDataMilitary.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
formDataMilitary.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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"
@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
class="full-width datepicker"
:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6 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"
: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"
class="full-width datepicker"
:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataMilitary.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/>
<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
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
/>
</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"
menu-class-name="modalfix"
v-model="formDataMilitary.absentDayRegistorDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="absentDayRegistorDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
:label="`${'ลงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
ref="absentDayGetInRef"
outlined
v-model="formDataMilitary.absentDayGetIn"
label="ให้เข้ารับการ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
ref="absentDayAtRef"
v-model="formDataMilitary.absentDayAt"
label="ณ ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
/>
</div>
</div>
<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

528
src/modules/05_leave/components/Forms/09_StudyForm.vue
View file

@ -1,528 +0,0 @@
<script setup lang="ts">
import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveSalaryRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const studyDayScholarshipRef = ref<object | null>(null)
const studyDayCountryRef = ref<object | null>(null)
const studyDayUniversityNameRef = ref<object | null>(null)
const studyDayDegreeLevelRef = ref<object | null>(null)
const studyDaySubjectRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataStudy = reactive<any>({
type: dataStore.typeId, //
leaveWrote: "", //
leaveStartDate: null,
leaveEndDate: null,
leavebirthDate: new Date(),
leavegovernmentDate: new Date(),
leaveSalary: 10000,
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "",
studyDayScholarship: "",
studyDayCountry: "",
studyDayUniversityName: "", //
studyDayDegreeLevel: "", //
studyDaySubject: "", //
leaveDocument: "", //
leaveDetail: "",
leaveTotal: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: studyDaySubjectForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leavebirthDate: leavebirthDateRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveSalary: leaveSalaryRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
studyDayCountry: studyDayCountryRef,
studyDayUniversityName: studyDayUniversityNameRef,
studyDayDegreeLevel: studyDayDegreeLevelRef,
studyDaySubject: studyDaySubjectRef,
leaveWrote: leaveWroteRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataStudy.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
async function saveFormData() {
const formData = new FormData()
// if (formDataStudy.leaveDocument.length > 0) {
// const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataStudy.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataStudy.leaveDocument)
formData.append("type", formDataStudy.type) //
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
formData.append("studyDaySubject", formDataStudy.studyDaySubject)
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
formData.append("studyDayCountry", formDataStudy.studyDayCountry)
formData.append("leaveWrote", formDataStudy.leaveWrote) //
formData.append("leaveDetail", formDataStudy.leaveDetail) //
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
formData.append("leaveAddress", formDataStudy.leaveAddress) //
formData.append("leaveNumber", formDataStudy.leaveNumber) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
formDataStudy.leaveTotal = newLeaveTotal
console.log("test")
}
/**
* แปลงตัวเลขเงินเดือน
*/
const formattedleaveSalary = computed(() => {
return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
})
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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'"
@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
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="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"
: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"
:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataStudy.leaveTotal"
label="มีกำหนด"
readonly
hide-bottom-space
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formDataStudy.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"
bg-color="white"
outlined
readonly
dense
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="formDataStudy.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"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
<q-input
v-model="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 => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
/>
</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
label="ชื่อสถานศึกษา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
/>
<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
label="ชั้นปริญญา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
/>
<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
label="ศึกษาวิชา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
/>
<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
label="ประเทศ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
/>
<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
label="ด้วยทุน"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/>
<q-input
v-model="formDataStudy.leaveNumber"
ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
unmasked-value
hide-bottom-space
mask="(###)-###-####"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
v-model="formDataStudy.leaveAddress"
ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</div>
</div>
<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

506
src/modules/05_leave/components/Forms/10_TrainForm.vue
View file

@ -1,506 +0,0 @@
<script setup lang="ts">
import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useQuasar } from "quasar"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataTrain = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leavebirthDate: new Date(),
leavegovernmentDate: new Date(),
leaveSalary: 10000,
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "",
studyDayScholarship: "",
studyDayCountry: "",
studyDayTrainingSubject: "",
studyDayTrainingName: "",
leaveDocument: "",
leaveDetail: "",
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const studyDayScholarshipRef = ref<object | null>(null)
const studyDayCountryRef = ref<object | null>(null)
const studyDayTrainingSubjectRef = ref<object | null>(null)
const studyDayTrainingNameRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: TrainForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leavebirthDate: leavebirthDateRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
studyDayCountry: studyDayCountryRef,
studyDayTrainingSubject: studyDayTrainingSubjectRef,
studyDayTrainingName: studyDayTrainingNameRef,
leaveWrote: leaveWroteRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataTrain.leaveStartDate ?? null, EndLeaveDate: formDataTrain.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataTrain.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataTrain.leaveDocument.length > 0) {
// const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataTrain.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// } //
formData.append("leaveDocument", formDataTrain.leaveDocument)
formData.append("type", formDataTrain.type) //
formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
formData.append("studyDayCountry", formDataTrain.studyDayCountry)
formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
formData.append("leaveWrote", formDataTrain.leaveWrote) //
formData.append("leaveDetail", formDataTrain.leaveDetail) //
formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
formData.append("leaveAddress", formDataTrain.leaveAddress) //
formData.append("leaveNumber", formDataTrain.leaveNumber) //
formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
formData.append("leaveSalary", formDataTrain.leaveSalary) //
formData.append("leaveTotal", formDataTrain.leaveTotal) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
formDataTrain.leaveTotal = newLeaveTotal
console.log("test")
}
/**
* แปลงตัวเลขเงินเดือน
*/
const formattedSalary = computed(() => {
return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
})
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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'"
@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
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="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"
: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"
:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataTrain.leaveTotal"
label="มีกำหนด"
readonly
hide-bottom-space
/>
<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="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<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="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(---black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
</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
:rules="[val => !!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
:rules="[val => !!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
:rules="[val => !!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
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/>
<q-input
v-model="formDataTrain.leaveNumber"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="leaveNumberRef"
dense
outlined
unmasked-value
hide-bottom-space
bg-color="white"
mask="(###)-###-####"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
v-model="formDataTrain.leaveAddress"
ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</div>
</div>
<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

402
src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
View file

@ -1,402 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
import genReport from "@/plugins/genreport"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const router = useRouter()
const isSave = ref<boolean>(false)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataWorkInternational = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDetail: "",
leaveDocument: [],
leaveDraftDocument: null,
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataWorkInternational.leaveWrote = props.data.leaveWrote
formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
formDataWorkInternational.leaveDetail = props.data.leaveDetail
formDataWorkInternational.leaveDocument = props.data.leaveDocument
formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const nameFileDraft = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
//download function
async function onClickDownloadFile(id: string, fileName: string) {
// showLoader();
await http
.get(config.API.leaveReport(id))
.then(async res => {
console.log(res)
const data = res.data.result
await genReport(data, fileName)
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
// hideLoader();
})
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataWorkInternational.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// //
// if (formDataWorkInternational.leaveDocument.length > 0) {
// const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataWorkInternational.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
// //
// if (formDataWorkInternational.leaveDraftDocument.length > 0) {
// const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
// const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
// type: formDataWorkInternational.leaveDraftDocument[0].type,
// })
// formData.append("leaveDraftDocument", newFileDraft) //
// }
formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
formData.append("type", formDataWorkInternational.type) //
formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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"
hide-bottom-space
bg-color="white"
for="leaveWroteRef"
dense
outlined
v-model="formDataWorkInternational.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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"
@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"
class="full-width datepicker"
:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
@update:model-value="FetchCheck()"
week-start="0"
:readonly="!formDataWorkInternational.leaveStartDate"
: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"
:readonly="!formDataWorkInternational.leaveStartDate"
class="full-width datepicker"
:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<!-- <q-input
class="col-md-3 col-sm-12"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
type="number"
v-model="formDataWorkInternational.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/> -->
<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"
/>
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataWorkInternational.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div v-if="formDataWorkInternational.leaveWrote && formDataWorkInternational.leaveEndDate && formDataWorkInternational.leaveStartDate" class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<!-- <div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
><q-tooltip>อัปโหลด</q-tooltip></q-btn
>
</div> -->
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</div>
</form>
</template>

581
src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
View file

@ -1,581 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import { useQuasar } from "quasar"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const router = useRouter()
const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataFollowSpouse = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "", //จำนวนวันลา
leaveSalaryText: 25000,
leaveSalary: 25000, //เงินเดือนปัจจุบัน
coupleDayName: "", //ชื่อคู่สมรส
coupleDayPosition: "", //ตำแหน่งคู่สมรส
coupleDayLevel: "", //ระดับคู่สมรส
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
followHistoryTime: "0 วัน",
followHistoryStart: new Date(),
followHistoryEnd: new Date(),
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
leaveDocument: [], //เอกสารปะกอบ
})
/** แปลงตัวแปร Salary */
const formattleaveSalaryText = arabicNumberToText(formDataFollowSpouse.leaveSalaryText)
const formattSalary = computed(() => {
return formDataFollowSpouse.leaveSalary !== null ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH") : ""
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveSalaryRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const coupleDayNameRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const coupleDayPositionRef = ref<object | null>(null)
const coupleDayLevelRef = ref<object | null>(null)
const coupleDayLevelCountryRef = ref<object | null>(null)
const followHistoryCountryRef = ref<object | null>(null)
const followHistoryTimeRef = ref<object | null>(null)
const followHistoryStartRef = ref<object | null>(null)
const followHistoryEndRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef, //เขียนที่***
leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
leaveTotal: leaveTotalRef, //จำนวนวันลา
leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
leaveDetail: leaveDetailRef, //รายละเอียดการลา
leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataFollowSpouse.leaveWrote = props.data.leaveWrote
formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
formDataFollowSpouse.leaveTotal = props.data.leaveTotal
formDataFollowSpouse.leaveDetail = props.data.leaveDetail
formDataFollowSpouse.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataFollowSpouse.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataFollowSpouse.leaveDocument.length > 0) {
// const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataFollowSpouse.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// } //
formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
formData.append("type", formDataFollowSpouse.type) //
formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
formDataFollowSpouse.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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
hide-bottom-space
bg-color="white"
outlined
v-model="formDataFollowSpouse.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!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"
@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"
class="full-width datepicker"
:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-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"
: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"
class="full-width datepicker"
:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataFollowSpouse.leaveTotal"
label="เป็นเวลา"
readonly
hide-bottom-space
/>
<div class="col-12 col-md-6 col-sm-12">
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattSalary"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-12 col-md-6 col-sm-12">
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattleaveSalaryText"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space
ref="coupleDayNameRef"
for="coupleDayNameRef"
dense
bg-color="white"
outlined
v-model="formDataFollowSpouse.coupleDayName"
label="ชื่อคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space
ref="coupleDayPositionRef"
for="coupleDayPositionRef"
dense
outlined
bg-color="white"
v-model="formDataFollowSpouse.coupleDayPosition"
label="ตำแหน่งคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelRef"
for="coupleDayLevelRef"
dense
hide-bottom-space
outlined
bg-color="white"
v-model="formDataFollowSpouse.coupleDayLevel"
label="ระดับคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelCountryRef"
for="coupleDayLevelCountryRef"
hide-bottom-space
dense
outlined
bg-color="white"
v-model="formDataFollowSpouse.coupleDayLevelCountry"
label="ไปปฏิบัติราชการ ณ ประเทศ"
:readonly="!edit"
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
/>
</div>
<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formDataFollowSpouse.followHistoryStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="followHistoryStartRef"
for="followHistoryStartRef"
hide-bottom-space
readonly
bg-color="white"
class="full-width"
:model-value="formDataFollowSpouse.followHistoryStart != null ? date2Thai(formDataFollowSpouse.followHistoryStart) : null"
:label="`${'ตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formDataFollowSpouse.followHistoryEnd"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="followHistoryEndRef"
for="followHistoryEndRef"
hide-bottom-space
bg-color="white"
readonly
class="full-width"
:model-value="formDataFollowSpouse.followHistoryEnd != null ? date2Thai(formDataFollowSpouse.followHistoryEnd) : null"
:label="`${'ถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="followHistoryCountryRef"
for="followHistoryCountryRef"
v-model="formDataFollowSpouse.followHistoryCountry"
label="ประเทศ"
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
readonly
/>
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
:readonly="formDataFollowSpouse.followHistoryTime !== ''"
hide-bottom-space
bg-color="white"
ref="followHistoryTimeRef"
for="followHistoryTimeRef"
v-model="formDataFollowSpouse.followHistoryTime"
label="เป็นเวลา"
/>
<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="formDataFollowSpouse.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataFollowSpouse.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formDataFollowSpouse.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

381
src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
View file

@ -1,381 +0,0 @@
<script setup lang="ts">
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
import genReport from "@/plugins/genreport"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
const router = useRouter()
const edit = ref<boolean>(true)
const isSave = ref<boolean>(false)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Array,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataRehabilitation = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDocument: "",
leaveDetail: "",
leaveDraftDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: RehabilitationForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const nameFileDraft = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null, EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataRehabilitation.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
//download function
async function onClickDownloadFile(id: string, fileName: string) {
// showLoader();
await http
.get(config.API.leaveReport(id))
.then(async res => {
console.log(res)
const data = res.data.result
await genReport(data, fileName)
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
// hideLoader();
})
}
// //download function
// async function onClickUpload() {
// // showLoader();
// const data = {
// template: "leave16",
// reportName: "docx-report",
// data: {
// leaveWrote: "",
// dateSendLeave: "",
// leaveTypeName: "",
// dear: "",
// fullname: "",
// fullnameEng: "",
// positionName: "",
// positionLeaveName: "",
// organizationName: "",
// leaveDateStart: "",
// leaveDateEnd: "",
// },
// }
// await http
// .post(config.API.leaveReport())
// .then(async res => {
// console.log(res)
// const data = res.data.result
// await genReport(data, "รายงาน")
// })
// .catch(err => {
// messageError($q, err)
// })
// .finally(() => {
// // hideLoader();
// })
// }
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataRehabilitation.leaveDraftDocument.length > 0) {
// const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
// const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
// type: formDataRehabilitation.leaveDraftDocument[0].type,
// })
// formData.append("leaveDraftDocument", newFileDraft) //
// }
// if (formDataRehabilitation.leaveDocument.length > 0) {
// const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataRehabilitation.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// } //
formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
formData.append("type", formDataRehabilitation.type) //
formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="formDataRehabilitation.leaveWrote"
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
dense
outlined
bg-color="white"
label="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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'"
@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
:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
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"
: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
bg-color="white"
hide-bottom-space
:readonly="!formDataRehabilitation.leaveStartDate"
:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div v-if="formDataRehabilitation.leaveWrote && formDataRehabilitation.leaveStartDate && formDataRehabilitation.leaveEndDate" class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="formDataRehabilitation.leaveDraftDocument" use-chips dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<!-- <div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
><q-tooltip>อัปโหลด</q-tooltip></q-btn
>
</div> -->
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</div>
</form>
</template>

84
src/modules/05_leave/components/Forms/Form.vue
View file

@ -1,84 +0,0 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
const $q = useQuasar()
const mixin = useCounterMixin()
const dataStore = useLeaveStore()
const { date2Thai, success, messageError } = mixin
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
model: {
type: String,
default: "",
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
dateStart: new Date(),
subject: "เรื่อง",
who: "เรียนผู้ใด",
requestName: "ชื่อผู้ยื่น",
position: "ตำแหน่ง",
level: "ระดับ",
ocRequest: "สังกัด",
leaveabsentDaySummon: "2",
leaveUse: "1",
leaveRemaining: "1",
})
onMounted(async () => {
// await FetchProfile()
})
</script>
<template>
<q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="formData.dateStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
:label="`${'วันที่ยื่นใบลา'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer inputblack" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="dataStore.typeLeave" label="เรื่อง" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.dear" label="เรียน" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.fullName" label="ชื่อผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionName" label="ตำแหน่งผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionLevelName" label="ระดับผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.organizationName" label="สังกัดผู้ยื่นขอ" />
<q-input v-if="props.model === 'LV-005'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
<q-input v-if="props.model === 'LV-005'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
</div>
</q-card>
</template>

17
src/modules/05_leave/components/ListView.vue
View file

@ -176,6 +176,13 @@ onMounted(async () => {
<q-td key="status" :props="props">
<div class="col-12 row items-center">
<div @click="onClickView(props.row.id, props.row.status)">
<q-icon
v-if="props.row.status == 'DRAFT'"
size="10px"
color="light-grey"
name="mdi-circle"
class="q-mr-sm"
/>
<q-icon
v-if="props.row.status == 'APPROVE'"
size="10px"
@ -217,6 +224,11 @@ onMounted(async () => {
<q-space />
<q-btn
v-if="
props.row.status != 'DELETE' &&
props.row.status != 'REJECT' &&
props.row.status != 'CANCEL'
"
flat
icon="mdi-dots-vertical"
color="grey-8"
@ -228,11 +240,6 @@ onMounted(async () => {
<q-menu>
<q-list>
<q-item
v-if="
props.row.status != 'DELETE' &&
props.row.status != 'REJECT' &&
props.row.status != 'CANCEL'
"
clickable
v-close-popup
@click="onClickView(props.row.id, 'CANCEL')"

1
src/modules/05_leave/components/Table.vue
View file

@ -91,6 +91,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
updatePagination(currentPage.value, pagination.value.rowsPerPage);
});
</script>
<template>
<div class="q-py-sm row">
<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">

142
src/modules/05_leave/components/formEdit/Form.vue
View file

@ -1,142 +0,0 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
const $q = useQuasar()
const mixin = useCounterMixin()
const dataStore = useLeaveStore()
const { date2Thai, success, messageError } = mixin
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
model: {
type: String,
default: "",
},
leaveTypeId: {
type: String,
default: "",
},
onSubmit: {
type: Function,
default: () => "",
},
data: {
type: Object,
required: true,
},
})
/** ข้อมูล v-model ของฟอร์ม */
// const formData = reactive<FormData>({
// dateStart: new Date(),
// subject: "เรื่อง",
// who: "เรียนผู้ใด",
// requestName: "ชื่อผู้ยื่น",
// position: "ตำแหน่ง",
// level: "ระดับ",
// ocRequest: "สังกัด",
// leaveabsentDaySummon: "2",
// leaveUse: "1",
// leaveRemaining: "1",
// })
/**
*ตัวแปร profile ที่จะส่งออก
*/
const dateSendLeave = ref<Date>() //วันที่ยื่นใบลา
const leaveTypeName = ref<string>("") //Name ประเภทการลา
const dear = ref<string>("") //เรียน
const fullName = ref<string>("") //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
const positionName = ref<string>("") //ตำแหน่งผู้ยื่นขอ
const positionLevelName = ref<string>("") //ระดับผู้ยื่นขอ
const organizationName = ref<string>("") //สังกัดผู้ยื่นขอ
const leaveLimit = ref<number>(0) //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
const leaveTotal = ref<number>(0) //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
const leaveRemain = ref<number>(0) //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
const restDayTotalOld = ref<number>(0) //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
const birthDate = ref<Date>() //วันเกิด
const dateAppoint = ref<Date>() //วันที่เข้ารับราชการ
const salary = ref<number>(0) //เงินเดือนปัจจุบัน
const salaryText = ref<string>("") //เงินเดือนปัจจุบัน(ภาษาไทย)
const leaveLast = ref<any>()
const restDayCurrentTotal = ref<string>("")
//ดึงข้อมูล profile จาก API
async function fetchProfile() {
console.log(props.leaveTypeId)
await http
.post(config.API.leaveProfile(), { type: props.leaveTypeId })
.then((res: any) => {
const data = res.data.result
dateSendLeave.value = data.dateSendLeave
leaveTypeName.value = data.leaveTypeName
dear.value = data.dear
fullName.value = data.fullName
positionName.value = data.positionName
positionLevelName.value = data.positionLevelName
organizationName.value = data.organizationName
leaveLimit.value = data.leaveLimit
leaveTotal.value = data.leaveTotal
leaveRemain.value = data.leaveRemain
restDayTotalOld.value = data.restDayTotalOld
birthDate.value = data.birthDate
dateAppoint.value = data.dateAppoint
salary.value = data.salary
salaryText.value = data.salaryText
leaveLast.value = date2Thai(data.leaveLast) !== "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"
restDayCurrentTotal.value = data.restDayCurrentTotal
})
.catch((e: any) => {
messageError($q, e)
})
}
onMounted(async () => {
await setTimeout(() => fetchProfile(), 500)
})
</script>
<template>
<q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="dateSendLeave" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="dateSendLeave != null ? date2Thai(dateSendLeave) : null"
:label="`${'วันที่ยื่นใบลา'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer inputblack" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="leaveTypeName" label="เรื่อง" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dear" label="เรียน" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="fullName" label="ชื่อผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionName" label="ตำแหน่งผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionLevelName" label="ระดับผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="organizationName" label="สังกัดผู้ยื่นขอ" />
<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
</div>
</q-card>
</template>

391
src/modules/05_leave/components/formEdit/formEdit_Birth.vue
View file

@ -1,391 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import { useQuasar } from "quasar"
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const router = useRouter()
const $q = useQuasar()
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataBirth = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveLast: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataBirth.leaveWrote = props.data.leaveWrote
formDataBirth.leaveStartDate = props.data.leaveStartDate
formDataBirth.leaveEndDate = props.data.leaveEndDate
formDataBirth.leaveTotal = props.data.leaveTotal
formDataBirth.leaveNumber = props.data.leaveNumber
formDataBirth.leaveDetail = props.data.leaveDetail
formDataBirth.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataBirth.leaveLast = data.sumDateWork
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataBirth.leaveDocument.length > 0) {
// const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataBirth.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataBirth.leaveDocument)
formData.append("type", formDataBirth.type)
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
formData.append("leaveWrote", formDataBirth.leaveWrote)
formData.append("leaveAddress", formDataBirth.leaveAddress)
formData.append("leaveNumber", formDataBirth.leaveNumber)
formData.append("leaveDetail", formDataBirth.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<!-- ฟอร์มลาคลอดบุตร-->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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="props.data.leaveWrote"
label="เขียนที่"
hide-bottom-space
bg-color="white"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
@update:model-value="props.data.leaveDateEnd = 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"
class="full-width datepicker"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
@update:model-value="FetchCheck()"
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
:readonly="!props.data.leaveDateStart"
:min-date="props.data.leaveDateStart"
>
<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="!props.data.leaveDateStart"
class="full-width datepicker"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="จำนวนวันที่ลา"
bg-color="white"
readonly
hide-bottom-space
/>
<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="props.data.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!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="props.data.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</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="props.data.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file
for="leaveDocumentRef"
hide-bottom-space
v-model="props.data.leaveDocument"
@added="fileUploadDoc"
dense
bg-color="white"
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

570
src/modules/05_leave/components/formEdit/formEdit_FollowSpouse.vue
View file

@ -1,570 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import { useQuasar } from "quasar"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const router = useRouter()
const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataFollowSpouse = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "", //จำนวนวันลา
leaveSalaryText: 25000,
leaveSalary: 25000, //เงินเดือนปัจจุบัน
coupleDayName: "", //ชื่อคู่สมรส
coupleDayPosition: "", //ตำแหน่งคู่สมรส
coupleDayLevel: "", //ระดับคู่สมรส
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
followHistoryTime: "0 วัน",
followHistoryStart: new Date(),
followHistoryEnd: new Date(),
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
leaveDocument: [], //เอกสารปะกอบ
})
/** แปลงตัวแปร Salary */
const formattleaveSalaryText = arabicNumberToText(props.data.leaveSalaryText)
const formattSalary = computed(() => {
return props.data.leaveSalary !== null ? props.data.leaveSalary.toLocaleString("th-TH") : ""
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveSalaryRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const coupleDayNameRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const coupleDayPositionRef = ref<object | null>(null)
const coupleDayLevelRef = ref<object | null>(null)
const coupleDayLevelCountryRef = ref<object | null>(null)
const followHistoryCountryRef = ref<object | null>(null)
const followHistoryTimeRef = ref<object | null>(null)
const followHistoryStartRef = ref<object | null>(null)
const followHistoryEndRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef, //เขียนที่***
leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
leaveTotal: leaveTotalRef, //จำนวนวันลา
leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
leaveDetail: leaveDetailRef, //รายละเอียดการลา
leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataFollowSpouse.leaveWrote = props.data.leaveWrote
formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
formDataFollowSpouse.leaveTotal = props.data.leaveTotal
formDataFollowSpouse.leaveDetail = props.data.leaveDetail
formDataFollowSpouse.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataFollowSpouse.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataFollowSpouse.leaveDocument.length > 0) {
// const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataFollowSpouse.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// } //
formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
formData.append("type", formDataFollowSpouse.type) //
formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
formDataFollowSpouse.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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
hide-bottom-space
bg-color="white"
outlined
v-model="props.data.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
@update:model-value="props.data.leaveDateEnd = 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"
class="full-width datepicker"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
@update:model-value="updateLeaveTotal, FetchCheck()"
:readonly="!props.data.leaveDateStart"
:min-date="props.data.leaveDateStart"
>
<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="!props.data.leaveDateStart"
class="full-width datepicker"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="เป็นเวลา"
readonly
hide-bottom-space
/>
<div class="col-12 col-md-6 col-sm-12">
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattSalary"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-12 col-md-6 col-sm-12">
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattleaveSalaryText"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space
ref="coupleDayNameRef"
for="coupleDayNameRef"
dense
bg-color="white"
outlined
v-model="props.data.coupleDayName"
label="ชื่อคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space
ref="coupleDayPositionRef"
for="coupleDayPositionRef"
dense
outlined
bg-color="white"
v-model="props.data.coupleDayPosition"
label="ตำแหน่งคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelRef"
for="coupleDayLevelRef"
dense
hide-bottom-space
outlined
bg-color="white"
v-model="props.data.coupleDayLevel"
label="ระดับคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
/>
</div>
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelCountryRef"
for="coupleDayLevelCountryRef"
hide-bottom-space
dense
outlined
bg-color="white"
v-model="props.data.coupleDayLevelCountry"
label="ไปปฏิบัติราชการ ณ ประเทศ"
:readonly="!edit"
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
/>
</div>
<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="props.data.followHistoryStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="followHistoryStartRef"
for="followHistoryStartRef"
hide-bottom-space
readonly
bg-color="white"
class="full-width"
:model-value="props.data.followHistoryStart != null ? date2Thai(props.data.followHistoryStart) : null"
:label="`${'ตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="props.data.followHistoryEnd"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="followHistoryEndRef"
for="followHistoryEndRef"
hide-bottom-space
bg-color="white"
readonly
class="full-width"
:model-value="props.data.followHistoryEnd != null ? date2Thai(props.data.followHistoryEnd) : null"
:label="`${'ถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="followHistoryCountryRef"
for="followHistoryCountryRef"
v-model="props.data.followHistoryCountry"
label="ประเทศ"
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
readonly
/>
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
:readonly="props.data.followHistoryTime !== ''"
hide-bottom-space
bg-color="white"
ref="followHistoryTimeRef"
for="followHistoryTimeRef"
v-model="props.data.followHistoryTime"
label="เป็นเวลา"
/>
<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="props.data.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file ref="fileRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

354
src/modules/05_leave/components/formEdit/formEdit_Hajj.vue
View file

@ -1,354 +0,0 @@
<script setup lang="ts">
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const router = useRouter()
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataHaji = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leavegovernmentDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
hajjDayStatus: "true",
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: HajiForm = {
leaveWrote: leaveWroteRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDocument: leaveDocumentRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataHaji.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataHaji.leaveDocument.length > 0) {
// const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataHaji.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataHaji.leaveDocument)
formData.append("type", formDataHaji.type)
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
formData.append("leaveWrote", formDataHaji.leaveWrote)
formData.append("leaveDetail", formDataHaji.leaveDetail)
formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
props.data.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="props.data.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="props.data.leaveDateStart"
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'"
@update:model-value="props.data.leaveDateEnd = null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leaveStartDateRef"
bg-color="white"
class="full-width datepicker"
outlined
dense
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="props.data.leaveDateEnd"
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'"
@update:model-value="updateLeaveTotal"
:readonly="!props.data.leaveDateStart"
:min-date="props.data.leaveDateStart"
>
<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"
bg-color="white"
outlined
dense
:readonly="!props.data.leaveDateStart"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
@update:model-value="FetchCheck()"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<datepicker
v-model="props.data.leavegovernmentDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
readonly
week-start="0"
:locale="'th'"
:enableTimePicker="false"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leavegovernmentDateRef"
bg-color="white"
class="full-width"
outlined
dense
readonly
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
<div class="col-12">
<q-radio v-model="props.data.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
<q-radio v-model="props.data.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
</div>
<q-input v-model="props.data.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="props.data.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

436
src/modules/05_leave/components/formEdit/formEdit_HelpWifeBirth.vue
View file

@ -1,436 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const router = useRouter()
const $q = useQuasar()
const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataHelpWife = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
wifeDayName: "",
wifeDayDateBorn: null,
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const wifeDayNameRef = ref<object | null>(null)
const wifeDayDateBornRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
wifeDayName: wifeDayNameRef,
wifeDayDateBorn: wifeDayDateBornRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataHelpWife.leaveWrote = props.data.leaveWrote
formDataHelpWife.wifeDayName = props.data.wifeDayName
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
formDataHelpWife.leaveStartDate = props.data.leaveStartDate
formDataHelpWife.leaveEndDate = props.data.leaveEndDate
formDataHelpWife.leaveTotal = props.data.leaveTotal
formDataHelpWife.leaveNumber = props.data.leaveNumber
formDataHelpWife.leaveDetail = props.data.leaveDetail
formDataHelpWife.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
formDataHelpWife.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHelpWife.leaveStartDate ?? null, EndLeaveDate: formDataHelpWife.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataHelpWife.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataHelpWife.leaveDocument.length > 0) {
// const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataHelpWife.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataHelpWife.leaveDocument)
formData.append("type", formDataHelpWife.type)
formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
formData.append("leaveWrote", formDataHelpWife.leaveWrote)
formData.append("leaveAddress", formDataHelpWife.leaveAddress)
formData.append("leaveNumber", formDataHelpWife.leaveNumber)
formData.append("leaveDetail", formDataHelpWife.leaveDetail)
formData.append("wifeDayName", formDataHelpWife.wifeDayName)
formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
outlined
hide-bottom-space
bg-color="white"
v-model="props.data.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
@update:model-value="props.data.leaveDateEnd = 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"
class="full-width datepicker"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
borderless
hide-bottom-space
:enableTimePicker="false"
@update:model-value="updateLeaveTotal, FetchCheck()"
week-start="0"
:readonly="!props.data.leaveDateStart"
:min-date="props.data.leaveDateStart"
>
<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="!props.data.leaveDateStart"
class="full-width datepicker"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
bg-color="white"
/>
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
<q-input
class="col-12 col-sm-12"
ref="wifeDayNameRef"
for="wifeDayNameRef"
dense
bg-color="white"
outlined
hide-bottom-space
v-model="props.data.wifeDayName"
label="ชื่อภรรยา"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
/>
</div>
<datepicker
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.wifeDayDateBorn"
:locale="'th'"
autoApply
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
>
<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"
class="full-width datepicker"
:model-value="props.data.wifeDayDateBorn != null ? date2Thai(props.data.wifeDayDateBorn) : null"
:label="`${'วันที่คลอด'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<div 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="props.data.leaveNumber"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
bg-color="white"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!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="props.data.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</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="props.data.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file bg-color="white" ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

412
src/modules/05_leave/components/formEdit/formEdit_Military.vue
View file

@ -1,412 +0,0 @@
<script setup lang="ts">
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const router = useRouter()
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const absentDaySummonRef = ref<object | null>(null)
const absentDayLocationRef = ref<object | null>(null)
const absentDayRegistorDateRef = ref<object | null>(null)
const absentDayGetInRef = ref<object | null>(null)
const absentDayAtRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataMilitary = reactive<any>({
type: dataStore.typeId,
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: 0,
leaveDocument: null,
leaveWrote: "",
absentDaySummon: "",
absentDayLocation: "",
absentDayRegistorDate: null,
absentDayGetIn: "",
absentDayAt: "",
leaveDetail: "",
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: MilitaryForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
absentDaySummon: absentDaySummonRef,
absentDayLocation: absentDayLocationRef,
absentDayRegistorDate: absentDayRegistorDateRef,
absentDayGetIn: absentDayGetInRef,
absentDayAt: absentDayAtRef,
leaveDetail: leaveDetailRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataMilitary.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataMilitary.leaveDocument.length > 0) {
// const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataMilitary.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataMilitary.leaveDocument)
formData.append("type", formDataMilitary.type)
formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
formData.append("absentDayAt", formDataMilitary.absentDayAt)
formData.append("leaveWrote", formDataMilitary.leaveWrote)
formData.append("leaveDetail", formDataMilitary.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(props.data.leaveDateStart, props.data.leaveDateEnd)
props.data.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="props.data.leaveWrote"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateStart"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="props.data.leaveDateEnd = 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
class="full-width datepicker"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="updateLeaveTotal, FetchCheck()"
:readonly="!props.data.leaveDateStart"
:min-date="props.data.leaveDateStart"
>
<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="!props.data.leaveDateStart"
class="full-width datepicker"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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="props.data.absentDaySummon"
label="ได้รับหมายเรียกของ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/>
<q-input
ref="atRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
v-model="props.data.absentDayLocation"
label="ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
/>
</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"
menu-class-name="modalfix"
v-model="props.data.absentDayRegistorDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="absentDayRegistorDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="props.data.absentDayRegistorDate != null ? date2Thai(props.data.absentDayRegistorDate) : null"
:label="`${'ลงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
ref="absentDayGetInRef"
outlined
v-model="props.data.absentDayGetIn"
label="ให้เข้ารับการ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
ref="absentDayAtRef"
v-model="props.data.absentDayAt"
label="ณ ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
/>
</div>
</div>
<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="props.data.leaveDetail" type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

545
src/modules/05_leave/components/formEdit/formEdit_Ordinationvue.vue
View file

@ -1,545 +0,0 @@
<script setup lang="ts">
import { reactive, ref, watch } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ตัวแปร ref สำหรับแสดง validate */
const ordainDayLocationNumberRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const totalLeaveRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const ordainDayOrdinationRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const ordainDayLocationAddressRef = ref<object | null>(null)
const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
const ordainDayLocationNameRef = ref<object | null>(null)
const ordainDayBuddhistLentNameRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** ข้อมูล v-model ของฟอร์ม */
const formDataOrdination = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leavegovernmentDate: new Date(),
leavebirthDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
ordainDayOrdination: new Date(),
ordainDayLocationName: "",
ordainDayLocationNumber: null,
ordainDayLocationAddress: "",
ordainDayBuddhistLentName: "",
ordainDayBuddhistLentAddress: "",
ordainDayStatus: "true",
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: OrdinationForm = {
leaveWrote: leaveWroteRef,
leavegovernmentDate: leavegovernmentDateRef,
leavebirthDate: leavebirthDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
totalLeave: totalLeaveRef,
ordainDayOrdination: ordainDayOrdinationRef,
ordainDayLocationName: ordainDayLocationNameRef,
ordainDayLocationNumber: ordainDayLocationNumberRef,
ordainDayLocationAddress: ordainDayLocationAddressRef,
ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
leaveDocument: leaveDocumentRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
// // Watch for changes in leaveEndDate and update leaveTotal accordingly
// watch(formDataOrdination.leaveEndDate, async () => {
// if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
// const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
// formDataOrdination.leaveTotal = newLeaveTotal
// console.log(newLeaveTotal)
// }
// // Update the leaveTotal value
// console.log("test")
// })
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataOrdination.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataOrdination.leaveDocument.length > 0) {
// const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataOrdination.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataOrdination.leaveDocument)
formData.append("type", formDataOrdination.type)
formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
formData.append("leaveWrote", formDataOrdination.leaveWrote)
formData.append("leaveDetail", formDataOrdination.leaveDetail)
formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
formDataOrdination.leaveTotal = newLeaveTotal
}
</script>
<!-- ฟอร์ม ลาอุปสมบท -->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent="onValidate" class="full-width">
<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="props.data.leaveWrote"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateStart"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="props.data.leaveDateEnd = 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
class="full-width datepicker"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
borderless
@update:model-value="updateLeaveTotal, FetchCheck()"
:readonly="!props.data.leaveDateStart"
:enableTimePicker="false"
:min-date="props.data.leaveDateStart"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveEndDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:readonly="!props.data.leaveDateStart"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="props.data.leavegovernmentDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavegovernmentDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
:label="`${'วันที่เข้ารับราชการ'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="props.data.leavebirthDate"
:locale="'th'"
autoApply
borderless
readonly
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavebirthDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="props.data.leavebirthDate != null ? date2Thai(props.data.leavebirthDate) : null"
:label="`${'วันเดือนปีเกิด'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
<div class="col-12">
<q-radio v-model="props.data.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
<q-radio v-model="props.data.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
</div>
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
<datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.ordainDayOrdination"
:locale="'th'"
autoApply
full-width
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="ordainDayOrdinationRef"
dense
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="props.data.ordainDayOrdination != null ? date2Thai(props.data.ordainDayOrdination) : null"
:label="`${'วันอุปสมบท'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
hide-bottom-space
ref="ordainDayLocationNameRef"
bg-color="white"
outlined
full-width
v-model="props.data.ordainDayLocationName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="ordainDayLocationNumberRef"
dense
full-width
outlined
v-model="props.data.ordainDayLocationNumber"
bg-color="white"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
label="หมายเลขโทรศัพท์"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/>
<q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense
ref="ordainDayLocationAddressRef"
bg-color="white"
outlined
hide-bottom-space
v-model="props.data.ordainDayLocationAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
/>
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
ref="ordainDayBuddhistLentNameRef"
bg-color="white"
hide-bottom-space
outlined
v-model="props.data.ordainDayBuddhistLentName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 cursor-pointer inputgreen"
dense
ref="ordainDayBuddhistLentAddressRef"
bg-color="white"
outlined
v-model="props.data.ordainDayBuddhistLentAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
hide-bottom-space
/>
<q-input
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="props.data.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<div class="col-12 col-sm-6">
<q-file ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

338
src/modules/05_leave/components/formEdit/formEdit_Rehabilitation.vue
View file

@ -1,338 +0,0 @@
<script setup lang="ts">
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
import genReport from "@/plugins/genreport"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
const router = useRouter()
const edit = ref<boolean>(true)
const isSave = ref<boolean>(false)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
required: true,
},
onSubmit: {
type: Function,
default: () => "",
},
leaveId: {
type: String,
require: true,
},
})
// /** ข้อมูล v-model ของฟอร์ม */
// const formDataRehabilitation = reactive<any>({
// type: dataStore.typeId,
// leaveWrote: "",
// leaveStartDate: null,
// leaveEndDate: null,
// leaveDocument: "",
// leaveDetail: "",
// leaveDraftDocument: null,
// })
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: RehabilitationForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const nameFileDraft = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
// await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: props.data.leaveTypeId ?? null, StartLeaveDate: props.data.leaveDateStart ?? null, EndLeaveDate: props.data.leaveDateEnd ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
props.data.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
console.log(props.leaveId)
//download function
async function onClickDownloadFile(id: string, fileName: string) {
// showLoader();
await http
.get(config.API.leaveReport(id))
.then(async res => {
console.log(res)
const data = res.data.result
await genReport(data, fileName)
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
// hideLoader();
})
}
// /**
// * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
// */
// async function saveFormData() {
// const formData = new FormData()
// formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
// formData.append("type", formDataRehabilitation.type) //
// formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
// formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
// formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
// formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
// await http
// .post(config.API.leaveUser(), formData)
// .then((res: any) => {
// success($q, "บันทึกสำเร็จ")
// router.push(`/leave`)
// })
// .catch((e: any) => {
// messageError($q, e)
// })
// }
</script>
<template>
<form @submit.prevent="onValidate">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark header">แก้ไขข้อมูล</div>
</div>
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="props.data.leaveWrote"
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
dense
outlined
bg-color="white"
label="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
v-model="props.data.leaveDateStart"
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'"
@update:model-value="props.data.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
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="props.data.leaveDateEnd"
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="!props.data.leaveDateStart"
:enableTimePicker="false"
:min-date="props.data.leaveDateStart"
>
<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
:readonly="!props.data.leaveDateEnd"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="props.data.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
<q-btn
color="primary"
icon="download"
label="ดาวน์โหลดแบบฟอร์ม"
@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
/>
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="props.data.leaveDraftDocument" use-chips dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="props.data.leaveDraftDocument != ''" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
</div>
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</div>
</form>
</template>

445
src/modules/05_leave/components/formEdit/formEdit_Sick.vue
View file

@ -1,445 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const router = useRouter()
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
leaveId: {
type: String,
require: true,
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataSick = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveRange: "ALL",
leaveTotal: "",
leaveLast: null,
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveRangeRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveLastRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveRange: leaveRangeRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataSick.leaveWrote = props.data.leaveWrote
formDataSick.leaveStartDate = props.data.leaveStartDate
formDataSick.leaveEndDate = props.data.leaveEndDate
formDataSick.contractTel = props.data.contractTel
formDataSick.leaveTotal = props.data.leaveTotal
formDataSick.leaveNumber = props.data.leaveNumber
formDataSick.leaveDetail = props.data.leaveDetail
formDataSick.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
formDataSick.leaveStartDate = null
formDataSick.leaveEndDate = null
}
console.log("testnull")
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
showLoader()
const formData = new FormData()
// if (formDataSick.leaveDocument.length > 0) {
// const blob = formDataSick.leaveDocument.slice(
// 0,
// formDataSick.leaveDocument[0].size
// );
// const newFile = new File(blob, nameFile.value, {
// type: formDataSick.leaveDocument[0].type,
// });
// formData.append("leaveDocument", newFile);
// }
formData.append("leaveDocument", formDataSick.leaveDocument)
formData.append("type", formDataSick.type)
formData.append("leaveRange", formDataSick.leaveRange)
formData.append("leaveStartDate", dateToISO(formDataSick.leaveDateStart))
formData.append("leaveEndDate", dateToISO(formDataSick.leaveDateEnd))
formData.append("leaveWrote", formDataSick.leaveWrote)
formData.append("leaveAddress", formDataSick.leaveAddress)
formData.append("leaveNumber", formDataSick.leaveNumber)
formData.append("leaveDetail", formDataSick.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then(() => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
.finally(() => {
hideLoader()
})
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: props.data.leaveTypeId ?? null,
StartLeaveDate: formDataSick.leaveDateStart ?? null,
EndLeaveDate: formDataSick.leaveDateEnd ?? null,
})
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
*/
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
})
function inputEdit(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
}
}
function resetEndDate(type: string) {
if (type === "day") {
formDataSick.EndLeaveDate === null
}
}
</script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล{{ dataStore.leaveLast }}</div>
</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
hide-bottom-space
bg-color="white"
outlined
v-model="props.data.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="col-12 col-md-4 col-sm-12">
<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</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="props.data.leaveDateStart"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
@update:model-value="props.data.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"
bg-color="white"
class="full-width cursor-pointer inputgreen"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
style="color: var(--q-primary)"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!props.data.leaveDateStart"
@update:model-value="FetchCheck(), isReadOnly"
:min-date="props.data.leaveDateStart"
>
<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="!props.data.leaveDateStart"
:class="inputEdit(isReadOnly)"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
bg-color="white"
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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>
</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="props.data.leaveNumber"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
dense
outlined
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="props.data.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
hide-bottom-space
bg-color="white"
/>
</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="props.data.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-file for="leaveDocumentRef" v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-12 col-sm-6 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

528
src/modules/05_leave/components/formEdit/formEdit_Study.vue
View file

@ -1,528 +0,0 @@
<script setup lang="ts">
import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveSalaryRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const studyDayScholarshipRef = ref<object | null>(null)
const studyDayCountryRef = ref<object | null>(null)
const studyDayUniversityNameRef = ref<object | null>(null)
const studyDayDegreeLevelRef = ref<object | null>(null)
const studyDaySubjectRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataStudy = reactive<any>({
type: dataStore.typeId, //
leaveWrote: "", //
leaveStartDate: null,
leaveEndDate: null,
leavebirthDate: new Date(),
leavegovernmentDate: new Date(),
leaveSalary: 10000,
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "",
studyDayScholarship: "",
studyDayCountry: "",
studyDayUniversityName: "", //
studyDayDegreeLevel: "", //
studyDaySubject: "", //
leaveDocument: "", //
leaveDetail: "",
leaveTotal: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: studyDaySubjectForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leavebirthDate: leavebirthDateRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveSalary: leaveSalaryRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
studyDayCountry: studyDayCountryRef,
studyDayUniversityName: studyDayUniversityNameRef,
studyDayDegreeLevel: studyDayDegreeLevelRef,
studyDaySubject: studyDaySubjectRef,
leaveWrote: leaveWroteRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataStudy.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
async function saveFormData() {
const formData = new FormData()
// if (formDataStudy.leaveDocument.length > 0) {
// const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataStudy.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataStudy.leaveDocument)
formData.append("type", formDataStudy.type) //
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
formData.append("studyDaySubject", formDataStudy.studyDaySubject)
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
formData.append("studyDayCountry", formDataStudy.studyDayCountry)
formData.append("leaveWrote", formDataStudy.leaveWrote) //
formData.append("leaveDetail", formDataStudy.leaveDetail) //
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
formData.append("leaveAddress", formDataStudy.leaveAddress) //
formData.append("leaveNumber", formDataStudy.leaveNumber) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
formDataStudy.leaveTotal = newLeaveTotal
console.log("test")
}
/**
* แปลงตัวเลขเงินเดือน
*/
const formattedleaveSalary = computed(() => {
return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
})
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="props.data.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="เขียนที่"
hide-bottom-space
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
v-model="props.data.leaveDateStart"
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'"
@update:model-value="props.data.leaveDateEnd = 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
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="props.data.leaveDateEnd"
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="!props.data.leaveDateStart"
:enableTimePicker="false"
:min-date="props.data.leaveDateStart"
>
<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="!props.data.leaveDateStart"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="มีกำหนด"
readonly
hide-bottom-space
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="props.data.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"
bg-color="white"
outlined
readonly
dense
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-model="props.data.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"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
<q-input
v-model="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 => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
/>
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
v-model="props.data.studyDayUniversityName"
ref="studyDayUniversityNameRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ชื่อสถานศึกษา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
/>
<q-input
v-model="props.data.studyDayDegreeLevel"
ref="studyDayDegreeLevelRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ชั้นปริญญา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
/>
<q-input
v-model="props.data.studyDaySubject"
ref="studyDaySubjectRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ศึกษาวิชา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
/>
<q-input
v-model="props.data.studyDayCountry"
ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ประเทศ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
/>
<q-input
v-model="props.data.studyDayScholarship"
ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ด้วยทุน"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/>
<q-input
v-model="props.data.leaveNumber"
ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
unmasked-value
hide-bottom-space
mask="(###)-###-####"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
v-model="props.data.leaveAddress"
ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</div>
</div>
<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="props.data.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

431
src/modules/05_leave/components/formEdit/formEdit_Vacation.vue
View file

@ -1,431 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
/** Use */
const $q = useQuasar()
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const router = useRouter()
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataVacation = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveRange: "ALL",
restDayOldTotal: "",
restDayCurrentTotal: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const restDayOldTotalRef = ref<object | null>(null)
const restDayCurrentTotalRef = ref<object | null>(null)
const leaveRangeRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveRange: leaveRangeRef,
restDayOldTotal: restDayOldTotalRef,
restDayCurrentTotal: restDayCurrentTotalRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataVacation.leaveWrote = props.data.leaveWrote
formDataVacation.restDayOldTotal = props.data.restDayOldTotal
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
formDataVacation.leaveStartDate = props.data.leaveStartDate
formDataVacation.leaveEndDate = props.data.leaveEndDate
formDataVacation.leaveTotal = props.data.leaveTotal
formDataVacation.leaveNumber = props.data.leaveNumber
formDataVacation.leaveDetail = props.data.leaveDetail
formDataVacation.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataVacation.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// if (formDataVacation.leaveDocument.length > 0) {
// const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataVacation.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
formData.append("leaveDocument", formDataVacation.leaveDocument)
formData.append("type", formDataVacation.type)
formData.append("leaveRange", formDataVacation.leaveRange)
formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
formData.append("leaveWrote", formDataVacation.leaveWrote)
formData.append("leaveAddress", formDataVacation.leaveAddress)
formData.append("leaveNumber", formDataVacation.leaveNumber)
formData.append("leaveDetail", formDataVacation.leaveDetail)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
formDataVacation.leaveStartDate = null
formDataVacation.leaveEndDate = null
}
console.log("testnull")
}
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
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
})
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<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="props.data.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="col-12 col-md-4 col-sm-6">
<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</div>
<q-input
class="col-12 col-md-4 col-sm-6"
ref="restDayOldTotalRef"
for="restDayOldTotalRef"
dense
hide-bottom-space
bg-color="white"
readonly
outlined
v-model="dataStore.restDayTotalOld"
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
/>
<q-input
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.leaveRemain"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
/>
<datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
@update:model-value="props.data.leaveDateEnd = 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"
class="full-width datepicker"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
hide-bottom-space
@update:model-value="FetchCheck()"
borderless
:enableTimePicker="false"
week-start="0"
:readonly="isReadOnly"
:min-date="props.data.leaveDateStart"
>
<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="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-md-2 col-sm-6"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="props.data.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<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="props.data.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<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="props.data.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</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="props.data.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file ref="leaveDocumentRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</form>
</template>

407
src/modules/05_leave/components/formEdit/formEdit_WorkInternational.vue
View file

@ -1,407 +0,0 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
import genReport from "@/plugins/genreport"
/** Use */
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const router = useRouter()
const isSave = ref<boolean>(false)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formDataWorkInternational = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDetail: "",
leaveDocument: [],
leaveDraftDocument: null,
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formDataWorkInternational.leaveWrote = props.data.leaveWrote
formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
formDataWorkInternational.leaveDetail = props.data.leaveDetail
formDataWorkInternational.leaveDocument = props.data.leaveDocument
formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const nameFileDraft = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
const hasError = []
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate()
hasError.push(isValid)
}
}
}
if (hasError.every(result => result === true)) {
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
//download function
async function onClickDownloadFile(id: string, fileName: string) {
// showLoader();
await http
.get(config.API.leaveReport(id))
.then(async res => {
console.log(res)
const data = res.data.result
await genReport(data, fileName)
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
// hideLoader();
})
}
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
const isLeave = ref<boolean>(true)
async function FetchCheck() {
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
})
.then((res: any) => {
const data = res.data.result
isLeave.value = data.isLeave
if (data.isLeave === true) {
formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
// formDataWorkInternational.leaveLast = data.totalDate
} else {
fails($q, "ไม่สามารถลาได้")
}
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/
async function saveFormData() {
const formData = new FormData()
// //
// if (formDataWorkInternational.leaveDocument.length > 0) {
// const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataWorkInternational.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
// //
// if (formDataWorkInternational.leaveDraftDocument.length > 0) {
// const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
// const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
// type: formDataWorkInternational.leaveDraftDocument[0].type,
// })
// formData.append("leaveDraftDocument", newFileDraft) //
// }
formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
formData.append("type", formDataWorkInternational.type) //
formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</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"
hide-bottom-space
bg-color="white"
for="leaveWroteRef"
dense
outlined
v-model="props.data.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateStart"
:locale="'th'"
hide-bottom-space
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
@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"
class="full-width datepicker"
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix"
v-model="props.data.leaveDateEnd"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
@update:model-value="FetchCheck()"
week-start="0"
:readonly="!props.data.leaveDateStart"
:min-date="props.data.leaveDateStart"
>
<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="!props.data.leaveDateStart"
class="full-width datepicker"
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
</template>
</q-input>
</template>
</datepicker>
<!-- <q-input
class="col-md-3 col-sm-12"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
type="number"
v-model="formDataWorkInternational.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/> -->
<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="props.data.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataWorkInternational.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-12 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<div class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
</div>
<q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด{{ formDataWorkInternational.typeId }}</div>
<q-btn
color="primary"
icon="download"
label="ดาวน์โหลดแบบฟอร์ม"
@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
/>
</div>
</div>
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
><q-tooltip>อัปโหลด</q-tooltip></q-btn
>
</div>
</div>
</q-card>
</div>
<div v-if="!isSave">
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
</div>
</div>
</form>
</template>

2
src/modules/05_leave/interface/index/main.ts
View file

@ -1,5 +1,3 @@
import type { S } from "@fullcalendar/core/internal-common"
interface OptionData {
id: string | undefined
name: string | undefined

63
src/modules/05_leave/store.ts
View file

@ -80,7 +80,6 @@ export const useLeaveStore = defineStore("Leave", () => {
code: "LV-000",
},
];
console.log(typeOptionsMain.value);
const optionType = data.map((e: TypeLeave) => ({
id: e.id,
@ -99,6 +98,7 @@ export const useLeaveStore = defineStore("Leave", () => {
/** สถานะของการลา */
const statusOptionsMain = ref<any[]>([
{ id: "ALL", name: "ทั้งหมด" },
{ id: "DRAFT", name: "แบบร่าง" },
{ id: "NEW", name: "ใหม่" },
{ id: "PENDING", name: "กำลังดำเนินการ" },
{ id: "APPROVE", name: "อนุมัติ " },
@ -133,8 +133,9 @@ export const useLeaveStore = defineStore("Leave", () => {
break;
}
}
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
const optionsSpecific = ref([
const optionsSpecific = ref<OptionData[]>([
{ id: "s0", name: "ลาไปศึกษาต่อ", code: "s0" },
{ id: "s1", name: "ลาฝึกอบรม", code: "s1" },
{ id: "s2", name: "ลาปฎิบัติการวิจัย", code: "s2" },
@ -142,18 +143,19 @@ export const useLeaveStore = defineStore("Leave", () => {
]);
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
const optionsOrdination = ref([
{ id: "0", name: "ลาอุปสมบท", code: "0" },
{ id: "1", name: "ลาประกอบพิธีฮัจญ์", code: "1" },
const optionsOrdination = ref<OptionData[]>([
{ id: 'b1', name: "ลาอุปสมบท", code: 'b1' },
{ id: 'b2', name: "ลาประกอบพิธีฮัจญ์", code: 'b2' },
]);
/** data table filter & column ของรายการลา */
const visibleColumns = ref<String[]>([
const visibleColumns = ref<string[]>([
"no",
"leaveTypeName",
"dateSendLeave",
"status",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -192,6 +194,7 @@ export const useLeaveStore = defineStore("Leave", () => {
style: "font-size: 14px; width:10%;",
},
]);
/**
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
* @param item ประเภทแบบฟอร์ม
@ -265,6 +268,7 @@ export const useLeaveStore = defineStore("Leave", () => {
const salaryText = ref<string>(""); //เงินเดือนปัจจุบัน(ภาษาไทย)
const leaveLast = ref<any>();
const restDayCurrentTotal = ref<string>("");
//ดึงข้อมูล profile จาก API
async function fetchProfile() {
await http
@ -286,10 +290,7 @@ export const useLeaveStore = defineStore("Leave", () => {
dateAppoint.value = data.dateAppoint;
salary.value = data.salary;
salaryText.value = data.salaryText;
leaveLast.value =
date2Thai(data.leaveLast) !== "0001-01-01T00:00:00"
? date2Thai(data.leaveLast)
: "-";
leaveLast.value = data.leaveLast != "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-";
restDayCurrentTotal.value = data.restDayCurrentTotal;
})
.catch((e: any) => {
@ -297,6 +298,46 @@ export const useLeaveStore = defineStore("Leave", () => {
});
}
async function fetchProfileOld(data: any) {
dateSendLeave.value = data.dateSendLeave;
typeLeave.value = data.leaveTypeName;
dear.value = data.dear;
fullName.value = data.fullName;
positionName.value = data.positionName;
positionLevelName.value = data.positionLevelName;
organizationName.value = data.organizationName;
leaveLimit.value = data.leaveLimit;
leaveTotal.value = data.leaveTotal;
leaveRemain.value = data.leaveRemain;
restDayTotalOld.value = data.restDayTotalOld;
birthDate.value = data.birthDate;
dateAppoint.value = data.dateAppoint;
salary.value = data.salary;
salaryText.value = data.salaryText;
leaveLast.value = data.leaveLast != "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-";
restDayCurrentTotal.value = data.restDayCurrentTotal;
}
function resetForm2() {
dateSendLeave.value = undefined;
leaveTypeName.value = "";
dear.value = "";
fullName.value = "";
positionName.value = "";
positionLevelName.value = "";
organizationName.value = "";
leaveLimit.value = 0;
leaveTotal.value = 0;
leaveRemain.value = 0;
restDayTotalOld.value = 0;
birthDate.value = undefined;
dateAppoint.value = undefined;
salary.value = 0;
salaryText.value = "";
leaveLast.value = undefined;
restDayCurrentTotal.value = "";
}
return {
tabValue,
typeOptions,
@ -340,5 +381,7 @@ export const useLeaveStore = defineStore("Leave", () => {
leaveLast,
restDayCurrentTotal,
convertStatud,
resetForm2,
fetchProfileOld,
};
});

325
src/modules/05_leave/views/AddPage.vue
View file

@ -1,56 +1,53 @@
<script setup lang="ts">
import { ref, onMounted, computed } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import FormPart2 from "@/modules/05_leave/components/Forms/Form.vue"
import SickForm from "@/modules/05_leave/components/Forms/01_SickForm.vue"
import FormBirth from "@/modules/05_leave/components/Forms/03_Birth.vue"
import HelpWifeBirthForm from "@/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue"
import VacationForm from "@/modules/05_leave/components/Forms/05_VacationForm.vue"
import OrdinationForm from "@/modules/05_leave/components/Forms/06_OrdinationForm.vue"
import HajjForm from "@/modules/05_leave/components/Forms/07_HajjForm.vue"
import MilitaryForm from "@/modules/05_leave/components/Forms/08_MilitaryForm.vue"
import StudyForm from "@/modules/05_leave/components/Forms/09_StudyForm.vue"
import TrainForm from "@/modules/05_leave/components/Forms/10_TrainForm.vue"
import WorkInternationalForm from "@/modules/05_leave/components/Forms/11_WorkInternationalForm.vue"
import FollowSpouseForm from "@/modules/05_leave/components/Forms/12_FollowSpouseForm.vue"
import RehabilitationForm from "@/modules/05_leave/components/Forms/13_RehabilitationForm.vue"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import type { QForm } from "quasar"
import { useCounterMixin } from "@/stores/mixin"
import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
const dataStore = useLeaveStore()
const { fetchLeaveType } = dataStore
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, success, messageError } = mixin
const router = useRouter()
const route = useRoute()
const myform = ref<QForm | null>(null)
const $q = useQuasar()
const dataStore = useLeaveStore();
const { fetchLeaveType } = dataStore;
const mixin = useCounterMixin();
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
const model = ref<string>("")
const modelSpecific = ref<string>("")
const router = useRouter();
const route = useRoute();
const myform = ref<QForm | null>(null);
const $q = useQuasar();
onMounted(async () => {
await fectOptionType()
})
const model = ref<string>("");
const modelSpecific = ref<string>("");
/**
* ดึงค่าประเภทการลาจาก Api
*/
async function fectOptionType() {
await http
.get(config.API.leaveType())
.then(async res => {
const data = res.data.result
await fetchLeaveType(data)
})
.catch(err => {
messageError($q, err)
})
await http
.get(config.API.leaveType())
.then(async (res) => {
const data = res.data.result;
await fetchLeaveType(data);
})
.catch((err) => {
messageError($q, err);
});
}
function inputEdit(val: boolean) {
@ -60,85 +57,177 @@ function inputEdit(val: boolean) {
};
}
function onSubmit(postData: FormData) {
dialogConfirm($q, async () => {
showLoader();
await http
.put(config.API.leaveUser(), postData)
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
onMounted(async () => {
if (dataStore.options.length == 0) {
await fectOptionType();
}
});
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
<div>ยื่นใบลา</div>
</div>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
to="/leave"
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
/>
<div>สร้างใบลา</div>
</div>
<q-form ref="myform" class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
</div>
<div class="q-py-sm q-px-lg">
<div class="row">
<q-select
dense
class="col-12 col-sm-6 col-md-4 inputgreen"
outlined
v-model="model"
:options="dataStore.options"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = ''), dataStore.fetchProfile()"
/>
</div>
<div class="row q-mt-sm">
<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
<q-select
dense
outlined
v-model="modelSpecific"
:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทการลา :"
@update:model-value="dataStore.typeConvert(model, modelSpecific)"
/>
</div>
</div>
<q-form ref="myform" class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div style="display: flex; align-items: center">
<q-icon
name="mdi-numeric-1-circle"
size="20px"
color="primary"
/>
<div class="q-pl-sm text-weight-bold text-dark">
เลือกประเภทการลา
</div>
</div>
<div class="q-py-sm q-px-lg">
<div class="row">
<q-select
dense
class="col-12 col-sm-6 col-md-4 inputgreen"
outlined
v-model="model"
:options="dataStore.options"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
@update:model-value="
dataStore.typeConvert(model, null),
(modelSpecific = ''),
dataStore.fetchProfile()
"
/>
</div>
<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
</div>
<div class="row q-mt-sm">
<div
class="col-12 col-sm-6 col-md-3"
v-if="model === 'LV-006' || model === 'LV-008'"
>
<q-select
dense
outlined
v-model="modelSpecific"
:options="
model === 'LV-006'
? dataStore.optionsOrdination
: dataStore.optionsSpecific
"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทการลา :"
@update:model-value="
dataStore.typeConvert(model, modelSpecific)
"
/>
</div>
</div>
</div>
<div>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
</div>
<FormPart2 :model="model" />
</div>
</div>
<div v-if="model" class="col-12">
<SickForm v-if="model === 'LV-001' || model === 'LV-002'" />
<FormBirth v-if="model === 'LV-003'" />
<HelpWifeBirthForm v-if="model === 'LV-004'" />
<VacationForm v-if="model === 'LV-005'" />
<OrdinationForm v-if="model === 'LV-006' && modelSpecific === '0'" />
<HajjForm v-if="model === 'LV-006' && modelSpecific === '1'" />
<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" />
<StudyForm v-if="model === 'LV-008' && modelSpecific === 's0'" style="width: 100%" />
<TrainForm v-if="model === 'LV-008' && modelSpecific != 's0' && modelSpecific != ''" />
<WorkInternationalForm v-if="model === 'LV-009'" />
<FollowSpouseForm v-if="model === 'LV-010'" />
<RehabilitationForm v-if="model === 'LV-011'" />
</div>
</div>
</q-card>
</q-form>
</div>
</div>
<div>
<div style="display: flex; align-items: center">
<q-icon
name="mdi-numeric-2-circle"
size="20px"
color="primary"
/>
<div class="q-pl-sm text-weight-bold text-dark">
ข้อมูลการลา
</div>
</div>
<FormPart2 :model="model" />
</div>
</div>
<div class="col-12">
<SickForm
v-if="model === 'LV-001' || model === 'LV-002'"
:on-submit="onSubmit"
/>
<FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
<HelpWifeBirthForm
v-if="model === 'LV-004'"
:on-submit="onSubmit"
/>
<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
<OrdinationForm
v-if="model === 'LV-006' && modelSpecific == 'b1'"
:on-submit="onSubmit"
/>
<HajjForm
v-if="model === 'LV-006' && modelSpecific == 'b2'"
:on-submit="onSubmit"
/>
<MilitaryForm
v-if="model === 'LV-007'"
style="width: 100%"
:on-submit="onSubmit"
/>
<StudyForm
v-if="model === 'LV-008' && modelSpecific === 's0'"
style="width: 100%"
:on-submit="onSubmit"
/>
<TrainForm
v-if="
model === 'LV-008' &&
modelSpecific != 's0' &&
modelSpecific != ''
"
:on-submit="onSubmit"
/>
<WorkInternationalForm
v-if="model === 'LV-009'"
:on-submit="onSubmit"
/>
<FollowSpouseForm
v-if="model === 'LV-010'"
:on-submit="onSubmit"
/>
<RehabilitationForm
v-if="model === 'LV-011'"
:on-submit="onSubmit"
/>
</div>
</div>
</q-card>
</q-form>
</div>
</div>
</template>

813
src/modules/05_leave/views/EditPage.vue
View file

@ -1,430 +1,423 @@
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"
import { ref, onMounted, reactive, computed } from "vue";
//import form
import FormPart2 from "@/modules/05_leave/components/formEdit/Form.vue"
import WorkInternational from "../components/formEdit/formEdit_WorkInternational.vue"
import Rehabilitation from "../components/formEdit/formEdit_Rehabilitation.vue"
import Sick from "../components/formEdit/formEdit_Sick.vue"
import FollowSpouse from "../components/formEdit/formEdit_FollowSpouse.vue"
import Birth from "../components/formEdit/formEdit_Birth.vue"
import Vacation from "../components/formEdit/formEdit_Vacation.vue"
import HelpWifeBirth from "../components/formEdit/formEdit_HelpWifeBirth.vue"
import Ordination from "../components/formEdit/formEdit_Ordinationvue.vue"
import Haji from "../components/formEdit/formEdit_Hajj.vue"
import Millitary from "../components/formEdit/formEdit_Military.vue"
import Study from "../components/formEdit/formEdit_Study.vue"
import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import { useRoute } from "vue-router"
import router from "@/router"
import http from "@/plugins/http"
import config from "@/app.config"
import { useLeaveStore } from "@/modules/05_leave/store"
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import router from "@/router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useLeaveStore } from "@/modules/05_leave/store";
const route = useRoute()
const personalId = ref<string>(route.params.id as string)
console.log(personalId.value)
const leaveId = ref<string>("")
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { messageError, showLoader, hideLoader, dialogConfirm, success, date2Thai, dateToISO } = mixin
const route = useRoute();
const personalId = ref<string>(route.params.id as string);
const leaveId = ref<string>("");
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
messageError,
showLoader,
hideLoader,
dialogConfirm,
success,
date2Thai,
dateToISO,
} = mixin;
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,
},
})
const titleName = ref<string>("")
const model = ref<string>("")
const modelSpecific = ref<string>("")
const titleName = ref<string>("");
/** Form รายละเอียดข้อมูล*/
const formData = reactive<any>({
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: "",
leaveLast: "",
});
/**เมื่อเริ่มโหลดหน้า
* เรียกใช้งาน fetchData เพื่อดึงข้อมูล
*/
onMounted(() => {
fetchDataDetail(personalId.value)
dataStore.fetchProfile()
})
/**
* get ข้อมูลเก่ากรณีแก้ไขข้อมูล
*/
const data = reactive<any>({
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: "",
})
/**
* 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)
console.log(formData.leaveDateStart)
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
console.log(formData.leaveDateEnd)
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()
})
}
console.log(formData)
showLoader();
await http
.get(config.API.leaveUserId(id), {})
.then(async (res) => {
const data = await res.data.result;
/**
* function check ประเภทการลา
* @param leaveTypeId ประเภทการลา
* @param leaveTypeName ประเภทการลา
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.leaveStartDate = data.leaveStartDate;
// console.log(formData.leaveDateStart)
formData.leaveEndDate = data.leaveEndDate;
// console.log(formData.leaveDateEnd)
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 ?? "-";
formData.leaveLast = data.leaveLast ?? "-";
// checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
dataStore.fetchProfileOld(data);
dataStore.typeId = formData.leaveTypeId;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const model = computed(() => {
return (
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.leaveTypeName == 'ลาอุปสมบท') {
return "b0";
} else if (code == "LV-006" && formData.leaveTypeName == 'ลาประกอบพิธีฮัจญ์') {
return "b1";
} else if (code == "LV-008" && formData.leaveTypeName == 'ลาไปศึกษาต่อ') {
return "s0";
} else if (code == "LV-008" && formData.leaveTypeName == 'ลาฝึกอบรม') {
return "s1";
} else if (code == "LV-008" && formData.leaveTypeName == 'ลาปฎิบัติการวิจัย') {
return "s2";
} else if (code == "LV-008" && formData.leaveTypeName == 'ลาดูงาน') {
return "s3";
} else {
return "";
}
});
function onSubmit(postData: FormData) {
dialogConfirm($q, async () => {
showLoader();
await http
.put(config.API.leaveUser() + "/" + formData.id, postData)
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
/**เมื่อเริ่มโหลดหน้า
* เรียกใช้งาน fetchData เพื่อดึงข้อมูล
*/
/**checkForm Form การลา*/
const checkForm = ref<string>("")
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"
}
}
}
/**
* บันทึกข้อมูลที่เเก้ไข
* @param id ระบุ บุคคล
*/
function onSubmit(formData: FormData) {
// dialogConfirm($q, () => putData(formData));
console.log(personalId.value)
}
// function putData(formData: any) {
// showLoader();
// http
// .put(config.API.meetingById(personalId.value), {
// round: formData.rounded ?? "",
// tittle: formData.title,
// dateStart: dateToISO(formData.dateMeetingStart),
// dateEnd: dateToISO(formData.dateMeetingEnd),
// result: formData.consider,
// duration: formData.period,
// })
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// router.push(`/evaluate/meeting`);
// });
// }
onMounted(() => {
fetchDataDetail(personalId.value);
});
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
<div>แก้ไขยื่นใบลา {{ formData.leaveTypeName }} {{ leaveId }}</div>
</div>
<q-form ref="myform" class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
</div>
<div class="q-py-sm q-px-lg">
<div class="row">
<q-select
dense
class="col-12 col-sm-6 col-md-4 inputgreen"
outlined
v-model="formData.leaveTypeName"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
/>
</div>
<div class="row q-mt-sm">
<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
<q-select
dense
outlined
v-model="modelSpecific"
:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทการลา :"
@update:model-value="dataStore.typeConvert(model, modelSpecific)"
/>
</div>
</div>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
to="/leave"
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
/>
<div>แก้ไขข้อมูลการ{{ formData.leaveTypeName }} {{ leaveId }}</div>
</div>
<q-form ref="myform" class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div style="display: flex; align-items: center">
<q-icon
name="mdi-numeric-1-circle"
size="20px"
color="primary"
/>
<div class="q-pl-sm text-weight-bold text-dark">
เลือกประเภทการลา
</div>
</div>
<div class="q-py-sm q-px-lg">
<div class="row">
<q-select
dense
class="col-12 col-sm-6 col-md-4 inputgreen"
outlined
v-model="formData.leaveTypeName"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
/>
</div>
<div class="row q-mt-sm">
<div
class="col-12 col-sm-6 col-md-3"
v-if="model === 'LV-006' || model === 'LV-008'"
>
<q-select
dense
outlined
v-model="modelSpecific"
:options="
model === 'LV-006'
? dataStore.optionsOrdination
: dataStore.optionsSpecific
"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทการลา :"
@update:model-value="
dataStore.typeConvert(model, modelSpecific)
"
/>
</div>
</div>
</div>
<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
</div>
<div>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
</div>
<FormPart2 :model="model" :data="formData" :leaveTypeId="formData.leaveTypeId" />
</div>
</div>
<div class="col-12">
<Sick :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาป่วย' || formData.leaveTypeName === 'ลากิจส่วนตัว'" :data="formData" :leaveId="leaveId" />
<Birth :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาคลอดบุตร'" :data="formData" :leaveId="leaveId" />
<HelpWifeBirth :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปช่วยเหลือภริยาที่คลอดบุตร'" :data="formData" :leaveId="leaveId" />
<Vacation :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาพักผ่อน'" :data="formData" :leaveId="leaveId" />
<Ordination :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ'" :data="formData" :leaveId="leaveId" />
<Haji :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ'" :data="formData" :leaveId="leaveId" />
<Millitary :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล'" :data="formData" :leaveId="leaveId" />
<WorkInternational ::on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ'" :data="formData" :leaveId="leaveId" />
<Study :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน'" :data="formData" :leaveId="leaveId" />
<FollowSpouse :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาติดตามคู่สมรส'" :data="formData" :leaveId="leaveId" />
<Rehabilitation :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ'" :data="formData" :leaveId="leaveId" />
</div>
<!-- <div class="toptitle col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="" class="q-mr-sm" @click="router.push(`/evaluate/meeting`)" />
<div class="text-white q-pl-sm">ยื่นขอลา {{ formData.leaveTypeName }} {{ leaveId }}</div>
</div>
<WorkInternational v-if="checkForm === 'FormLeaveToWorkInternational'" :on-submit="onSubmit" :data="formData" />
v-if="checkForm === 'FormVocationalRehabilitation'" -->
</div>
</q-card>
</q-form>
</div>
</div>
<div>
<div style="display: flex; align-items: center">
<q-icon
name="mdi-numeric-2-circle"
size="20px"
color="primary"
/>
<div class="q-pl-sm text-weight-bold text-dark">
ข้อมูลการลา
</div>
</div>
<FormPart2
:model="model"
:data="formData"
:leaveTypeId="formData.leaveTypeId"
/>
</div>
</div>
<div class="col-12">
<SickForm
v-if="model === 'LV-001' || model === 'LV-002'"
:data="formData"
:on-submit="onSubmit"
/>
<FormBirth
v-if="model === 'LV-003'"
:data="formData"
:on-submit="onSubmit"
/>
<HelpWifeBirthForm
v-if="model === 'LV-004'"
:data="formData"
:on-submit="onSubmit"
/>
<VacationForm
v-if="model === 'LV-005'"
:data="formData"
:on-submit="onSubmit"
/>
<OrdinationForm
v-if="model === 'LV-006' && modelSpecific === 'b0'"
:data="formData"
:on-submit="onSubmit"
/>
<HajjForm
v-if="model === 'LV-006' && modelSpecific === 'b1'"
:data="formData"
:on-submit="onSubmit"
/>
<MilitaryForm
v-if="model === 'LV-007'"
style="width: 100%"
:data="formData"
:on-submit="onSubmit"
/>
<StudyForm
v-if="model === 'LV-008' && modelSpecific === 's0'"
style="width: 100%"
:data="formData"
:on-submit="onSubmit"
/>
<TrainForm
v-if="
model === 'LV-008' &&
modelSpecific != 's0' &&
modelSpecific != ''
"
:data="formData"
:on-submit="onSubmit"
/>
<WorkInternationalForm
v-if="model === 'LV-009'"
:data="formData"
:on-submit="onSubmit"
/>
<FollowSpouseForm
v-if="model === 'LV-010'"
:data="formData"
:on-submit="onSubmit"
/>
<RehabilitationForm
v-if="model === 'LV-011'"
:data="formData"
:on-submit="onSubmit"
/>
</div>
</div>
</q-card>
</q-form>
</div>
</div>
</template>

796
src/modules/05_leave/views/Main.vue
View file

@ -1,395 +1,503 @@
<script setup lang="ts">
import { ref, onMounted, computed } from "vue"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
import http from "@/plugins/http"
import config from "@/app.config"
import type { LeaveItem } from "@/modules/05_leave/interface/index/main"
import type { QTableProps } from "quasar"
import { ref, onMounted, computed } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { LeaveItem } from "@/modules/05_leave/interface/index/main";
import type { QTableProps } from "quasar";
import CalendarView from "@/modules/05_leave/components/Calendar.vue"
import ListView from "@/modules/05_leave/components/ListView.vue"
import CalendarView from "@/modules/05_leave/components/Calendar.vue";
import ListView from "@/modules/05_leave/components/ListView.vue";
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
const mixin = useCounterMixin()
const leaveStore = useLeaveStore()
const { showLoader, hideLoader, messageError } = mixin
const mixin = useCounterMixin();
const leaveStore = useLeaveStore();
const { showLoader, hideLoader, messageError } = mixin;
const router = useRouter()
const $q = useQuasar()
const router = useRouter();
const $q = useQuasar();
const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"])
const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
const itemPie = ref<LeaveItem[]>([])
const knob = ref(80)
const itemPie = ref<LeaveItem[]>([]);
const knob = ref(80);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;",
},
{
name: "leaveTypeName",
align: "left",
label: "ประเภทการลา",
sortable: true,
field: "leaveTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveLimit",
align: "left",
label: "โควตาวันลา",
sortable: true,
field: "leaveLimit",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveExtend",
align: "left",
label: "วันลาสะสม",
sortable: true,
field: "leaveExtend",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;",
},
{
name: "leaveTypeName",
align: "left",
label: "ประเภทการลา",
sortable: true,
field: "leaveTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveLimit",
align: "left",
label: "โควตาวันลา",
sortable: true,
field: "leaveLimit",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveExtend",
align: "left",
label: "วันลาสะสม",
sortable: true,
field: "leaveExtend",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveCountSend",
align: "left",
label: "จำนวนยื่นขอลา (วัน)",
sortable: true,
field: "leaveCountSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveCountApprove",
align: "left",
label: "จำนวนที่อนุมัติ (วัน)",
sortable: true,
field: "leaveCountApprove",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveCountReject",
align: "left",
label: "จำนวนที่ไม่อนุมัติ (วัน)",
sortable: true,
field: "leaveCountReject",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveCountDelete",
align: "left",
label: "จำนวนที่ยกเลิก (วัน)",
sortable: true,
field: "leaveCountDelete",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
])
const row = ref<any>([])
const pagination = ref({ rowsPerPage: 15 })
{
name: "leaveCountSend",
align: "left",
label: "จำนวนยื่นขอลา (วัน)",
sortable: true,
field: "leaveCountSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveCountApprove",
align: "left",
label: "จำนวนที่อนุมัติ (วัน)",
sortable: true,
field: "leaveCountApprove",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveCountReject",
align: "left",
label: "จำนวนที่ไม่อนุมัติ (วัน)",
sortable: true,
field: "leaveCountReject",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "leaveCountDelete",
align: "left",
label: "จำนวนที่ยกเลิก (วัน)",
sortable: true,
field: "leaveCountDelete",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
]);
const row = ref<any>([]);
const pagination = ref({ rowsPerPage: 15 });
/** function เรียกข้อมูลตารางสถิติการลา*/
async function fetchStatsTable() {
// modalStatsTable.value = true;
showLoader()
await http
.get(config.API.leaveStats())
.then(res => {
const data = res.data.result
console.log(data)
const stat = filterLeaveType.value.map(e => {
return data
.filter((el: any) => el.leaveTypeName === e)
.map((el: any) => ({
text: el.leaveTypeName,
color: el.leaveTypeName === "ลาพักผ่อน" ? "text-pink-5" : el.leaveTypeName === "ลากิจส่วนตัว" ? "text-deep-purple" : "text-indigo",
value: el.leavePercent,
all: el.leaveLimit,
use: el.leaveCountApprove,
remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
}))
})
stat.forEach(item => itemPie.value.push(...item))
// modalStatsTable.value = true;
showLoader();
await http
.get(config.API.leaveStats())
.then((res) => {
const data = res.data.result;
const stat = filterLeaveType.value.map((e) => {
return data
.filter((el: any) => el.leaveTypeName === e)
.map((el: any) => ({
text: el.leaveTypeName,
color:
el.leaveTypeName === "ลาพักผ่อน"
? "text-pink-5"
: el.leaveTypeName === "ลากิจส่วนตัว"
? "text-deep-purple"
: "text-indigo",
value: el.leavePercent,
all: el.leaveLimit,
use: el.leaveCountApprove,
remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
}));
});
stat.forEach((item) => itemPie.value.push(...item));
row.value = data.map((e: any) => ({
leaveTypeName: e.leaveTypeName,
leaveLimit: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveLimit : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
leaveExtend: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveExtend : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
leavePercent: e.leavePercent,
leaveCountSend: e.leaveCountSend,
leaveCountApprove: e.leaveCountApprove,
leaveCountReject: e.leaveCountReject,
leaveCountDelete: e.leaveCountDelete,
}))
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
hideLoader()
})
row.value = data.map((e: any) => ({
leaveTypeName: e.leaveTypeName,
leaveLimit:
e.leaveTypeName === "ลาพักผ่อน"
? e.leaveLimit
: e.leaveTypeName === "ลากิจส่วนตัว"
? "-"
: "-",
leaveExtend:
e.leaveTypeName === "ลาพักผ่อน"
? e.leaveExtend
: e.leaveTypeName === "ลากิจส่วนตัว"
? "-"
: "-",
leavePercent: e.leavePercent,
leaveCountSend: e.leaveCountSend,
leaveCountApprove: e.leaveCountApprove,
leaveCountReject: e.leaveCountReject,
leaveCountDelete: e.leaveCountDelete,
}));
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const modalStatsTable = ref<boolean>(false)
const modalStatsTable = ref<boolean>(false);
function onClickOpenStat() {
modalStatsTable.value = true
modalStatsTable.value = true;
}
/** function redirectTo ยื่นใบลา*/
async function addAbsence() {
router.push(`/leave/add`)
await leaveStore.resetForm2();
router.push(`/leave/add`);
}
/**
* find ข้อมูลจาก api
*/
const filteredItems = computed(() => {
return itemPie.value.filter(item => item.text === "ลาพักผ่อน")
})
return itemPie.value.filter((item) => item.text === "ลาพักผ่อน");
});
const filteredSick = computed(() => {
return itemPie.value.filter(item => item.text === "ลาป่วย")
})
return itemPie.value.filter((item) => item.text === "ลาป่วย");
});
const filteredBusi = computed(() => {
return itemPie.value.filter(item => item.text === "ลากิจส่วนตัว")
})
return itemPie.value.filter((item) => item.text === "ลากิจส่วนตัว");
});
onMounted(async () => {
await fetchStatsTable()
})
await fetchStatsTable();
});
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
<div>รายการลา</div>
</div>
</div>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
<div>รายการลา</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-11 row">
<!-- สถิติการลา -->
<div class="col-12 row q-pb-sm">
<q-card bordered class="col-12 row">
<div class="row col-12 items-center q-px-md q-py-sm">
<div class="text-weight-bold">สถิติการลา</div>
<q-space />
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="onClickOpenStat" label="ตารางสถิติการลา" />
</div>
<div bordered class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredItems" :key="item.text">
<div class="col-xs-12 col-sm-12">
<q-card bordered flat class="col-12 row shadow-0 no-wrap" v-if="item.text === 'ลาพักผ่อน'">
<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
<div class="col-12 row items-center justify-center q-pb-sm">
<q-knob readonly v-model="item.value" show-value size="60px" :thickness="0.15" track-color="grey-3" class="text-indigo">
<span class="text-subtitle2 text-weight-bold">{{ item.value }}</span>
</q-knob>
</div>
<div class="col-12 text-center text-weight-medium">ลาพักผ่อน</div>
</div>
<div class="row gt-xs"><q-separator vertical /></div>
<div class="col-xs-12 col-sm-4 gt-xs row">
<div class="col-12 row text-dark text-body2 items-center">
<div class="col-12 row q-pa-xs q-px-md row">
<span class="text-grey-7 col-6">ได้รับ</span>
<span class="text-weight-bold">{{ item.all }}</span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 row q-pa-xs q-px-md">
<span class="text-grey-7 col-6">ใช้ไป</span>
<span class="text-weight-bold">{{ item.use }}</span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 row q-pa-xs q-px-md">
<span class="text-grey-7 col-6">คงเหลือ</span>
<span class="text-weight-bold">{{ item.remain }}</span>
</div>
</div>
</div>
</q-card>
</div>
</div>
<div class="col-6 row">
<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredSick" :key="item.text">
<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
<div class="col-12 row" v-if="item.text === 'ลาป่วย'">
<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
<div class="text-subtitle2 col-4">ลาป่วย</div>
<div class="text-subtitle2 col-8">
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
<span class="text-weight-bold">{{ item.use }}</span>
<!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
</div>
</q-card>
</div>
</div>
</div>
<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredBusi" :key="item.text">
<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
<div class="col-12 row" v-if="item.text === 'ลากิจส่วนตัว'">
<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
<div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
<div class="text-subtitle2 col-8">
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
<span class="text-weight-bold">{{ item.use }}</span>
<!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
</div>
</q-card>
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-xs-12 col-sm-12 col-md-11 row">
<!-- สถิติการลา -->
<div class="col-12 row q-pb-sm">
<q-card bordered class="col-12 row">
<div class="row col-12 items-center q-px-md q-py-sm">
<div class="text-weight-bold">สถิติการลา</div>
<q-space />
<q-btn
dense
flat
class="text-blue"
icon="mdi-chart-line-variant"
@click="onClickOpenStat"
label="ตารางสถิติการลา"
/>
</div>
<div
bordered
class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm"
v-for="item in filteredItems"
:key="item.text"
>
<div class="col-xs-12 col-sm-12">
<q-card
bordered
flat
class="col-12 row shadow-0 no-wrap"
v-if="item.text === 'ลาพักผ่อน'"
>
<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
<div class="col-12 row items-center justify-center q-pb-sm">
<q-knob
readonly
v-model="item.value"
show-value
size="60px"
:thickness="0.15"
track-color="grey-3"
class="text-indigo"
>
<span class="text-subtitle2 text-weight-bold">{{
item.value
}}</span>
</q-knob>
</div>
<div class="col-12 text-center text-weight-medium">
ลาพักผ่อน
</div>
</div>
<div class="row gt-xs"><q-separator vertical /></div>
<div class="col-xs-12 col-sm-4 gt-xs row">
<div class="col-12 row text-dark text-body2 items-center">
<div class="col-12 row q-pa-xs q-px-md row">
<span class="text-grey-7 col-6">ได้รับ</span>
<span class="text-weight-bold">{{ item.all }}</span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 row q-pa-xs q-px-md">
<span class="text-grey-7 col-6">ใช้ไป</span>
<span class="text-weight-bold">{{ item.use }}</span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 row q-pa-xs q-px-md">
<span class="text-grey-7 col-6">คงเหลือ</span>
<span class="text-weight-bold">{{ item.remain }}</span>
</div>
</div>
</div>
</q-card>
</div>
</div>
<div class="col-6 row">
<div
bordered
class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm"
v-for="item in filteredSick"
:key="item.text"
>
<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
<div class="col-12 row" v-if="item.text === 'ลาป่วย'">
<q-card
bordered
flat
class="shadow-0 col-12 fit row items-center q-px-lg"
>
<div class="text-subtitle2 col-4">ลาป่วย</div>
<div class="text-subtitle2 col-8">
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
<span class="text-weight-bold">{{ item.use }}</span>
<!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
</div>
</q-card>
</div>
</div>
</div>
<div
bordered
class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm"
v-for="item in filteredBusi"
:key="item.text"
>
<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
<div class="col-12 row" v-if="item.text === 'ลากิจส่วนตัว'">
<q-card
bordered
flat
class="shadow-0 col-12 fit row items-center q-px-lg"
>
<div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
<div class="text-subtitle2 col-8">
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
<span class="text-weight-bold">{{ item.use }}</span>
<!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
</div>
</q-card>
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="row col-12">
<!-- แสดงปฏิทิน -->
<div class="col-12 row">
<q-card bordered class="q-pa-md col-12">
<div class="row col-12">
<div class="row items-center">
<div class="q-ml-sm">
<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
<q-icon name="mdi-plus" size="22px" color="blue" />
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</div>
<q-space />
<div class="justify-center row items-center">
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
<q-tabs v-model="leaveStore.tabValue" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
<q-btn
name="calendar"
round
size="12px"
flat
icon="mdi-calendar-month"
@click="leaveStore.tabValue = 'calendar'"
:color="leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'"
class="q-mr-sm"
>
<q-tooltip>ปฏิทิน</q-tooltip>
</q-btn>
<q-separator vertical inset />
<q-btn
name="list"
round
size="12px"
flat
icon="mdi-format-list-bulleted"
@click="leaveStore.tabValue = 'list'"
:color="leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'"
class="q-ml-sm"
>
<q-tooltip>รายการ</q-tooltip>
</q-btn>
</q-tabs>
</div>
</div>
<div class="col-12">
<CalendarView v-if="leaveStore.tabValue === 'calendar'" />
</div>
<div class="row col-12">
<!-- แสดงปฏิทิน -->
<div class="col-12 row">
<q-card bordered class="q-pa-md col-12">
<div class="row col-12">
<div class="row items-center">
<div class="q-ml-sm">
<q-btn
round
dense
flat
size="13px"
class="q-px-sm"
@click="addAbsence"
>
<q-icon name="mdi-plus" size="22px" color="blue" />
<q-tooltip>สร้างใบลา</q-tooltip>
</q-btn>
</div>
</div>
<q-space />
<div class="justify-center row items-center">
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
<q-tabs
v-model="leaveStore.tabValue"
indicator-color="transparent"
align="left"
active-color="activetab"
class="text-nativetab"
inline-label
dense
>
<q-btn
name="calendar"
round
size="12px"
flat
icon="mdi-calendar-month"
@click="leaveStore.tabValue = 'calendar'"
:color="
leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
"
class="q-mr-sm"
>
<q-tooltip>ปฏิทิน</q-tooltip>
</q-btn>
<q-separator vertical inset />
<q-btn
name="list"
round
size="12px"
flat
icon="mdi-format-list-bulleted"
@click="leaveStore.tabValue = 'list'"
:color="
leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
"
class="q-ml-sm"
>
<q-tooltip>รายการ</q-tooltip>
</q-btn>
</q-tabs>
</div>
</div>
<div class="col-12">
<CalendarView v-if="leaveStore.tabValue === 'calendar'" />
</div>
<div class="col-12">
<ListView v-if="leaveStore.tabValue === 'list'" />
</div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-12">
<ListView v-if="leaveStore.tabValue === 'list'" />
</div>
</q-card>
</div>
</div>
</div>
</div>
<!-- modal ตารางสถิติการลา -->
<q-dialog v-model="modalStatsTable" persistent>
<q-card style="min-width: 85%">
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
<q-space />
<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row">
<q-table flat bordered dense :rows="row" :columns="columns" row-key="leaveTypeName" class="custom-table2 col-12" hide-bottom v-model:pagination="pagination">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr></template
></q-table
>
</q-card-section>
</q-card>
</q-dialog>
<!-- modal ตารางสถิติการลา -->
<q-dialog v-model="modalStatsTable" persistent>
<q-card style="min-width: 85%">
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row">
<q-table
flat
bordered
dense
:rows="row"
:columns="columns"
row-key="leaveTypeName"
class="custom-table2 col-12"
hide-bottom
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr></template
></q-table
>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped>
.borderTop {
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
}
.custom-table2 {
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
}
.q-table thead tr th {
position: sticky;
}
.q-table td:nth-of-type(2) {
z-index: 3 !important;
}
.q-table td:nth-of-type(2) {
z-index: 3 !important;
}
.q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) {
position: sticky;
left: 0;
z-index: 1;
}
.q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) {
position: sticky;
left: 0;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>