แก้ไขตาม task
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
bf8fb777cf
commit
90a47d43ad
26 changed files with 2652 additions and 228 deletions
192
src/modules/09_leave/components/1_Work/DialogDetail.vue
Normal file
192
src/modules/09_leave/components/1_Work/DialogDetail.vue
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
},
|
||||
colse: {
|
||||
type: Function,
|
||||
},
|
||||
});
|
||||
//
|
||||
const titlename = ref<string>("");
|
||||
const timeIn = ref<string>("");
|
||||
const timeOut = ref<string>("");
|
||||
const coordinatesIn = ref<string>("");
|
||||
const coordinatesOut = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
watch(props, () => {
|
||||
if (props.modal) {
|
||||
if (props.detail) {
|
||||
console.log(props.detail);
|
||||
let data = props.detail;
|
||||
titlename.value = data.fullName;
|
||||
timeIn.value = data.timeIn;
|
||||
timeOut.value = data.timeOut;
|
||||
coordinatesIn.value = data.coordinatesIn;
|
||||
coordinatesOut.value = data.coordinatesOut;
|
||||
status.value = data.status;
|
||||
}
|
||||
}
|
||||
});
|
||||
function colsePopup() {
|
||||
props.colse ? props.colse() : false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal">
|
||||
<q-card style="width: 950px; max-width: 80vw">
|
||||
<q-card-section>
|
||||
<q-toolbar>
|
||||
<q-toolbar-title>
|
||||
รายละเอียดการลงเวลาของ
|
||||
<span class="text-primary">{{ titlename }}</span>
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
@click="colsePopup"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none">
|
||||
<div class="q-pa-md">
|
||||
<q-banner
|
||||
inline-actions
|
||||
rounded
|
||||
class="bg-grey-2"
|
||||
style="border: 2px solid rgb(215, 212, 212)"
|
||||
>
|
||||
<div class="q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>ชื่อ-นามสกุล</q-item-label>
|
||||
<q-item-label>{{ titlename }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>วันที่เข้างาน</q-item-label>
|
||||
<q-item-label>05 ต.ค. 56</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>สถานะ</q-item-label>
|
||||
<q-item-label>{{ status }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
><q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil"
|
||||
>
|
||||
<q-tooltip>แก้ไข</q-tooltip>
|
||||
</q-btn></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-banner>
|
||||
<div class="row q-gutter-md q-mt-md">
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>เวลาเข้างาน</q-item-section
|
||||
>
|
||||
<q-item-section> {{ timeIn }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">พิกัด</q-item-section>
|
||||
<q-item-section> {{ coordinatesIn }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section top class="text-grey-5"
|
||||
>รูปภาพ</q-item-section
|
||||
>
|
||||
<q-item-section>
|
||||
<q-img src="https://picsum.photos/500/300" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>หมายเหตุ</q-item-section
|
||||
>
|
||||
<q-item-section> - </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>เวลาออกงาน</q-item-section
|
||||
>
|
||||
<q-item-section> {{ timeOut }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">พิกัด</q-item-section>
|
||||
<q-item-section> {{ coordinatesOut }} </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section top class="text-grey-5"
|
||||
>รูปภาพ</q-item-section
|
||||
>
|
||||
<q-item-section>
|
||||
<q-img src="https://picsum.photos/500/300" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>หมายเหตุ</q-item-section
|
||||
>
|
||||
<q-item-section> - </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
320
src/modules/09_leave/components/1_Work/TableList.vue
Normal file
320
src/modules/09_leave/components/1_Work/TableList.vue
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
|
||||
|
||||
//importComponents
|
||||
import DialogDetail from "./DialogDetail.vue";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const workStore = useWorklistDataStore();
|
||||
|
||||
const { date2Thai } = mixin;
|
||||
const { optionStatus, searchDataFn } = workStore;
|
||||
onMounted(() => {
|
||||
optionStatusfn.value = optionStatus;
|
||||
});
|
||||
|
||||
//ข้อมูล Table
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "timeIn",
|
||||
align: "left",
|
||||
label: "เวลาเข้างาน",
|
||||
sortable: true,
|
||||
field: "timeIn",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "coordinatesIn",
|
||||
align: "left",
|
||||
label: "พิกัด",
|
||||
sortable: true,
|
||||
field: "coordinatesIn",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "timeOut",
|
||||
align: "left",
|
||||
label: "เวลาออกงาน",
|
||||
sortable: true,
|
||||
field: "timeOut",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "coordinatesOut",
|
||||
align: "left",
|
||||
label: "พิกัด",
|
||||
sortable: true,
|
||||
field: "coordinatesOut",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"fullName",
|
||||
"timeIn",
|
||||
"coordinatesIn",
|
||||
"timeOut",
|
||||
"coordinatesOut",
|
||||
"status",
|
||||
]);
|
||||
//DialogDetail
|
||||
const modal = ref<boolean>(false);
|
||||
const dataDetail = ref<any>([]);
|
||||
function clickDetail(data: any) {
|
||||
modal.value = true;
|
||||
dataDetail.value = data;
|
||||
}
|
||||
function colseDeyail() {
|
||||
modal.value = false;
|
||||
}
|
||||
//filter Option
|
||||
const optionStatusfn = ref<any>([]);
|
||||
function filterFn(val: string, update: any) {
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
optionStatusfn.value = optionStatus;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
optionStatusfn.value = optionStatus.filter(
|
||||
(e: any) => e.name.search(val) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//pagination
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="workStore.selectDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
:model-value="
|
||||
workStore.selectDate !== null
|
||||
? date2Thai(workStore.selectDate)
|
||||
: null
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer text-primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="workStore.selectStatus"
|
||||
:options="optionStatusfn"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="filterFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="workStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="workStore.rows"
|
||||
:filter="workStore.filterTable"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
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 key="no" :props="props" @click.prevent="clickDetail(props.row)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="fullName"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.fullName }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="timeIn"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.timeIn }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="coordinatesIn"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latIn + " " + props.row.longIn
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-td>
|
||||
<q-td
|
||||
key="timeOut"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.timeOut }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="coordinatesOut"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latOut + " " + props.row.longOut
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-td>
|
||||
<q-td
|
||||
key="status"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.status }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<DialogDetail :modal="modal" :detail="dataDetail" :colse="colseDeyail" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
194
src/modules/09_leave/components/2_Leave/DetailLeave.vue
Normal file
194
src/modules/09_leave/components/2_Leave/DetailLeave.vue
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const paramsId = route.params.id;
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div class="q-mr-xl">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/leave-list`)"
|
||||
/>
|
||||
รายละเอียดการลาของ {{ paramsId }}
|
||||
</div>
|
||||
<div class="q-ml-xl">
|
||||
<q-btn
|
||||
icon="mdi-download"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
icon="mdi-upload"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="blue-10"
|
||||
class="q-mr-sm"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md">
|
||||
<q-banner inline-actions rounded class="bg-grey-2">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section avatar class="text-grey-6"
|
||||
>ประเภทการลา</q-item-section
|
||||
>
|
||||
<q-item-section class="text-primary"> ลาป่วย </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="text-grey-6">
|
||||
ชื่อ - นามสกุล</q-item-section
|
||||
>
|
||||
|
||||
<q-item-section> {{ paramsId }} </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-blue-10">10</div>
|
||||
<div class="text-subtitle2">โควต้าลาป่วย</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
8
|
||||
</div>
|
||||
<div class="text-subtitle2">ลาป่วยไปแล้ว</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">2</div>
|
||||
<div class="text-subtitle2">คงเหลือโควต้าลาป่วย</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-banner>
|
||||
<div class="row q-gutter-md q-mt-md">
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">เขียนที่</q-item-section>
|
||||
<q-item-section> บ้าน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>รับเงินเดือน</q-item-section
|
||||
>
|
||||
<q-item-section> รับเงินเดือน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">เขียนที่</q-item-section>
|
||||
<q-item-section> บ้าน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>รับเงินเดือน</q-item-section
|
||||
>
|
||||
<q-item-section> รับเงินเดือน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
วัน เดือน ปีเริ่มต้น</q-item-section
|
||||
>
|
||||
<q-item-section> 14 ก.ค. 2556 </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
วัน เดือน ปีเริ่มสิ้นสุด</q-item-section
|
||||
>
|
||||
<q-item-section> 15 ก.ค. 2556 </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>จำนวนวันที่ลา</q-item-section
|
||||
>
|
||||
<q-item-section> 1 </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>สถานที่ติดต่อขณะลา</q-item-section
|
||||
>
|
||||
<q-item-section> สถานที่ติดต่อขณะลา </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>หมายเลขที่ติดต่อขณะลา</q-item-section
|
||||
>
|
||||
<q-item-section> หมายเลขที่ติดต่อขณะลา </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>สถานะการพิจารณา</q-item-section
|
||||
>
|
||||
<q-item-section> ขอยกเลิก </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-h5"> เอกสารแบบ</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
ไม่พบเอกสาร</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md q-gutter-md justify-end">
|
||||
<q-btn color="orange-5" label="ไม่อนุมัติ"
|
||||
><q-tooltip>ไม่อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn color="primary" label="อนุมัติ"
|
||||
><q-tooltip>อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped></style>
|
||||
235
src/modules/09_leave/components/2_Leave/TableList.vue
Normal file
235
src/modules/09_leave/components/2_Leave/TableList.vue
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
q
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { date2Thai } = mixin;
|
||||
const { optionYear, searchDataFn, filterOption } = leaveStore;
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "leaveType",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผู้ยื่นใบลา",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "Date",
|
||||
align: "left",
|
||||
label: "วันที่ยืนใบลา",
|
||||
sortable: true,
|
||||
field: "Date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"leaveType",
|
||||
"name",
|
||||
"Date",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectYear"
|
||||
:options="optionYear"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ปีงบประมาณ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectType"
|
||||
:options="leaveStore.optionType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ประเภทการลา"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'type')
|
||||
"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-if="leaveStore.tab == '2'"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectStatus"
|
||||
:options="leaveStore.optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'status')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="leaveStore.rows"
|
||||
:filter="leaveStore.filterTable"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
:loading="leaveStore.loadTable"
|
||||
>
|
||||
<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"
|
||||
@click.prevent="router.push(`/leave/detail/${props.row.name}`)"
|
||||
>
|
||||
<q-td key="no" :props="props"> {{ props.rowIndex + 1 }} </q-td>
|
||||
<q-td key="leaveType" :props="props">
|
||||
{{ props.row.leaveType }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="Date" :props="props">
|
||||
{{ props.row.Date }}
|
||||
</q-td>
|
||||
<q-td key="timeOut" :props="props">
|
||||
{{ props.row.timeOut }}
|
||||
</q-td>
|
||||
<q-td key="status" :props="props">
|
||||
{{ props.row.status }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:loading>
|
||||
<q-inner-loading showing color="primary" />
|
||||
</template>
|
||||
</d-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
7
src/modules/09_leave/interface/index/Main.ts
Normal file
7
src/modules/09_leave/interface/index/Main.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
interface DataOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
export type {
|
||||
DataOption
|
||||
};
|
||||
49
src/modules/09_leave/router.ts
Normal file
49
src/modules/09_leave/router.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue")
|
||||
const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
|
||||
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
|
||||
const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/work-list",
|
||||
name: "/work-list",
|
||||
component: workMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/leave-list",
|
||||
name: "/leave-list",
|
||||
component: leaveMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/leave/detail/:id",
|
||||
name: "/leave/detail",
|
||||
component: leaveDetail,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/statistics-report",
|
||||
name: "/statistics-report",
|
||||
component: reportMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
180
src/modules/09_leave/stores/LeaveStore.ts
Normal file
180
src/modules/09_leave/stores/LeaveStore.ts
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main"
|
||||
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
export const useLeavelistDataStore = defineStore("leave", () => {
|
||||
//TABMENU
|
||||
const tab = ref<string>("1");
|
||||
const amounttab1 = ref<string>("")
|
||||
const amounttab2 = ref<string>("")
|
||||
//ข้อมูลในตาราง
|
||||
const mainData = ref<any>([])
|
||||
const rows = ref<any>([])
|
||||
const loadTable = ref<boolean>(false)
|
||||
async function fecthList(data: any) {
|
||||
let datalist = data.map((e: any) => ({
|
||||
leaveType: e.leaveType,
|
||||
name: e.name,
|
||||
Date: e.Date,
|
||||
status: convertSatatus(e.status)
|
||||
}))
|
||||
tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
const filteramounttab1 = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
amounttab1.value = filteramounttab1.length
|
||||
amounttab2.value = datalist.length
|
||||
await fetchOption()
|
||||
await searchDataFn(selectType.value, selectStatus.value)
|
||||
|
||||
|
||||
}
|
||||
//filter table
|
||||
const selectYear = ref<string>('all')
|
||||
const selectType = ref<string>('all')
|
||||
const selectStatus = ref<string>('all')
|
||||
const optionYear = ref<DataOption[]>([{ id: "all", name: 'ทั้งหมด' }])
|
||||
const optionType = ref<DataOption[]>([])
|
||||
const optionStatus = ref<DataOption[]>([])
|
||||
const optionTypeMain = ref<DataOption[]>([])
|
||||
const optionStatusMain = ref<DataOption[]>([])
|
||||
const filterTable = ref<string>('')
|
||||
function searchDataFn(type: string, status: string) {
|
||||
// selectYear.value = selectYear.value || "all"
|
||||
type = type || "all"
|
||||
status = status || "all"
|
||||
// showLoader()
|
||||
loadTable.value = true
|
||||
if (selectYear.value == "all" && type == "all" && status == "all") {
|
||||
rows.value = mainData.value
|
||||
} else if (selectYear.value !== "all" && type == "all" && status == "all") {
|
||||
console.log("ค้นหาจากปี");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากประเภท");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type)
|
||||
} else if (selectYear.value == "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.status === status)
|
||||
} else if (selectYear.value !== "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากปีและประเภท");
|
||||
} else if (selectYear.value !== "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากปีและสถานะ");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status !== "all") {
|
||||
console.log("ค้นหาจากประเภทและสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type && e.status === status)
|
||||
} else (console.log("ค้นหาจากทั้งหมด"))
|
||||
setTimeout(function () {
|
||||
loadTable.value = false
|
||||
}, 500);
|
||||
|
||||
}
|
||||
function clearFilter() {
|
||||
selectYear.value = "all"
|
||||
selectType.value = "all"
|
||||
selectStatus.value = "all"
|
||||
filterTable.value = ''
|
||||
}
|
||||
|
||||
function fetchOption() {
|
||||
let data = []
|
||||
data = mainData.value
|
||||
const double_leaveType = [
|
||||
...new Set(data.map((item: any) => item.leaveType)),
|
||||
];
|
||||
// หา optionType
|
||||
optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_leaveType.length; i++) {
|
||||
const type = double_leaveType[i - 1];
|
||||
if (typeof type === 'string') {
|
||||
const listtype: DataOption = {
|
||||
id: type,
|
||||
name: type,
|
||||
};
|
||||
optionTypeMain.value.push(listtype)
|
||||
optionType.value = optionTypeMain.value
|
||||
}
|
||||
}
|
||||
// หา optionStatus
|
||||
const double_status = [
|
||||
...new Set(data.map((item: any) => item.status)),
|
||||
];
|
||||
optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_status.length; i++) {
|
||||
const status = double_status[i - 1];
|
||||
if (typeof status === 'string') {
|
||||
const liststatus: DataOption = {
|
||||
id: status,
|
||||
name: status,
|
||||
};
|
||||
optionStatusMain.value.push(liststatus);
|
||||
optionStatus.value = optionStatusMain.value
|
||||
}
|
||||
}
|
||||
}
|
||||
// filter option
|
||||
function filterOption(val: string, update: any, type: string) {
|
||||
let data: DataOption[] = []
|
||||
let filter: DataOption[] = []
|
||||
if (type == "type") {
|
||||
data = optionTypeMain.value
|
||||
} else if (type == "status") {
|
||||
data = optionStatusMain.value
|
||||
}
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
filter = data;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
filter = data.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
if (filter) {
|
||||
if (type == "type") {
|
||||
optionType.value = filter
|
||||
} else if (type == "status") {
|
||||
optionStatus.value = filter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ใหม่"
|
||||
case "2":
|
||||
return "อยู่ระหว่างกำเนินการ"
|
||||
case "3":
|
||||
return "อนุมัติ"
|
||||
}
|
||||
}
|
||||
return {
|
||||
tab,
|
||||
amounttab1,
|
||||
amounttab2,
|
||||
//ข้อมูลในตาราง
|
||||
rows,
|
||||
fecthList,
|
||||
loadTable,
|
||||
//filter table
|
||||
filterTable,
|
||||
selectYear,
|
||||
selectType,
|
||||
selectStatus,
|
||||
optionYear,
|
||||
optionType,
|
||||
optionStatus,
|
||||
clearFilter,
|
||||
searchDataFn,
|
||||
filterOption,
|
||||
|
||||
|
||||
};
|
||||
})
|
||||
0
src/modules/09_leave/stores/ReportStore.ts
Normal file
0
src/modules/09_leave/stores/ReportStore.ts
Normal file
64
src/modules/09_leave/stores/WorkStore.ts
Normal file
64
src/modules/09_leave/stores/WorkStore.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
export const useWorklistDataStore = defineStore("work", () => {
|
||||
// ข้อมูลในตาราง
|
||||
const rows = ref<any>([])
|
||||
const dataMain = ref<any>([])
|
||||
function fecthList(data: any) {
|
||||
let datalist = data.map((e: any) => ({
|
||||
fullName: e.fullName,
|
||||
timeIn: e.timeIn,
|
||||
coordinatesIn: e.coordinatesIn,
|
||||
latIn: e.latIn,
|
||||
longIn: e.longIn,
|
||||
timeOut: e.timeOut,
|
||||
coordinatesOut: e.coordinatesOut,
|
||||
latOut: e.latOut,
|
||||
longOut: e.longOut,
|
||||
status: convertSatatus(e.status)
|
||||
}))
|
||||
dataMain.value = datalist
|
||||
searchDataFn(selectDate.value, selectStatus.value)
|
||||
}
|
||||
|
||||
//ค้นหาข้อมูล
|
||||
const filterTable = ref<string>('')
|
||||
const selectDate = ref<Date | null>(null);
|
||||
const selectStatus = ref<String>('all')
|
||||
const optionStatus = ref<any[]>([{ id: "all", name: 'ทั้งหมด' }, { id: "1", name: 'ลงเวลาเรียบร้อย' }, { id: "2", name: 'สายทำงานครบ' }])
|
||||
function searchDataFn(searchDate: any, srarchStatus: any) {
|
||||
srarchStatus = srarchStatus || "all";
|
||||
if (searchDate == null && srarchStatus == "all") {
|
||||
rows.value = dataMain.value
|
||||
} else if (searchDate == null && srarchStatus !== "all") {
|
||||
rows.value = dataMain.value.filter((e: any) => e.status === convertSatatus(srarchStatus))
|
||||
}
|
||||
}
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ลงเวลาเรียบร้อย"
|
||||
case "2":
|
||||
return "สายทำงานครบ"
|
||||
default:
|
||||
return "ยังไม่ได้ลงเวลา"
|
||||
}
|
||||
}
|
||||
return {
|
||||
//ข้อมูลในตาราง
|
||||
rows,
|
||||
fecthList,
|
||||
//ค้นหาข้อมูล
|
||||
filterTable,
|
||||
selectDate,
|
||||
selectStatus,
|
||||
optionStatus,
|
||||
searchDataFn,
|
||||
convertSatatus
|
||||
|
||||
};
|
||||
})
|
||||
120
src/modules/09_leave/views/LeaveListMain.vue
Normal file
120
src/modules/09_leave/views/LeaveListMain.vue
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
// importStroe
|
||||
import { useLeavelistDataStore } from "../stores/LeaveStore";
|
||||
// importComponets
|
||||
import TableList from "../components/2_Leave/TableList.vue";
|
||||
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const { fecthList, clearFilter } = leaveStore;
|
||||
|
||||
onMounted(() => {
|
||||
fecthLeaveList();
|
||||
});
|
||||
function fecthLeaveList() {
|
||||
const data = [
|
||||
{
|
||||
leaveType: "ลาป่วย",
|
||||
name: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
Date: "",
|
||||
status: "1",
|
||||
},
|
||||
{
|
||||
leaveType: "ลากิจส่วนตัว",
|
||||
name: "นายนครชัย วันดี",
|
||||
Date: "",
|
||||
status: "3",
|
||||
},
|
||||
{
|
||||
leaveType: "ลากิจส่วนตัว",
|
||||
name: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
Date: "",
|
||||
status: "2",
|
||||
},
|
||||
{
|
||||
leaveType: "ลาป่วย",
|
||||
name: "นายปิยรมย์ ศิริธาราฟ",
|
||||
Date: "",
|
||||
status: "2",
|
||||
},
|
||||
];
|
||||
fecthList(data);
|
||||
}
|
||||
//เปลี่ยน Tab
|
||||
function changTab() {
|
||||
clearFilter();
|
||||
fecthLeaveList();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายการลา</div>
|
||||
<div>
|
||||
<!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
|
||||
<div class="q-pa-md">
|
||||
<q-tabs
|
||||
v-model="leaveStore.tab"
|
||||
dense
|
||||
align="left"
|
||||
inline-label
|
||||
class="bg-grey-4 rounded-borders"
|
||||
indicator-color="white"
|
||||
>
|
||||
<q-tab
|
||||
@click="changTab"
|
||||
name="1"
|
||||
label="รายการลาที่อยู่ระหว่างดำเนิดการ"
|
||||
:class="
|
||||
leaveStore.tab == '1' ? 'bg-white text-primary rounded-borders ' : ''
|
||||
"
|
||||
>
|
||||
<q-badge
|
||||
color="grey-4"
|
||||
:class="
|
||||
leaveStore.tab == '1'
|
||||
? 'q-px-sm text-weight-medium text-primary q-ml-xl'
|
||||
: 'q-px-sm text-weight-medium text-black q-ml-xl'
|
||||
"
|
||||
:label="leaveStore.amounttab1"
|
||||
rounded
|
||||
/>
|
||||
</q-tab>
|
||||
<q-tab
|
||||
@click="changTab"
|
||||
name="2"
|
||||
label="รายการลาทั้งหมด"
|
||||
:class="
|
||||
leaveStore.tab == '2'
|
||||
? 'bg-white text-primary rounded rounded-borders '
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<q-badge
|
||||
color="grey-4"
|
||||
:class="
|
||||
leaveStore.tab == '2'
|
||||
? 'q-px-sm text-weight-medium text-primary q-ml-xl'
|
||||
: 'q-px-sm text-weight-medium text-black q-ml-xl'
|
||||
"
|
||||
:label="leaveStore.amounttab2"
|
||||
rounded
|
||||
/>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
|
||||
<q-tab-panels v-model="leaveStore.tab" animated>
|
||||
<q-tab-panel name="1">
|
||||
<!-- <TableList1 /> -->
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="2">
|
||||
<!-- <TabList2Vue /> -->
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
<!-- </q-card> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
9
src/modules/09_leave/views/ReportMain.vue
Normal file
9
src/modules/09_leave/views/ReportMain.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายงานสถิติ</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm"> </q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
84
src/modules/09_leave/views/WorkingMain.vue
Normal file
84
src/modules/09_leave/views/WorkingMain.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useWorklistDataStore } from "../stores/WorkStore";
|
||||
//import Components
|
||||
import TableList from "../components/1_Work/TableList.vue";
|
||||
// use Store
|
||||
const mixin = useCounterMixin();
|
||||
const workStore = useWorklistDataStore();
|
||||
const { date2Thai } = mixin;
|
||||
const { fecthList } = workStore;
|
||||
|
||||
onMounted(() => {
|
||||
fecthWorkList();
|
||||
});
|
||||
//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
|
||||
function fecthWorkList() {
|
||||
const listData = [
|
||||
{
|
||||
fullName: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "1",
|
||||
},
|
||||
{
|
||||
fullName: "นายนครชัย วันดี",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "2",
|
||||
},
|
||||
{
|
||||
fullName: "นายปิยรมย์ ศิริธาราฟ",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "3",
|
||||
},
|
||||
{
|
||||
fullName: "นางสาวปลาทอง ใจกล้า",
|
||||
timeIn: "8:04",
|
||||
coordinatesIn: "สำนักงาน",
|
||||
latIn: "18.7903",
|
||||
longIn: "99.0029",
|
||||
timeOut: "18:04",
|
||||
coordinatesOut: "สำนักงาน",
|
||||
latOut: "18.7903",
|
||||
longOut: "99.0029",
|
||||
status: "1",
|
||||
},
|
||||
];
|
||||
fecthList(listData);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการลงเวลาปฏิบัติงาน
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md">
|
||||
<TableList /></div
|
||||
></q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue