ฟิลเตอร์ ช่วงเวลา

src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue

@@ -22,8 +22,9 @@ const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, success } = mixin;
+const { messageError, showLoader, hideLoader, success, date2Thai ,convertDateToAPI} = mixin;
 
+const date = ref<any>(null);
 const employeeClass = ref<string>("");
 const employeeClassOption = ref<DataOption[]>([
   { id: "", name: "ทั้งหมด" },
@@ -189,6 +190,11 @@ function openModalOrder() {
 /** ดึงข้อมูลหน้าหลัก */
 async function getList() {
   showLoader();
+  const params: Record<string, any> = {};
+  if (date.value && date.value.length === 2) {
+    params.startDate = convertDateToAPI(date.value[0]);
+    params.endDate = convertDateToAPI(date.value[1]);
+  }
   await http
     .get(
       config.API.suspendMain(
@@ -196,7 +202,8 @@ async function getList() {
         pagination.value.rowsPerPage,
         filterKeyword.value.trim(),
         employeeClass.value
-      )
+      ),
+      { params }
     )
     .then(async (res) => {
       const data = await res.data.result.data;
@@ -274,10 +281,56 @@ onMounted(async () => {
               option-value="id"
               option-label="name"
               label="ประเภทตำแหน่ง"
-              style="min-width: 250px"
+              style="min-width: 200px"
               @update:model-value="getList"
             />
           </div>
+          <div>
+            <datepicker
+              v-model="date"
+              :locale="'th'"
+              autoApply
+              range
+              :enableTimePicker="false"
+              @update:model-value="getList()"
+              style="min-width: 280px"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  class="bg-white"
+                  dense
+                  outlined
+                  :label="`${'ช่วงวันที่'}`"
+                  :model-value="
+                    date
+                      ? `${date2Thai(date[0])} - ${date2Thai(date[1])}`
+                      : 'ทั้งหมด'
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      size="18px"
+                      name="event"
+                      class="cursor-pointer"
+                      color="primary"
+                    ></q-icon>
+                  </template>
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="date !== null"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click.prevent.stop="(date = null), getList()"
+                    />
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
           <div>
             <q-btn
               v-if="checkPermission($route)?.attrIsUpdate"