hrms-user/src/modules/07_appealComplain/views/Main.vue

<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/02_transfer/store";
import http from "@/plugins/http";
import config from "@/app.config";
import Table from "@/components/Table.vue";

const transferData = useTransferDataStore();
const { statusText } = transferData;
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader } = mixin;

/**
 * ตั้งค่า pagination
 */
const initialPagination = ref({
  rowsPerPage: 0,
});

/**
 * เพิ่มหัวข้อตาราง
 */
const filter = ref<string>("");
const rows = ref<any>([]);
const visibleColumns = ref<String[]>([
  "no",
  "date",
  "position",
  "noPos",
  "level",
  "salary",
  "transfer",
  "statustext",
]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:5px;",
  },
  {
    name: "date",
    align: "left",
    label: "วันที่",
    sortable: true,
    field: "date",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:15%;",
  },
  {
    name: "noPos",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "noPos",
    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: "salary",
    align: "left",
    label: "เงินเดือน",
    sortable: true,
    field: "salary",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "transfer",
    align: "left",
    label: "หน่วยงานที่ขอโอนไป",
    sortable: true,
    field: "transfer",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "statustext",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "statustext",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:10%;",
  },
]);

/**
 * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
 */
onMounted(async () => {
  await fecthListTransfer();
});

//นำข้อมูลมาแสดง
const fecthListTransfer = async () => {
  //   showLoader();
  //   await http
  //     .get(config.API.listUserTransfer())
  //     .then((res: any) => {
  //       let data = res.data.result;
  //       rows.value = data.map((e: any) => ({
  //         id: e.id,
  //         date: date2Thai(e.createdAt),
  //         status: e.status,
  //         statustext: statusText(e.status),
  //         position: e.organizationPositionOld,
  //         noPos: e.posNo,
  //         level: e.positionLevel,
  //         salary: e.salary,
  //         transfer: e.organization,
  //       }));
  //     })
  //     .catch((e: any) => {
  //       messageError($q, e);
  //     })
  //     .finally(() => {
  //       hideLoader();
  //     });
};

/**
 * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่ม
 */
const clickAdd = async () => {
  router.push(`/appeal-complain/add`);
};

/**
 * กดเพื่อย้อนกลับ
 */
const clickBack = () => {
  router.push(`/`);
};
</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="clickBack"
        />
        อุทธรณ์ร้องทุกข์
      </div>
      <div class="col-12">
        <q-card bordered class="q-pa-md">
          <Table
            style="max-height: 80vh"
            :rows="rows"
            :columns="columns"
            :filter="filter"
            :visible-columns="visibleColumns"
            v-model:inputfilter="filter"
            v-model:inputvisible="visibleColumns"
            :pagination="initialPagination"
            :inputShow="false"
            :add="clickAdd"
            :titleText="''"
          >
            <template #columns="props">
              <q-tr
                :props="props"
                class="cursor-pointer"
                @click="router.push(`/transfer/` + props.row.id)"
              >
                <q-td key="no" :props="props">
                  {{ props.rowIndex + 1 }}
                </q-td>
                <q-td key="date" :props="props">
                  {{ props.row.date }}
                </q-td>
                <q-td key="position" :props="props">
                  {{ props.row.position }}
                </q-td>
                <q-td key="noPos" :props="props">
                  {{ props.row.noPos }}
                </q-td>
                <q-td key="level" :props="props">
                  {{ props.row.level }}
                </q-td>
                <q-td key="salary" :props="props">
                  {{ props.row.salary }}
                </q-td>
                <q-td key="transfer" :props="props">
                  {{ props.row.transfer }}
                </q-td>
                <q-td key="statustext" :props="props">
                  {{ props.row.statustext }}
                </q-td>
              </q-tr>
            </template>
          </Table>
        </q-card>
      </div>
    </div>
  </div>
</template>
<style></style>