แก้ไขการแสดงผลประวัติการลงเวลา
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>
|
||||
|
|
|
|||
|
|
@ -16,23 +16,16 @@ export const useChekIn = defineStore('checkin', () => {
|
|||
// console.log(data)
|
||||
rows.value = []
|
||||
const datalist = await data.map((e: any) => ({
|
||||
id: e.checkInId,
|
||||
date: date2Thai(e.checkInDate),
|
||||
no: e.no,
|
||||
in: e.checkInTime,
|
||||
out: e.checkOutTime,
|
||||
Morningstatus: convertStatus(e.checkInStatus),
|
||||
AfternoonStatus: convertStatus(e.checkOutStatus),
|
||||
loIn: e.checkInLocation,
|
||||
loOut: e.checkOutLocation,
|
||||
status: e.statusEdit,
|
||||
checkInId: e.checkInId,
|
||||
checkInDate: date2Thai(e.checkInDate),
|
||||
checkInTime: e.checkInTime,
|
||||
checkOutTime: e.checkOutTime != '' ? e.checkOutTime : '-',
|
||||
checkInStatus: convertStatus(e.checkInStatus),
|
||||
checkOutStatus:
|
||||
e.checkOutStatus != null ? convertStatus(e.checkOutStatus) : '-',
|
||||
checkInLocation: e.checkInLocation,
|
||||
checkOutLocation: e.checkOutLocation != '' ? e.checkOutLocation : '-',
|
||||
// statusEditName: convertStatusEdit(e.statusEdit),
|
||||
// checkInTime: e.checkInTime,
|
||||
// checkInLocation: e.checkInLocation,
|
||||
// checkOutTime: e.checkOutTime,
|
||||
// checkOutLocation: e.checkOutLocation,
|
||||
// checkInStatus: convertStatus(e.checkInStatus),
|
||||
// checkOutStatus: convertStatus(e.checkOutStatus),
|
||||
}))
|
||||
rows.value = datalist
|
||||
}
|
||||
|
|
@ -65,6 +58,8 @@ export const useChekIn = defineStore('checkin', () => {
|
|||
return 'orange'
|
||||
case 'approve':
|
||||
return 'green'
|
||||
case 'reject':
|
||||
return 'red'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import type { QTableProps } from 'quasar'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
|
@ -19,7 +18,6 @@ const { fetchHistoryList } = stores
|
|||
const $q = useQuasar() //ใช้ noti quasar
|
||||
|
||||
onMounted(() => {
|
||||
// fetchlist()
|
||||
fetchlistHistory()
|
||||
})
|
||||
|
||||
|
|
@ -33,7 +31,7 @@ const filter = ref<string>('') //search data table
|
|||
async function changePage(
|
||||
pageVal: number,
|
||||
pageSizeVal: number,
|
||||
loading: boolean = false
|
||||
loading: false
|
||||
) {
|
||||
page.value = await pageVal
|
||||
pageSize.value = await pageSizeVal
|
||||
|
|
@ -41,7 +39,7 @@ async function changePage(
|
|||
}
|
||||
|
||||
//นำข้อมูลมาแสดง
|
||||
const fetchlistHistory = async (loading: boolean = true) => {
|
||||
const fetchlistHistory = async (loading = true) => {
|
||||
loading === true ?? showLoader()
|
||||
await http
|
||||
.get(
|
||||
|
|
@ -61,60 +59,6 @@ const fetchlistHistory = async (loading: boolean = true) => {
|
|||
hideLoader()
|
||||
})
|
||||
}
|
||||
|
||||
// function fetchlist() {
|
||||
// const listData = [
|
||||
// {
|
||||
// no: '1',
|
||||
// date: '13/08/66',
|
||||
// in: '11:20',
|
||||
// loIn: 'สำนักงาน ก.ก ',
|
||||
// out: '',
|
||||
// loOut: '',
|
||||
// status: '',
|
||||
// Morningstatus: '1',
|
||||
// AfternoonStatus: '1',
|
||||
// statusEdit: 'wait',
|
||||
// },
|
||||
// {
|
||||
// no: '2',
|
||||
// date: '12/08/66',
|
||||
// in: '08:04',
|
||||
// loIn: 'สำนักงาน ก.ก ',
|
||||
// out: '17:01',
|
||||
// loOut: 'สำนักงาน ก.ก ',
|
||||
// status: 'ลงเวลาเรียบร้อย',
|
||||
// Morningstatus: '2',
|
||||
// AfternoonStatus: '2',
|
||||
// statusEdit: 'edit',
|
||||
// },
|
||||
// {
|
||||
// no: '3',
|
||||
// date: '11/08/66',
|
||||
// in: '08:34',
|
||||
// loIn: 'สำนักงาน ก.ก ',
|
||||
// out: '17:36',
|
||||
// loOut: 'สำนักงาน ก.ก ',
|
||||
// status: 'สาย ทำงานครบ',
|
||||
// Morningstatus: '3',
|
||||
// AfternoonStatus: '2',
|
||||
// statusEdit: 'edit',
|
||||
// },
|
||||
// {
|
||||
// no: '4',
|
||||
// date: '10/08/66',
|
||||
// in: '08:48',
|
||||
// loIn: 'สำนักงาน ก.ก ',
|
||||
// out: '17:00',
|
||||
// loOut: 'สำนักงาน ก.ก ',
|
||||
// status: 'สาย ทำงานไม่ครบ',
|
||||
// Morningstatus: '3',
|
||||
// AfternoonStatus: '3',
|
||||
// statusEdit: 'approve',
|
||||
// },
|
||||
// ]
|
||||
// stores.fetchHistoryList(listData)
|
||||
// }
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
|
|
@ -125,8 +69,7 @@ const fetchlistHistory = async (loading: boolean = true) => {
|
|||
>
|
||||
<div class="col-2">
|
||||
<q-btn
|
||||
icon="arrow_backt"
|
||||
unelevated
|
||||
icon="arrow_back"
|
||||
round
|
||||
dense
|
||||
flat
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue