hrms-mgt/src/modules/13_salary/components/InfoLeave.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";

/**
 * importType
 */
import type { QTableProps } from "quasar";
import type { DataLeave } from "@/modules/13_salary/interface/response/Main";

/**
 * importStore
 */
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const { date2Thai, showLoader, hideLoader, messageError } = useCounterMixin();

/**
 *  props
 */

const profileId = defineModel<string>("profileId", { required: true });
const employeeClass = defineModel<string>("employeeClass", { required: true });

/**
 * Table
 */
const keyword = ref<string>("");
const rows = ref<DataLeave[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,

    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    field: (row) => rows.value.indexOf(row) + 1,
  },
  {
    name: "leaveType",
    align: "left",
    label: "ประเภทการลา",
    sortable: true,

    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    field: (row) => row.leaveType.name,
  },
  {
    name: "dateLeave",
    align: "left",
    label: "วัน เดือน ปี ที่ลา",
    sortable: true,

    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    field: (row) => dateThaiRange([row.dateLeaveStart, row.dateLeaveEnd]),
  },
  {
    name: "leaveDays",
    align: "left",
    label: "จำนวนวันลา",
    sortable: true,
    field: "leaveDays",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format: (v) => convertStatus(v),
  },
  {
    name: "reason",
    align: "left",
    label: "เหตุผล",
    sortable: true,
    field: "reason",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "leaveType",
  "dateLeave",
  "leaveDays",
  "status",
  "reason",
]);

/**
 * function fetch ข้อมูลการลา
 */
function fetchListSalary() {
  showLoader();
  http
    .get(config.API.profileNewLeaveById(profileId.value, employeeClass.value))
    .then((res) => {
      rows.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
 * @param val ช่วงวันที่
 */
function dateThaiRange(val: [Date, Date]) {
  if (val === null) {
  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
    return `${date2Thai(val[0])}`;
  } else {
    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
  }
}

function convertStatus(val: string) {
  switch (val) {
    case "waitting":
      return "รออนุมัติ";
    case "reject":
      return "ไม่ผ่านการอนุมัติ";
    case "approve":
      return "ผ่านการอนุมัติ";
    case "cancel":
      return "ยกเลิก";
    default:
      return "-";
  }
}

onMounted(() => {
  fetchListSalary();
});
</script>

<template>
  <q-card-section class="q-pt-none">
    <div class="row items-center q-gutter-x-sm q-pb-sm">
      <q-space />
      <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
        <template v-slot:append>
          <q-icon v-if="keyword == ''" name="search" />
          <q-icon
            v-else
            name="clear"
            class="cursor-pointer"
            @click="keyword = ''"
          />
        </template>
      </q-input>

      <q-select
        v-model="visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="columns"
        option-value="name"
        options-cover
        style="min-width: 150px"
      />
    </div>
    <div class="col-12">
      <d-table
        ref="table"
        row-key="id"
        flat
        bordered
        dense
        :filter="keyword"
        :paging="true"
        :rows-per-page-options="[20, 50, 100]"
        :visible-columns="visibleColumns"
        :rows="rows"
        :columns="columns"
      >
        <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-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props" >
            <q-td v-for="col in props.cols" :key="col.id">
              <div class="table_ellipsis">
                {{ col.value ? col.value : "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </d-table>
    </div>
  </q-card-section>
</template>

<style scoped></style>