ปรับหน้าลงเวลาเข้างาน, ออกงาน, ประวัติการลาเวลา
This commit is contained in:
Tanyalak
parent
421f4d5805
commit
7f0e41ff31
15 changed files with 696 additions and 191 deletions
|
|
@ -1,135 +1,191 @@
|
|||
<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 class="col-12">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<div class="col-12 row justify-center q-pb-sm">
|
||||
<div
|
||||
class="col-xs-12 col-sm-10 text-h6 text-primary text-center text-weight-bold"
|
||||
>
|
||||
เวลาในขณะนี้
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 ">
|
||||
<q-card flat class="row col-12 cardNone" >
|
||||
<div :class="getClass(checkIn)">
|
||||
<div class="col-2">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="white"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
</div>
|
||||
<div class="row col-12 justify-center q-py-md">
|
||||
<div class="colunm">
|
||||
<div class="text-h2 text-weight-bold">
|
||||
{{ formattedH }}<span class="q-ma-md">:</span>
|
||||
</div>
|
||||
<div>ชั่วโมง</div>
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-h2 text-weight-bold">
|
||||
{{ formattedM }}<span class="q-ma-md">:</span>
|
||||
</div>
|
||||
<div>นาที</div>
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-h2 text-weight-bold">{{ formattedS }}</div>
|
||||
<div>วินาที</div>
|
||||
</div>
|
||||
<span class="text-body1 text-weight-bold col-8 text-center">
|
||||
<span v-if="checkIn">ลงเวลาเข้างาน</span>
|
||||
<span v-else>ลงเวลาออกงาน</span>
|
||||
</span>
|
||||
<div class="col-2 text-right">
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
unelevated
|
||||
rounded
|
||||
dense
|
||||
flat
|
||||
color="white"
|
||||
:label="$q.screen.gt.xs ? 'ประวัติการลงเวลา': ''"
|
||||
:class="$q.screen.gt.xs ? 'q-px-sm': ''"
|
||||
@click="router.push('/check-in/history')"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> -->
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<div class="col-12 col-sm-8">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="col-12 bg-grey-3"
|
||||
:style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"
|
||||
</div>
|
||||
<div class="col-12 q-pa-md text-grey-9">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-12 row q-py-sm justify-center">
|
||||
<div
|
||||
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
||||
>
|
||||
<!-- <mapCheckin /> -->
|
||||
<q-img
|
||||
src="@/assets/map1.png"
|
||||
:style="
|
||||
$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'
|
||||
"
|
||||
{{ Thai }}
|
||||
</div>
|
||||
<div class="row col-12 justify-center q-py-sm">
|
||||
<div class="colunm">
|
||||
<div class="text-h3 text-weight-bold">
|
||||
{{ formattedH }}<span class="q-ma-md">:</span>
|
||||
</div>
|
||||
<!-- <div>ชั่วโมง</div> -->
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-h3 text-weight-bold">
|
||||
{{ formattedM }}<span class="q-ma-md">:</span>
|
||||
</div>
|
||||
<!-- <div>นาที</div> -->
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-h3 text-weight-bold">{{ formattedS }}</div>
|
||||
<!-- <div>วินาที</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> -->
|
||||
<div class="col-xs-12 col-md-11 row q-col-gutter-md">
|
||||
<div class="col-12 col-sm-8">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="col-12 bg-grey-2"
|
||||
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
|
||||
>
|
||||
</q-img>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<q-card
|
||||
flat
|
||||
class="col-12 bg-grey-3 items-center row"
|
||||
:style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"
|
||||
>
|
||||
<div class="column col-12" v-if="!camera">
|
||||
<div class="text-center">
|
||||
<q-icon
|
||||
name="mdi-image-off-outline"
|
||||
size="100px"
|
||||
color="grey-7"
|
||||
<!-- <mapCheckin /> -->
|
||||
<q-img
|
||||
src="@/assets/map1.png"
|
||||
:style="
|
||||
$q.screen.gt.xs ? 'height: 300px;' : 'height: 168px;'
|
||||
"
|
||||
></q-img>
|
||||
<div class="q-pa-md text-weight-medium text-grey-8">
|
||||
พื้นที่ใกล้เคียง
|
||||
<span class="q-px-sm">:</span>
|
||||
{{location}}
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<q-card
|
||||
flat
|
||||
class="cardImg col-12 bg-grey-2 items-center row cursor-pointer "
|
||||
@click="photo()"
|
||||
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
|
||||
>
|
||||
<div class="column col-12" v-if="!camera">
|
||||
<div class="text-center">
|
||||
<q-icon
|
||||
name="mdi-image-off-outline"
|
||||
size="100px"
|
||||
color="blue-grey-3"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="text-center q-pt-md text-grey-7">
|
||||
ไม่มีรูปภาพ
|
||||
</div> -->
|
||||
</div>
|
||||
<q-img
|
||||
v-else
|
||||
src="@/assets/camera.jpg"
|
||||
:style="
|
||||
$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'
|
||||
"
|
||||
>
|
||||
</q-img>
|
||||
<!-- <div class="absolute-bottom-right q-ma-md">
|
||||
<q-btn
|
||||
round
|
||||
push
|
||||
icon="mdi-camera"
|
||||
size="md"
|
||||
color="positive"
|
||||
@click="photo()"
|
||||
/>
|
||||
</div> -->
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 q-mb-md">
|
||||
<q-card bordered flat :class="$q.screen.gt.xs ? 'q-px-md q-py-sm row items-center': 'q-pa-md row items-center'">
|
||||
<div class="text-weight-bold">สถานที่ทำงาน</div>
|
||||
<div :class="$q.screen.gt.xs ? 'row q-gutter-md q-pl-md col-sm-6 col-md-3': 'column col-12'">
|
||||
<q-radio v-model="workplace" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="in-place" label="ในสถานที่" />
|
||||
<q-radio v-model="workplace" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="off-site" label="นอกสถานที่" />
|
||||
</div>
|
||||
<div class="text-center q-pt-md text-grey-7">
|
||||
ไม่มีรูปภาพ
|
||||
<div class="col-xs-12 col-sm-6 col-md-4">
|
||||
<q-select v-if="workplace == 'off-site'" dense class="q-ml-md" outlined v-model="model" :options="options" prefix="ระบุสถานที่ :" />
|
||||
</div>
|
||||
</div>
|
||||
<q-img
|
||||
v-else
|
||||
src="@/assets/camera.jpg"
|
||||
:style="
|
||||
$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'
|
||||
"
|
||||
>
|
||||
</q-img>
|
||||
<div class="absolute-bottom-right q-ma-md">
|
||||
<q-btn
|
||||
round
|
||||
push
|
||||
icon="mdi-camera"
|
||||
size="md"
|
||||
color="positive"
|
||||
@click="photo()"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-right" v-if="camera">
|
||||
<div class="col-12">
|
||||
<q-separator />
|
||||
</div>
|
||||
<div class="col-12 q-pa-md">
|
||||
<q-btn
|
||||
:label="checkIn == true ? 'ลงเวลาเข้างาน': 'ลงเวลาออกงาน'"
|
||||
:color="checkIn == true ? 'primary': 'red-9'"
|
||||
push
|
||||
size="14px"
|
||||
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-right q-pt-md" v-if="camera">
|
||||
<q-btn
|
||||
label="ยืนยันเวลาเข้างาน"
|
||||
color="blue"
|
||||
push
|
||||
size="16px"
|
||||
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="dialogTime">
|
||||
<q-card class="q-px-lg full-width">
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-center q-pt-md">เวลาเข้างานของคุณคือ</div>
|
||||
</q-card-section>
|
||||
<q-card-section style="max-height: 50vh">
|
||||
<div class="row col-12 justify-center q-pb-md">
|
||||
<div class="text-h2 text-weight-bold">
|
||||
{{ formattedH }}<span class="q-ma-md">:</span>
|
||||
<q-card class="full-width cardNone">
|
||||
<div :class="getClass(checkIn)">
|
||||
<div class="text-body1 text-center col-12 text-weight-bold">
|
||||
<span v-if="checkIn">ลงเวลาเข้างานของคุณ</span>
|
||||
<span v-else>ลงเวลาออกงานของคุณ</span>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-section class="row col-12 justify-center">
|
||||
<div class="bg-grey-2 rounded-borders q-pa-md col-11">
|
||||
<div
|
||||
class="col-12 text-subtitle1 text-center text-weight-medium"
|
||||
>
|
||||
{{ Thai }}
|
||||
</div>
|
||||
<div class="text-h2 text-weight-bold">{{ formattedM }}</div>
|
||||
<div class="row col-12 justify-center q-pt-sm">
|
||||
<div class="text-h3 text-weight-bold">
|
||||
{{ formattedH }}<span class="q-ma-md">:</span>
|
||||
</div>
|
||||
<div class="text-h3 text-weight-bold">{{ formattedM }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center row q-pt-md">
|
||||
<div class="col-12 text-subtitle1 text-weight-medium text-secondary">{{location}}</div>
|
||||
<div class="col-12 text-grey-7">{{ coordinates }}</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="center" class="q-mb-md">
|
||||
<q-btn push label="ตกลง" color="primary" v-close-popup />
|
||||
<q-card-actions align="center" class="q-mb-md row">
|
||||
<q-btn class="col-xs-11 col-sm-6" push label="ตกลง" color="secondary" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
|
@ -141,15 +197,25 @@ import { ref, onMounted } from "vue";
|
|||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import moment, { Moment } from "moment";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dateThai,
|
||||
} = mixin;
|
||||
// import mapCheckin from "../componenst/mapCheck.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const diff = ref({});
|
||||
const timer = ref(undefined);
|
||||
const dateNow = ref(new Date());
|
||||
const google = ref(null);
|
||||
const map = ref(null);
|
||||
const Thai = ref(dateThai(dateNow.value))
|
||||
|
||||
const location = ref('สำนักงาน ก.ก');
|
||||
const coordinates = ref('13° 43’ 45” N 100° 31’ 26” E');
|
||||
const workplace = ref('in-place');
|
||||
const model = ref(null);
|
||||
const options = ref(['ปฏิบัติงานที่บ้าน', 'ลืมลงเวลาปฏิบัติงาน', 'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่', 'ขออนุญาตออกนอกสถานที่']);
|
||||
const checkIn = ref(true);
|
||||
|
||||
const camera = ref(false);
|
||||
const dialogTime = ref(false);
|
||||
|
||||
|
|
@ -184,6 +250,17 @@ function updateClock() {
|
|||
formattedH.value = hh;
|
||||
}
|
||||
setInterval(updateClock, 1000); // เรียกอัพเดททุกๆ 1 วิ
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"bg-primary text-white col-12 row items-center q-px-md q-py-sm": val,
|
||||
"bg-red-9 text-white col-12 row items-center q-px-md q-py-sm": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
.q-card.cardImg:hover{
|
||||
border: 1px solid #02A998 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
172
src/modules/04_checkin/views/history.vue
Normal file
172
src/modules/04_checkin/views/history.vue
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 ">
|
||||
<q-card flat class="row col-12 cardNone" >
|
||||
<div class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm">
|
||||
<div class="col-2">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="white"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
</div>
|
||||
<q-space />
|
||||
<span class="text-body1 text-weight-bold col-8 text-center">ประวัติการลงเวลา</span>
|
||||
<div class="col-2"></div>
|
||||
</div>
|
||||
<div class="col-12 q-pa-md text-grey-9">
|
||||
<Table
|
||||
:style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:inputShow="false"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="date" :props="props">
|
||||
{{ props.row.date }}
|
||||
</q-td>
|
||||
<q-td key="in" :props="props">
|
||||
{{ props.row.in }}
|
||||
</q-td>
|
||||
<q-td key="loIn" :props="props">
|
||||
{{ props.row.loIn }}
|
||||
</q-td>
|
||||
<q-td key="out" :props="props">
|
||||
{{ props.row.out }}
|
||||
</q-td>
|
||||
<q-td key="loOut" :props="props">
|
||||
{{ props.row.loOut }}
|
||||
</q-td>
|
||||
<q-td key="status" :props="props">
|
||||
<span :class="props.row.status == 'ลงเวลาเรียบร้อย' ? 'text-blue': 'text-orange'">{{ props.row.status }}</span>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
||||
>
|
||||
<q-card bordered flat class="q-py-sm">
|
||||
<q-list dense>
|
||||
<q-item v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side >
|
||||
<q-item-label>
|
||||
<span v-if="col.name == 'status'" :class="props.row.status == 'ลงเวลาเรียบร้อย' ? 'text-blue': 'text-orange'">{{ col.value }}</span>
|
||||
<span v-else class="text-black">{{ col.value }}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import Table from "@/modules/04_checkin/componenst/tableHistory.vue"
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const filter = ref<string>("")
|
||||
const visibleColumns = ref<String[]>(["date", "in", "loIn", "out", "loOut", "status"])
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:5%;",
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วัน/เดือน/ปี",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "in",
|
||||
align: "left",
|
||||
label: "เวลาเข้างาน",
|
||||
sortable: true,
|
||||
field: "in",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "loIn",
|
||||
align: "left",
|
||||
label: "พิกัด",
|
||||
sortable: true,
|
||||
field: "loIn",
|
||||
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: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:10%;",
|
||||
},
|
||||
])
|
||||
const rows = ref<any>([
|
||||
{no:'1',date: '13/08/66',in: '11:20',loIn: 'สำนักงาน ก.ก ', out: '',loOut: '',status: '' },
|
||||
{no:'2',date: '12/08/66',in: '08:04',loIn: 'สำนักงาน ก.ก ', out: '17:01',loOut: 'สำนักงาน ก.ก ',status: 'ลงเวลาเรียบร้อย' },
|
||||
{no:'3',date: '11/08/66',in: '08:34',loIn: 'สำนักงาน ก.ก ', out: '17:36',loOut: 'สำนักงาน ก.ก ',status: 'สาย ทำงานครบ' },
|
||||
{no:'4',date: '10/08/66',in: '08:48',loIn: 'สำนักงาน ก.ก ', out: '17:00',loOut: 'สำนักงาน ก.ก ',status: 'สาย ทำงานไม่ครบ' },
|
||||
])
|
||||
const initialPagination = ref({
|
||||
rowsPerPage: 0,
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue