เพิ่ม editpage form การลา(ยังไม่เสร็จ)

ยังไม่เสร็จ
-api muti upload
-api บันทึกแก้ไข
-issue ทีอยากปรึกษา
บวชพิธีฮัจ
ศึกษาดูงาน

src/modules/05_leave/components/Forms/01_SickForm.vue

@@ -435,7 +435,7 @@ function resetEndDate(type: string) {
 
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/03_Birth.vue

@@ -385,7 +385,7 @@ async function saveFormData() {
 
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue

@@ -441,7 +441,7 @@ async function saveFormData() {
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/05_VacationForm.vue

@@ -436,7 +436,7 @@ const isReadOnly = computed(() => {
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/06_OrdinationForm.vue

@@ -539,7 +539,7 @@ function updateLeaveTotal() {
 
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/07_HajjForm.vue

@@ -158,8 +158,6 @@ function updateLeaveTotal() {
 	formDataHaji.leaveTotal = newLeaveTotal
 	console.log("test")
 }
-
-
 </script>
 
 <template>
@@ -350,7 +348,7 @@ function updateLeaveTotal() {
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/08_MilitaryForm.vue

@@ -406,7 +406,7 @@ function updateLeaveTotal() {
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/09_StudyForm.vue

@@ -522,7 +522,7 @@ const formattedleaveSalary = computed(() => {
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/10_TrainForm.vue

@@ -500,7 +500,7 @@ const formattedSalary = computed(() => {
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue

@@ -369,7 +369,7 @@ async function saveFormData() {
 					<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(formDataWorkInternational.typeId, 'dataStore.typeId')" />
+							<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">
@@ -395,7 +395,7 @@ async function saveFormData() {
 			<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 			</div>
 		</div>
 	</form>

src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue

@@ -575,7 +575,7 @@ function updateLeaveTotal() {
 		<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 		</div>
 	</form>
 </template>

src/modules/05_leave/components/Forms/13_RehabilitationForm.vue

@@ -134,6 +134,41 @@ async function onClickDownloadFile(id: string, fileName: string) {
 		})
 }
 
+// //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
  */
@@ -313,7 +348,7 @@ async function saveFormData() {
 					<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(formDataRehabilitation.typeId, ' dataStore.typeId')" />
+							<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">
@@ -339,7 +374,7 @@ async function saveFormData() {
 			<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-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
 			</div>
 		</div>
 	</form>

src/modules/05_leave/components/ListCalendar.vue

@@ -1,81 +1,82 @@
 <script setup lang="ts">
-import { ref,  onMounted } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter, useRoute } from "vue-router"
 
 /** import type*/
-import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
+import type { LeaveType } from "@/modules/05_leave/interface/response/leave"
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
-import Table from "@/modules/05_leave/components/Table.vue";
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
+import Table from "@/modules/05_leave/components/Table.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 mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
-  mixin;
-const LeaveData = useLeaveStore();
-
-const $q = useQuasar();
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
+const LeaveData = useLeaveStore()
+const router = useRouter()
+const route = useRoute()
+const $q = useQuasar()
 
 /** filter */
-const year = ref<number>(new Date().getFullYear());
-const type = ref<string>("00000000-0000-0000-0000-000000000000");
-const status = ref<string>("ALL");
-const filter = ref<string>("");
+const year = ref<number>(new Date().getFullYear())
+const type = ref<string>("00000000-0000-0000-0000-000000000000")
+const status = ref<string>("ALL")
+const filter = ref<string>("")
 
 /** pagination*/
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
+const maxPage = ref<number>(1)
+const page = ref<number>(1)
+const pageSize = ref<number>(10)
 
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-  showLoader();
-  const body = {
-    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-    type: type.value, //*Id ประเภทการลา
-    status: status.value, //*สถานะการของลา
-    page: page.value.toString(), //*หน้า
-    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
-    keyword: filter.value, //keyword ค้นหา
-  };
-  await http
-    .post(config.API.leaveTableList(), body)
-    .then((res) => {
-      const data = res.data.result.data;
-      LeaveData.fetchListLeave(data);
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader()
+	const body = {
+		year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+		type: type.value, //*Id ประเภทการลา
+		status: status.value, //*สถานะการของลา
+		page: page.value.toString(), //*หน้า
+		pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
+		keyword: filter.value, //keyword ค้นหา
+	}
+	await http
+		.post(config.API.leaveTableList(), body)
+		.then(res => {
+			const data = res.data.result.data
+			LeaveData.fetchListLeave(data)
+			maxPage.value = Math.ceil(res.data.result.total / pageSize.value)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
-const leaveType = ref<LeaveType[]>();
+const leaveType = ref<LeaveType[]>()
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-      LeaveData.fetchLeaveType(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.leaveType())
+		.then(async res => {
+			leaveType.value = res.data.result
+			LeaveData.fetchLeaveType(res.data.result)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
 }
 
-const modal = ref<boolean>(false);
-const leaveId = ref<string>("");
-const leaveStatus = ref<string>("");
+const modal = ref<boolean>(false)
+const leaveId = ref<string>("")
+const leaveStatus = ref<string>("")
 
 /**
  * function openPopupDateail
@@ -83,14 +84,18 @@ const leaveStatus = ref<string>("");
  * @param status การลา
  */
 const onClickView = async (id: string, status: string) => {
-  modal.value = true;
-  leaveId.value = id;
-  leaveStatus.value = status;
-};
+	modal.value = true
+	leaveId.value = id
+	leaveStatus.value = status
+}
+
+const onClickEdit = async (id: string, status: string) => {
+	router.push(`/leave/edit/${id}`)
+}
 
 /** function closePopup*/
 async function onClickClose() {
-  modal.value = false;
+	modal.value = false
 }
 
 /**
@@ -101,13 +106,13 @@ async function onClickClose() {
  * @param k คำค้นหา
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
-  if (t && s) {
-    year.value = await y;
-    type.value = await t;
-    status.value = await s;
-    filter.value = await k;
-    await fetchDataTable();
-  }
+	if (t && s) {
+		year.value = await y
+		type.value = await t
+		status.value = await s
+		filter.value = await k
+		await fetchDataTable()
+	}
 }
 
 /**
@@ -116,122 +121,83 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-  (page.value = await p), (pageSize.value = await ps);
-  await fetchDataTable();
+	;(page.value = await p), (pageSize.value = await ps)
+	await fetchDataTable()
 }
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fetchDataTable();
-  await fectOptionType();
-});
+	await fetchDataTable()
+	await fectOptionType()
+})
 </script>
 <template>
-  <Table
-    
-    :rows="LeaveData.rows"
-    :columns="LeaveData.columns"
-    :visible-columns="LeaveData.visibleColumns"
-    v-model:inputfilter="filter"
-    v-model:inputvisible="LeaveData.visibleColumns"
-    :inputShow="true"
-    :grid="$q.screen.gt.xs ? false : true"
-    @update:filter="updateFilterTable"
-    @update:Pagination="updatePagination"
-    :maxPage="maxPage"
-    :pageSize="pageSize"
-    :leaveType="leaveType"
-  >
-    <template #columns="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          key="no"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
-        </q-td>
-        <q-td
-          key="leaveTypeName"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ props.row.leaveTypeName }}
-        </q-td>
-        <q-td
-          key="dateSendLeave"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ props.row.dateSendLeave }}
-        </q-td>
+	<Table
+		:rows="LeaveData.rows"
+		:columns="LeaveData.columns"
+		:visible-columns="LeaveData.visibleColumns"
+		v-model:inputfilter="filter"
+		v-model:inputvisible="LeaveData.visibleColumns"
+		:inputShow="true"
+		:grid="$q.screen.gt.xs ? false : true"
+		@update:filter="updateFilterTable"
+		@update:Pagination="updatePagination"
+		:maxPage="maxPage"
+		:pageSize="pageSize"
+		:leaveType="leaveType"
+	>
+		<template #columns="props">
+			<q-tr :props="props" class="cursor-pointer">
+				<q-td key="no" :props="props" @click="onClickView(props.row.id, props.row.status)">
+					{{ (page - 1) * pageSize + props.rowIndex + 1 }}
+				</q-td>
+				<q-td key="leaveTypeName" :props="props" @click="onClickView(props.row.id, props.row.status)">
+					{{ props.row.leaveTypeName }}
+				</q-td>
+				<q-td key="dateSendLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
+					{{ props.row.dateSendLeave }}
+				</q-td>
 
-        <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 == 'APPROVE'"
-                size="10px"
-                color="light-green"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'REJECT'"
-                size="10px"
-                color="red-6"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'PENDING'"
-                size="10px"
-                color="light-blue-14"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'NEW'"
-                size="10px"
-                color="orange"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-if="props.row.status == 'DELETE'"
-                size="10px"
-                color="grey-10"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
+				<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 == 'APPROVE'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'REJECT'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'PENDING'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'NEW'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-if="props.row.status == 'DELETE'" size="10px" color="grey-10" name="mdi-circle" class="q-mr-sm" />
 
-              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
-            </div>
-            <q-space />
-            <q-btn
-              v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
-              label="ขอยกเลิก"
-              @click="onClickView(props.row.id, 'CANCEL')"
-              size="13px"
-              class="q-px-sm"
-              outline
-              dense
-              color="orange"
-            />
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </Table>
+							<span class="q-pr-md">{{ props.row.statusConvert }}</span>
+						</div>
+						<q-space />
+						<q-btn
+							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
+							label="ขอยกเลิก"
+							@click="onClickView(props.row.id, 'CANCEL')"
+							size="13px"
+							class="q-px-sm"
+							outline
+							dense
+							color="orange"
+						/>
+						<q-space />
+						<q-btn
+							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
+							label="ขอยืนยันการลา"
+							@click="onClickEdit(props.row.id, 'CANCEL')"
+							size="13px"
+							class="q-px-sm"
+							outline
+							dense
+							color="primary"
+						/>
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</Table>
 
-  <DialogDetail
-    :modal="modal"
-    :leaveId="leaveId"
-    :leaveStatus="leaveStatus"
-    :onClickClose="onClickClose"
-    :leaveType="leaveType"
-    :fetchDataTable="fetchDataTable"
-  />
+	<DialogDetail :modal="modal" :leaveId="leaveId" :leaveStatus="leaveStatus" :onClickClose="onClickClose" :leaveType="leaveType" :fetchDataTable="fetchDataTable" />
 </template>

src/modules/05_leave/components/formEdit/Form.vue

@@ -0,0 +1,142 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Birth.vue

@@ -0,0 +1,391 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_FollowSpouse.vue

@@ -0,0 +1,570 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Hajj.vue

@@ -0,0 +1,354 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_HelpWifeBirth.vue

@@ -0,0 +1,436 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Military.vue

@@ -0,0 +1,412 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Ordinationvue.vue

@@ -0,0 +1,545 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Rehabilitation.vue

@@ -0,0 +1,338 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Sick.vue

@@ -0,0 +1,445 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Study.vue

@@ -0,0 +1,528 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_Vacation.vue

@@ -0,0 +1,431 @@
+<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>

src/modules/05_leave/components/formEdit/formEdit_WorkInternational.vue

@@ -0,0 +1,407 @@
+<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>

src/modules/05_leave/router.ts

@@ -1,29 +1,40 @@
 /**
  * Router leave
  */
-const leave = () => import("@/modules/05_leave/views/Main.vue");
+const leave = () => import("@/modules/05_leave/views/Main.vue")
 
-const addAbsence = () => import("@/modules/05_leave/views/AddPage.vue");
+const addAbsence = () => import("@/modules/05_leave/views/AddPage.vue")
+
+const editAbsence = () => import("@/modules/05_leave/views/EditPage.vue")
 
 /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
  */
 export default [
-  {
-    path: "/leave",
-    name: "leave",
-    component: leave,
-    meta: {
-      Auth: true,
-      Key: [7],
-    },
-  },
-  {
-    path: "/leave/add",
-    name: "addAbsence",
-    component: addAbsence,
-    meta: {
-      Auth: true,
-      Key: [7],
-    },
-  },
-];
+	{
+		path: "/leave",
+		name: "leave",
+		component: leave,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+	{
+		path: "/leave/add",
+		name: "addAbsence",
+		component: addAbsence,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+	{
+		path: "/leave/edit/:id",
+		name: "editAbsence",
+		component: editAbsence,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+]

src/modules/05_leave/views/EditPage.vue

@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } 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 { 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 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>("")
+/** 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: "",
+})
+
+/**เมื่อเริ่มโหลดหน้า
+ * เรียกใช้งาน 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)
+
+/**
+ * function check ประเภทการลา
+ * @param leaveTypeId  ประเภทการลา
+ * @param leaveTypeName  ประเภทการลา
+ */
+/**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`);
+//     });
+// }
+</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>
+
+								<!-- 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>
+</template>