hrms-mgt/src/modules/03_recruiting/components/Table.vue

<script setup lang="ts">
import { checkPermission } from "@/utils/permissions";
import { ref, useAttrs, watch } from "vue";
import type {
  Pagination,
  ExamResultOption,
} from "@/modules/03_recruiting/interface/index/Main";

const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);

const filter = defineModel<string>("filter", { required: false });
const examResult = defineModel<string>("examResult", {
  required: false,
  default: "",
});
const pagination = defineModel<Pagination>("pagination", { required: true });

const props = defineProps({
  onSearch: Function,
  fetchData: Function,
  count: Number,
  totalList: Number,
  total: Number,
  pass: Number,
  notpass: Number,
  missed_exam: Number,
  other: Number,

  inputfilter: String,
  name: String,
  icon: String,
  inputvisible: Array,
  editvisible: Boolean,
  add: {
    type: Function,
    default: () => console.log("not function"),
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
  nornmalData: {
    type: Boolean,
    defualt: true,
  },
  conclude: {
    type: Boolean,
    defualt: false,
  },
});

const optionsStatus = ref<ExamResultOption[]>([
  { label: "ทั้งหมด", value: "" },
  { label: "ขาดสอบ", value: "missed_exam" },
  { label: "ผ่าน", value: "pass" },
  { label: "ไม่ผ่าน", value: "notpass" },
]);

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

const updateVisible = (value: []) => {
  emit("update:inputvisible", value);
};

/**
 *
 * @param start
 * @param end
 * @param total
 */
function paginationLabel(start: string, end: string, total: string) {
  return start + "-" + end + " ใน " + total;
}

/** fn เพิ่มข้อมูล */
function checkAdd() {
  props.add();
}

function updatePagination(newPagination: any) {
  if (!props.nornmalData) {
    pagination.value.page = 1;
    pagination.value.rowsPerPage = newPagination.rowsPerPage;
  }
}

function getList(enter?: string) {
  if (enter == "enter") {
    pagination.value.page = 1;
    props.fetchData?.();
  } else {
    props.fetchData?.();
  }
}

watch(
  () => pagination.value.rowsPerPage,
  async () => {
    getList();
  }
);
</script>

<template>
  <div class="q-pb-sm row q-col-gutter-sm">
    <div
      class="q-gutter-sm"
      v-if="nornmalData == true && checkPermission($route)?.attrIsCreate"
    >
      <q-btn
        size="12px"
        flat
        round
        color="primary"
        @click="checkAdd"
        icon="mdi-plus"
      >
        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
      </q-btn>
    </div>
    <div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
      <q-card bordered flat class="q-px-md no-wrap row">
        <div class="col-12 text-subtitle2 row items-center">
          <span class="text-weight-medium text-dark">ผู้สมัครสอบ</span>
          <q-space />
          <q-badge
            color="white"
            class="text-weight-bold text-subtitle1 text-blue-7"
            :label="`${count?.toLocaleString()}`"
            rounded
          />
        </div>
      </q-card>
      <q-card bordered flat class="q-px-md no-wrap row">
        <div class="col-12 text-subtitle2 row items-center">
          <span class="text-weight-medium text-dark">สอบผ่าน</span>
          <q-space />
          <q-badge
            color="white"
            class="text-weight-bold text-subtitle1 text-primary"
            :label="`${pass?.toLocaleString()}`"
            rounded
          />
        </div>
      </q-card>
      <q-card bordered flat class="q-px-md no-wrap row">
        <div class="col-12 text-subtitle2 row items-center">
          <span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
          <q-space />
          <q-badge
            color="white"
            class="text-weight-bold text-subtitle1 text-pink"
            :label="`${notpass?.toLocaleString()}`"
            rounded
          />
        </div>
      </q-card>
      <q-card
        v-if="missed_exam && missed_exam !== 0"
        bordered
        flat
        class="q-px-md no-wrap row"
      >
        <div class="col-12 text-subtitle2 row items-center">
          <span class="text-weight-medium text-dark">ขาดสอบ</span>
          <q-space />
          <q-badge
            color="white"
            class="text-weight-bold text-subtitle1 text-orange"
            :label="`${missed_exam?.toLocaleString()}`"
            rounded
          />
        </div>
      </q-card>
      <q-card
        v-if="other && other !== 0"
        bordered
        flat
        class="q-px-md no-wrap row"
      >
        <div class="col-12 text-subtitle2 row items-center">
          <span class="text-weight-medium text-dark">อื่น ๆ</span>
          <q-space />
          <q-badge
            color="white"
            class="text-weight-bold text-subtitle1 text-info"
            :label="`${other?.toLocaleString()}`"
            rounded
          />
        </div>
      </q-card>
    </div>
    <q-space />
    <div class="items-center q-gutter-sm" style="display: flex">
      <q-select
        v-if="conclude"
        dense
        outlined
        :options="optionsStatus"
        option-value="value"
        option-label="label"
        label="ผลการสอบ"
        map-options
        emit-value
        style="min-width: 140px"
        :clearable="examResult !== ''"
        @clear="examResult = ''"
        v-model="examResult"
        @update:model-value="
          nornmalData ? props.onSearch?.() : getList('enter')
        "
      />
      <!-- ค้นหาข้อความใน table -->
      <q-input
        standout
        dense
        v-model="filter"
        ref="filterRef"
        outlined
        placeholder="ค้นหา"
        style="max-width: 200px"
        @keydown.enter.prevent="
          nornmalData ? props.onSearch?.() : getList('enter')
        "
      >
        <template v-slot:append>
          <q-icon name="search" />
        </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: 140px"
        class="gt-xs"
      >
        <template> </template>
      </q-select>
    </div>
  </div>
  <d-table
    ref="table"
    flat
    bordered
    class="custom-header-table"
    v-bind="attrs"
    virtual-scroll
    :virtual-scroll-sticky-size-start="48"
    dense
    :pagination-label="paginationLabel"
    :rows-per-page-options="nornmalData ? [0] : [10, 25, 50, 100]"
    @update:pagination="updatePagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
        <q-th auto-width v-if="nornmalData == true" />
        <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-tr>
    </template>
    <template #body="props">
      <slot v-bind="props" name="columns"></slot>
    </template>
    <template v-if="!nornmalData" v-slot:pagination="scope">
      ทั้งหมด {{ props.total?.toLocaleString() }} รายการ
      <q-pagination
        v-model="pagination.page"
        active-color="primary"
        color="dark"
        :max="totalList"
        size="sm"
        boundary-links
        direction-links
        :max-pages="5"
        @update:model-value="getList"
      ></q-pagination>
    </template>
  </d-table>
</template>

<style lang="scss">
.icon-color {
  color: #4154b3;
}
</style>