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

Merge branch 'NiceDev' into develop

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-12-14 18:00:25 +07:00
commit 2a1c2ab615
1 changed files with 447 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,20 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch, computed } from "vue" import { ref, reactive, watch, computed } from "vue";
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm" import type {
import { useCounterMixin } from "@/stores/mixin" FormData,
import { useLeaveStore } from "@/modules/05_leave/store" FormRef,
import http from "@/plugins/http" } from "@/modules/05_leave/interface/request/SickForm";
import config from "@/app.config" import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar" import { useLeaveStore } from "@/modules/05_leave/store";
import { useRouter } from "vue-router" import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
/** Use */ /** Use */
const dataStore = useLeaveStore() const dataStore = useLeaveStore();
const $q = useQuasar() const $q = useQuasar();
const mixin = useCounterMixin() const mixin = useCounterMixin();
const router = useRouter() const router = useRouter();
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin const {
const edit = ref<boolean>(true) date2Thai,
dateToISO,
dialogConfirm,
success,
messageError,
fails,
showLoader,
hideLoader,
} = mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
@ -26,7 +38,7 @@ const props = defineProps({
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}) });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formDataSick = reactive<any>({ const formDataSick = reactive<any>({
@ -41,18 +53,18 @@ const formDataSick = reactive<any>({
leaveAddress: "", leaveAddress: "",
leaveDetail: "", leaveDetail: "",
leaveDocument: [], leaveDocument: [],
}) });
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null) const leaveWroteRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null) const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null) const leaveEndDateRef = ref<object | null>(null);
const halfDayRef = ref<object | null>(null) const halfDayRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null) const leaveTotalRef = ref<object | null>(null);
const leaveLastRef = ref<object | null>(null) const leaveLastRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null) const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null) const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null) const leaveDetailRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = { const FormRef: FormRef = {
@ -64,55 +76,58 @@ const FormRef: FormRef = {
leaveNumber: leaveNumberRef, leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef, leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef, leaveDetail: leaveDetailRef,
} };
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */ /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => { watch(props.data, async () => {
// console.log("data==>", props.data) // console.log("data==>", props.data)
formDataSick.leaveWrote = props.data.leaveWrote formDataSick.leaveWrote = props.data.leaveWrote;
formDataSick.leaveStartDate = props.data.leaveStartDate formDataSick.leaveStartDate = props.data.leaveStartDate;
formDataSick.leaveEndDate = props.data.leaveEndDate formDataSick.leaveEndDate = props.data.leaveEndDate;
formDataSick.contractTel = props.data.contractTel formDataSick.contractTel = props.data.contractTel;
formDataSick.leaveTotal = props.data.leaveTotal formDataSick.leaveTotal = props.data.leaveTotal;
formDataSick.leaveNumber = props.data.leaveNumber formDataSick.leaveNumber = props.data.leaveNumber;
formDataSick.leaveDetail = props.data.leaveDetail formDataSick.leaveDetail = props.data.leaveDetail;
formDataSick.leaveDocument = props.data.leaveDocument formDataSick.leaveDocument = props.data.leaveDocument;
}) });
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("") const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]) const fileDocDataUpload = ref<File[]>([]);
async function fileUploadDoc(files: any) { async function fileUploadDoc(files: any) {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file) fileDocDataUpload.value.push(file);
}) });
} }
/** /**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate * function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/ */
function resetDate() { function resetDate() {
if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") { if (
formDataSick.leaveStartDate = null formDataSick.halfDay === "half_day_morning" ||
formDataSick.leaveEndDate = null formDataSick.halfDay === "half_day_afternoon"
) {
formDataSick.leaveStartDate = null;
formDataSick.leaveEndDate = null;
} }
console.log("testnull") console.log("testnull");
} }
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() { function onValidate() {
const hasError = [] const hasError = [];
for (const key in FormRef) { for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) { if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key] const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate() const isValid = property.value.validate();
hasError.push(isValid) hasError.push(isValid);
} }
} }
} }
if (hasError.every(result => result === true)) { if (hasError.every((result) => result === true)) {
onSubmit() onSubmit();
} }
} }
@ -121,79 +136,94 @@ const onSubmit = async () => {
dialogConfirm( dialogConfirm(
$q, $q,
async () => { async () => {
await saveFormData() await saveFormData();
}, },
"ยืนยันการยื่นใบลา", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) );
} };
/** /**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() showLoader();
if (formDataSick.leaveDocument.length > 0) { const formData = new FormData();
const blob = formDataSick.leaveDocument.slice(0, formDataSick.leaveDocument[0].size) // if (formDataSick.leaveDocument.length > 0) {
const newFile = new File(blob, nameFile.value, { // const blob = formDataSick.leaveDocument.slice(
type: formDataSick.leaveDocument[0].type, // 0,
}) // formDataSick.leaveDocument[0].size
formData.append("leaveDocument", newFile) // );
} // const newFile = new File(blob, nameFile.value, {
// type: formDataSick.leaveDocument[0].type,
// });
// formData.append("leaveDocument", newFile);
// }
formData.append("type", formDataSick.type) formData.append("leaveDocument", formDataSick.leaveDocument);
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate)) formData.append("type", formDataSick.type);
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate)) formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
formData.append("leaveWrote", formDataSick.leaveWrote) formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
formData.append("leaveAddress", formDataSick.leaveAddress) formData.append("leaveWrote", formDataSick.leaveWrote);
formData.append("leaveNumber", formDataSick.leaveNumber) formData.append("leaveAddress", formDataSick.leaveAddress);
formData.append("leaveDetail", formDataSick.leaveDetail) formData.append("leaveNumber", formDataSick.leaveNumber);
formData.append("leaveDetail", formDataSick.leaveDetail);
await http await http
.post(config.API.leaveUser(), formData) .post(config.API.leaveUser(), formData)
.then((res: any) => { .then(() => {
success($q, "บันทึกสำเร็จ") success($q, "บันทึกสำเร็จ");
router.push(`/leave`) router.push(`/leave`);
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e) messageError($q, e);
}) })
.finally(() => {
hideLoader();
});
} }
/** /**
* check ว่าลาได้ไหม จาก api * check ว่าลาได้ไหม จาก api
* @param formData * @param formData
*/ */
const isLeave = ref<boolean>(true) const isLeave = ref<boolean>(true);
async function FetchCheck() { async function FetchCheck() {
await http await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataSick.leaveStartDate ?? null, EndLeaveDate: formDataSick.leaveEndDate ?? null }) .post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
StartLeaveDate: formDataSick.leaveStartDate ?? null,
EndLeaveDate: formDataSick.leaveEndDate ?? null,
})
.then((res: any) => { .then((res: any) => {
const data = res.data.result const data = res.data.result;
isLeave.value = data.isLeave isLeave.value = data.isLeave;
if (data.isLeave === true) { if (data.isLeave === true) {
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday formDataSick.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday;
} else { } else {
fails($q, "ไม่สามารถลาได้") fails($q, "ไม่สามารถลาได้");
} }
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e) messageError($q, e);
}) });
} }
/** /**
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
*/ */
const isReadOnly = computed(() => { const isReadOnly = computed(() => {
const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon" const conditionHalfDay =
formDataSick.halfDay === "half_day_morning" ||
formDataSick.halfDay === "half_day_afternoon";
if (conditionHalfDay) { if (conditionHalfDay) {
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
formDataSick.leaveTotal = "0.5 วัน " formDataSick.leaveTotal = "0.5 วัน ";
} else { } else {
formDataSick.leaveTotal = null formDataSick.leaveTotal = null;
} }
return conditionHalfDay return conditionHalfDay;
}) });
</script> </script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว --> <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
@ -216,13 +246,30 @@ const isReadOnly = computed(() => {
v-model="formDataSick.leaveWrote" v-model="formDataSick.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-4 col-sm-12">
<q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" /> <q-radio
<q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" /> v-model="formDataSick.halfDay"
<q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" /> val="day"
label="ลาทั้งวัน"
checked-icon="task_alt"
/>
<q-radio
v-model="formDataSick.halfDay"
val="half_day_morning"
label="ลาครึ่งวันเช้า"
checked-icon="task_alt"
@update:model-value="resetDate"
/>
<q-radio
v-model="formDataSick.halfDay"
val="half_day_afternoon"
label="ลาครึ่งวันบ่าย"
checked-icon="task_alt"
@update:model-value="resetDate"
/>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
@ -253,12 +300,21 @@ const isReadOnly = computed(() => {
:readonly="!edit" :readonly="!edit"
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null" :model-value="
formDataSick.leaveStartDate != null
? date2Thai(formDataSick.leaveStartDate)
: null
"
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -275,7 +331,13 @@ const isReadOnly = computed(() => {
week-start="0" week-start="0"
:readonly="isReadOnly" :readonly="isReadOnly"
@update:model-value="FetchCheck()" @update:model-value="FetchCheck()"
:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null" :min-date="
formDataSick.leaveStartDate
? new Date(
formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000
)
: null
"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -293,12 +355,21 @@ const isReadOnly = computed(() => {
bg-color="white" bg-color="white"
:readonly="isReadOnly" :readonly="isReadOnly"
class="full-width datepicker" class="full-width datepicker"
:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null" :model-value="
formDataSick.leaveEndDate != null
? date2Thai(formDataSick.leaveEndDate)
: null
"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -344,7 +415,9 @@ const isReadOnly = computed(() => {
unmasked-value unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้" label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]" :rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/> />
<q-input <q-input
@ -356,7 +429,9 @@ const isReadOnly = computed(() => {
v-model="formDataSick.leaveAddress" v-model="formDataSick.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]" :rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
/> />
@ -379,12 +454,10 @@ const isReadOnly = computed(() => {
<q-file <q-file
for="leaveDocumentRef" for="leaveDocumentRef"
v-model="formDataSick.leaveDocument" v-model="formDataSick.leaveDocument"
@added="fileUploadDoc"
dense dense
label="เอกสารประกอบ" label="เอกสารประกอบ"
outlined outlined
use-chips use-chips
multiple
bg-color="white" bg-color="white"
class="col-12 q-pl-sm col-12" class="col-12 q-pl-sm col-12"
> >
@ -396,11 +469,17 @@ const isReadOnly = computed(() => {
</div> </div>
<div class="col-12 col-sm-6 row" v-if="!edit"> <div class="col-12 col-sm-6 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"> <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div> <div class="q-pl-sm text-weight-bold text-dark">
เอกสารเพิ่มเติม
</div>
</div> </div>
<q-card bordered flat class="full-width"> <q-card bordered flat class="full-width">
<q-list separator> <q-list separator>
<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs"> <q-item
v-for="(file, index) in formDataSick.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section> <q-item-section>
<q-item-label class="full-width ellipsis"> <q-item-label class="full-width ellipsis">
{{ file.name }} {{ file.name }}
@ -418,7 +497,14 @@ const isReadOnly = computed(() => {
<div class="row col-12 q-pt-md"> <div class="row col-12 q-pt-md">
<q-space /> <q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" /> <q-btn
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="ยื่นใบลา"
/>
</div> </div>
</form> </form>
</template> </template>