waruneeauy
a72b3afa70
All checks were successful
Build & Deploy on Dev / build (push) Successful in 3m10s
79 lines
2.3 KiB
Vue
79 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, toRefs } from "vue";
|
|
|
|
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
|
|
import { checkPermission } from "@/utils/permissions";
|
|
import { useRoute } from "vue-router";
|
|
|
|
/** import Components */
|
|
import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
|
|
import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
|
|
import Tab3 from "@/modules/09_leave/components/02_WorkList/Tab3_Processed_Late.vue";
|
|
import Tab4_Pending from "@/modules/09_leave/components/02_WorkList/Tab4_Pending.vue";
|
|
|
|
const stores = useWorklistDataStore();
|
|
const route = useRoute();
|
|
const { tabs } = toRefs(stores);
|
|
|
|
const isPermissionTab3 = computed(() => {
|
|
return (
|
|
checkPermission(route)?.attrOwnership === "OWNER" ||
|
|
(checkPermission(route)?.attrOwnership === "STAFF" &&
|
|
checkPermission(route)?.attrIsUpdate)
|
|
);
|
|
});
|
|
|
|
const isPermissionTab4 = computed(() => {
|
|
return checkPermission(route)?.attrOwnership === "OWNER";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row">
|
|
<span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
|
|
</div>
|
|
|
|
<q-card bordered flat>
|
|
<q-tabs
|
|
v-model="tabs"
|
|
dense
|
|
align="left"
|
|
inline-label
|
|
class="rounded-borders"
|
|
indicator-color="primary"
|
|
active-bg-color="teal-1"
|
|
active-class="text-primary"
|
|
>
|
|
<q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
|
|
<q-tab name="2" label="รายการลงเวลา" />
|
|
<q-tab
|
|
v-if="isPermissionTab3"
|
|
name="3"
|
|
label="ประมวลผลการขาดราชการ/มาสาย"
|
|
/>
|
|
<q-tab v-if="isPermissionTab4" name="4" label="รอประมวลผล" />
|
|
<!-- เพิ่มแท็บใหม่ -->
|
|
</q-tabs>
|
|
|
|
<q-separator />
|
|
<div class="q-pa-sm">
|
|
<q-tab-panels v-model="tabs" animated>
|
|
<q-tab-panel name="1">
|
|
<Tab1 />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="2">
|
|
<Tab2 />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="3">
|
|
<Tab3 />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="4">
|
|
<Tab4_Pending />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|