เพิ่ม ui หน้ารายการลา
This commit is contained in:
Tanyalak
parent
7f0e41ff31
commit
060be9b843
12 changed files with 938 additions and 16 deletions
230
src/modules/05_leave/views/Main.vue
Normal file
230
src/modules/05_leave/views/Main.vue
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
<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-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-9 col-md-9 row">
|
||||
<q-card bordered class="q-pa-md col-12">
|
||||
<div class="row col-12">
|
||||
<div class="row items-center">
|
||||
<!-- filter เลือกเดือนปี -->
|
||||
<datepicker
|
||||
v-model="dateMonth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
v-if="currentTab === 'calendar'"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
style="width: 130px"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<!-- filter เลือกปี -->
|
||||
<datepicker
|
||||
v-model="dateYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
v-if="currentTab === 'list'"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:model-value="dateYear + 543"
|
||||
dense
|
||||
outlined
|
||||
style="width: 100px"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="q-ml-sm">
|
||||
<!-- icon เพิ่มวันหยุด -->
|
||||
<q-btn round dense flat size="13px" class="q-px-sm">
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
size="22px"
|
||||
color="primary"
|
||||
/>
|
||||
<q-tooltip>เพิ่มวันหยุด</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="justify-center row items-center">
|
||||
<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
|
||||
<q-tabs
|
||||
v-model="currentTab"
|
||||
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="currentTab = 'calendar'"
|
||||
:color="currentTab == '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="currentTab = 'list'"
|
||||
:color="currentTab == 'list' ? 'primary' : 'grey-6'"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<q-tooltip>รายการ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 ">
|
||||
<subCalendarComponent v-if="currentTab === 'calendar'"/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 ">
|
||||
<subListCalendarComponent v-if="currentTab === 'list'" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3 row">
|
||||
<q-card bordered class="col-12 row caedNone">
|
||||
<div class="col-12 row">
|
||||
<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-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">
|
||||
<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>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
import { defineComponent, onMounted } from "@vue/runtime-core";
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue";
|
||||
import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type {
|
||||
DataDateMonthObject
|
||||
} from "@/modules/05_leave/interface/request/Calendar.ts";
|
||||
|
||||
const router = useRouter();
|
||||
const currentTab = ref<string>("calendar"); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
|
||||
const dateMonth = ref<number>(new Date().getFullYear());
|
||||
const dateYear = ref<number>(new Date().getFullYear());
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { monthYear2Thai} = mixin;
|
||||
/**
|
||||
* แปลง ปีและเดือนเป็นภาษาไทย
|
||||
* @param val datepicker แบบเลือกปีและเดือน
|
||||
*/
|
||||
const monthYearThai = (val: DataDateMonthObject) => {
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
};
|
||||
|
||||
const value = ref(90);
|
||||
const itemPie = ref([
|
||||
{text: 'ลาป่วย', color: 'text-pink-5', value: 90, all: '10', use: '9', remain: '1'},
|
||||
{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'}
|
||||
])
|
||||
</script>
|
||||
<style>
|
||||
.borderTop{
|
||||
border-top: 1px solid #EDEDED ;
|
||||
border-bottom:1px solid #EDEDED ;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue