hrms-user/src/modules/08_KPI/components/Tab/Topic/02_Template.vue

<script setup lang="ts">
import { ref } from "vue";
import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue";

import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";

const title = defineModel<string>('title',{required:true})
const rows = defineModel<any>('data',{required:true})
const numpage = defineModel<number>('page',{required:true})

const mixin = useCounterMixin();
const { date2Thai } = mixin;
const filterKeyword = ref<string>("");
const modal = ref<boolean>(false);
const modalAssigned = ref<boolean>(false);

const visibleColumns = ref<string[]>([
  "capacity",
  "level",
  "scoreLevel",
  "weight",
  "evaluationResults",
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "capacity",
    align: "left",
    label: "รายการสมรรถนะ",
    sortable: true,
    field: "capacity",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "level",
    align: "left",
    label: "ระดับที่คาดหวัง",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "scoreLevel",
    align: "left",
    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
    sortable: true,
    field: "scoreLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "weight",
    align: "left",
    label: "น้ำหนัก (ร้อยละ)",
    sortable: true,
    field: "weight",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "evaluationResults",
    align: "left",
    label: "ผลการประเมิน",
    sortable: true,
    field: "evaluationResults",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

function onAdd() {
    modal.value = true;
}
</script>
<template>
  <q-card bordered style="border-radius: 5px">
    <q-card-section class="bg-grey-3 q-py-sm">
      <span class="text-weight-bold">{{ title }}</span>
      <q-btn
        class="q-ml-xs"
        flat
        round
        icon="mdi-plus"
        color="primary"
        size="md"
        @click="onAdd"
      >
        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
      </q-btn>
    </q-card-section>
    <q-card-section>
      <q-table
        ref="table"
        :columns="columns"
        :rows="rows"
        :filter="filterKeyword"
        row-key="id"
        flat
        bordered
        :paging="true"
        dense
        hide-pagination
        class="custom-table2"
        :visible-columns="visibleColumns"
        no-data-label="ยังไม่มีข้อมูลแสดงในตารางนี้"
      >
        <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 />
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td v-for="col in props.cols" :key="col.id">
              <div v-if="col.name == 'createDate'">
                {{ col.value ? date2Thai(col.value) : "-" }}
              </div>
              <div v-else>
                {{ col.value ? col.value : "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </q-card-section>
  </q-card>

  <Dialog v-model:modal="modal" :numpage="numpage"/>
</template>
<style scoped>
.custom-table2 {
  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;
  }

  .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;
  }
}
</style>