เงินเดือน,รายงาน KPI

src/modules/13_salary/components/InfoLeave.vue

@@ -0,0 +1,219 @@
+<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,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    field: (row) => rows.value.indexOf(row) + 1,
+  },
+  {
+    name: "leaveType",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "leaveType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    field: (row) => row.leaveType.name,
+  },
+  {
+    name: "dateLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateLeave",
+    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>
+    <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" class="cursor-pointer">
+            <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>