hrms-user/src/components/TableD.vue

<template>
  <q-table
    ref="table"
    flat
    bordered
    class="custom-header-table"
    v-bind="attrs"
    virtual-scroll
    :virtual-scroll-sticky-size-start="48"
    dense
    :pagination-label="paginationLabel"
    v-model:pagination="pagination"
    @request="onRequest"
    :grid="!$q.screen.gt.xs"
    :rows-per-page-options="[10, 25, 50, 100]"
    :loading="loading"
  >
    <template v-slot:pagination="scope">
      ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
      <q-pagination
        v-model="pagination.page"
        @update:model-value="handlePageChange"
        active-color="primary"
        color="dark"
        :max="scope.pagesNumber"
        :max-pages="5"
        size="sm"
        boundary-links
        direction-links
      ></q-pagination>
    </template>

    <template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
      <slot :name="slot" v-bind="scope || {}" />
    </template>

    <template v-slot:loading>
      <q-inner-loading showing class="q-mt-lg">
        <q-spinner-dots color="primary" size="40px" />
      </q-inner-loading>
    </template>

    <template v-slot:no-data>
      <div
        v-if="!loading && attrs.rows.length === 0"
        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
      >
        <span> ไม่พบข้อมูล </span>
      </div>
    </template>

    <!-- <template #item="props">
      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <q-card bordered flat>
          <q-list>
            <q-item
              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
              :key="col.name"
            >
              <q-item-section>
                <q-item-label caption>{{ col.label }}</q-item-label>

                <q-item-label v-if="col.name === 'no'">
                  {{ props.rowIndex + 1 }}
                </q-item-label>

                <q-item-label v-else>{{ col.value }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </div>
    </template> -->
  </q-table>
</template>
<script setup lang="ts">
import { ref, useAttrs, useSlots, computed, watch } from "vue";
const attrs = ref<any>(useAttrs());
const slots = ref<any>(useSlots());

const emit = defineEmits(["update:pagination", "request"]);

const props = defineProps({
  paging: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Object,
    default: () => ({
      sortBy: "desc",
      descending: false,
      page: 1,
      rowsPerPage: 10,
      // rowsNumber: 0,
    }),
  },
});

// Internal pagination state ที่จะจัดการเอง
const internalPagination = ref({
  ...props.pagination,
});

// ใช้ computed เพื่อ sync กับ props และ internal state
const pagination = computed({
  get: () => internalPagination.value,
  set: (value) => {
    internalPagination.value = { ...value };
    emit("update:pagination", value);
  },
});

const paginationLabel = (start: string, end: string, total: string) => {
  if (props.paging == true)
    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
  else return start + "-" + end + " ใน " + total;
};

function onRequest(requestProp: any) {
  if (!requestProp || !requestProp.pagination) {
    return;
  }

  const { pagination: newPagination } = requestProp;

  // ถ้าเป็นการเปลี่ยนหน้า (page หรือ rowsPerPage เปลี่ยน) ให้ยิง request
  const isPageChange =
    internalPagination.value.page !== newPagination.page ||
    internalPagination.value.rowsPerPage !== newPagination.rowsPerPage;

  internalPagination.value = {
    ...internalPagination.value,
    ...newPagination,
  };

  // if (isPageChange) {
  emit("request", requestProp);
  // }
}

function handlePageChange(newPage: number) {
  if (!newPage || newPage < 1) {
    return;
  }

  internalPagination.value = {
    ...internalPagination.value,
    page: newPage,
  };

  // สร้าง request object เหมือนกับ onRequest
  const requestProp = {
    pagination: internalPagination.value,
    filter: null,
    getCellValue: () => {},
  };

  emit("request", requestProp);
}

// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
watch(
  () => props.pagination,
  (newPagination) => {
    internalPagination.value = { ...newPagination };
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss">
.icon-color {
  color: #4154b3;
}
.custom-header-table {
  height: auto;
  .q-table tr:nth-child(odd) td {
    background: white;
  }
  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }
  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }
  .q-table thead tr:first-child th {
    top: 0;
  }
  .q-table__middle {
    margin-bottom: 0 !important;
    min-height: 0px !important;
  }

  // Loading styles
  .loading-overlay {
    width: 100%;
  }

  .loading-row {
    background: white;
  }

  .loading-cell {
    text-align: center;
    padding: 60px 20px;
    border: none;
  }

  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .loading-text {
    color: #666;
    font-size: 14px;
    font-weight: 500;
  }
}
</style>