ปรับ ui แก้ไขตารางประวัติ
This commit is contained in:
AnandaTon
parent
090951c776
commit
e4e4b1881f
1 changed files with 320 additions and 386 deletions
|
|
@ -1,431 +1,365 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { ref, onMounted } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter } from "vue-router"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { QTableProps } from "quasar"
|
||||
|
||||
import CalendarView from "@/modules/05_leave/components/Calendar.vue";
|
||||
import ListView from "@/modules/05_leave/components/ListCalendar.vue";
|
||||
import CalendarView from "@/modules/05_leave/components/Calendar.vue"
|
||||
import ListView from "@/modules/05_leave/components/ListCalendar.vue"
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const leaveStore = useLeaveStore();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
const mixin = useCounterMixin()
|
||||
const leaveStore = useLeaveStore()
|
||||
const { showLoader, hideLoader, messageError } = mixin
|
||||
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
|
||||
const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
|
||||
const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"])
|
||||
|
||||
const itemPie = ref<any>([]);
|
||||
const itemPie = ref<any>([])
|
||||
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: "leaveTypeName",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveLimit",
|
||||
align: "left",
|
||||
label: "โควตาวันลา",
|
||||
sortable: true,
|
||||
field: "leaveLimit",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveExtend",
|
||||
align: "left",
|
||||
label: "ทดวันลา",
|
||||
sortable: true,
|
||||
field: "leaveExtend",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leavePercent",
|
||||
align: "left",
|
||||
label: "ใช้ไป (%)",
|
||||
sortable: true,
|
||||
field: "leavePercent",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveCountSend",
|
||||
align: "left",
|
||||
label: "จำนวนยื่นขอลา (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountSend",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveCountApprove",
|
||||
align: "left",
|
||||
label: "จำนวนที่อนุมัติ (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountApprove",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveCountReject",
|
||||
align: "left",
|
||||
label: "จำนวนที่ไม่อนุมัติ (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountReject",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveCountDelete",
|
||||
align: "left",
|
||||
label: "จำนวนที่ยกเลิก (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountDelete",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
]);
|
||||
const row = ref<any>([]);
|
||||
const pagination = ref({ rowsPerPage: 10 });
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:5%;",
|
||||
},
|
||||
{
|
||||
name: "leaveTypeName",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveLimit",
|
||||
align: "left",
|
||||
label: "โควตาวันลา",
|
||||
sortable: true,
|
||||
field: "leaveLimit",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveExtend",
|
||||
align: "left",
|
||||
label: "วันลาสะสม",
|
||||
sortable: true,
|
||||
field: "leaveExtend",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
|
||||
{
|
||||
name: "leaveCountSend",
|
||||
align: "left",
|
||||
label: "จำนวนยื่นขอลา (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountSend",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveCountApprove",
|
||||
align: "left",
|
||||
label: "จำนวนที่อนุมัติ (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountApprove",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveCountReject",
|
||||
align: "left",
|
||||
label: "จำนวนที่ไม่อนุมัติ (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountReject",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "leaveCountDelete",
|
||||
align: "left",
|
||||
label: "จำนวนที่ยกเลิก (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveCountDelete",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
])
|
||||
const row = ref<any>([])
|
||||
const pagination = ref({ rowsPerPage: 15 })
|
||||
|
||||
/** function เรียกข้อมูลตารางสถิติการลา*/
|
||||
async function fetchStatsTable() {
|
||||
// modalStatsTable.value = true;
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveStats())
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
const stat = filterLeaveType.value.map((e) => {
|
||||
return data
|
||||
.filter((el: any) => el.leaveTypeName === e)
|
||||
.map((el: any) => ({
|
||||
text: el.leaveTypeName,
|
||||
color:
|
||||
el.leaveTypeName === "ลาป่วย"
|
||||
? "text-pink-5"
|
||||
: el.leaveTypeName === "ลากิจส่วนตัว"
|
||||
? "text-deep-purple"
|
||||
: "text-indigo",
|
||||
value: el.leavePercent,
|
||||
all: el.leaveLimit,
|
||||
use: el.leaveCountApprove,
|
||||
remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
|
||||
}));
|
||||
});
|
||||
stat.forEach((item) => itemPie.value.push(...item));
|
||||
row.value = data.map((e: any) => ({
|
||||
leaveTypeName: e.leaveTypeName,
|
||||
leaveLimit: e.leaveLimit,
|
||||
leaveExtend: e.leaveExtend,
|
||||
leavePercent: e.leavePercent,
|
||||
leaveCountSend: e.leaveCountSend,
|
||||
leaveCountApprove: e.leaveCountApprove,
|
||||
leaveCountReject: e.leaveCountReject,
|
||||
leaveCountDelete: e.leaveCountDelete,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
// modalStatsTable.value = true;
|
||||
showLoader()
|
||||
await http
|
||||
.get(config.API.leaveStats())
|
||||
.then(res => {
|
||||
const data = res.data.result
|
||||
console.log(data)
|
||||
const stat = filterLeaveType.value.map(e => {
|
||||
return data
|
||||
.filter((el: any) => el.leaveTypeName === e)
|
||||
.map((el: any) => ({
|
||||
text: el.leaveTypeName,
|
||||
color: el.leaveTypeName === "ลาพักผ่อน" ? "text-pink-5" : el.leaveTypeName === "ลากิจส่วนตัว" ? "text-deep-purple" : "text-indigo",
|
||||
value: el.leavePercent,
|
||||
all: el.leaveLimit,
|
||||
use: el.leaveCountApprove,
|
||||
remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
|
||||
}))
|
||||
})
|
||||
stat.forEach(item => itemPie.value.push(...item))
|
||||
row.value = data.map((e: any) => ({
|
||||
leaveTypeName: e.leaveTypeName,
|
||||
leaveLimit: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveLimit : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
|
||||
leaveExtend: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveExtend : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
|
||||
leavePercent: e.leavePercent,
|
||||
leaveCountSend: e.leaveCountSend,
|
||||
leaveCountApprove: e.leaveCountApprove,
|
||||
leaveCountReject: e.leaveCountReject,
|
||||
leaveCountDelete: e.leaveCountDelete,
|
||||
}))
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
}
|
||||
|
||||
const modalStatsTable = ref<boolean>(false);
|
||||
const modalStatsTable = ref<boolean>(false)
|
||||
function onClickOpenStat() {
|
||||
modalStatsTable.value = true;
|
||||
modalStatsTable.value = true
|
||||
}
|
||||
|
||||
/** function redirectTo ยื่นใบลา*/
|
||||
async function addAbsence() {
|
||||
router.push(`/leave/add`);
|
||||
router.push(`/leave/add`)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchStatsTable();
|
||||
});
|
||||
await fetchStatsTable()
|
||||
})
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
||||
<!-- สถิติการลา -->
|
||||
<div class="col-12 row">
|
||||
<q-card bordered class="col-12 row caedNone">
|
||||
<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"
|
||||
@click="onClickOpenStat"
|
||||
label="ตารางสถิติการลา"
|
||||
/>
|
||||
</q-card>
|
||||
<div
|
||||
bordered
|
||||
class="col-4 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"
|
||||
>
|
||||
<q-knob
|
||||
readonly
|
||||
v-model="item.value"
|
||||
show-value
|
||||
size="70px"
|
||||
:thickness="0.15"
|
||||
track-color="grey-3"
|
||||
:class="`${item.color}`"
|
||||
>
|
||||
<span class="text-subtitle2 text-weight-bold"
|
||||
>{{ item.value }}%</span
|
||||
>
|
||||
</q-knob>
|
||||
<div class="col-12 text-center text-weight-medium q-py-xs">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
<div
|
||||
class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop"
|
||||
>
|
||||
<div class="col-4 column q-pa-xs text-center">
|
||||
<span class="text-weight-bold">{{ item.all }}</span>
|
||||
<span class="text-grey-7 text-caption">ได้รับ</span>
|
||||
</div>
|
||||
<q-separator vertical />
|
||||
<div class="col-4 column q-pa-xs text-center">
|
||||
<span class="text-weight-bold">{{ item.use }}</span>
|
||||
<span class="text-grey-7 text-caption">ใช้ไป</span>
|
||||
</div>
|
||||
<q-separator vertical />
|
||||
<div class="col-4 column q-pa-xs text-center">
|
||||
<span class="text-weight-bold">{{ item.remain }}</span>
|
||||
<span class="text-grey-7 text-caption">คงเหลือ</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
||||
<!-- สถิติการลา -->
|
||||
<div class="col-12 row">
|
||||
<q-card bordered class="col-12 row caedNone">
|
||||
<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" @click="onClickOpenStat" label="ตารางสถิติการลา" />
|
||||
</q-card>
|
||||
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<!-- แสดงปฏิทิน -->
|
||||
<div class="col-12 row">
|
||||
<q-card bordered class="q-pa-md col-12">
|
||||
<div class="row col-12">
|
||||
<div class="row items-center">
|
||||
<div class="q-ml-sm">
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
size="13px"
|
||||
class="q-px-sm"
|
||||
@click="addAbsence"
|
||||
>
|
||||
<q-icon name="mdi-plus" size="22px" color="blue" />
|
||||
<q-tooltip>ยื่นใบลา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="justify-center row items-center">
|
||||
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
|
||||
<q-tabs
|
||||
v-model="leaveStore.tabValue"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
active-color="activetab"
|
||||
class="text-nativetab"
|
||||
inline-label
|
||||
dense
|
||||
>
|
||||
<q-btn
|
||||
name="calendar"
|
||||
round
|
||||
size="12px"
|
||||
flat
|
||||
icon="mdi-calendar-month"
|
||||
@click="leaveStore.tabValue = 'calendar'"
|
||||
:color="
|
||||
leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
|
||||
"
|
||||
class="q-mr-sm"
|
||||
>
|
||||
<q-tooltip>ปฏิทิน</q-tooltip>
|
||||
</q-btn>
|
||||
<q-separator vertical inset />
|
||||
<q-btn
|
||||
name="list"
|
||||
round
|
||||
size="12px"
|
||||
flat
|
||||
icon="mdi-format-list-bulleted"
|
||||
@click="leaveStore.tabValue = 'list'"
|
||||
:color="
|
||||
leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
|
||||
"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<q-tooltip>รายการ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<CalendarView v-if="leaveStore.tabValue === 'calendar'" />
|
||||
</div>
|
||||
<div bordered class="col-6 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
|
||||
<q-card bordered flat class="col-8 row q-pt-md justify-center shadow-0" v-if="item.text === 'ลาพักผ่อน'">
|
||||
<q-knob readonly v-model="item.value" show-value size="70px" :thickness="0.15" track-color="grey-3" :class="`${item.color}`" v-if="item.text === 'ลาพักผ่อน'">
|
||||
<span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
|
||||
</q-knob>
|
||||
<div class="col-12 text-center text-weight-medium q-py-xs">
|
||||
{{ "ลาพักผ่อน" }}
|
||||
</div>
|
||||
</q-card>
|
||||
<q-card bordered flat class="col-4 row justify-center shadow-0" v-if="item.text === 'ลาพักผ่อน'">
|
||||
<div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-right borderTop">
|
||||
<div class="col-12 column q-pa-xs text-center">
|
||||
<span class="text-grey-7 text-caption">ได้รับ</span>
|
||||
<span class="text-weight-bold">{{ item.all }}</span>
|
||||
|
||||
<div class="col-12">
|
||||
<ListView v-if="leaveStore.tabValue === 'list'" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator horizontal />
|
||||
<span class="text-grey-7 text-caption">ใช้ไป</span>
|
||||
<span class="text-weight-bold">{{ item.use }}</span>
|
||||
|
||||
<!-- modal ตารางสถิติการลา -->
|
||||
<q-dialog v-model="modalStatsTable" 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="row"
|
||||
:columns="columns"
|
||||
row-key="leaveTypeName"
|
||||
class="custom-table2 col-12"
|
||||
hide-bottom
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<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-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<q-separator horizontal />
|
||||
<span class="text-grey-7 text-caption">คงเหลือ</span>
|
||||
<span class="text-weight-bold">{{ item.remain }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div bordered class="col-6 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" v-if="item.text === 'ลาป่วย'">
|
||||
<div class="col-4 row q-pa-xs text-center">
|
||||
{{ "ลาป่วย" }}
|
||||
</div>
|
||||
<div class="col-6 row q-pa-xs text-center">
|
||||
<span class="text-weight-bold">{{ item.use }}</span>
|
||||
<span class="text-grey-7 text-caption">ใช้ไป</span>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0" v-if="item.text === 'ลากิจส่วนตัว'">
|
||||
<div class="col-4 row q-pa-xs text-center">
|
||||
{{ "ลากิจส่วนตัว" }}
|
||||
</div>
|
||||
<div class="col-6 row q-pa-xs text-center">
|
||||
<span class="text-weight-bold">{{ item.use }}</span>
|
||||
<span class="text-grey-7 text-caption">ใช้ไป</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr></template
|
||||
></q-table
|
||||
>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<!-- แสดงปฏิทิน -->
|
||||
<div class="col-12 row">
|
||||
<q-card bordered class="q-pa-md col-12">
|
||||
<div class="row col-12">
|
||||
<div class="row items-center">
|
||||
<div class="q-ml-sm">
|
||||
<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
|
||||
<q-icon name="mdi-plus" size="22px" color="blue" />
|
||||
<q-tooltip>ยื่นใบลา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="justify-center row items-center">
|
||||
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
|
||||
<q-tabs v-model="leaveStore.tabValue" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
|
||||
<q-btn
|
||||
name="calendar"
|
||||
round
|
||||
size="12px"
|
||||
flat
|
||||
icon="mdi-calendar-month"
|
||||
@click="leaveStore.tabValue = 'calendar'"
|
||||
:color="leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'"
|
||||
class="q-mr-sm"
|
||||
>
|
||||
<q-tooltip>ปฏิทิน</q-tooltip>
|
||||
</q-btn>
|
||||
<q-separator vertical inset />
|
||||
<q-btn
|
||||
name="list"
|
||||
round
|
||||
size="12px"
|
||||
flat
|
||||
icon="mdi-format-list-bulleted"
|
||||
@click="leaveStore.tabValue = 'list'"
|
||||
:color="leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<q-tooltip>รายการ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<CalendarView v-if="leaveStore.tabValue === 'calendar'" />
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ListView v-if="leaveStore.tabValue === 'list'" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal ตารางสถิติการลา -->
|
||||
<q-dialog v-model="modalStatsTable" 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="row" :columns="columns" row-key="leaveTypeName" class="custom-table2 col-12" hide-bottom v-model:pagination="pagination">
|
||||
<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-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<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>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr></template
|
||||
></q-table
|
||||
>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.borderTop {
|
||||
border-top: 1px solid #ededed;
|
||||
border-bottom: 1px solid #ededed;
|
||||
border-top: 1px solid #ededed;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.custom-table2 {
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue