new version

src/modules/checkin/componenst/tableHistory.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="q-pb-sm row">
+    <div class="items-center col-12 row q-gutter-sm">
+      <!-- ค้นหาข้อความใน table -->
+      <!-- <datepicker
+        menu-class-name="modalfix"
+        v-model="yearly"
+        :locale="'th'"
+        autoApply
+        year-picker
+        :enableTimePicker="false"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            hide-bottom-space
+            outlined
+            dense
+            lazy-rules
+            :model-value="yearly + 543"
+            :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
+            :label="`${'ปีงบประมาณ'}`"
+            style="width: 150px"
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" class="cursor-pointer" color="primary">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker> -->
+      <q-space />
+      <!-- <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        class="gt-xs"
+        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"
+      >
+        <template> </template>
+      </q-select> -->
+    </div>
+  </div>
+  <div>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-table2"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      :pagination="initialPagination"
+      :rows-per-page-options="[0]"
+      :grid="grid"
+    >
+      <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" v-html="col.label" />
+          </q-th>
+          <q-th auto-width v-if="inputShow" />
+        </q-tr>
+      </template>
+      <template #body="props">
+        <slot v-bind="props" name="columns"></slot>
+      </template>
+      <template #item="props">
+        <slot v-bind="props" name="item"></slot>
+      </template>
+    </q-table>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, defineProps, defineEmits } from "vue";
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const initialPagination = ref({
+  rowsPerPage: 0,
+});
+const yearly = ref<number>(new Date().getFullYear());
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  grid: Boolean,
+
+  inputShow: Boolean,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+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-table2 {
+  .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;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    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;
+  }
+  .text-caption {
+    text-align: left;
+  }
+}
+</style>