Merge branch 'develop' into devTee

src/modules/09_leave/components/1_Work/DialogEdit.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+
+import HeaderDialog from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success } = mixin;
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  detail: {
+    type: Object,
+    require: true,
+  },
+  close: {
+    type: Function,
+    require: true,
+  },
+});
+
+const morningStatus = ref<string>("");
+const afternoonStatus = ref<string>("");
+const reason = ref<string>("");
+
+const morningStatusRef = ref<any>();
+const afternoonStatusRef = ref<any>();
+
+const optionsMain = ref<DataOption[]>([
+  { id: "NORMAL", name: "ปกติ" },
+  { id: "LATE", name: "สาย" },
+  { id: "ABSENT", name: "ขาดราชการ" },
+]);
+const options = ref<DataOption[]>(optionsMain.value);
+
+async function onClickSave() {
+  morningStatusRef.value?.validate();
+  afternoonStatusRef.value?.validate();
+  if (!morningStatusRef.value.hasError && !afternoonStatusRef.value.hasError) {
+    const body = {
+      morningStatus: morningStatus.value,
+      afternoonStatus: afternoonStatus.value,
+      reason: reason.value,
+    };
+    dialogConfirm($q, async () => {
+      console.log(body);
+
+      success($q, "บันทึกข้อมูสำเร็จ");
+      props.close?.();
+    });
+  }
+}
+
+function filterFnOptions(val: any, update: Function) {
+  update(() => {
+    options.value = optionsMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    props.modal &&
+      ((morningStatus.value = ""),
+      (afternoonStatus.value = ""),
+      (reason.value = ""));
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card class="column" style="width: 300px">
+      <HeaderDialog :tittle="'แก้ไขสถานะการเข้า-ออกงาน'" :close="props.close" />
+
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <q-card flat bordered class="col-12 q-mt-sm">
+          <div class="q-pa-sm text-green">
+            สถานะช่วงเช้า
+            <q-select
+              ref="morningStatusRef"
+              class="q-pa-sm"
+              dense
+              outlined
+              v-model="morningStatus"
+              :options="options"
+              label="สถานะ"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+              hide-bottom-space
+              use-input
+              @filter="(inputValue: any,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template></q-select
+            >
+          </div>
+        </q-card>
+        <q-card flat bordered class="col-12 q-mt-sm">
+          <div class="q-pa-sm text-green">
+            สถานะช่วงบ่าย
+            <q-select
+              ref="afternoonStatusRef"
+              class="q-pa-sm"
+              dense
+              outlined
+              v-model="afternoonStatus"
+              :options="options"
+              label="สถานะ"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+              hide-bottom-space
+              use-input
+              @filter="(inputValue: any,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template></q-select
+            >
+          </div>
+        </q-card>
+
+        <q-card flat class="col-12 q-mt-sm">
+          <q-input
+            outlined
+            dense
+            v-model="reason"
+            type="textarea"
+            label="เหตุผล"
+          />
+        </q-card>
+      </q-card-section>
+
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn dense color="secondary" label="บันทึก" @click="onClickSave" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/1_Work/TableList.vue

@@ -6,6 +6,7 @@ import type { QTableProps } from "quasar";
 
 /** importComponents */
 import DialogDetail from "@/modules/09_leave/components/1_Work/DialogDetail.vue";
+import DialogEdit from "@/modules/09_leave/components/1_Work/DialogEdit.vue";
 
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
@@ -45,6 +46,7 @@ const emit = defineEmits(["update:pagination"]);
 /** ข้อมูล popup */
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
+const modalEdit = ref<boolean>(false);
 
 /** pagination */
 const currentPage = ref<number>(1);
@@ -65,6 +67,7 @@ function updateProp(newPagination: any, page: number) {
 }
 
 const typeTab = ref<string>("");
+
 /**
  * Function openPopup และแสดงรายละเอียด
  * @param data ข้อมูลรายละเอียด
@@ -75,6 +78,11 @@ function clickDetail(data: any) {
   dataDetail.value = data;
 }
 
+function onClickEdit(data: any) {
+  modalEdit.value = !modalEdit.value;
+  dataDetail.value = modalEdit.value ? data : [];
+}
+
 /** Function ปิด popup */
 function closeDetail() {
   modal.value = false;
@@ -93,6 +101,10 @@ function updateRowsPerPagen(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
   currentPage.value = 1;
 }
+
+onMounted(() => {
+  typeTab.value = props.tab as string;
+});
 </script>
 
 <template>
@@ -115,6 +127,7 @@ function updateRowsPerPagen(newPagination: any) {
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
+        <q-th auto-width v-if="typeTab === 'time-record'"></q-th>
       </q-tr>
     </template>
     <template v-slot:body="props">
@@ -156,6 +169,18 @@ function updateRowsPerPagen(newPagination: any) {
             {{ col.value }}
           </div>
         </q-td>
+        <q-td v-if="typeTab === 'time-record'">
+          <q-btn
+            flat
+            dense
+            round
+            color="primary"
+            icon="edit"
+            @click.prevent="onClickEdit(props.row)"
+          >
+            <q-tooltip>แก้ไข</q-tooltip>
+          </q-btn>
+        </q-td>
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
@@ -177,6 +202,7 @@ function updateRowsPerPagen(newPagination: any) {
     :typeTab="typeTab"
     :close="closeDetail"
   />
-</template>
 
+  <DialogEdit :modal="modalEdit" :detail="dataDetail" :close="onClickEdit" />
+</template>
 <style scoped></style>

src/modules/09_leave/components/3_Report/DetailReport.vue

@@ -46,8 +46,8 @@ const dateMonth = ref<DataDateMonthObject>({
   year: new Date().getFullYear(),
 });
 const year = ref<number>(new Date().getFullYear());
-const dateStart = ref<Date>(new Date());
-const dateEnd = ref<Date>(new Date());
+const dateStart = ref<Date>(new Date(year.value, 9, 1));
+const dateEnd = ref<Date>(new Date(year.value, 8, 30));
 const employeeClass = ref<string>("employee");
 const yearType = ref<string>("FULL");
 const filterType = ref<string>("daily");
@@ -68,7 +68,8 @@ const employeeClassMain = ref<DataOption[]>([
 ]);
 const yearTypeOptionMain = ref<DataOption[]>([
   { id: "FULL", name: "รายปี" },
-  { id: "HAFT", name: "ครึ่งปี" },
+  { id: "FIRSTHAFT", name: "ครึ่งปีแรก" },
+  { id: "SECONDHAFT", name: "ครึ่งปีหลัง" },
 ]);
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
@@ -145,10 +146,19 @@ async function fetchReportTimeRecords(body: any) {
     });
 }
 
-async function fetchLeaveday(type: string, year: string) {
+async function fetchLeaveday(
+  type: string,
+  year: string,
+  startDate: Date,
+  endDate: Date
+) {
   showLoader();
+
   const body = {
     type: year,
+    year: 2024,
+    startDate: dateToISO(startDate),
+    endDate: dateToISO(endDate),
   };
 
   await http
@@ -188,7 +198,6 @@ async function updateMonth() {
 
   // วันสิ้นสุดของเดือนถัดไป
   const lastDay = new Date(dateMonth.value.year, mount, 0);
-  console.log(firstDay, lastDay);
 
   const body = {
     startDate: dateToISO(firstDay),
@@ -263,7 +272,23 @@ async function genReportXLSX(data: any) {
 }
 
 async function updateLeaveday() {
-  fetchLeaveday(employeeClass.value, yearType.value);
+  if (yearType.value === "FULL") {
+    dateStart.value = new Date(year.value, 9, 1);
+    dateEnd.value = new Date(year.value, 8, 30);
+  } else if (yearType.value === "FIRSTHAFT") {
+    dateStart.value = new Date(year.value, 9, 1);
+    dateEnd.value = new Date(year.value, 2, 31);
+  } else if (yearType.value === "SECONDHAFT") {
+    dateStart.value = new Date(year.value, 3, 1);
+    dateEnd.value = new Date(year.value, 8, 30);
+  }
+
+  fetchLeaveday(
+    employeeClass.value,
+    yearType.value,
+    dateStart.value,
+    dateEnd.value
+  );
 }
 
 async function downloadReport(data: any, type: string) {
@@ -281,9 +306,15 @@ onMounted(() => {
     startDate: dateToISO(date.value),
     endDate: dateToISO(date.value),
   };
+
   typeReport === "time-records"
     ? fetchReportTimeRecords(body)
-    : fetchLeaveday(employeeClass.value, yearType.value);
+    : fetchLeaveday(
+        employeeClass.value,
+        yearType.value,
+        dateStart.value,
+        dateEnd.value
+      );
 });
 </script>
 <template>
@@ -516,19 +547,19 @@ onMounted(() => {
         </div>
       </q-toolbar>
 
-      <!-- <q-toolbar
+      <q-toolbar
         v-if="typeReport === 'leaveday'"
         class="q-pa-sm bg-grey-2"
         style="border-radius: 5px"
       >
         <div class="q-pr-xs">
           <datepicker
-            menu-class-name="modalfix"
-            v-model="dateStart"
+            v-model="year"
             :locale="'th'"
             autoApply
+            year-picker
             :enableTimePicker="false"
-            week-start="0"
+            @update:model-value="updateLeaveday"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -537,29 +568,30 @@ onMounted(() => {
             <template #trigger>
               <q-input
                 class="bg-white"
-                outlined
                 dense
                 lazy-rules
-                borderless
-                :model-value="dateStart ? date2Thai(dateStart) : null"
-                :label="`${'ตั้งเเต่วันที่'}`"
+                outlined
+                :model-value="Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
               >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
             </template>
           </datepicker>
-        </div>
-        <div class="q-pr-xs">
-          <datepicker
+          <!-- <datepicker
             menu-class-name="modalfix"
-            v-model="dateEnd"
+            v-model="year"
             :locale="'th'"
             autoApply
             :enableTimePicker="false"
-            week-start="0"
+            year-picker
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -581,9 +613,75 @@ onMounted(() => {
                 </template>
               </q-input>
             </template>
+          </datepicker> -->
+        </div>
+        <div class="q-pr-xs">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateStart"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            readonly
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :model-value="dateStart ? date2Thai(dateStart) : null"
+                :label="`${'ตั้งเเต่วันที่'}`"
+                readonly
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
           </datepicker>
         </div>
-      </q-toolbar> -->
+        <div class="q-pr-xs">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateEnd"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            readonly
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                :model-value="dateEnd ? date2Thai(dateEnd) : null"
+                :label="`${'ถึงวันที่'}`"
+                readonly
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="primary">
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </q-toolbar>
       <q-splitter
         v-model="splitterModel"
         horizontal