ระบบลา เพิ่ม dialog ขอแก้ไข,ดูรายละเอียด,ตารางสถิติการลา
This commit is contained in:
Tanyalak
parent
ce05548bc5
commit
9a55a75706
4 changed files with 392 additions and 97 deletions
|
|
@ -182,36 +182,37 @@ const transferToPage = (path?: string) => {
|
|||
flat
|
||||
/>
|
||||
</div>
|
||||
<q-list
|
||||
v-for="(contact, index) in inboxList"
|
||||
:key="index"
|
||||
class="q-px-md"
|
||||
style="max-height: 74vh;"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="q-py-md q-mb-sm my-menu"
|
||||
:active="link === contact.no"
|
||||
@click="link = contact.no"
|
||||
active-class="my-menu-link"
|
||||
<q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
|
||||
<q-list
|
||||
v-for="(contact, index) in inboxList"
|
||||
:key="index"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ contact.sender }}</q-item-label>
|
||||
<q-item-label caption class="text-grey-6" lines="2">{{
|
||||
contact.subject
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="q-py-md q-mb-sm my-menu"
|
||||
:active="link === contact.no"
|
||||
@click="link = contact.no"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ contact.sender }}</q-item-label>
|
||||
<q-item-label caption class="text-grey-6" lines="2">{{
|
||||
contact.subject
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
<q-banner
|
||||
rounded
|
||||
class="bg-amber-1 text-center q-mx-sm"
|
||||
v-if="inboxList.length < 1"
|
||||
v-else
|
||||
>
|
||||
<div class="text-yellow-10">
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -8,8 +8,11 @@
|
|||
:options="calendarOptions"
|
||||
>
|
||||
<template v-slot:eventContent="arg">
|
||||
<b>{{ arg.timeText }}</b>
|
||||
<i>{{ arg.event.title }}</i>
|
||||
<div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
|
||||
<!-- <b>{{ arg.timeText }}</b> -->
|
||||
<div class="textHover col-10" @click="view(arg.event.title)">{{ arg.event.title }}</div>
|
||||
<q-btn dense v-if="arg.event.groupId == 1" icon="mdi-close" flat round size="8px" @click="cancel(arg.event.title)" />
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
</div>
|
||||
|
|
@ -32,10 +35,75 @@
|
|||
<span class="text-caption text-grey-8">สถานะใหม่</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
||||
<q-dialog v-model="modalCancel" persistent>
|
||||
<q-card :style="modeCancel == true ? 'min-width: 50%;': 'min-width:30%'">
|
||||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
|
||||
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6': 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
||||
<div class="col-6 text-black">{{ location }}</div>
|
||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
||||
<div class="col-6 text-black">{{ subject }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||
<div class="col-6 text-black">{{ numDate }}</div>
|
||||
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||
<div class="col-6 text-black">{{ place }}</div>
|
||||
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input
|
||||
v-model="reason"
|
||||
type="textarea"
|
||||
label="กรอกเหตุผล"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
|
||||
<q-space />
|
||||
<q-btn
|
||||
label="ยืนยัน"
|
||||
unelevated
|
||||
color="secondary"
|
||||
dense
|
||||
class="q-px-md"
|
||||
v-close-popup
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
|
|
@ -44,62 +112,64 @@ import timeGridPlugin from "@fullcalendar/timegrid";
|
|||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import allLocales from "@fullcalendar/core/locales-all";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
|
||||
const calendarOptions = ref({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin, // needed for dateClick
|
||||
listPlugin,
|
||||
],
|
||||
buttonText: {
|
||||
listYear: "รายการ",
|
||||
dayGridMonth: "ปฏิทิน",
|
||||
test: "เพิ่มวันหยุด",
|
||||
},
|
||||
headerToolbar: null,
|
||||
initialView: "dayGridMonth",
|
||||
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
|
||||
selectable: true,
|
||||
dayMaxEvents: true,
|
||||
weekends: true,
|
||||
locale: "th",
|
||||
locales: allLocales,
|
||||
expandRows: true,
|
||||
nowIndicator: true,
|
||||
height: "100%",
|
||||
eventColor: "#fff",
|
||||
eventTextColor: "#4A5568",
|
||||
eventBorderColor: "#50a5fc",
|
||||
displayEventTime: false,
|
||||
editable: true,
|
||||
events: [
|
||||
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-09-10", allDay: true, status: 'done', color: '#E3FDDA' },
|
||||
{ groupId: "2", title: "ลาป่วย", start: "2023-09-19", allDay: true, status: 'proceed', color: '#e4f3ff' },
|
||||
{ groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, status: 'new', color: '#FFF1CC' }
|
||||
],
|
||||
});
|
||||
|
||||
// import interactionPlugin from "@fullcalendar/interaction";
|
||||
export default {
|
||||
components: {
|
||||
FullCalendar, // make the <FullCalendar> tag available
|
||||
calendar() {
|
||||
return (
|
||||
this.$refs.fullCalendar as InstanceType<typeof FullCalendar>
|
||||
).getApi();
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const name = ref<string>("");
|
||||
const date = ref<Date>(new Date());
|
||||
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
|
||||
const calendarOptions = ref({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin, // needed for dateClick
|
||||
listPlugin,
|
||||
],
|
||||
buttonText: {
|
||||
listYear: "รายการ",
|
||||
dayGridMonth: "ปฏิทิน",
|
||||
test: "เพิ่มวันหยุด",
|
||||
},
|
||||
headerToolbar: null,
|
||||
initialView: "dayGridMonth",
|
||||
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
|
||||
selectable: true,
|
||||
dayMaxEvents: true,
|
||||
weekends: true,
|
||||
locale: "th",
|
||||
locales: allLocales,
|
||||
expandRows: true,
|
||||
nowIndicator: true,
|
||||
height: "100%",
|
||||
eventColor: "#e4f3ff",
|
||||
eventTextColor: "#4A5568",
|
||||
eventBorderColor: "#50a5fc",
|
||||
displayEventTime: false,
|
||||
editable: true,
|
||||
events: []
|
||||
});
|
||||
calendarOptions.value.events = [
|
||||
{ groupId: "2", title: "ลากิจส่วนตัว", start: "2023-09-10", allDay: true, color: '#E3FDDA' },
|
||||
{ groupId: "1", title: "ลาป่วย", start: "2023-09-19", allDay: true, color: '#e4f3ff' },
|
||||
{ groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, color: '#FFF1CC' },
|
||||
];
|
||||
return {
|
||||
calendarOptions,
|
||||
name,
|
||||
date
|
||||
};
|
||||
},
|
||||
const modalCancel = ref(false);
|
||||
const title = ref('');
|
||||
const location = ref('บ้าน');
|
||||
const subject = ref('ลาป่วย');
|
||||
const dateStart = ref('20 ส.ค. 2566');
|
||||
const dateEnd= ref('21 ส.ค. 2566');
|
||||
const numDate= ref('20');
|
||||
const place = ref('บ้าน');
|
||||
const phone = ref('000-00000000');
|
||||
const reason = ref('ยกเลิกการลา');
|
||||
const model = ref(null);
|
||||
const modeCancel = ref(true);
|
||||
|
||||
const cancel = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = true;
|
||||
};
|
||||
const view = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -261,4 +331,8 @@ export default {
|
|||
.fc-theme-standard td, .fc-theme-standard th{
|
||||
border: 1px solid #EBE9F1;
|
||||
}
|
||||
|
||||
.textHover:hover{
|
||||
color: #18a259;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,33 +12,99 @@
|
|||
:grid="$q.screen.gt.xs ? false : true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td key="no" :props="props">
|
||||
<q-tr :props="props" class=" cursor-pointer">
|
||||
<q-td key="no" :props="props" @click="view(props.row.type)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="type" :props="props">
|
||||
<q-td key="type" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.type }}
|
||||
</q-td>
|
||||
<q-td key="date" :props="props">
|
||||
<q-td key="date" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.date }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="status" :props="props">
|
||||
<div class="col-12 row items-center">
|
||||
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
|
||||
<span class="q-pr-md">{{ props.row.status }}</span>
|
||||
<div @click="view(props.row.type)">
|
||||
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
|
||||
<span class="q-pr-md">{{ props.row.status }}</span>
|
||||
</div>
|
||||
<q-space/>
|
||||
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" size="13px" class="q-px-sm" outline dense color="orange" />
|
||||
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
|
||||
</div>
|
||||
</q-td>
|
||||
|
||||
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
||||
<q-dialog v-model="modalCancel" persistent>
|
||||
<q-card :style="modeCancel == true ? 'min-width: 50%;': 'min-width:30%'">
|
||||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
|
||||
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6': 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
||||
<div class="col-6 text-black">{{ location }}</div>
|
||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
||||
<div class="col-6 text-black">{{ subject }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||
<div class="col-6 text-black">{{ numDate }}</div>
|
||||
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||
<div class="col-6 text-black">{{ place }}</div>
|
||||
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input
|
||||
v-model="reason"
|
||||
type="textarea"
|
||||
label="กรอกเหตุผล"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
|
||||
<q-space />
|
||||
<q-btn
|
||||
label="ยืนยัน"
|
||||
unelevated
|
||||
color="secondary"
|
||||
dense
|
||||
class="q-px-md"
|
||||
v-close-popup
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -94,4 +160,28 @@ const rows = ref<any>([
|
|||
const initialPagination = ref({
|
||||
rowsPerPage: 0,
|
||||
})
|
||||
|
||||
const modalCancel = ref(false);
|
||||
const title = ref('');
|
||||
const location = ref('บ้าน');
|
||||
const subject = ref('ลาป่วย');
|
||||
const dateStart = ref('20 ส.ค. 2566');
|
||||
const dateEnd= ref('21 ส.ค. 2566');
|
||||
const numDate= ref('20');
|
||||
const place = ref('บ้าน');
|
||||
const phone = ref('000-00000000');
|
||||
const reason = ref('ยกเลิกการลา');
|
||||
const model = ref(null);
|
||||
const modeCancel = ref(true);
|
||||
|
||||
const cancel = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = true;
|
||||
};
|
||||
const view = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = false;
|
||||
};
|
||||
</script>
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
<q-card class="row col-12 items-center q-px-md q-py-sm">
|
||||
<div class="text-weight-bold">สถิติการลา</div>
|
||||
<q-space/>
|
||||
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" label="ตารางสถิติการลา" />
|
||||
<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
|
||||
</q-card>
|
||||
<div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item,index) in itemPie" :key="index">
|
||||
<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
|
||||
|
|
@ -187,6 +187,36 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- modal ตารางสถิติการลา -->
|
||||
<q-dialog v-model="data" persistent>
|
||||
<q-card style="min-width: 85%;">
|
||||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row">
|
||||
<q-table
|
||||
flat bordered
|
||||
dense
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
class="col-12"
|
||||
hide-bottom
|
||||
v-model:pagination="pagination"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -221,6 +251,106 @@ const itemPie = ref([
|
|||
{text: 'ลากิจส่วนตัว', color: 'text-deep-purple', value: 80, all: '12', use: '9', remain: '3'},
|
||||
{text: 'ลาพักผ่อน', color: 'text-indigo', value: 78, all: '20', use: '17', remain: '3'}
|
||||
])
|
||||
|
||||
const data = ref(false);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:5%;",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "numDate",
|
||||
align: "left",
|
||||
label: "โควตาวันลา",
|
||||
sortable: true,
|
||||
field: "numDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "extend",
|
||||
align: "left",
|
||||
label: "ทดวันลา",
|
||||
sortable: true,
|
||||
field: "extend",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "use",
|
||||
align: "left",
|
||||
label: "ใช้ไป (%)",
|
||||
sortable: true,
|
||||
field: "use",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "numAll",
|
||||
align: "left",
|
||||
label: "จำนวนยื่นขอลา (วัน)",
|
||||
sortable: true,
|
||||
field: "numAll",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "numDone",
|
||||
align: "left",
|
||||
label: "จำนวนที่อนุมัติ (วัน)",
|
||||
sortable: true,
|
||||
field: "numDone",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "numNot",
|
||||
align: "left",
|
||||
label: "จำนวนที่ไม่อนุมัติ (วัน)",
|
||||
sortable: true,
|
||||
field: "numNot",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "numCancel",
|
||||
align: "left",
|
||||
label: "จำนวนที่ยกเลิก (วัน)",
|
||||
sortable: true,
|
||||
field: "numCancel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
])
|
||||
const rows = ref<any>([
|
||||
{no:'1',type: 'ลาป่วย' },
|
||||
{no:'2',type: 'ลากิจส่วนตัว' },
|
||||
{no:'3',type: 'ลาคลอดบุตร' },
|
||||
{no:'4',type: 'ลาช่วยเหลือภริยาที่คลอดบุตร' },
|
||||
{no:'5',type: 'ลาพักผ่อน' },
|
||||
{no:'6',type: 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ' },
|
||||
{no:'7',type: 'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล' },
|
||||
{no:'8',type: 'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน' },
|
||||
{no:'9',type: 'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ' },
|
||||
{no:'10',type: 'ลาติดตามคู่สมรส' },
|
||||
{no:'11',type: 'ลาฟื้นฟูสมรรถภาพด้านอาชีพ' }
|
||||
])
|
||||
const pagination = ref({rowsPerPage: 11})
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.borderTop{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue