แก้ บัญชีแสดงวันลา

src/modules/09_leave/views/06_ReportMain.vue

@@ -46,6 +46,7 @@ const dateMonth = ref<DataDateMonthObject>({
 });
 
 const dateWeek = ref<Date[]>(getCurrentWeek());
+const date = ref<Date>(new Date());
 
 const typeReport = ref<string>("");
 const optionReport = ref<DataOption[]>([]);
@@ -67,19 +68,25 @@ const optionReportMain = ref<DataOption[]>([
 
 const employeeClass = ref<string>("officer");
 const yearType = ref<string>("FULL");
+const leaveType = ref<string>("DAY");
 const employeeClassMain = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม. สามัญ" },
   { id: "employee", name: "ลูกจ้างประจำ กทม." },
 ]);
+const leaveTypeOptionMain = ref<DataOption[]>([
+  { id: "DAY", name: "รายวัน" },
+  { id: "WEEKLY", name: "รายสัปดาห์" },
+  { id: "MONTH", name: "รายเดือน" },
+]);
 const yearTypeOptionMain = ref<DataOption[]>([
   { id: "FULL", name: "รายปี" },
   { id: "MONTH", name: "รายเดือน" },
-  { id: "WEEKLY", name: "รายสัปดาห์" },
   { id: "FIRSTHAFT", name: "ครึ่งปีแรก" },
   { id: "SECONDHAFT", name: "ครึ่งปีหลัง" },
 ]);
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
+const leaveTypeOptionOption = ref<DataOption[]>(leaveTypeOptionMain.value);
 
 const detailReport = ref<any>();
 const isReport = ref<boolean>(false);
@@ -122,7 +129,11 @@ function onSelectedNode(data: any) {
  * และเรียกข้อมูลรายงาน
  */
 async function updateLeaveday() {
-  switch (yearType.value) {
+  const list =
+    typeReport.value == "3" || typeReport.value == "4"
+      ? leaveType.value
+      : yearType.value;
+  switch (list) {
     case "FULL":
       dateStart.value = new Date(year.value - 1, 9, 1);
       dateEnd.value = new Date(year.value, 8, 30);
@@ -157,6 +168,12 @@ async function updateLeaveday() {
       };
       break;
 
+    case "DAY":
+      dateStart.value = new Date(date.value);
+      dateEnd.value = new Date(date.value);
+
+      break;
+
     case "SECONDHAFT":
       dateStart.value = new Date(year.value, 3, 1);
       dateEnd.value = new Date(year.value, 8, 30);
@@ -196,6 +213,8 @@ async function fetchLeaveday(
         ? "MONTH"
         : year == "HAFT"
         ? "HAFT"
+        : year == "DAY"
+        ? "DAY"
         : "WEEKLY",
     startDate: dateToISO(startDate),
     endDate: dateToISO(endDate),
@@ -304,6 +323,7 @@ function clearData() {
   org.value = "";
   typeReport.value = "";
   yearType.value = "FULL";
+  leaveType.value = "DAY";
   pdfSrc.value = undefined;
   detailReport.value = undefined;
 
@@ -322,7 +342,9 @@ function onSearch() {
   updateLeaveday();
   fetchLeaveday(
     employeeClass.value,
-    yearType.value,
+    typeReport.value == "3" || typeReport.value == "4"
+      ? leaveType.value
+      : yearType.value,
     dateStart.value,
     dateEnd.value
   );
@@ -338,6 +360,13 @@ function getCurrentWeek() {
   return [firstDayOfWeek, lastDayOfWeek];
 }
 
+function updateValue(val: string) {
+  if (typeReport.value == "3" || typeReport.value == "4") {
+    leaveType.value = val;
+  } else {
+    yearType.value = val;
+  }
+}
 function formatWeekDisplay(week: Date[]) {
   if (week) {
     if (!week[0] || !week[1]) return "";
@@ -598,19 +627,33 @@ onMounted(() => {
                         <q-select
                           class="bg-white"
                           dense
-                          v-model="yearType"
+                          :model-value="
-                          :options="yearTypeOptionOption"
+                            typeReport == '3' || typeReport == '4'
+                              ? leaveType
+                              : yearType
+                          "
+                          :options="
+                            typeReport == '3' || typeReport == '4'
+                              ? leaveTypeOptionOption
+                              : yearTypeOptionOption
+                          "
                           emit-value
                           map-options
                           option-label="name"
                           option-value="id"
-                          @update:model-value="updateLeaveday"
+                          @update:model-value="(value:any)=>(updateValue(value),updateLeaveday)"
                         >
                         </q-select>
                       </div>
                       <div
                         class="col-12"
-                        v-if="yearType !== 'MONTH' && yearType !== 'WEEKLY'"
+                        v-if="
+                          leaveType !== 'DAY' &&
+                          leaveType !== 'MONTH' &&
+                          leaveType !== 'WEEKLY' &&
+                          yearType !== 'MONTH' &&
+                          yearType !== 'WEEKLY'
+                        "
                       >
                         <datepicker
                           v-model="year"
@@ -646,7 +689,13 @@ onMounted(() => {
                       </div>
                       <div
                         class="col-12"
-                        v-if="yearType !== 'MONTH' && yearType !== 'WEEKLY'"
+                        v-if="
+                          leaveType !== 'DAY' &&
+                          leaveType !== 'MONTH' &&
+                          leaveType !== 'WEEKLY' &&
+                          yearType !== 'MONTH' &&
+                          yearType !== 'WEEKLY'
+                        "
                       >
                         <datepicker
                           menu-class-name="modalfix"
@@ -686,7 +735,13 @@ onMounted(() => {
                       </div>
                       <div
                         class="col-12"
-                        v-if="yearType !== 'MONTH' && yearType !== 'WEEKLY'"
+                        v-if="
+                          leaveType !== 'DAY' &&
+                          leaveType !== 'MONTH' &&
+                          leaveType !== 'WEEKLY' &&
+                          yearType !== 'MONTH' &&
+                          yearType !== 'WEEKLY'
+                        "
                       >
                         <datepicker
                           menu-class-name="modalfix"
@@ -722,7 +777,10 @@ onMounted(() => {
                           </template>
                         </datepicker>
                       </div>
-                      <div class="col-12" v-if="yearType == 'MONTH'">
+                      <div
+                        class="col-12"
+                        v-if="leaveType == 'MONTH' && yearType == 'MONTH'"
+                      >
                         <datepicker
                           v-model="dateMonth"
                           :locale="'th'"
@@ -754,7 +812,10 @@ onMounted(() => {
                           </template>
                         </datepicker>
                       </div>
-                      <div class="col-12" v-if="yearType == 'WEEKLY'">
+                      <div
+                        class="col-12"
+                        v-if="leaveType == 'WEEKLY' && yearType == 'WEEKLY'"
+                      >
                         <datepicker
                           v-model="dateWeek"
                           :locale="'th'"
@@ -785,6 +846,39 @@ onMounted(() => {
                           </template>
                         </datepicker>
                       </div>
+                      <div class="col-12" v-if="leaveType == 'DAY'">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="date"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          week-start="0"
+                          @update:model-value="updateLeaveday"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              class="bg-white"
+                              dense
+                              :model-value="date ? date2Thai(date) : null"
+                              :label="`${'วันที่'}`"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  color="primary"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                      </div>
                     </div>
                   </div>
                 </q-card-section>