hrms-mgt/src/components/TableHistory.vue

<template>
  <q-dialog :model-value="modal" persistent>
    <q-card style="min-width: 70vw">
      <q-form ref="myForm">
        <div class="row items-center q-pa-sm">
          <div class="row">
            <div class="text-bold">{{ tittle }}</div>
          </div>
          <q-space />
          <q-btn
            icon="close"
            unelevated
            round
            dense
            style="color: #ff8080; background-color: #ffdede"
            size="12px"
            @click="close"
          />
        </div>
        <q-separator />
        <div class="q-pa-sm">
          <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
          <div class="col-12 row q-pb-sm">
            <!-- <q-select
              hide-bottom-space
              @update:model-value="updateHistory"
              outlined
              dense
              lazy-rules
              borderless
              :model-value="history"
              :label="`${'วันที่'}`"
              emit-value
              map-options
              option-label="publishedDate"
              :options="optionsHistory"
              option-value="id"
            /> -->
            <q-space />
            <div class="items-center" style="display: flex">
              <!-- ค้นหาข้อความใน table -->
              <q-input
                standout
                dense
                :model-value="inputfilter"
                ref="filterRef"
                @update:model-value="updateInput"
                outlined
                debounce="300"
                placeholder="ค้นหา"
                style="max-width: 200px"
                class="q-ml-sm"
              >
                <template v-slot:append>
                  <q-icon v-if="inputfilter == ''" name="search" />
                  <q-icon
                    v-if="inputfilter !== ''"
                    name="clear"
                    class="cursor-pointer"
                    @click="resetFilter"
                  />
                </template>
              </q-input>
              <!-- แสดงคอลัมน์ใน table -->
              <q-select
                :model-value="inputvisible"
                @update:model-value="updateVisible"
                :display-value="$q.lang.table.columns"
                multiple
                outlined
                dense
                :options="attrs.columns"
                options-dense
                option-value="name"
                map-options
                emit-value
                style="min-width: 140px"
                class="gt-xs q-ml-sm"
              />
            </div>
          </div>
          <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"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th auto-width v-if="boss == true" />
                <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="history == true" />
              </q-tr>
            </template>
            <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
            <template #body="props">
              <slot v-bind="props" name="columns"></slot>
            </template>
            <template v-slot:pagination="scope">
              <q-pagination
                v-model="pagination.page"
                active-color="primary"
                color="dark"
                :max="scope.pagesNumber"
                :max-pages="5"
                size="sm"
                boundary-links
                direction-links
              ></q-pagination>
            </template>
          </q-table>
        </div>
        <q-separator />
      </q-form>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs, computed } from "vue";
import type { Pagination } from "@/modules/01_masterdata/interface/index/Main";

const rows = ref<any[]>([]);
const attrs = ref<any>(useAttrs());
const filterRef = ref<any>(null);
// const history = ref<string>("");
const initialPagination = ref<Pagination>({
  //   descending: false,
  rowsPerPage: 0,
});

const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

const pagesNumber = computed(() => {
  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
});

const props = defineProps({
  tittle: String,
  inputfilter: String,
  //   history: String,
  inputvisible: Array,
  modal: Boolean,
  boss: {
    type: Boolean,
    defualt: false,
  },
  history: {
    type: Boolean,
    defualt: false,
  },
});

const emit = defineEmits([
  "update:inputfilter",
  "update:inputvisible",
  "update:modal",
  //   "update:history",
]);

const updateInput = (value: string | number | null) => {
  emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
  emit("update:inputvisible", value);
};
const close = () => {
  emit("update:modal", false);
};
// const updateHistory = (value: string) => {
//   emit("update:history", value);
//   props.updateHistory();
// };

const paginationLabel = (start: string, end: string, total: string) => {
  return start + "-" + end + " ใน " + total;
};

const resetFilter = () => {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  emit("update:inputfilter", "");
  filterRef.value.focus();
};
</script>
<style lang="scss">
.icon-color {
  color: #4154b3;
}
.custom-header-table {
  max-height: 64vh;
  .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;
  }
}
</style>