ปรับ ui สถิติการลา
This commit is contained in:
AnandaTon
parent
fbbd68570a
commit
1c5a865d93
2 changed files with 100 additions and 104 deletions
|
|
@ -38,4 +38,13 @@ interface TypeLeave {
|
|||
name: string
|
||||
}
|
||||
|
||||
export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave }
|
||||
interface LeaveItem {
|
||||
text: string
|
||||
color: string
|
||||
value: number
|
||||
all: number
|
||||
use: number
|
||||
remain: number
|
||||
}
|
||||
|
||||
export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave, LeaveItem }
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue"
|
||||
import { ref, onMounted, computed } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter } from "vue-router"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
|
||||
import type { LeaveItem } from "@/modules/05_leave/interface/index/main"
|
||||
import type { QTableProps } from "quasar"
|
||||
|
||||
import CalendarView from "@/modules/05_leave/components/Calendar.vue"
|
||||
|
|
@ -22,7 +22,7 @@ const $q = useQuasar()
|
|||
|
||||
const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"])
|
||||
|
||||
const itemPie = ref<any>([])
|
||||
const itemPie = ref<LeaveItem[]>([])
|
||||
const knob = ref(80)
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -124,6 +124,7 @@ async function fetchStatsTable() {
|
|||
}))
|
||||
})
|
||||
stat.forEach(item => itemPie.value.push(...item))
|
||||
|
||||
row.value = data.map((e: any) => ({
|
||||
leaveTypeName: e.leaveTypeName,
|
||||
leaveLimit: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveLimit : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
|
||||
|
|
@ -153,6 +154,18 @@ async function addAbsence() {
|
|||
router.push(`/leave/add`)
|
||||
}
|
||||
|
||||
/**
|
||||
* find ข้อมูลจาก api
|
||||
*/
|
||||
const filteredItems = computed(() => {
|
||||
return itemPie.value.filter(item => item.text === "ลาพักผ่อน")
|
||||
})
|
||||
const filteredSick = computed(() => {
|
||||
return itemPie.value.filter(item => item.text === "ลาป่วย")
|
||||
})
|
||||
const filteredBusi = computed(() => {
|
||||
return itemPie.value.filter(item => item.text === "ลากิจส่วนตัว")
|
||||
})
|
||||
onMounted(async () => {
|
||||
await fetchStatsTable()
|
||||
})
|
||||
|
|
@ -167,106 +180,80 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 row">
|
||||
<!-- สถิติการลา -->
|
||||
<div class="col-12 row q-pb-sm">
|
||||
<q-card bordered class="col-12 row caedNone">
|
||||
<div 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="ตารางสถิติการลา"
|
||||
/>
|
||||
</div>
|
||||
<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-6" >
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="col-12 row shadow-0 no-wrap">
|
||||
<div class="col-xs-12 col-sm-8 row justify-center q-py-md" >
|
||||
<div class="col-12 row items-center justify-center q-pb-sm">
|
||||
<q-knob
|
||||
readonly
|
||||
v-model="knob"
|
||||
show-value
|
||||
size="60px"
|
||||
:thickness="0.15"
|
||||
track-color="grey-3"
|
||||
class="text-indigo"
|
||||
>
|
||||
<span class="text-subtitle2 text-weight-bold"
|
||||
>50 %</span
|
||||
>
|
||||
</q-knob>
|
||||
</div>
|
||||
<div class="col-12 text-center text-weight-medium">
|
||||
ลาพักผ่อน
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gt-xs"><q-separator vertical /></div>
|
||||
<div class="col-xs-12 col-sm-4 gt-xs row">
|
||||
<div
|
||||
class="col-12 row text-dark text-body2 items-center"
|
||||
>
|
||||
<div class="col-12 row q-pa-xs q-px-md row">
|
||||
<span class="text-grey-7 col-6">ได้รับ</span>
|
||||
<span class="text-weight-bold">10</span>
|
||||
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 row q-pa-xs q-px-md">
|
||||
<span class="text-grey-7 col-6">ใช้ไป</span>
|
||||
<span class="text-weight-bold">5</span>
|
||||
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 row q-pa-xs q-px-md">
|
||||
<span class="text-grey-7 col-6">คงเหลือ</span>
|
||||
<span class="text-weight-bold">5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 row q-col-gutter-sm" >
|
||||
<div class="col-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="shadow-0 col-12 fit row items-center q-px-lg"
|
||||
>
|
||||
<div class="text-subtitle2 col-4">ลาป่วย</div>
|
||||
<div class="text-subtitle2 col-8">
|
||||
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
|
||||
<span class="text-weight-bold">5</span>
|
||||
<span class="text-grey-7 q-pl-md">ลา</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="shadow-0 col-12 fit row items-center q-px-lg"
|
||||
>
|
||||
<div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
|
||||
<div class="text-subtitle2 col-8">
|
||||
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
|
||||
<span class="text-weight-bold">5</span>
|
||||
<span class="text-grey-7 q-pl-md">ลา</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 row">
|
||||
<!-- สถิติการลา -->
|
||||
<div class="col-12 row q-pb-sm">
|
||||
<q-card bordered class="col-12 row caedNone">
|
||||
<div 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="ตารางสถิติการลา" />
|
||||
</div>
|
||||
<div bordered class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredItems" :key="item.text">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<q-card bordered flat class="col-12 row shadow-0 no-wrap" v-if="item.text === 'ลาพักผ่อน'">
|
||||
<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
|
||||
<div class="col-12 row items-center justify-center q-pb-sm">
|
||||
<q-knob readonly v-model="knob" show-value size="60px" :thickness="0.15" track-color="grey-3" class="text-indigo">
|
||||
<span class="text-subtitle2 text-weight-bold">{{ item.value }}</span>
|
||||
</q-knob>
|
||||
</div>
|
||||
<div class="col-12 text-center text-weight-medium">ลาพักผ่อน</div>
|
||||
</div>
|
||||
<div class="row gt-xs"><q-separator vertical /></div>
|
||||
<div class="col-xs-12 col-sm-4 gt-xs row">
|
||||
<div class="col-12 row text-dark text-body2 items-center">
|
||||
<div class="col-12 row q-pa-xs q-px-md row">
|
||||
<span class="text-grey-7 col-6">ได้รับ</span>
|
||||
<span class="text-weight-bold">{{ item.all }}</span>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 row q-pa-xs q-px-md">
|
||||
<span class="text-grey-7 col-6">ใช้ไป</span>
|
||||
<span class="text-weight-bold">{{ item.use }}</span>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 row q-pa-xs q-px-md">
|
||||
<span class="text-grey-7 col-6">คงเหลือ</span>
|
||||
<span class="text-weight-bold">{{ item.remain }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 row">
|
||||
<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredSick" :key="item.text">
|
||||
<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
|
||||
<div class="col-12 row" v-if="item.text === 'ลาป่วย'">
|
||||
<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
|
||||
<div class="text-subtitle2 col-4">ลาป่วย</div>
|
||||
<div class="text-subtitle2 col-8">
|
||||
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
|
||||
<span class="text-weight-bold">{{ item.use }}</span>
|
||||
<span class="text-grey-7 q-pl-md">ลา</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredBusi" :key="item.text">
|
||||
<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
|
||||
<div class="col-12 row" v-if="item.text === 'ลากิจส่วนตัว'">
|
||||
<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
|
||||
<div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
|
||||
<div class="text-subtitle2 col-8">
|
||||
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
|
||||
<span class="text-weight-bold">{{ item.use }}</span>
|
||||
<span class="text-grey-7 q-pl-md">ลา</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<!-- แสดงปฏิทิน -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue