From 7a688d8abc13e9d10f3e51c981a0c9ccfb12112a Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 23 Nov 2023 10:13:30 +0700
Subject: [PATCH] Update 12_FollowSpouseForm.vue

---
 .../componenst/Forms/12_FollowSpouseForm.vue  | 34 ++++---------------
 1 file changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 6bff458..17d59b0 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
+import { ref, reactive, watch, computed, onMounted } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
 import { useCounterMixin } from "@/stores/mixin"
 
@@ -127,26 +127,6 @@ function updateLeaveTotal() {
 	formData.leaveTotal = newLeaveTotal
 	console.log("test")
 }
-
-/**
- * function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly
- */
-const isReadOnly = ref(false)
-watch(formData.followHistoryCountry, newVal => {
-	isReadOnly.value = !!newVal
-})
-
-watch(formData.followHistoryTime, newVal => {
-	isReadOnly.value = !!newVal
-})
-
-watch(formData.followHistoryStart, newVal => {
-	isReadOnly.value = !!newVal
-})
-
-watch(formData.followHistoryEnd, newVal => {
-	isReadOnly.value = !!newVal
-})
 </script>
 
 <template>
@@ -372,7 +352,7 @@ watch(formData.followHistoryEnd, newVal => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryStart !== null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -387,7 +367,7 @@ watch(formData.followHistoryEnd, newVal => {
 							ref="followHistoryStartRef"
 							for="followHistoryStartRef"
 							hide-bottom-space
-							:readonly="isReadOnly"
+							:readonly="formData.followHistoryStart !== null"
 							bg-color="white"
 							class="full-width datepicker"
 							:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
@@ -410,7 +390,7 @@ watch(formData.followHistoryEnd, newVal => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryEnd !== null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -426,7 +406,7 @@ watch(formData.followHistoryEnd, newVal => {
 							for="followHistoryEndRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="isReadOnly"
+							:readonly="formData.followHistoryEnd !== null"
 							class="full-width datepicker"
 							:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
 							:label="`${'ถึงวันที่'}`"
@@ -449,13 +429,13 @@ watch(formData.followHistoryEnd, newVal => {
 					v-model="formData.followHistoryCountry"
 					label="ประเทศ"
 					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryCountry !== ''"
 				/>
 				<q-input
 					class="col-12 col-md-3 col-sm-12"
 					dense
 					outlined
-					:readonly="isReadOnly"
+					:readonly="formData.followHistoryTime !== ''"
 					hide-bottom-space
 					bg-color="white"
 					ref="followHistoryTimeRef"