From b9e761a526461a4365124690e01dc0f4a9dcdc6b Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 9 Nov 2023 17:46:11 +0700
Subject: [PATCH] =?UTF-8?q?halfDay=20=E0=B9=83=E0=B8=AA=E0=B9=88=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=20formData?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 560 ++++++++----------
 .../componenst/Forms/12_FollowSpouseForm.vue  |   2 +-
 .../05_leave/interface/request/SickForm.ts    |   2 +
 3 files changed, 254 insertions(+), 310 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index b446ab5..84f9850 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -1,347 +1,289 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/SickForm";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-const edit = ref<boolean>(true);
-const halfDay = ref<string>("day");
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
-  leaveNo: "",
-  startLeaveDate: null,
-  endLeaveDate: null,
-  contractTel: "",
-  leaveTotal: "",
-  leaveContactTel: "",
-  leaveContactLocation: "",
-  leaveDetail: "",
-  file: [],
-});
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	halfDay: "day",
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: [],
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveNoRef = ref<object | null>(null);
-const startLeaveDateRef = ref<object | null>(null);
-const endLeaveDateRef = ref<object | null>(null);
-const contractTelRef = ref<object | null>(null);
-const leaveTotalRef = ref<object | null>(null);
-const leaveContactTelRef = ref<object | null>(null);
-const leaveContactLocationRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
-const fileRef = ref<object | null>(null);
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const halfDayRef = ref<object | null>(null)
+const contractTelRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveContactTelRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveNo: leaveNoRef,
-  startLeaveDate: startLeaveDateRef,
-  endLeaveDate: endLeaveDateRef,
-  contractTel: contractTelRef,
-  leaveTotal: leaveTotalRef,
-  leaveContactTel: leaveContactTelRef,
-  leaveContactLocation: leaveContactLocationRef,
-  leaveDetail: leaveDetailRef,
-  file: fileRef,
-};
+	leaveNo: leaveNoRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	halfDay: halfDayRef,
+	contractTel: contractTelRef,
+	leaveTotal: leaveTotalRef,
+	leaveContactTel: leaveContactTelRef,
+	leaveContactLocation: leaveContactLocationRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
-  // console.log("data==>", props.data)
-  formData.leaveNo = props.data.leaveNo;
-  formData.startLeaveDate = props.data.startLeaveDate;
-  formData.endLeaveDate = props.data.endLeaveDate;
-  formData.contractTel = props.data.contractTel;
-  formData.leaveTotal = props.data.leaveTotal;
-  formData.leaveContactTel = props.data.leaveContactTel;
-  formData.leaveDetail = props.data.leaveDetail;
-  formData.file = props.data.file;
-});
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.contractTel = props.data.contractTel
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveContactTel = props.data.leaveContactTel
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const fileDocDataUpload = ref<File[]>([]);
+const fileDocDataUpload = ref<File[]>([])
 async function fileUploadDoc(files: any) {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
+	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)) {
-    props.onSubmit();
-  }
+	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)) {
+		props.onSubmit()
+	}
 }
 </script>
 
 <!-- ฟอร์มลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
 <template>
