hrms-user/src/modules/02_transfer/views/Main.vue

<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

const router = useRouter();
const $q = useQuasar();

import Table from "@/components/Table.vue";

const filter = ref<string>("");
const rows = ref<any>([
    {date: '02/02/2566',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/ฝ่ายการคลัง', status: 'รอดำเนินการ'},
    {date: '02/02/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
    {date: '10/01/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
]);
const initialPagination = ref({
  rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
  "no",
  "date",
  "position",
  "noPos",
  "level",
  "salary",
  "transfer",
  "status",
]);

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: "status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:10%;",
  },
]);
const clickAdd = async () => {
    router.push(`/transfer/add`);
};
</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.go(-1)"
                />
                เรื่องขอโอน
            </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/1`)">
                                <q-td
                                v-for="col in props.cols"
                                :key="col.name"
                                :props="props"
                                >
                                <div v-if="col.name == 'no'">
                                    {{ props.rowIndex + 1 }}
                                </div>
                                <div v-else-if="col.name == 'status'">
                                    <q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
                                        <q-tooltip>รอดำเนินการ</q-tooltip>
                                    </q-icon>
                                    <q-icon size="20px" v-else name="mdi-check" color="teal">
                                        <q-tooltip>เสร็จสิ้น</q-tooltip>
                                    </q-icon>
                                    
                                </div>
                                <div v-else>
                                    {{ col.value }}
                                </div>
                                </q-td>
                            </q-tr>
                        </template>
			              </Table>
                </q-card>
            </div>
        </div>
    </div>
</template>
<style>

</style>