popup หมายเหตุ

src/components/TableHistory.vue

@@ -222,6 +222,15 @@ function classStatus(status: string) {
       break
   }
 }
+
+const modalReject = ref<boolean>(false)
+const reasonRejrct = ref<string>('')
+function onClickOpenPopupRejrct(data: any) {
+  if (data.editStatus === 'ไม่อนุมัติ') {
+    reasonRejrct.value = data.editReason
+    modalReject.value = true
+  }
+}
 </script>
 
 <template>
@@ -314,7 +323,10 @@ function classStatus(status: string) {
             @click="openPopup(props.row)"
           />
         </q-td>
-        <q-td v-else-if="tab === 'time'">
+        <q-td
+          v-else-if="tab === 'time'"
+          @click="onClickOpenPopupRejrct(props.row)"
+        >
           <q-chip
             :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
             :text-color="`${stores.classColorStatus(props.row.editStatus)}-7`"
@@ -368,7 +380,11 @@ function classStatus(status: string) {
               </div>
             </div>
 
-            <div class="row" v-else-if="tab === 'time'">
+            <div
+              class="row"
+              v-else-if="tab === 'time'"
+              @click="onClickOpenPopupRejrct(props.row)"
+            >
               <div>
                 <q-chip
                   :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
@@ -399,6 +415,30 @@ function classStatus(status: string) {
     </template>
   </q-table>
 
+  <q-dialog v-model="modalReject">
+    <q-card style="width: 35vw; max-width: 35vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold"
+          >หมายเหตุการไม่อนุมัติ</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          v-close-popup
+        />
+      </q-toolbar>
+      <q-form ref="myForm">
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="row col-12">{{ reasonRejrct }}</div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
   <Popup
     :fetchData="props.fetchData"
     :modal="modalPopup"