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

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

@@ -0,0 +1,194 @@
+<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 { DataDiscipline } 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<DataDiscipline[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    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",
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+]);
+
+/**
+ * function fetch ข้อมูลวินัย
+ */
+function fetchListDiscipline() {
+  showLoader();
+  http
+    .get(
+      config.API.profileNewDisciplineByProfileId(
+        profileId.value,
+        employeeClass.value
+      )
+    )
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fetchListDiscipline();
+});
+</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>