readOnly เมื่อ Status = New

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

@@ -135,7 +135,7 @@ async function fetchCheck() {
 }
 
 const leaveDocumentList = ref<any>()
-
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -147,6 +147,7 @@ onMounted(() => {
 		formDataBirth.leaveAddress = props.data.leaveAddress
 		formDataBirth.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 	}
 })
 </script>
@@ -170,7 +171,7 @@ onMounted(() => {
 					label="เขียนที่"
 					hide-bottom-space
 					bg-color="white"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -184,7 +185,7 @@ onMounted(() => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataBirth.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -201,7 +202,7 @@ onMounted(() => {
 							for="leaveStartDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
@@ -292,7 +293,7 @@ onMounted(() => {
 							mask="(###)-###-####"
 							unmasked-value
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
 						/>
 
@@ -306,7 +307,7 @@ onMounted(() => {
 							for="leaveAddressRef"
 							v-model="formDataBirth.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
 						/>
 					</div>
@@ -321,27 +322,30 @@ onMounted(() => {
 					for="leaveDetailRef"
 					v-model="formDataBirth.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				/>
-
-				<!-- multiple -->
-				<q-file
-					for="leaveDocumentRef"
-					hide-bottom-space
-					v-model="formDataBirth.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					bg-color="white"
-					label="เอกสารประกอบ"
-					outlined
-					multiple
-					use-chips
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
+				<div class="full-width" v-if="statusCheck != 'NEW'">
+					<div class="q-col-gutter-sm row">
+						<!-- multiple -->
+						<q-file
+							for="leaveDocumentRef"
+							hide-bottom-space
+							v-model="formDataBirth.leaveDocument"
+							@added="fileUploadDoc"
+							dense
+							bg-color="white"
+							label="เอกสารประกอบ"
+							outlined
+							multiple
+							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="formDataBirth.leaveDocument.length == 0">
 					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 				</div> -->
@@ -407,7 +411,7 @@ onMounted(() => {
 			<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" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+			<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>