From 809216c6d8c7dcc7593576b143feacd3c41946a0 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 7 Nov 2023 19:46:08 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20modal=20sickform?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 390 +++++++++---------
 1 file changed, 190 insertions(+), 200 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 382a2d6..ed5ecad 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -1,20 +1,54 @@
 <script setup lang="ts">
-import { ref } from "vue";
-
-const edit = ref<boolean>(true);
-const halfDay = ref<string>("day");
+import { ref, reactive, watch } from "vue"
+import type { FormData } from "../../interface/request/SickForm"
+import { useCounterMixin } from "@/stores/mixin"
 
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Array,
+		default: null,
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: null,
+})
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.contractTel = props.data.contractTel
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveContactTel = props.data.leaveContactTel
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+const fileDocDataUpload = ref<File[]>([])
+
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 </script>
 
 <template>
-  <div>
-    <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+	<div>
+		<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
     <ul>
       <li>เขียนที่</li>
       <li>ลาตั้งแต่วันที่</li>
@@ -32,202 +66,158 @@ const props = defineProps({
       (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p> -->
 
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<q-card bordered class="q-pa-md bg-grey-1">
+					<div class="col-12 row q-pa-sm q-col-gutter-sm">
+						<q-input class="col-12 col-sm-12" dense outlined v-model="formData.leaveNo" label="เขียนที่" :readonly="!edit" :rules="[val => !!val || `${'เขียนที่'}`]" />
 
-        <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"
-              dense
-              outlined
-              v-model="Writeat"
-              label="เขียนที่"
-              :readonly="!edit"
-              :rules="[(val) => !!val || `${'เขียนที่'}`]"
-            />
+						<div class="col-md-4 col-sm-12">
+							<q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
+							<q-radio v-model="halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
+							<q-radio v-model="halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" />
+						</div>
 
-            <div class="col-md-4 col-sm-12">
-              <q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
-              <q-radio
-                v-model="halfDay"
-                val="half_day_morning"
-                label="ลาครึ่งวันเช้า"
-              />
-              <q-radio
-                v-model="halfDay"
-                val="half_day_afternoon"
-                label="ลาครึ่งวันบ่าย"
-              />
-            </div>
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
+									:label="`${'ลาตั้งแต่วันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <datepicker
-              class="col-md-3 col-sm-12"
-              menu-class-name="modalfix"
-              v-model="dateLeaveStart"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :readonly="!edit"
-                  class="full-width datepicker"
-                  :model-value="
-                    dateLeaveStart != null ? date2Thai(dateLeaveStart) : null
-                  "
-                  :label="`${'ลาตั้งแต่วันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
+									:label="`${'ลาถึงวันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+						<q-input
+							class="col-md-2 col-sm-12"
+							dense
+							outlined
+							type="number"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
 
-            <datepicker
-              class="col-md-3 col-sm-12"
-              menu-class-name="modalfix"
-              v-model="dateLeaveEnd"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :readonly="!edit"
-                  class="full-width datepicker"
-                  :model-value="
-                    dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null
-                  "
-                  :label="`${'ลาถึงวันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-input
-              class="col-md-2 col-sm-12"
-              dense
-              outlined
-              type="number"
-              v-model="dateTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-              :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-            />
+						<q-input
+							class="col-3"
+							dense
+							outlined
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              class="col-3"
-              dense
-              outlined
-              v-model="tel"
-              mask="(###)-###-####"
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+						<q-input
+							class="col-md-9 col-sm-12"
+							dense
+							outlined
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
 
-            <q-input
-              class="col-md-9 col-sm-12"
-              dense
-              outlined
-              v-model="locationAbsence"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+						/>
 
-            <q-input
-              type="textarea"
-              class="col-md-12 col-sm-12"
-              dense
-              outlined
-              v-model="detail"
-              label="รายละเอียด"
-              :readonly="!edit"
-              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-            />
+						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
 
-            <q-file
-              v-model="files"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              multiple
-              class="q-pl-sm col-6"
-            >
-              <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 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>
+						<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 formData.file" :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>
+		</div>
+	</div>
 </template>