เพิ่ม ui ลงเวลากรณีพิเศษ

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

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { onMounted, ref, useAttrs } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import Table from "@/modules/09_leave/components/4_specialTime/Table.vue";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+
+import { useRouter } from "vue-router";
+const dataSpecialTime = useSpecialTimeStore();
+const { fecthList } = dataSpecialTime;
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const router = useRouter();
+const { hideLoader, monthYear2Thai } = mixin;
+const filter = ref<string>(""); //search data table
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const attrs = ref<any>(useAttrs());
+const modalUnapprove = ref(false);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const dialogTitle = ref<string>("");
+const dialogDesc = ref<string>("");
+const name = ref("");
+const unapprove = async (fullname: string) => {
+  dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
+  name.value = fullname;
+  modalUnapprove.value = true;
+};
+const closeReason = () => {
+  modalUnapprove.value = false;
+};
+const clickSave = () => {
+  modalUnapprove.value = false;
+};
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+onMounted(async () => {
+  fecthList([
+    {
+      fullname: "นางสาวณัฐกา ชมสิน",
+      date: "2023-10-30",
+      dateFix: "2023-10-30",
+      type: "Checkin",
+      reason: "ลืม",
+      unapprove: "1",
+      approve: "0",
+    },
+    {
+      fullname: "นางสาวรัชภรณ์ ภักดี",
+      date: "2023-10-30",
+      dateFix: "2023-10-30",
+      type: "Checkin",
+      reason: "ลืม",
+      unapprove: "1",
+      approve: "0",
+    },
+    {
+      fullname: "นางสาวภาพรรณ ลออ",
+      date: "2023-10-30",
+      dateFix: "2023-10-30",
+      type: "Checkin",
+      reason: "ลืม",
+      unapprove: "1",
+      approve: "0",
+    },
+  ]);
+  await hideLoader();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการลงเวลากรณีพิเศษ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <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
+                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 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"
+    label="เหตุผล"
+    :savaForm="clickSave"
+  />
+</template>
+
+<style></style>