Merge pull request #1465 from Frappet/SortLeave

SortLeave
2025-10-08 16:45:43 +07:00 · 2025-10-08 16:45:43 +07:00 · 74de61a809
commit 74de61a809
parent 433de546a2 ba09c07dab
4 changed files with 168 additions and 222 deletions
--- a/src/components/TablePagination.vue
+++ b/src/components/TablePagination.vue
@ -11,7 +11,6 @@
    :pagination-label="paginationLabel"
    v-model:pagination="pagination"
    @request="onRequest"
-    :grid="!$q.screen.gt.xs"
    :rows-per-page-options="[10, 25, 50, 100]"
    :loading="loading"
  >
--- a/src/composables/usePagination.ts
+++ b/src/composables/usePagination.ts
@ -34,7 +34,11 @@ export function usePagination(
    if (!newPagination?.page || !newPagination?.rowsPerPage) return;

    pagination.value = { ...newPagination };
-    if (fetchFunction) {
+    if (
+      fetchFunction &&
+      pagination.value.rowsNumber &&
+      pagination.value.rowsNumber > 0
+    ) {
      await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
    }
  }
--- a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
+++ b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
@ -5,29 +5,32 @@ import { useQuasar } from "quasar";

 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";

 import type { QTableColumn } from "quasar";
-import type {
-  DataOption,
-  DataPagination,
-} from "@/modules/09_leave/interface/index/Main";
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 import type {
  DataLeaveType,
  DataLeaveBeginning,
 } from "@/modules/09_leave/interface/response/leaveHistory";

 import DialogHeader from "@/components/DialogHeader.vue";
-import { max } from "moment";

 /** useStore*/
 const $q = useQuasar();
+const route = useRoute();
 const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
-const { findYear } = useLeaveHistoryDataStore();
 const { dialogConfirm, showLoader, success, messageError, hideLoader } =
  useCounterMixin();
+
+const { pagination, params, onRequest } = usePagination("", () =>
+  onSearchData(false)
+);
+
 const modal = defineModel<boolean>("modal", { required: true });
 const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
 const rowData = defineModel<DataLeaveBeginning>("rowData", {
@ -42,18 +45,13 @@ const formFilter = reactive({
  citizenId: "",
  type: "citizenId",
  keyword: "",
-  page: 1,
-  pageSize: 10,
 });
 const searchTypeOption = ref<DataOption[]>([
  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstName", name: "ชื่อ" },
-  { id: "lastName", name: "นามสกุล" },
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
 ]);
 const rows = ref<DataLeaveBeginning[]>([]);
 const selected = ref<DataLeaveBeginning[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableColumn[]>([
  {
    name: "citizenId",
@ -65,13 +63,16 @@ const columns = ref<QTableColumn[]>([
    style: "font-size: 14px",
  },
  {
-    name: "fullName",
+    name: "firstName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix || ""}${row.firstName || ""} ${row.lastName || ""}`;
+    },
  },
 ]);

@ -96,9 +97,7 @@ async function onSubmit() {
      : `${config.API.leaveBeginning}/${rowId.value}`;
    const method = !isStatusEdit.value ? "post" : "put";
    await http[method](pathAPI, {
-      profileId: !isStatusEdit.value
-        ? selected.value[0].profileId
-        : profileId.value,
+      profileId: !isStatusEdit.value ? selected.value[0].id : profileId.value,
      leaveTypeId: formData.leaveTypeId,
      leaveYear: formData.leaveYear,
      leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0,
@ -123,25 +122,24 @@ async function onSubmit() {

 /** ฟังก์ชันเรียกรายชื่อคน*/
 async function fetchDataPerson() {
-  await http
-    .post(config.API.leaveSearch(), {
-      citizenId:
-        formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //เลขประจำตัวประชาชน
-      firstname:
-        formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง
-      lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล
-      page: formFilter.page, //หน้า
-      pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
-    })
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      total.value = data.total;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
+  try {
+    const res = await http.post(
+      config.API.orgSearchPersonal(),
+      {
+        fieldName: formFilter.type,
+        keyword: formFilter.keyword.trim(),
+        system: (route.meta?.Key as string) || undefined,
+      },
+      {
+        params: params.value,
+      }
+    );
+    const result = res.data.result;
+    pagination.value.rowsNumber = result.total;
+    rows.value = result.data;
+  } catch (e) {
+    messageError($q, e);
+  }
 }

 /**
@ -168,7 +166,7 @@ async function onSearchData(newSearch: boolean) {
  try {
    showLoader();
    if (newSearch) {
-      formFilter.page = 1;
+      pagination.value.page = 1;
    }
    await fetchDataPerson();
  } finally {
@ -176,28 +174,25 @@ async function onSearchData(newSearch: boolean) {
  }
 }

-/**
- * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: DataPagination) {
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชันปิด Dialog*/
 function onClose() {
  modal.value = false;
  formFilter.citizenId = "";
  formFilter.type = "citizenId";
  formFilter.keyword = "";
-  formFilter.page = 1;
-  formFilter.pageSize = 10;
  formData.leaveTypeId = "";
  formData.leaveYear = calculateFiscalYear(new Date());
  formData.leaveDays = "";
  formData.leaveDaysUsed = "";
  rows.value = [];
  selected.value = [];
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+    sortBy: "",
+    descending: false,
+  };
 }

 /**
@ -243,14 +238,6 @@ function classInput(val: boolean) {
  };
 }

-/** Hook*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    modal.value && onSearchData(true);
-  }
-);
-
 watch(modal, async (val) => {
  if (val) {
    try {
@ -259,8 +246,6 @@ watch(modal, async (val) => {
        filterLeaveTypeData(),
        isStatusEdit.value && defineDataLeaveBeginning(rowData.value),
      ]);
-    } catch (error) {
-      console.log(error);
    } finally {
      hideLoader();
    }
@ -278,10 +263,14 @@ watch(modal, async (val) => {
        />
        <q-separator />

-        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
-          <div class="row col-12 q-gutter-sm">
+        <q-card-section
+          :horizontal="$q.screen.gt.md"
+          class="q-pa-none"
+          style="height: 50vh"
+        >
+          <div class="row col-12 no-wrap full-height">
            <!-- รายชื่อ -->
-            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
+            <div class="col-8 overflow-auto q-pa-md" v-if="!isStatusEdit">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-3">
                  <q-select
@ -321,11 +310,11 @@ watch(modal, async (val) => {
              </div>

              <div class="col-12 q-pt-sm">
-                <d-table
+                <p-table
                  ref="table"
                  :columns="columns"
                  :rows="rows"
-                  row-key="profileId"
+                  row-key="id"
                  flat
                  bordered
                  :paging="true"
@ -333,7 +322,8 @@ watch(modal, async (val) => {
                  :rows-per-page-options="[10, 25, 50, 100]"
                  selection="single"
                  v-model:selected="selected"
-                  @update:pagination="updatePagination"
+                  v-model:pagination="pagination"
+                  @request="onRequest"
                >
                  <template v-slot:header="props">
                    <q-tr :props="props">
@ -369,29 +359,14 @@ watch(modal, async (val) => {
                      </q-td>
                    </q-tr>
                  </template>
-
-                  <template v-slot:pagination="scope">
-                    ทั้งหมด {{ total.toLocaleString() }} รายการ
-                    <q-pagination
-                      v-model="formFilter.page"
-                      active-color="primary"
-                      color="dark"
-                      :max="Number(maxPage)"
-                      size="sm"
-                      boundary-links
-                      direction-links
-                      :max-pages="5"
-                      @update:model-value="onSearchData(false)"
-                    ></q-pagination>
-                  </template>
-                </d-table>
+                </p-table>
              </div>
            </div>

            <q-separator vertical />

            <!-- input -->
-            <div class="q-pa-md col">
+            <div class="col overflow-hidden q-pa-md">
              <div class="row q-col-gutter-sm">
                <div class="col-12">
                  <datepicker
--- a/src/modules/09_leave/views/07_LeaveHistoryMain.vue
+++ b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, watch } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { useQuasar } from "quasar";

 import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";

 import type { QTableColumn } from "quasar";
-import type { DataPagination } from "@/modules/09_leave/interface/index/Main";
 import type {
  DataLeaveType,
  DataLeaveBeginning,
@ -22,22 +21,21 @@ import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm

 const $q = useQuasar();
 const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
-const { findYear } = useLeaveHistoryDataStore();
 const { showLoader, hideLoader, messageError, dialogRemove, success } =
  useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  () => onSearchData(false)
+);

 const formFilter = reactive({
  year: calculateFiscalYear(new Date()),
  type: "00000000-0000-0000-0000-000000000000",
-  page: 1,
-  pageSize: 10,
  keyword: "",
 });
 const leaveTypeOptions = ref<DataLeaveType[]>([]);

 const rows = ref<DataLeaveBeginning[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableColumn[]>([
  {
    name: "fullName",
@ -122,13 +120,13 @@ async function fetchDataLeaveBeginning() {
  await http
    .post(config.API.leaveBeginning + `/list`, {
      ...formFilter,
+      ...params.value,
      keyword: formFilter.keyword.trim(),
    })
    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      total.value = data.total;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -143,7 +141,7 @@ async function onSearchData(newSearch: boolean = true) {
  try {
    showLoader();
    if (newSearch) {
-      formFilter.page = 1;
+      pagination.value.page = 1;
    }
    await fetchDataLeaveBeginning();
  } finally {
@ -188,11 +186,7 @@ function onDeleteLeaveBeginning(id: string) {
    await http
      .delete(config.API.leaveBeginning + `/${id}`)
      .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
        await fetchDataLeaveBeginning();
        success($q, "ลบข้อมูลสำเร็จ");
      })
@ -205,29 +199,11 @@ function onDeleteLeaveBeginning(id: string) {
  });
 }

-/**
- * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: DataPagination) {
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** Hook*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    onSearchData(true);
-  }
-);
-
 onMounted(async () => {
  try {
    showLoader();
    await fetchLeaveType();
    await fetchDataLeaveBeginning();
-  } catch (error) {
-    console.log(error);
  } finally {
    hideLoader();
  }
@ -242,67 +218,69 @@ onMounted(async () => {
  <q-card flat bordered class="q-pa-md">
    <div class="row q-col-gutter-sm">
      <div class="col-12">
-        <div class="row q-col-gutter-y-sm">
-          <div class="row q-col-gutter-sm items-center">
-            <datepicker
-              v-model="formFilter.year"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              style="width: 150px"
-              @update:model-value="onSearchData()"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  outlined
-                  :model-value="Number(formFilter.year) + 543"
-                  :label="`${'ปีงบประมาณ'}`"
-                  bg-color="white"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-
-            <q-select
-              emit-value
-              map-options
-              outlined
-              dense
-              option-value="id"
-              option-label="name"
-              label="ประเภทการลา"
-              use-input
-              v-model="formFilter.type"
-              hide-selected
-              fill-input
-              :options="leaveTypeOptions"
-              @update:model-value="onSearchData()"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterOptionFn(inputValue,doneFn)"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-            <div>
+        <div class="row q-col-gutter-sm">
+          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <datepicker
+                v-model="formFilter.year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="onSearchData()"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="Number(formFilter.year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                    bg-color="white"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-7 col-md-4">
+              <q-select
+                emit-value
+                map-options
+                outlined
+                dense
+                option-value="id"
+                option-label="name"
+                label="ประเภทการลา"
+                use-input
+                v-model="formFilter.type"
+                hide-selected
+                fill-input
+                :options="leaveTypeOptions"
+                @update:model-value="onSearchData()"
+                @filter="(inputValue:string,
+              doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-1 col-md-4 items-center">
              <q-btn
                v-if="checkPermission($route)?.attrIsCreate"
                dense
@ -318,39 +296,42 @@ onMounted(async () => {
          </div>

          <q-space />
-          <div class="row q-col-gutter-sm">
-            <q-input
-              standout
-              dense
-              v-model="formFilter.keyword"
-              outlined
-              placeholder="ค้นหา"
-              @keydown.enter.prevent="onSearchData()"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="visibleColumns"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              style="min-width: 140px"
-            />
+          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-7 col-md-8">
+              <q-input
+                standout
+                dense
+                v-model="formFilter.keyword"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.prevent="onSearchData()"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-12 col-sm-5 col-md-4">
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
-        <d-table
+        <p-table
          ref="table"
          :columns="columns"
          :rows="rows"
@ -360,7 +341,8 @@ onMounted(async () => {
          dense
          class="custom-header-table"
          :visible-columns="visibleColumns"
-          @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
@ -409,21 +391,7 @@ onMounted(async () => {
              </q-td>
            </q-tr>
          </template>
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <q-pagination
-              v-model="formFilter.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPage)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="onSearchData(false)"
-            ></q-pagination>
-          </template>
-        </d-table>
+        </p-table>
      </div>
    </div>
  </q-card>