149 lines
4.6 KiB
Vue
149 lines
4.6 KiB
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(`/leave/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(`/leave/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>
|