hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue

<script setup lang="ts">
import { ref, computed } from "vue";
import { useCounterMixin } from "@/stores/mixin";

const { findOrgNameHtml } = useCounterMixin();

const props = defineProps({
  columns: {
    type: Array as () => any[],
    require: true,
  },
  row: {
    type: Array as () => any[],
    require: true,
  },
});

const total = computed(() => {
  return props.row?.length;
});

const pagination = ref({
  sortBy: "",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});
</script>

<template>
  <q-table
    ref="table"
    flat
    bordered
    :columns="props.columns"
    :rows="props.row"
    dense
    :rows-per-page-options="[10, 25, 50, 100]"
    virtual-scroll
    class="row col-12"
    v-model:pagination="pagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props" class="bg-grey-2">
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-body2 text-black">{{ col.label }}</span>
        </q-th>
      </q-tr>
    </template>

    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name == 'organization'" class="text-html">
            {{
              props.row
                ? findOrgNameHtml({
                    root: props.row.orgRoot,
                    child1: props.row.orgChild1,
                    child2: props.row.orgChild2,
                    child3: props.row.orgChild3,
                    child4: props.row.orgChild4,
                  })
                : "-"
            }}
          </div>
          <div v-else>
            {{ !col.value ? "-" : col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>

    <template v-slot:pagination="scope">
      ทั้งหมด {{ total }} รายการ
      <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>
  </q-table>
</template>

<style scoped></style>