-  <form @submit.prevent.stop="onValidate">
-    <div>
-      <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-      <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-      <div class="col-12 row q-col-gutter-md q-pa-md">
-        <div class="col-xs-12 col-sm-12">
-          <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"
-                ref="leaveNoRef"
-                for="leaveNoRef"
-                dense
-                outlined
-                v-model="formData.leaveNo"
-                label="เขียนที่"
-                :readonly="!edit"
-                :rules="[(val) => !!val || `${'เขียนที่'}`]"
-              />
+	<form @submit.prevent.stop="onValidate">
+		<div>
+			<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+			<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+			<div class="col-12 row q-col-gutter-md q-pa-md">
+				<div class="col-xs-12 col-sm-12">
+					<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"
+								ref="leaveNoRef"
+								for="leaveNoRef"
+								dense
+								outlined
+								v-model="formData.leaveNo"
+								label="เขียนที่"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'เขียนที่'}`]"
+							/>
 
-              <div class="col-md-4 col-sm-12">
-                <q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
-                <q-radio
-                  v-model="halfDay"
-                  val="half_day_morning"
-                  label="ลาครึ่งวันเช้า"
-                />
-                <q-radio
-                  v-model="halfDay"
-                  val="half_day_afternoon"
-                  label="ลาครึ่งวันบ่าย"
-                />
-              </div>
+							<div class="col-md-4 col-sm-12">
+								<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" />
+								<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
+								<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" />
+							</div>
 
-              <datepicker
-                class="col-md-3 col-sm-12"
-                menu-class-name="modalfix"
-                v-model="formData.startLeaveDate"
-                :locale="'th'"
-                autoApply
-                borderless
-                :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="startLeaveDateRef"
-                    for="startLeaveDateRef"
-                    hide-bottom-space
-                    :readonly="!edit"
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.startLeaveDate != null
-                        ? date2Thai(formData.startLeaveDate)
-                        : 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-md-3 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.startLeaveDate"
+								:locale="'th'"
+								autoApply
+								borderless
+								: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="startLeaveDateRef"
+										for="startLeaveDateRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
-                menu-class-name="modalfix"
-                v-model="formData.endLeaveDate"
-                :locale="'th'"
-                autoApply
-                borderless
-                :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="endLeaveDateRef"
-                    for="endLeaveDateRef"
-                    hide-bottom-space
-                    :readonly="!edit"
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.endLeaveDate != null
-                        ? date2Thai(formData.endLeaveDate)
-                        : 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-2 col-sm-12"
-                dense
-                outlined
-                ref="leaveTotalRef"
-                for="leaveTotalRef"
-                type="number"
-                v-model="formData.leaveTotal"
-                label="จำนวนวันที่ลา"
-                readonly
-                :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-              />
+							<datepicker
+								class="col-md-3 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.endLeaveDate"
+								:locale="'th'"
+								autoApply
+								borderless
+								: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="endLeaveDateRef"
+										for="endLeaveDateRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : 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-2 col-sm-12"
+								dense
+								outlined
+								ref="leaveTotalRef"
+								for="leaveTotalRef"
+								type="number"
+								v-model="formData.leaveTotal"
+								label="จำนวนวันที่ลา"
+								readonly
+								:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+							/>
 
-              <q-input
-                class="col-3"
-                dense
-                outlined
-                ref="leaveContactTelRef"
-                for="leaveContactTelRef"
-                v-model="formData.leaveContactTel"
-                mask="(###)-###-####"
-                unmasked-value
-                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-                :readonly="!edit"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-                ]"
-              />
+							<q-input
+								class="col-3"
+								dense
+								outlined
+								ref="leaveContactTelRef"
+								for="leaveContactTelRef"
+								v-model="formData.leaveContactTel"
+								mask="(###)-###-####"
+								unmasked-value
+								label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+							/>
 
-              <q-input
-                class="col-md-9 col-sm-12"
-                dense
-                outlined
-                ref="leaveContactLocationRef"
-                for="leaveContactLocationRef"
-                v-model="formData.leaveContactLocation"
-                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-                :readonly="!edit"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-                ]"
-              />
+							<q-input
+								class="col-md-9 col-sm-12"
+								dense
+								outlined
+								ref="leaveContactLocationRef"
+								for="leaveContactLocationRef"
+								v-model="formData.leaveContactLocation"
+								label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+							/>
 
-              <q-input
-                type="textarea"
-                class="col-md-12 col-sm-12"
-                dense
-                outlined
-                ref="leaveDetailRef"
-                for="leaveDetailRef"
-                v-model="formData.leaveDetail"
-                label="รายละเอียด"
-                :readonly="!edit"
-              />
+							<q-input
+								type="textarea"
+								class="col-md-12 col-sm-12"
+								dense
+								outlined
+								ref="leaveDetailRef"
+								for="leaveDetailRef"
+								v-model="formData.leaveDetail"
+								label="รายละเอียด"
+								:readonly="!edit"
+							/>
 
-              <q-file
-                v-model="formData.file"
-                @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>
+							<q-file v-model="formData.file" @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 formData.file"
-                      :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>
-      </div>
-    </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, index) in formData.file" :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>
+			</div>
+		</div>
 
-    <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="บันทึก"
-      />
-    </div>
-  </form>
+		<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="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index f242f3f..6202542 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -22,7 +22,7 @@ const formData = reactive<FormData>({
 	startLeaveDate: null,
 	endLeaveDate: null,
 	leaveTotal: "", //จำนวนวันลา
-	salary: 0, //เงินเดือนปัจจุบัน
+	salary: 25000, //เงินเดือนปัจจุบัน
 	spouseName: "", //ชื่อคู่สมรส
 	spousePosition: "", //ตำแหน่งคู่สมรส
 	spouseLevel: "", //ระดับคู่สมรส
diff --git a/src/modules/05_leave/interface/request/SickForm.ts b/src/modules/05_leave/interface/request/SickForm.ts
index 56b9b51..83b71a9 100644
--- a/src/modules/05_leave/interface/request/SickForm.ts
+++ b/src/modules/05_leave/interface/request/SickForm.ts
@@ -2,6 +2,7 @@ interface FormData {
 	leaveNo: string //เขียนที่***
 	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
 	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	halfDay: string
 	leaveTotal: string //จำนวนวันลา
 	contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
 	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
@@ -15,6 +16,7 @@ interface FormRef {
 	leaveNo: object | null //เขียนที่***
 	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
 	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	halfDay: object | null
 	leaveTotal: object | null //จำนวนวันลา
 	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
 	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา