hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ ui แก้ไขตารางประวัติ

Browse source
This commit is contained in:
AnandaTon 2023-12-18 11:10:28 +07:00
parent 090951c776
commit e4e4b1881f
1 changed files with 320 additions and 386 deletions
Download patch file Download diff file Expand all files Collapse all files

238
src/modules/05_leave/views/Main.vue
View file

@ -1,28 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"; import { useQuasar } from "quasar"
import { useRouter } from "vue-router"; import { useRouter } from "vue-router"
import http from "@/plugins/http"; import http from "@/plugins/http"
import config from "@/app.config"; 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 CalendarView from "@/modules/05_leave/components/Calendar.vue"
import ListView from "@/modules/05_leave/components/ListCalendar.vue"; import ListView from "@/modules/05_leave/components/ListCalendar.vue"
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"; import { useLeaveStore } from "@/modules/05_leave/store"
const mixin = useCounterMixin(); const mixin = useCounterMixin()
const leaveStore = useLeaveStore(); const leaveStore = useLeaveStore()
const { showLoader, hideLoader, messageError } = mixin; const { showLoader, hideLoader, messageError } = mixin
const router = useRouter(); const router = useRouter()
const $q = useQuasar(); const $q = useQuasar()
const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]); const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"])
const itemPie = ref<any>([]); const itemPie = ref<any>([])
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -54,21 +54,13 @@ const columns = ref<QTableProps["columns"]>([
{ {
name: "leaveExtend", name: "leaveExtend",
align: "left", align: "left",
label: "ทดวันลา", label: "วันลาสะสม",
sortable: true, sortable: true,
field: "leaveExtend", field: "leaveExtend",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", 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", name: "leaveCountSend",
align: "left", align: "left",
@ -105,85 +97,71 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
]); ])
const row = ref<any>([]); const row = ref<any>([])
const pagination = ref({ rowsPerPage: 10 }); const pagination = ref({ rowsPerPage: 15 })
/** function เรียกข้อมูลตารางสถิติการลา*/ /** function เรียกข้อมูลตารางสถิติการลา*/
async function fetchStatsTable() { async function fetchStatsTable() {
// modalStatsTable.value = true; // modalStatsTable.value = true;
showLoader(); showLoader()
await http await http
.get(config.API.leaveStats()) .get(config.API.leaveStats())
.then((res) => { .then(res => {
const data = res.data.result; const data = res.data.result
console.log(data); console.log(data)
const stat = filterLeaveType.value.map((e) => { const stat = filterLeaveType.value.map(e => {
return data return data
.filter((el: any) => el.leaveTypeName === e) .filter((el: any) => el.leaveTypeName === e)
.map((el: any) => ({ .map((el: any) => ({
text: el.leaveTypeName, text: el.leaveTypeName,
color: color: el.leaveTypeName === "ลาพักผ่อน" ? "text-pink-5" : el.leaveTypeName === "ลากิจส่วนตัว" ? "text-deep-purple" : "text-indigo",
el.leaveTypeName === "ลาป่วย"
? "text-pink-5"
: el.leaveTypeName === "ลากิจส่วนตัว"
? "text-deep-purple"
: "text-indigo",
value: el.leavePercent, value: el.leavePercent,
all: el.leaveLimit, all: el.leaveLimit,
use: el.leaveCountApprove, use: el.leaveCountApprove,
remain: Number(el.leaveLimit) - Number(el.leaveCountApprove), remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
})); }))
}); })
stat.forEach((item) => itemPie.value.push(...item)); stat.forEach(item => itemPie.value.push(...item))
row.value = data.map((e: any) => ({ row.value = data.map((e: any) => ({
leaveTypeName: e.leaveTypeName, leaveTypeName: e.leaveTypeName,
leaveLimit: e.leaveLimit, leaveLimit: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveLimit : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
leaveExtend: e.leaveExtend, leaveExtend: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveExtend : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
leavePercent: e.leavePercent, leavePercent: e.leavePercent,
leaveCountSend: e.leaveCountSend, leaveCountSend: e.leaveCountSend,
leaveCountApprove: e.leaveCountApprove, leaveCountApprove: e.leaveCountApprove,
leaveCountReject: e.leaveCountReject, leaveCountReject: e.leaveCountReject,
leaveCountDelete: e.leaveCountDelete, leaveCountDelete: e.leaveCountDelete,
})); }))
}) })
.catch((err) => { .catch(err => {
messageError($q, err); messageError($q, err)
}) })
.finally(() => { .finally(() => {
hideLoader(); hideLoader()
}); })
} }
const modalStatsTable = ref<boolean>(false); const modalStatsTable = ref<boolean>(false)
function onClickOpenStat() { function onClickOpenStat() {
modalStatsTable.value = true; modalStatsTable.value = true
} }
/** function redirectTo ยื่นใบลา*/ /** function redirectTo ยื่นใบลา*/
async function addAbsence() { async function addAbsence() {
router.push(`/leave/add`); router.push(`/leave/add`)
} }
onMounted(async () => { onMounted(async () => {
await fetchStatsTable(); await fetchStatsTable()
}); })
</script> </script>
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11"> <div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center"> <div class="toptitle text-white col-12 row items-center">
<q-btn <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
<div>รายการลา</div> <div>รายการลา</div>
</div> </div>
</div> </div>
@ -195,59 +173,52 @@ onMounted(async () => {
<q-card class="row col-12 items-center q-px-md q-py-sm"> <q-card class="row col-12 items-center q-px-md q-py-sm">
<div class="text-weight-bold">สถิติการลา</div> <div class="text-weight-bold">สถิติการลา</div>
<q-space /> <q-space />
<q-btn <q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="onClickOpenStat" label="ตารางสถิติการลา" />
dense
flat
class="text-blue"
icon="mdi-chart-line-variant"
@click="onClickOpenStat"
label="ตารางสถิติการลา"
/>
</q-card> </q-card>
<div
bordered <div bordered class="col-6 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
class="col-4 row justify-center q-px-md q-pb-md" <q-card bordered flat class="col-8 row q-pt-md justify-center shadow-0" v-if="item.text === 'ลาพักผ่อน'">
v-for="(item, index) in itemPie" <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 === 'ลาพักผ่อน'">
:key="index" <span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
>
<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> </q-knob>
<div class="col-12 text-center text-weight-medium q-py-xs"> <div class="col-12 text-center text-weight-medium q-py-xs">
{{ item.text }} {{ "ลาพักผ่อน" }}
</div> </div>
<div </q-card>
class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop" <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-4 column q-pa-xs text-center"> <div class="col-12 column q-pa-xs text-center">
<span class="text-weight-bold">{{ item.all }}</span>
<span class="text-grey-7 text-caption">ได้รับ</span> <span class="text-grey-7 text-caption">ได้รับ</span>
<span class="text-weight-bold">{{ item.all }}</span>
<q-separator horizontal />
<span class="text-grey-7 text-caption">ใช้ไป</span>
<span class="text-weight-bold">{{ item.use }}</span>
<q-separator horizontal />
<span class="text-grey-7 text-caption">คงเหลือ</span>
<span class="text-weight-bold">{{ item.remain }}</span>
</div> </div>
<q-separator vertical /> </div>
<div class="col-4 column q-pa-xs text-center"> </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-weight-bold">{{ item.use }}</span>
<span class="text-grey-7 text-caption">ใช้ไป</span> <span class="text-grey-7 text-caption">ใช้ไป</span>
</div> </div>
<q-separator vertical /> </q-card>
<div class="col-4 column q-pa-xs text-center"> <q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0" v-if="item.text === 'ลากิจส่วนตัว'">
<span class="text-weight-bold">{{ item.remain }}</span> <div class="col-4 row q-pa-xs text-center">
<span class="text-grey-7 text-caption">คงเหลือ</span> {{ "ลากิจส่วนตัว" }}
</div> </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> </div>
</q-card> </q-card>
</div> </div>
@ -261,14 +232,7 @@ onMounted(async () => {
<div class="row col-12"> <div class="row col-12">
<div class="row items-center"> <div class="row items-center">
<div class="q-ml-sm"> <div class="q-ml-sm">
<q-btn <q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
round
dense
flat
size="13px"
class="q-px-sm"
@click="addAbsence"
>
<q-icon name="mdi-plus" size="22px" color="blue" /> <q-icon name="mdi-plus" size="22px" color="blue" />
<q-tooltip>ยื่นใบลา</q-tooltip> <q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn> </q-btn>
@ -277,15 +241,7 @@ onMounted(async () => {
<q-space /> <q-space />
<div class="justify-center row items-center"> <div class="justify-center row items-center">
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ --> <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
<q-tabs <q-tabs v-model="leaveStore.tabValue" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
v-model="leaveStore.tabValue"
indicator-color="transparent"
align="left"
active-color="activetab"
class="text-nativetab"
inline-label
dense
>
<q-btn <q-btn
name="calendar" name="calendar"
round round
@ -293,9 +249,7 @@ onMounted(async () => {
flat flat
icon="mdi-calendar-month" icon="mdi-calendar-month"
@click="leaveStore.tabValue = 'calendar'" @click="leaveStore.tabValue = 'calendar'"
:color=" :color="leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'"
leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
"
class="q-mr-sm" class="q-mr-sm"
> >
<q-tooltip>ปฏิทิน</q-tooltip> <q-tooltip>ปฏิทิน</q-tooltip>
@ -308,9 +262,7 @@ onMounted(async () => {
flat flat
icon="mdi-format-list-bulleted" icon="mdi-format-list-bulleted"
@click="leaveStore.tabValue = 'list'" @click="leaveStore.tabValue = 'list'"
:color=" :color="leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'"
leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
"
class="q-ml-sm" class="q-ml-sm"
> >
<q-tooltip>รายการ</q-tooltip> <q-tooltip>รายการ</q-tooltip>
@ -337,28 +289,11 @@ onMounted(async () => {
<q-card-section class="row items-center q-pa-sm"> <q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">ตารางสถิติการลา</div> <div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
<q-space /> <q-space />
<q-btn <q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-section class="q-p-md row"> <q-card-section class="q-p-md row">
<q-table <q-table flat bordered dense :rows="row" :columns="columns" row-key="leaveTypeName" class="custom-table2 col-12" hide-bottom v-model:pagination="pagination">
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"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -372,7 +307,6 @@ onMounted(async () => {
<div v-if="col.name == 'no'"> <div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</div> </div>
<div v-else> <div v-else>
{{ col.value }} {{ col.value }}
</div> </div>