From adc7a0f3cb9cfb620d07951e189431164bb0d462 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 8 Jul 2024 12:04:06 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B9=84?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=88=E0=B8=A1=E0=B8=B5=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=87=20=E0=B8=88=E0=B8=B3=E0=B8=99?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=99=E0=B8=A7=E0=B8=B1=E0=B8=99=20/=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=20convert=20date=20=E0=B8=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=81=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormLeave/11_WorkInternationalForm.vue    | 604 +++++++++---------
 1 file changed, 304 insertions(+), 300 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 22af512..4ccc342 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -195,6 +195,11 @@ watch(props, () => {
 	}
 });
 
+watch(()=>formDataWorkInternational.leaveEndDate,()=>{
+	if(formDataWorkInternational.leaveStartDate !== null && formDataWorkInternational.leaveEndDate !== null){
+		fetchCheck()
+	}
+})
 /**Hook */
 onMounted(() => {
 	if (props.data) {
@@ -214,136 +219,135 @@ onMounted(() => {
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					hide-bottom-space
-					bg-color="white"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="formDataWorkInternational.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[(val) => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          hide-bottom-space
+          bg-color="white"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataWorkInternational.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveStartDate"
-					:locale="'th'"
-					hide-bottom-space
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@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 || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="
-								formDataWorkInternational.leaveStartDate != null
-									? date2Thai(formDataWorkInternational.leaveStartDate)
-									: null
-							"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon
-									name="event"
-									class="cursor-pointer"
-									style="color: var(--q-primary)"
-								>
-								</q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveStartDate"
+          :locale="'th'"
+          hide-bottom-space
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @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 || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveStartDate != null
+                  ? date2Thai(formDataWorkInternational.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					:class="!isLeave ? dateEndInputStyle : ''"
-					class="col-12 col-md-6 col-sm-6 cursor-pointer"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					@update:model-value="fetchCheck()"
-					week-start="0"
-					:readonly="
-						!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
-					"
-					:min-date="formDataWorkInternational.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							:readonly="
-								!formDataWorkInternational.leaveStartDate ||
-								statusCheck === 'NEW'
-							"
-							class="full-width datepicker"
-							:model-value="
-								formDataWorkInternational.leaveEndDate != null
-									? date2Thai(formDataWorkInternational.leaveEndDate)
-									: null
-							"
-							:label="`${'ลาถึงวันที่'}`"
-							:bottom-slots="!isLeave ? true : false"
-							:color="!isLeave ? 'red' : 'black'"
-							:bg-color="!isLeave ? 'red-2' : 'white'"
-							:border-color="!isLeave ? 'red' : 'gray'"
-							:input-class="!isLeave ? dateEndInputStyle : ''"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" color="primary">
-								</q-icon>
-							</template>
+        <datepicker
+          :class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-6 col-sm-6 cursor-pointer"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="
+            !formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
+          "
+          :min-date="formDataWorkInternational.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              :readonly="
+                !formDataWorkInternational.leaveStartDate ||
+                statusCheck === 'NEW'
+              "
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveEndDate != null
+                  ? date2Thai(formDataWorkInternational.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+            >
+              <template v-slot:prepend>
+                <q-icon name="event" class="cursor-pointer" color="primary">
+                </q-icon>
+              </template>
 
-							<template v-slot:hint>
-								<span style="color: red">
-									{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
-								</span>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<!-- <q-input
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+                </span>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <!-- <q-input
 							class="col-md-3 col-sm-12"
 							dense
 							outlined
@@ -356,190 +360,190 @@ onMounted(() => {
 							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
 						/> -->
 
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataWorkInternational.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<q-file
-							ref="fileRef"
-							bg-color="white"
-							v-model="formDataWorkInternational.leaveDocument"
-							multiple
-							@added="fileUploadDoc"
-							dense
-							label="เอกสารประกอบ"
-							outlined
-							use-chips
-							class="q-pl-sm col-12"
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card>
-							<q-list
-								v-if="leaveDocumentList && leaveDocumentList.length > 0"
-								separator
-							>
-								<q-item
-									v-for="(document, index) in leaveDocumentList"
-									:key="index"
-									class="q-my-xs"
-								>
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบที่ " + (index + 1) }}
-											</div>
-											<div>
-												<q-btn
-													:href="document.path"
-													target="_blank"
-													outline
-													flat
-													dense
-													color="blue"
-													icon="mdi-download"
-													size="12px"
-													class="q-mr-md"
-												>
-													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-												</q-btn>
-											</div>
-											<div>
-												<q-btn
-													@click="clickDelete(leaveId, document.docId)"
-													target="_blank"
-													outline
-													color="red"
-													flat
-													dense
-													icon="delete"
-													size="12px"
-												>
-													<q-tooltip>ลบไฟล์</q-tooltip>
-												</q-btn>
-											</div>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-				</div>
-			</div>
-		</q-card>
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataWorkInternational.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <q-file
+              ref="fileRef"
+              bg-color="white"
+              v-model="formDataWorkInternational.leaveDocument"
+              multiple
+              @added="fileUploadDoc"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              class="q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card>
+              <q-list
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+                separator
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบที่ " + (index + 1) }}
+                      </div>
+                      <div>
+                        <q-btn
+                          :href="document.path"
+                          target="_blank"
+                          outline
+                          flat
+                          dense
+                          color="blue"
+                          icon="mdi-download"
+                          size="12px"
+                          class="q-mr-md"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </div>
+                      <div>
+                        <q-btn
+                          @click="clickDelete(leaveId, document.docId)"
+                          target="_blank"
+                          outline
+                          color="red"
+                          flat
+                          dense
+                          icon="delete"
+                          size="12px"
+                        >
+                          <q-tooltip>ลบไฟล์</q-tooltip>
+                        </q-btn>
+                      </div>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </div>
+      </div>
+    </q-card>
 
-		<div v-if="data && data.id" 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-sm-3 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+    <div v-if="data && data.id" 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-sm-3 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดาวน์โหลด
               </div> -->
-							<q-btn
-								color="primary"
-								icon="download"
-								label="ดาวน์โหลดแบบฟอร์ม"
-								@click="
-									onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
-								"
-							/>
-						</div>
-					</div>
-					<div class="col-sm-5 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
+                "
+              />
+            </div>
+          </div>
+          <div class="col-sm-5 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"
-								use-chips
-								dense
-								label="อัปโหลดแบบฟอร์ม"
-								outlined
-								bg-color="white"
-								accept="application/pdf"
-							>
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
+              <q-file
+                v-model="formDataWorkInternational.leaveDraftDocument"
+                use-chips
+                dense
+                label="อัปโหลดแบบฟอร์ม"
+                outlined
+                bg-color="white"
+                accept="application/pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
 
-					<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+          <div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดูไฟล์อัปโหลด
               </div> -->
-							<q-btn
-								icon="visibility"
-								color="blue"
-								label="ดาวน์โหลดไฟล์"
-								:href="leaveDraftDocument"
-								target="_blank"
-							/>
-						</div>
-					</div>
-					<!-- <div class="col-md-1 self-end q-mb-sm">
+              <q-btn
+                icon="visibility"
+                color="blue"
+                label="ดาวน์โหลดไฟล์"
+                :href="leaveDraftDocument"
+                target="_blank"
+              />
+            </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>
+      </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
-					v-if="!props.data || props.data.status == 'DRAFT'"
-					id="onSubmit"
-					type="submit"
-					unelevated
-					dense
-					class="q-px-md items-center btnBlue"
-					label="บันทึก"
-					><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-				>
-				<q-btn
-					v-if="data && statusCheck != 'NEW'"
-					id="onSubmit"
-					type="button"
-					unelevated
-					dense
-					class="q-px-md items-center q-ml-sm"
-					color="primary"
-					label="ยื่นใบลา"
-					@click="onConfirm()"
-					><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-				>
-			</div>
-		</div>
-	</form>
+    <div v-if="!isSave">
+      <q-separator class="q-mt-sm" />
+      <div class="row col-12 q-pt-md">
+        <q-space />
+        <q-btn
+          v-if="!props.data || props.data.status == 'DRAFT'"
+          id="onSubmit"
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center btnBlue"
+          label="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data && statusCheck != 'NEW'"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm()"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
 </template>