hrms-user/src/modules/06_evaluate/components/PopupCheckFeatures.vue

<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import Table from "@/components/Table.vue";

import { ref, watch } from "vue";
import type { QTableProps } from "quasar";

const store = useEvaluateStore();

const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "ตรวจสอบคุณสมบัติ",
  },
  desc: {
    type: String,
    default: "",
  },
  closeModal: {
    type: Function,
    default: () => {},
  },
});

const filter = ref<string>("");

const rows = ref<any[]>([
  {
    degree: "ปริญญาตรี หรือเทียบเท่า",
    level: "หลักสูตร ๔ ปี",
    expert: "๖ ปี",
    special: "๘ ปี",
    checked: "",
  },
  {
    degree: "ปริญญาตรี หรือเทียบเท่า",
    level: "หลักสูตร ๕ ปี",
    expert: "๕ ปี",
    special: "๗ ปี",
    checked: "",
  },
  {
    degree: "ปริญญาตรี หรือเทียบเท่า",
    level: "หลักสูตร ๖ ปี",
    expert: "๔ ปี",
    special: "๖ ปี",
    checked: "",
  },
  {
    degree: "ปริญญาโท หรือเทียบเท่า",
    level: "-",
    expert: "๔ ปี",
    special: "๖ ปี",
    checked: "",
  },
  {
    degree: "ปริญญาเอก หรือเทียบเท่า",
    level: "-",
    expert: "๒ ปี",
    special: "๔ ปี",
    checked: "",
  },
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "degree",
    align: "left",
    label: "คุณวุฒิ",
    sortable: false,
    field: "degree",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    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: "expert",
    align: "center",
    label: "ชำนาญการ",
    sortable: false,
    field: "expert",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "special",
    align: "center",
    label: "ชำนาญการพิเศษ",
    sortable: false,
    field: "special",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checked",
    align: "center",
    label: "",
    sortable: false,
    field: "checked",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const visibleColumns = ref<string[]>(
  store.tabMenu == "1"
    ? ["degree", "level", "expert"]
    : ["degree", "level", "special"]
);

watch(props, () => {
  if (!props.show) {
    visibleColumns.value = ["degree", "level", "checked"];
  } else {
    if (store.tabMenu == "1") {
      visibleColumns.value = ["degree", "level", "expert"];
    } else {
      visibleColumns.value = ["degree", "level", "special"];
    }
  }
});
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 40vw">
      <DialogHeader :tittle="props.title" :close="props.closeModal" />
      <q-separator />
      <q-card-section class="q-pa-sm bg-grey-1">
        <Table
          style="max-height: 80vh"
          :view-mode="false"
          :rows="rows"
          :columns="columns"
          :visible-columns="visibleColumns"
          v-model:inputfilter="filter"
          v-model:inputvisible="visibleColumns"
          :pagination="false"
          :paging="false"
          :inputShow="false"
          :titleText="''"
        >
          <template #columns="props">
            <q-tr :props="props">
              <!-- <q-td key="no" :props="props">
                {{ props.rowIndex + 1 }}
              </q-td> -->
              <q-td key="degree" :props="props">
                {{ props.row.degree }}
              </q-td>
              <q-td key="level" :props="props">
                {{ props.row.level }}
              </q-td>
              <q-td key="expert" :props="props">
                {{ props.row.expert }}
              </q-td>
              <q-td key="special" :props="props">
                {{ props.row.special }}
              </q-td>
              <q-td key="checked" :props="props">
                <q-icon name="checked" color="primary" />
              </q-td>
            </q-tr>
          </template>
        </Table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>