hrms-user/src/modules/08_KPI/views/main.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
import type { QTableProps } from "quasar";

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

const mixin = useCounterMixin()
const { date2Thai } = mixin
const router = useRouter();

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

const rows = ref<any>();

const round = ref<string>("ID1");
const roundOp = ref<DataOptions[]>([
  {
    id: "ID1",
    name: "รอบเมษา",
  },
]);

const visibleColumns = ref<string[]>(["createDate", "status", "result"]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "createDate",
    align: "left",
    label: "วันที่สร้างแบบประเมิน",
    sortable: true,
    field: "createDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "status",
    align: "left",
    label: "สถานะการประเมิน",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "result",
    align: "left",
    label: "ผลการประเมิน",
    sortable: true,
    field: "result",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

/** ดึงข้อมูล */
function getData() {
  const data = [
    {
      id: "ID1",
      createDate: '2024-02-16T06:01:00.000Z',
      status: "รอดำเนินการ",
      result: "ผ่านเกณฑ์การประเมิน",
    },
    {
      id: "ID1",
      createDate: '2024-02-16T06:01:00.000Z',
      status: "รอดำเนินการ",
      result: "ผ่านเกณฑ์การประเมิน",
    },
  ];
  rows.value = data;
  // showLoader();
  // await http
  //   .get(config.API.orgPrefix)
  //   .then(async (res) => {
  //   })
  //   .catch((err) => {
  //     messageError($q, err);
  //   })
  //   .finally(() => {
  //     hideLoader();
  //   });
}

function onEdit(id:string){
  router.push(`/KPI/${id}`)
}
onMounted(async () => {
  getData();
});
</script>

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push(`/`)"
        />
        รายการประเมินผลการปฏิบัติราชการระดับบุคคล
      </div>
      <div class="col-12">
        <q-card bordered class="q-pa-md">
          <q-toolbar style="padding: 0">
            <q-select
              v-model="round"
              outlined
              label="รอบการประเมิน"
              dense
              option-label="name"
              option-value="id"
              :options="roundOp"
              style="min-width: 200px"
              emit-value
              map-options
            />
            <q-btn class="q-ml-sm" flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
            </q-btn>
            <q-space />
            <div class="row q-gutter-sm">
              <q-input
                outlined
                dense
                v-model="filterKeyword"
                label="ค้นหา"
              ></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>
          </q-toolbar>

          <q-table
            ref="table"
            :columns="columns"
            :rows="rows"
            :filter="filterKeyword"
            row-key="id"
            flat
            bordered
            :paging="true"
            dense
            class="custom-table2"
            :visible-columns="visibleColumns"
          >
            <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-th auto-width />
              </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" @click="onEdit(props.row.id)">
                  <div v-if="col.name == 'createDate'">
                  {{ col.value ? date2Thai(col.value):'-' }}
                </div>
                  <div v-else>
                    {{ col.value }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.icon-color {
  color: #4154b3;
}

.custom-table2 {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
  }

  .q-table td:nth-of-type(2) {
    z-index: 3 !important;
  }

  .q-table th:nth-of-type(2),
  .q-table td:nth-of-type(2) {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>