แสดง เหตุผลการขอลงเวลาพิเศษ ใน popup

src/modules/09_leave/components/04_SpecialTime/DialogApprove.vue

@@ -24,6 +24,7 @@ const props = defineProps({
   modal: { type: Boolean, default: "" },
   editCheck: { type: String, default: "" },
   date: { type: String, default: "" },
+  description: { type: String, default: "" },
   dateFix: { type: String, default: "" },
   id: { type: String, default: "" },
   checkInStatus: { type: String, default: "" },
@@ -215,6 +216,20 @@ watch(
               />
             </div>
           </div>
+          <div
+            class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
+          >
+            <p style="color: #06884d; font-size: 14px" class="q-mb-xs">
+              เหตุผลการขอลงเวลาพิเศษ
+            </p>
+            <q-input
+              dense
+              outlined
+              readonly
+              autogrow
+              :model-value="props.description ? props.description : '-'"
+            ></q-input>
+          </div>
           <div
             v-if="formData.checkInEdit"
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
@@ -299,9 +314,9 @@ watch(
             class="col-12 bg-white q-ma-md inputgreen"
             outlined
             stack-label
-            :rules="[(val:string) => !!val || 'กรุณาเหตุผล']"
+            :rules="[(val:string) => !!val || 'กรุณาเหตุผลการอนุมัติ']"
             v-model="formData.note"
-            label="เหตุผล"
+            label="เหตุผลการอนุมัติ"
             hide-bottom-space
             type="textarea"
           ></q-input>

src/modules/09_leave/views/04_SpecialTimeMain.vue

@@ -37,6 +37,7 @@ const yearToday = toDay.value.getFullYear();
 
 const month = ref<number>(monthToday + 1);
 const year = ref<number>(yearToday);
+const description = ref<string>('')
 
 /**ตัวแปรที่ใช้ */
 const modalUnapprove = ref<boolean>(false);
@@ -137,7 +138,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "description",
     align: "left",
-    label: "เหตุผล",
+    label: "เหตุผลการขอลงเวลาพิเศษ",
     sortable: true,
     field: "description",
     headerStyle: "font-size: 14px",
@@ -163,11 +164,13 @@ function openModal(
   check: string,
   date: string,
   dateFix: string,
-  personId: string
+  personId: string,
+  detail: string,
 ) {
   id.value = personId;
   modalApprove.value = true;
   dateDialog.value = date;
+  description.value= detail
   dateFixDialog.value = dateFix;
   editCheck.value = check;
   if (check === "PENDING") {
@@ -179,6 +182,7 @@ function openModal(
 function closeDialog() {
   modalUnapprove.value = false;
   modalApprove.value = false;
+  description.value = '';
   editCheck.value = "PENDING";
 }
 
@@ -443,7 +447,8 @@ onMounted(async () => {
                     'PENDING',
                     props.row.date,
                     props.row.dateFix,
-                    props.row.id
+                    props.row.id,
+                    props.row.description
                   )
                 "
                 >อนุมัติ</q-btn
@@ -517,6 +522,7 @@ onMounted(async () => {
     :date="dateDialog"
     :dateFix="dateFixDialog"
     :id="id"
+    :description="description"
     :editCheck="editCheck"
     :detailData="detailData"
     :fetch-data="fetchData"