clone code

src/modules/02_organizational/components/TableReport.vue

@@ -0,0 +1,215 @@
+<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>