รอบการปฏิบัติงาน สิทธิ์

src/modules/09_leave/components/3_WorkTime/DialogForm.vue

@@ -20,7 +20,7 @@ const $q = useQuasar();
 
 const mixin = useCounterMixin();
 const { dialogConfirm, success, messageError } = mixin;
-
+const isRead = defineModel<boolean>("isRead", { required: true });
 /** propsData จาก RoundMain */
 const props = defineProps({
   modal: {
@@ -145,6 +145,7 @@ async function putRoundDuty(id: string) {
 //** Function ปิด Popup */
 function close() {
   props.closeDialog?.();
+  isRead.value = false;
 }
 
 /***/
@@ -183,7 +184,9 @@ watch(
             props.editCheck === 'add'
               ? 'เพิ่มรอบการปฏิบัติงาน'
               : props.detailData
-              ? `แก้ไขรอบ ${props.detailData.round}`
+              ? isRead
+                ? `รายละเอียดรอบ ${props.detailData.round}`
+                : `แก้ไขรอบ ${props.detailData.round}`
               : ''
           "
           :close="close"
@@ -199,7 +202,7 @@ watch(
               <q-input
                 ref="amRef"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 lazy-rules
@@ -236,7 +239,7 @@ watch(
               <q-input
                 ref="amOutRef"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 v-model="formData.endTimeMorning"
@@ -297,7 +300,7 @@ watch(
                   },
                 ]"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 lazy-rules
@@ -334,7 +337,7 @@ watch(
                   },
                 ]"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 v-model="formData.endTimeAfternoon"
@@ -350,6 +353,7 @@ watch(
             class="col-12 bg-white q-ma-md"
             outlined
             stack-label
+            :readonly="isRead"
             v-model="formData.description"
             label="คำอธิบาย"
             hide-bottom-space
@@ -360,8 +364,9 @@ watch(
           >
             <div class="row items-center q-my-sm justify-between">
               <p class="q-ma-none">เวลา Default</p>
-              <label class="toggle-control">
+              <label :class="`toggle-control ${isRead ? 'no-pointer-events' : ''}`">
                 <input
+                  :readonly="isRead"
                   type="checkbox"
                   v-model="formData.isDefault"
                   @change="checkDefault()"
@@ -375,7 +380,7 @@ watch(
           >
             <div class="row items-center q-my-sm justify-between">
               <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
+              <label :class="`toggle-control ${isRead ? 'no-pointer-events' : ''}`">
                 <input
                   type="checkbox"
                   v-model="formData.isActive"
@@ -386,8 +391,8 @@ watch(
             </div>
           </div>
         </q-card-section>
-        <q-separator color="grey-4" />
-        <div class="q-pa-sm">
+        <q-separator color="grey-4" v-if="!isRead"/>
+        <div class="q-pa-sm" v-if="!isRead">
           <div class="row justify-end">
             <q-btn
               id="onSubmit"