แก้ไขการแสดงผลประวัติการลงเวลา
This commit is contained in:
parent
31e5cf13f9
commit
a95c320cf5
3 changed files with 94 additions and 131 deletions
|
|
@ -9,6 +9,8 @@ import { useChekIn } from '@/stores/chekin'
|
|||
import Popup from '@/components/PopUp.vue'
|
||||
|
||||
const stores = useChekIn()
|
||||
|
||||
/** props from page */
|
||||
const props = defineProps({
|
||||
paging: {
|
||||
type: Boolean,
|
||||
|
|
@ -16,7 +18,7 @@ const props = defineProps({
|
|||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
defualt: 25,
|
||||
defualt: 10,
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
|
|
@ -90,79 +92,72 @@ async function updatePagination(newPagination: any) {
|
|||
props.changePage(1, newPagination.rowsPerPage, true)
|
||||
initialPagination.value = newPagination
|
||||
}
|
||||
|
||||
/** column history table */
|
||||
const columns = ref<QTableProps['columns']>([
|
||||
{
|
||||
name: 'date',
|
||||
name: 'checkInDate',
|
||||
align: 'left',
|
||||
label: 'วัน/เดือน/ปี',
|
||||
sortable: true,
|
||||
field: 'date',
|
||||
field: 'checkInDate',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px; width:15%;',
|
||||
},
|
||||
{
|
||||
name: 'in',
|
||||
name: 'checkInTime',
|
||||
align: 'left',
|
||||
label: 'เวลาเข้างาน',
|
||||
sortable: true,
|
||||
field: 'in',
|
||||
field: 'checkInTime',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px; width:15%;',
|
||||
},
|
||||
{
|
||||
name: 'loIn',
|
||||
name: 'checkInLocation',
|
||||
align: 'left',
|
||||
label: 'พิกัด',
|
||||
sortable: true,
|
||||
field: 'loIn',
|
||||
field: 'checkInLocation',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'out',
|
||||
align: 'left',
|
||||
label: 'เวลาออกงาน',
|
||||
sortable: true,
|
||||
field: 'out',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px; width:15%;',
|
||||
},
|
||||
{
|
||||
name: 'loOut',
|
||||
align: 'left',
|
||||
label: 'พิกัด',
|
||||
sortable: true,
|
||||
field: 'loOut',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'Morningstatus',
|
||||
name: 'checkInStatus',
|
||||
align: 'left',
|
||||
label: 'สถานะช่วงเช้า',
|
||||
sortable: true,
|
||||
field: 'Morningstatus',
|
||||
field: 'checkInStatus',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px; width:15%;',
|
||||
},
|
||||
{
|
||||
name: 'AfternoonStatus',
|
||||
name: 'checkOutTime',
|
||||
align: 'left',
|
||||
label: 'เวลาออกงาน',
|
||||
sortable: true,
|
||||
field: 'checkOutTime',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px; width:15%;',
|
||||
},
|
||||
{
|
||||
name: 'checkOutLocation',
|
||||
align: 'left',
|
||||
label: 'พิกัด',
|
||||
sortable: true,
|
||||
field: 'checkOutLocation',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'checkOutStatus',
|
||||
align: 'left',
|
||||
label: 'สถานะช่วงบ่าย',
|
||||
sortable: true,
|
||||
field: 'AfternoonStatus',
|
||||
field: 'checkOutStatus',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px; width:15%;',
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
align: 'left',
|
||||
label: 'สถานะ',
|
||||
sortable: true,
|
||||
field: 'status',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px; width:10%;',
|
||||
},
|
||||
}
|
||||
])
|
||||
// popup
|
||||
const modalPopup = ref<boolean>(false)
|
||||
|
|
@ -174,9 +169,11 @@ function openPopup(data: any) {
|
|||
titlePopup.value = title
|
||||
dataRow.value = data
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
modalPopup.value = false
|
||||
}
|
||||
|
||||
function classStatus(status: string) {
|
||||
switch (status) {
|
||||
case 'ขาดราชการ':
|
||||
|
|
@ -189,11 +186,24 @@ function classStatus(status: string) {
|
|||
break
|
||||
}
|
||||
}
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsPerPage: 2,
|
||||
})
|
||||
|
||||
const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
|
||||
if (
|
||||
checkInStatus === 'ขาด' ||
|
||||
checkInStatus === 'สาย' ||
|
||||
checkOutStatus === 'ขาด' ||
|
||||
checkOutStatus === 'สาย'
|
||||
)
|
||||
return true
|
||||
else false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-table
|
||||
flat
|
||||
|
|
@ -220,16 +230,16 @@ const pagination = ref({
|
|||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name === 'Morningstatus'"
|
||||
:class="classStatus(props.row.Morningstatus)"
|
||||
v-if="col.name === 'checkInStatus'"
|
||||
:class="classStatus(props.row.checkInStatus)"
|
||||
>
|
||||
{{ props.row.Morningstatus }}
|
||||
{{ props.row.checkInStatus }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name === 'AfternoonStatus'"
|
||||
:class="classStatus(props.row.AfternoonStatus)"
|
||||
v-else-if="col.name === 'checkOutStatus'"
|
||||
:class="classStatus(props.row.checkOutStatus)"
|
||||
>
|
||||
{{ props.row.AfternoonStatus }}
|
||||
{{ props.row.checkOutStatus }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
|
|
@ -237,7 +247,13 @@ const pagination = ref({
|
|||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
v-if="props.row.statusEdit === 'edit'"
|
||||
v-if="
|
||||
checkRequestEdit(
|
||||
props.row.checkInStatus,
|
||||
props.row.checkOutStatus
|
||||
)
|
||||
"
|
||||
style="min-width: 110px"
|
||||
outline
|
||||
icon="edit"
|
||||
size="12px"
|
||||
|
|
@ -249,11 +265,13 @@ const pagination = ref({
|
|||
v-else
|
||||
:color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
|
||||
:text-color="`${stores.classColorStatus(props.row.statusEdit)}-7`"
|
||||
>{{ props.row.statusEditName }}</q-chip
|
||||
>{{ props.row.statusEdit }}</q-chip
|
||||
>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<!-- กรณีแสดงผลบน mobile -->
|
||||
<template #item="props">
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
||||
|
|
@ -267,13 +285,13 @@ const pagination = ref({
|
|||
<q-item-section side>
|
||||
<q-item-label>
|
||||
<span
|
||||
v-if="col.name == 'Morningstatus'"
|
||||
:class="classStatus(props.row.Morningstatus)"
|
||||
v-if="col.name == 'checkInStatus'"
|
||||
:class="classStatus(props.row.checkInStatus)"
|
||||
>{{ col.value }}</span
|
||||
>
|
||||
<span
|
||||
v-else-if="col.name == 'AfternoonStatus'"
|
||||
:class="classStatus(props.row.AfternoonStatus)"
|
||||
v-else-if="col.name == 'checkOutStatus'"
|
||||
:class="classStatus(props.row.checkOutStatus)"
|
||||
>{{ col.value }}</span
|
||||
>
|
||||
<span v-else class="text-black">{{ col.value }} </span>
|
||||
|
|
@ -284,11 +302,18 @@ const pagination = ref({
|
|||
</q-list>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col" v-if="props.row.statusEdit === 'edit'">
|
||||
<div
|
||||
class="col"
|
||||
v-if="
|
||||
checkRequestEdit(
|
||||
props.row.checkInStatus,
|
||||
props.row.checkOutStatus
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
class="full-width text-cen"
|
||||
outline
|
||||
rounded
|
||||
icon="edit"
|
||||
label="ขอแก้ไข"
|
||||
color="info"
|
||||
|
|
@ -303,7 +328,7 @@ const pagination = ref({
|
|||
props.row.statusEdit
|
||||
)}-7`"
|
||||
>
|
||||
{{ props.row.statusEditName }}
|
||||
{{ props.row.statusEdit }}
|
||||
</q-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue