เพิ่ม ui pop up อนุมัติคำขอ

src/modules/09_leave/views/SpecialTimeMain.vue

@@ -5,6 +5,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
 
 import { useRouter } from "vue-router";
 const dataSpecialTime = useSpecialTimeStore();
@@ -14,6 +15,9 @@ const mixin = useCounterMixin();
 const router = useRouter();
 const { hideLoader, monthYear2Thai } = mixin;
 const modalUnapprove = ref(false);
+const modalApprove = ref(false);
+const detailData = ref<any>();
+const editCheck = ref<string>("");
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
@@ -22,14 +26,28 @@ const pagination = ref({
 });
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
-const name = ref("");
+const name = ref<string>("");
+const dateDialog = ref<string>("");
+const dateFixDialog = ref<string>("");
 const unapprove = async (fullname: string) => {
   dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
   name.value = fullname;
   modalUnapprove.value = true;
 };
-const closeReason = () => {
+function openModal(data: any, check: string, date: string, dateFix: string) {
+  modalApprove.value = true;
+  dateDialog.value = date;
+  dateFixDialog.value = dateFix;
+  editCheck.value = check;
+  if (check === "PENDING") {
+    detailData.value = data;
+  }
+  console.log(data);
+}
+const closeDialog = () => {
   modalUnapprove.value = false;
+  modalApprove.value = false;
+  editCheck.value = "PENDING";
 };
 const clickSave = () => {
   modalUnapprove.value = false;
@@ -221,77 +239,52 @@ const monthYearThai = (val: any) => {
                 class="q-px-md q-ml-sm"
                 dense
                 unelevated
+                @click="
+                  openModal(
+                    props.row,
+                    'PENDING',
+                    props.row.date,
+                    props.row.dateFix
+                  )
+                "
                 >อนุมัติ</q-btn
               >
-
-              <q-badge v-if="props.row.status == 'APPROVE'" rounded outline color="green" label="อนุมัติ" />
-              <q-badge v-if="props.row.status == 'REJECT'" rounded outline color="red" label="ไม่อนุมัติ" />
+              <q-badge
+                v-if="props.row.status == 'APPROVE'"
+                rounded
+                outline
+                color="green"
+                label="อนุมัติ"
+              />
+              <q-badge
+                v-if="props.row.status == 'REJECT'"
+                rounded
+                outline
+                color="red"
+                label="ไม่อนุมัติ"
+              />
             </q-td>
           </q-tr>
         </template>
       </d-table>
-
-      <!-- <Table
-        style="max-height: 80vh"
-        :rows="dataSpecialTime.rows"
-        :columns="dataSpecialTime.columns"
-        :filter="filter"
-        :visible-columns="dataSpecialTime.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="dataSpecialTime.visibleColumns"
-        :pagination="initialPagination"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-              <q-th auto-width />
-              <q-th auto-width />
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                v-if="props.row.status == 'PENDING'"
-                color="orange"
-                class="q-px-md"
-                dense
-                unelevated
-                @click="unapprove(props.row.fullname)"
-                >ไม่อนุมัติ</q-btn
-              >
-              <span>{{ props.row.unapprove }}</span>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                v-if="props.row.status == 'PENDING'"
-                color="primary"
-                class="q-px-md"
-                dense
-                unelevated
-                >อนุมัติ</q-btn
-              >
-              <span>{{ props.row.approve }}</span>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table> -->
     </div>
   </q-card>
   <DialogReason
     :modal="modalUnapprove"
     :title="dialogTitle"
     :desc="dialogDesc"
-    :click-close="closeReason"
+    :click-close="closeDialog"
     label="เหตุผล"
     :savaForm="clickSave"
   />
+  <DialogApprove
+    :modal="modalApprove"
+    :closeDialog="closeDialog"
+    :date="dateDialog"
+    :dateFix="dateFixDialog"
+    :editCheck="editCheck"
+    :detailData="detailData"
+  />
 </template>
 
 <style></style>