hrms-mgt/src/modules/05_placement/components/PersonalList/TableView.vue

<template>
  <div class="q-px-md q-pb-md">
    <div class="col-12 row q-py-sm">
            <q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
                                      :model-value="containStatus" color="blue" label="แสดงสถานะบรรจุแล้ว" @update:model-value="updateContain" />

                <q-space />
                <div class="items-center" style="display: flex">
                  <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: 150px" 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: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>
                <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="history == 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";
import { useQuasar } from "quasar";
const $q = useQuasar();
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const table = ref<any>(null);
const filterRef = ref<any>(null);
const props = defineProps({
  inputfilter: String,
  inputvisible: Array,
  inputvisibleFilter: String,
  editvisible: Boolean,
  titleText: String,
  optionsFilter: {
    type: Array,
    defualt: [],
  },
  boss: {
    type: Boolean,
    defualt: false,
  },
  saveNoDraft: {
    type: Boolean,
    defualt: false,
  },
  history: {
    type: Boolean,
    defualt: false,
  },
  paging: {
    type: Boolean,
    defualt: false,
  },
  nornmalData: {
    type: Boolean,
    defualt: false,
  },
  nextPageVisible: {
    type: Boolean,
    defualt: false,
  },
  publicData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  updateData: {
    type: Boolean,
    defualt: true,
    required: false,
  },
  publicNoBtn: {
    type: Boolean,
    defualt: false,
  },
  refreshBtn: {
    type: Boolean,
    defualt: false,
  },
  add: {
    type: Function,
    default: () => console.log("not function"),
  },
  edit: {
    type: Function,
    default: () => console.log("not function"),
  },
  save: {
    type: Function,
    default: () => console.log("not function"),
  },
  deleted: {
    type: Function,
    default: () => console.log("not function"),
  },
  cancel: {
    type: Function,
    default: () => console.log("not function"),
  },
  publish: {
    type: Function,
    default: () => console.log("not function"),
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
  refresh: {
    type: Function,
    default: () => console.log("not function"),
  },
  containStatus: Boolean,
  roleAdmin: Boolean
});
const pagination = ref({
  sortBy: "number",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});
const paginationLabel = (start: string, end: string, total: string) => {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};
const refresh = () => props.refresh();
const initialPagination = ref<any>({
  //   descending: false,
  rowsPerPage: props.paging == true ? 25 : 0,
});

const emit = defineEmits([
  "update:inputfilter",
  "update:inputvisible",
  "update:editvisible",
  "update:titleText",
  "update:inputvisibleFilter",
  "update:containfilter"
]);

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

const updateContain = (value: any) => {
  emit("update:containfilter", value);
};

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>