hrms-mgt/src/modules/02_organizational/components/TableReport.vue

<template>
  <div class="q-px-md q-pb-md">
    <div class="col-12 row q-pb-sm items-center q-col-gutter-sm">
      <q-btn
        size="14px"
        color="grey-7"
        dense
        flat
        round
        @click="onTab"
        class="shadow-1"
        icon="chevron_right"
        v-if="!isTab"
      >
        <q-tooltip>เปิด</q-tooltip>
      </q-btn>
      <q-btn
        size="14px"
        dense
        flat
        round
        color="primary"
        @click="onConfirm"
        icon="assignment_turned_in"
      >
        <q-tooltip>ยืนยันเพื่อเอาไปออกคำสั่ง</q-tooltip>
      </q-btn>
      <q-btn
        size="14px"
        dense
        flat
        round
        color="info"
        icon="mdi-history"
        @click="onHistory"
      >
        <q-tooltip>ประวัติ</q-tooltip>
      </q-btn>
      <q-space />
      <!-- ค้นหาข้อความใน table -->

      <q-input
        standout
        dense
        :model-value="inputfilter"
        ref="filterRef"
        @update:model-value="updateInput"
        outlined
        debounce="300"
        placeholder="ค้นหา"
        style="max-width: 200px"
      >
        <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: 150px"
        class="gt-xs"
      />
    </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"
      :pagination="initialPagination"
      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <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="delect == true" />
        </q-tr>
      </template>
      <template #body="props">
        <slot v-bind="props" name="columns"></slot>
      </template>
    </q-table>
  </div>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";

const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);

const props = defineProps({
  inputfilter: String,
  inputvisible: Array,
  addvisible: Boolean,

  delect: {
    type: Boolean,
    defualt: false,
  },
  paging: {
    type: Boolean,
    defualt: false,
  },
  isTab: {
    type: Boolean,
    default: true,
  },
  onTab: {
    type: Function,
    default: () => console.log("not function"),
  },
  onConfirm: {
    type: Function,
    default: () => console.log("not function"),
  },
  onHistory: {
    type: Function,
    default: () => console.log("not function"),
  },
  add: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const emit = defineEmits(["update:inputfilter", "update:inputvisible"]);

const updateVisible = (value: any) => {
  emit("update:inputvisible", value);
};
const updateInput = (value: any) => {
  emit("update:inputfilter", value);
};
const onConfirm = () => {
  props.onConfirm();
};

const onHistory = () => {
  props.onHistory();
};
const onTab = () => {
  props.onTab();
};
const checkAdd = () => {
  props.add();
};
const initialPagination = ref<any>({
  //   descending: false,
  rowsPerPage: props.paging == true ? 25 : 0,
});

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

const resetFilter = () => {
  emit("update:inputfilter", "");
  filterRef.value.focus();
};
</script>
<style lang="scss">
.icon-color {
  color: #4154b3;
}
.custom-header-table {
  max-height: 80vh;
  .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>