Merge branch 'develop' into setthawut
# Conflicts: # src/components/AscGISMap.vue
This commit is contained in:
setthawutttty
commit
01f0087beb
6 changed files with 518 additions and 244 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
# BMA ระบบลงเวลาเข้า-ออกงาน
|
# HRMS ระบบลงเวลาเข้า-ออกงาน
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>BMA ระบบลงเวลาเข้า-ออกงาน</title>
|
<title>HRMS ระบบลงเวลาเข้า-ออกงาน</title>
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
|
|
@ -20,10 +20,10 @@
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
<script src="https://js.arcgis.com/4.19/"></script>
|
<script src="https://js.arcgis.com/4.19/"></script>
|
||||||
<link
|
<!-- <link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
|
href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
|
||||||
/>
|
/>
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58&libraries=places"></script>
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58&libraries=places"></script> -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -199,22 +199,62 @@ onMounted(async () => {
|
||||||
<template>
|
<template>
|
||||||
<!-- Loading skeleton -->
|
<!-- Loading skeleton -->
|
||||||
<div v-if="!poiPlaceName" class="col-12">
|
<div v-if="!poiPlaceName" class="col-12">
|
||||||
<q-skeleton height="35vh" width="100%" class="bg-grey-4" />
|
<q-skeleton
|
||||||
|
:height="$q.screen.gt.xs ? '35vh' : '45px'"
|
||||||
|
width="100%"
|
||||||
|
:style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
|
||||||
|
class="bg-grey-4"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-card v-show="poiPlaceName" bordered flat class="col-12 bg-grey-2 shadow-0">
|
<q-card
|
||||||
<div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
|
v-show="poiPlaceName"
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
class="col-12 bg-grey-2 shadow-0"
|
||||||
|
:style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
|
||||||
|
>
|
||||||
|
<div v-if="$q.screen.gt.xs">
|
||||||
|
<div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
:class="
|
:class="
|
||||||
$q.screen.gt.xs
|
$q.screen.gt.xs
|
||||||
? 'q-pa-xs text-weight-medium text-grey-8'
|
? 'q-pa-xs text-weight-medium text-grey-8'
|
||||||
: 'q-pa-xs text-weight-medium text-grey-8'
|
: 'q-pa-xs text-weight-medium text-grey-8'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
พื้นที่ใกล้เคียง
|
พื้นที่ใกล้เคียง
|
||||||
<span class="q-px-sm">:</span>
|
<span class="q-px-sm">:</span>
|
||||||
{{ poiPlaceName }}
|
{{ poiPlaceName }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<q-card v-else style="border-radius: 20px">
|
||||||
|
<q-expansion-item
|
||||||
|
class="shadow-1 overflow-hidden bg-grey-4 text-left"
|
||||||
|
style="border-radius: 20px"
|
||||||
|
dense
|
||||||
|
default-opened
|
||||||
|
>
|
||||||
|
<template v-slot:header>
|
||||||
|
<q-item-section avatar class="q-pr-none expanAS">
|
||||||
|
<q-avatar icon="mdi-map-marker" />
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-item-section>
|
||||||
|
{{ poiPlaceName }}
|
||||||
|
</q-item-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div id="mapViewDisplay" style="height: 20vh"></div>
|
||||||
|
</q-expansion-item>
|
||||||
|
</q-card>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.expanAS.q-item__section--avatar {
|
||||||
|
min-width: 40px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ const router = createRouter({
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'home',
|
name: 'main',
|
||||||
component: MainView,
|
component: MainView,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -50,6 +50,8 @@ const Thai = ref<Date>(dateNow.value)
|
||||||
const formattedS = ref()
|
const formattedS = ref()
|
||||||
const formattedM = ref()
|
const formattedM = ref()
|
||||||
const formattedH = ref()
|
const formattedH = ref()
|
||||||
|
const formattedHH = ref()
|
||||||
|
const formattedA = ref()
|
||||||
|
|
||||||
/** function อัพเดทเวลา*/
|
/** function อัพเดทเวลา*/
|
||||||
function updateClock() {
|
function updateClock() {
|
||||||
|
|
@ -57,9 +59,14 @@ function updateClock() {
|
||||||
const hh = moment(date).format('HH')
|
const hh = moment(date).format('HH')
|
||||||
const mm = moment(date).format('mm')
|
const mm = moment(date).format('mm')
|
||||||
const ss = moment(date).format('ss')
|
const ss = moment(date).format('ss')
|
||||||
|
const HH = moment(date).format('hh')
|
||||||
|
const A = moment(date).format('a')
|
||||||
|
|
||||||
formattedS.value = ss
|
formattedS.value = ss
|
||||||
formattedM.value = mm
|
formattedM.value = mm
|
||||||
formattedH.value = hh
|
formattedH.value = hh
|
||||||
|
formattedHH.value = HH
|
||||||
|
formattedA.value = A
|
||||||
}
|
}
|
||||||
setInterval(updateClock, 1000)
|
setInterval(updateClock, 1000)
|
||||||
|
|
||||||
|
|
@ -254,11 +261,17 @@ function updateWorkplace() {
|
||||||
*/
|
*/
|
||||||
const getClass = (val: boolean) => {
|
const getClass = (val: boolean) => {
|
||||||
return {
|
return {
|
||||||
'bg-primary text-white col-12 row items-center q-px-md q-py-sm': val,
|
'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,
|
'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm ': !val,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getClassXS = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
'bg-topIn text-white q-pa-lg col-12 row': val,
|
||||||
|
'bg-topOut text-white q-pa-lg col-12 row': !val,
|
||||||
|
}
|
||||||
|
}
|
||||||
const inQueue = ref<boolean>(false)
|
const inQueue = ref<boolean>(false)
|
||||||
|
|
||||||
async function fetchCheckStatus() {
|
async function fetchCheckStatus() {
|
||||||
|
|
@ -312,252 +325,445 @@ onMounted(async () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row justify-center">
|
<q-page :style="$q.screen.xs ? 'padding-top: 90px' : ''">
|
||||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
<div class="col-12 row justify-center">
|
||||||
<q-card flat class="row col-12 cardNone">
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||||
<!-- <q-header elevated class="bg-purple"> -->
|
<q-card
|
||||||
<q-toolbar :class="getClass(stetusCheckin)">
|
flat
|
||||||
<div class="row col-12 justify-center">
|
:class="
|
||||||
<!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
|
$q.screen.gt.xs ? 'row col-12 cardNone' : 'row col-12 bg-grey-2'
|
||||||
ลงเวลาเข้างาน
|
"
|
||||||
</strong> -->
|
>
|
||||||
<!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
|
<!-- <q-header elevated class="bg-purple"> -->
|
||||||
<strong v-if="!stetusCheckin && inQueue" style="font-size: 1rem">
|
<div :class="getClass(stetusCheckin)" class="gt-xs">
|
||||||
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
|
<div class="col">
|
||||||
</strong>
|
<div class="row col-12 justify-center q-py-sm text-subtitle1">
|
||||||
|
<!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
|
||||||
|
ลงเวลาเข้างาน
|
||||||
|
</strong> -->
|
||||||
|
<!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
|
||||||
|
<strong v-if="!stetusCheckin && inQueue">
|
||||||
|
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
|
||||||
|
</strong>
|
||||||
|
|
||||||
<strong
|
<strong v-else-if="stetusCheckin && inQueue">
|
||||||
v-else-if="stetusCheckin && inQueue"
|
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
||||||
style="font-size: 1rem"
|
</strong>
|
||||||
>
|
|
||||||
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<strong
|
<strong v-else-if="stetusCheckin && !inQueue">
|
||||||
v-else-if="stetusCheckin && !inQueue"
|
ลงเวลาเข้างาน
|
||||||
style="font-size: 1rem"
|
</strong>
|
||||||
>
|
|
||||||
ลงเวลาเข้างาน
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<strong v-else style="font-size: 1rem"> ลงเวลาออกงาน </strong>
|
<strong v-else> ลงเวลาออกงาน </strong>
|
||||||
</div>
|
|
||||||
</q-toolbar>
|
|
||||||
<div class="col-12 text-grey-9">
|
|
||||||
<div class="col-12 row justify-center">
|
|
||||||
<div class="col-12 row q-pt-md justify-center">
|
|
||||||
<div
|
|
||||||
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
|
||||||
>
|
|
||||||
{{ date2Thai(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 class="colunm">
|
|
||||||
<div class="text-h3 text-weight-bold">
|
|
||||||
{{ formattedM }}<span class="q-ma-md">:</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="colunm">
|
|
||||||
<div class="text-h3 text-weight-bold">{{ formattedS }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row">
|
</div>
|
||||||
<div class="col-xs-12 col-sm-8">
|
<div class="col-12 text-grey-9">
|
||||||
<div class="col-12">
|
<div class="col-12 row justify-center">
|
||||||
<MapCheck @update:location="updateLocation" />
|
<div class="col-12 row q-pt-md justify-center gt-xs">
|
||||||
</div>
|
<div
|
||||||
<!-- <AscMaps /> -->
|
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-sm-4">
|
|
||||||
<q-card flat bordered class="card-container">
|
|
||||||
<div
|
|
||||||
v-if="!cameraIsOn && img == null"
|
|
||||||
class="preview-placeholder"
|
|
||||||
@click="() => !isDisabledCheckTime && openCamera()"
|
|
||||||
>
|
|
||||||
<div class="text-center">
|
|
||||||
<q-icon
|
|
||||||
name="photo_camera"
|
|
||||||
color="blue-grey-3"
|
|
||||||
size="100px"
|
|
||||||
class="center-icon"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 row items-center">
|
|
||||||
<!-- แสดงกล้องตอนกดถ่ายภาพ -->
|
|
||||||
|
|
||||||
<Camera
|
|
||||||
:resolution="{ width: photoWidth, height: photoHeight }"
|
|
||||||
ref="camera"
|
|
||||||
:autoplay="false"
|
|
||||||
:style="!img ? 'display: block' : 'display: none'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- แสดงรูปเมื่อกด capture -->
|
|
||||||
<div v-if="img" class="image-container">
|
|
||||||
<q-img :src="img" class="image-element"></q-img>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="cameraIsOn"
|
|
||||||
class="absolute-bottom-right q-ma-md"
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
v-if="img == null"
|
|
||||||
round
|
|
||||||
push
|
|
||||||
icon="photo_camera"
|
|
||||||
size="md"
|
|
||||||
color="positive"
|
|
||||||
@click="capturePhoto"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
v-else
|
|
||||||
round
|
|
||||||
push
|
|
||||||
icon="refresh"
|
|
||||||
size="md"
|
|
||||||
color="negative"
|
|
||||||
@click="refreshPhoto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="!isDisabledCheckTime"
|
|
||||||
class="col-xs-12 col-sm-12 items-center"
|
|
||||||
>
|
|
||||||
<q-card
|
|
||||||
bordered
|
|
||||||
flat
|
|
||||||
:class="
|
|
||||||
$q.screen.gt.xs
|
|
||||||
? 'q-px-md q-py-sm row items-center shadow-0'
|
|
||||||
: 'q-pa-md row items-center shadow-0'
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="text-weight-bold">สถานที่ทำงาน</div>
|
{{ date2Thai(Thai) }}
|
||||||
<div
|
</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 class="colunm">
|
||||||
|
<div class="text-h3 text-weight-bold">
|
||||||
|
{{ formattedM }}<span class="q-ma-md">:</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="colunm">
|
||||||
|
<div class="text-h3 text-weight-bold">{{ formattedS }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg"
|
||||||
|
>
|
||||||
|
<div class="col-xs-12 col-sm-8 gt-xs">
|
||||||
|
<div class="col-12">
|
||||||
|
<MapCheck
|
||||||
|
v-if="$q.screen.gt.xs"
|
||||||
|
@update:location="updateLocation"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-4">
|
||||||
|
<q-card
|
||||||
:class="
|
:class="
|
||||||
$q.screen.gt.xs
|
$q.screen.xs ? 'card-container-xs' : 'card-container'
|
||||||
? 'row q-gutter-md q-pl-md col-sm-6 col-md-3'
|
|
||||||
: 'column col-12'
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<q-radio
|
<div
|
||||||
v-model="workplace"
|
v-if="!cameraIsOn && img == null"
|
||||||
checked-icon="task_alt"
|
class="preview-placeholder"
|
||||||
unchecked-icon="panorama_fish_eye"
|
@click="() => !isDisabledCheckTime && openCamera()"
|
||||||
val="in-place"
|
>
|
||||||
label="ในสถานที่"
|
<div class="text-center">
|
||||||
@update:model-value="updateWorkplace"
|
<q-icon
|
||||||
/>
|
name="mdi-camera"
|
||||||
<q-radio
|
color="blue-grey-3"
|
||||||
v-model="workplace"
|
size="100px"
|
||||||
checked-icon="task_alt"
|
class="center-icon"
|
||||||
unchecked-icon="panorama_fish_eye"
|
/>
|
||||||
val="off-site"
|
</div>
|
||||||
label="นอกสถานที่"
|
</div>
|
||||||
@update:model-value="updateWorkplace"
|
<div class="col-12 row items-center">
|
||||||
/>
|
<!-- แสดงกล้องตอนกดถ่ายภาพ -->
|
||||||
|
|
||||||
|
<Camera
|
||||||
|
:resolution="{ width: photoWidth, height: photoHeight }"
|
||||||
|
ref="camera"
|
||||||
|
:autoplay="false"
|
||||||
|
:style="!img ? 'display: block' : 'display: none'"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- แสดงรูปเมื่อกด capture -->
|
||||||
|
<div v-if="img" class="image-container">
|
||||||
|
<q-img :src="img" class="image-element"></q-img>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="cameraIsOn">
|
||||||
|
<div
|
||||||
|
v-if="$q.screen.gt.xs"
|
||||||
|
class="absolute-bottom-right q-ma-md"
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
v-if="img == null"
|
||||||
|
round
|
||||||
|
push
|
||||||
|
icon="photo_camera"
|
||||||
|
size="md"
|
||||||
|
color="positive"
|
||||||
|
@click="capturePhoto"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-else
|
||||||
|
round
|
||||||
|
push
|
||||||
|
icon="refresh"
|
||||||
|
size="md"
|
||||||
|
color="negative"
|
||||||
|
@click="refreshPhoto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div
|
||||||
|
class="absolute-bottom text-subtitle2 text-center q-py-sm"
|
||||||
|
style="background: #00000021"
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
v-if="img == null"
|
||||||
|
icon="photo_camera"
|
||||||
|
size="18px"
|
||||||
|
style="background: #263238; color: white"
|
||||||
|
@click="capturePhoto"
|
||||||
|
unelevated
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-else
|
||||||
|
round
|
||||||
|
icon="refresh"
|
||||||
|
size="18px"
|
||||||
|
style="background: #263238; color: white"
|
||||||
|
@click="refreshPhoto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- กรอกข้อมูล หน้ามือถือ -->
|
||||||
|
<div class="col-12 row q-col-gutter-y-md" v-if="$q.screen.xs">
|
||||||
|
<div class="col-12" v-if="!isDisabledCheckTime">
|
||||||
|
<q-card
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="row col-12"
|
||||||
|
style="border-radius: 10px"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-model="remark"
|
||||||
|
filled
|
||||||
|
label="กรอกหมายเหตุ"
|
||||||
|
input-style="border-radius: 10px 10px 0 0;"
|
||||||
|
class="col-12"
|
||||||
|
bg-color="white"
|
||||||
|
/>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<q-btn-toggle
|
||||||
|
v-model="workplace"
|
||||||
|
@update:model-value="updateWorkplace"
|
||||||
|
spread
|
||||||
|
no-caps
|
||||||
|
toggle-color="blue-grey-10"
|
||||||
|
color="white"
|
||||||
|
text-color="black"
|
||||||
|
class="col-12"
|
||||||
|
style="min-height: 3em"
|
||||||
|
size="15px"
|
||||||
|
:options="[
|
||||||
|
{ label: 'ในสถานที่', value: 'in-place' },
|
||||||
|
{ label: 'นอกสถานที่', value: 'off-site' },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" v-if="workplace == 'off-site'">
|
||||||
|
<q-card class="col-12">
|
||||||
|
<q-select
|
||||||
|
ref="modelRef"
|
||||||
|
filled
|
||||||
|
v-model="model"
|
||||||
|
:options="options"
|
||||||
|
label="เลือกสถานที่"
|
||||||
|
bg-color="white"
|
||||||
|
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
||||||
|
lazy-rules
|
||||||
|
@update:model-value="selectLocation()"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-xs-12 col-sm-6 col-md-4"
|
class="col-12"
|
||||||
v-if="workplace == 'off-site'"
|
|
||||||
>
|
|
||||||
<q-select
|
|
||||||
ref="modelRef"
|
|
||||||
dense
|
|
||||||
class="q-ml-md"
|
|
||||||
outlined
|
|
||||||
v-model="model"
|
|
||||||
:options="options"
|
|
||||||
prefix="ระบุสถานที่ :"
|
|
||||||
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
|
||||||
lazy-rules
|
|
||||||
@update:model-value="selectLocation()"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="col-xs-12 col-sm-6 col-md-4"
|
|
||||||
v-if="model == 'อื่นๆ' && workplace === 'off-site'"
|
v-if="model == 'อื่นๆ' && workplace === 'off-site'"
|
||||||
>
|
>
|
||||||
<q-input
|
<q-card class="col-12">
|
||||||
ref="useLocationRef"
|
<q-input
|
||||||
dense
|
ref="useLocationRef"
|
||||||
class="q-ml-md"
|
filled
|
||||||
outlined
|
v-model="useLocation"
|
||||||
v-model="useLocation"
|
label="ระบุสถานที่"
|
||||||
label="ระบุสถานที่"
|
bg-color="white"
|
||||||
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
||||||
lazy-rules
|
hide-bottom-space
|
||||||
/>
|
lazy-rules
|
||||||
|
/>
|
||||||
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="!isDisabledCheckTime" class="col-xs-12 col-sm-12">
|
<div class="col-12" v-if="$q.screen.xs">
|
||||||
<q-card
|
<MapCheck @update:location="updateLocation" />
|
||||||
bordered
|
</div>
|
||||||
flat
|
</div>
|
||||||
|
<!-- กรอกข้อมูล หน้ามือถือ -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!isDisabledCheckTime"
|
||||||
|
class="col-xs-12 col-sm-12 items-center gt-xs"
|
||||||
|
>
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
:class="
|
||||||
|
$q.screen.gt.xs
|
||||||
|
? 'q-px-md q-py-sm row items-center shadow-0'
|
||||||
|
: 'q-pa-md row items-center shadow-0'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<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="ในสถานที่"
|
||||||
|
@update:model-value="updateWorkplace"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="workplace"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
val="off-site"
|
||||||
|
label="นอกสถานที่"
|
||||||
|
@update:model-value="updateWorkplace"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-xs-12 col-sm-6 col-md-4"
|
||||||
|
v-if="workplace == 'off-site'"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
ref="modelRef"
|
||||||
|
dense
|
||||||
|
class="q-ml-md"
|
||||||
|
outlined
|
||||||
|
v-model="model"
|
||||||
|
:options="options"
|
||||||
|
prefix="ระบุสถานที่ :"
|
||||||
|
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
||||||
|
lazy-rules
|
||||||
|
@update:model-value="selectLocation()"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-xs-12 col-sm-6 col-md-4"
|
||||||
|
v-if="model == 'อื่นๆ' && workplace === 'off-site'"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
ref="useLocationRef"
|
||||||
|
dense
|
||||||
|
class="q-ml-md"
|
||||||
|
outlined
|
||||||
|
v-model="useLocation"
|
||||||
|
label="ระบุสถานที่"
|
||||||
|
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
||||||
|
lazy-rules
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!isDisabledCheckTime"
|
||||||
|
class="col-xs-12 col-sm-12 gt-xs"
|
||||||
|
>
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
:class="
|
||||||
|
$q.screen.gt.xs
|
||||||
|
? 'q-px-md q-py-sm row items-center shadow-0'
|
||||||
|
: 'q-pa-md row items-center shadow-0'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="text-weight-bold">หมายเหตุ</div>
|
||||||
|
<div class="col-12 q-pt-sm">
|
||||||
|
<q-input outlined v-model="remark" lazy-rules dense />
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!isDisabledCheckTime && $q.screen.gt.xs"
|
||||||
|
class="col-12 text-right"
|
||||||
|
>
|
||||||
|
<q-separator />
|
||||||
|
<div class="col-12 q-pa-md">
|
||||||
|
<p
|
||||||
:class="
|
:class="
|
||||||
$q.screen.gt.xs
|
$q.screen.gt.xs
|
||||||
? 'q-px-md q-py-sm row items-center shadow-0'
|
? 'text-red text-caption '
|
||||||
: 'q-pa-md row items-center shadow-0'
|
: 'text-red text-caption text-center'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div class="text-weight-bold">หมายเหตุ</div>
|
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
||||||
<div class="col-12 q-pt-sm">
|
</p>
|
||||||
<q-input outlined v-model="remark" lazy-rules dense />
|
<q-btn
|
||||||
</div>
|
:label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
|
||||||
</q-card>
|
:color="img == null ? 'grey-6' : 'primary'"
|
||||||
|
push
|
||||||
|
size="18px"
|
||||||
|
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
|
||||||
|
:disable="camera && img ? false : true"
|
||||||
|
@click="validateForm"
|
||||||
|
:loading="inQueue"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="!isDisabledCheckTime" class="col-12 text-right">
|
<div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<div class="col-12 q-pa-md">
|
<div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
|
||||||
<p
|
|
||||||
:class="
|
|
||||||
$q.screen.gt.xs
|
|
||||||
? 'text-red text-caption '
|
|
||||||
: 'text-red text-caption text-center'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
|
||||||
</p>
|
|
||||||
<q-btn
|
|
||||||
:label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
|
|
||||||
:color="img == null ? 'grey-6' : 'primary'"
|
|
||||||
push
|
|
||||||
size="18px"
|
|
||||||
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
|
|
||||||
:disable="camera && img ? false : true"
|
|
||||||
@click="validateForm"
|
|
||||||
:loading="inQueue"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-page>
|
||||||
|
|
||||||
<div v-else class="col-12">
|
<!-- top page sticky หน้ามือถือ-->
|
||||||
<q-separator />
|
<q-page-sticky expand position="top" v-if="$q.screen.xs">
|
||||||
<div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
|
<div :class="getClassXS(stetusCheckin)">
|
||||||
|
<div class="col">
|
||||||
|
<div class="row col-12 justify-right items-center text-body1">
|
||||||
|
<strong v-if="!stetusCheckin && inQueue">
|
||||||
|
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<strong v-else-if="stetusCheckin && inQueue">
|
||||||
|
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<strong v-else-if="stetusCheckin && !inQueue"> ลงเวลาเข้างาน </strong>
|
||||||
|
|
||||||
|
<strong v-else> ลงเวลาออกงาน </strong>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="text-white text-body2 row col-12"
|
||||||
|
style="line-height: 1.5rem"
|
||||||
|
>
|
||||||
|
{{ date2Thai(Thai) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 row items-center">
|
||||||
|
<div class="row col-12 justify-end">
|
||||||
|
<div class="colunm">
|
||||||
|
<div class="text-h4 text-weight-bold">
|
||||||
|
{{ formattedH }}<span class="q-ma-xs">:</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="colunm">
|
||||||
|
<div class="text-h4 text-weight-bold">
|
||||||
|
{{ formattedM }}<span class="q-ma-xs">:</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="colunm">
|
||||||
|
<div class="text-h4 text-weight-bold">{{ formattedS }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</q-page-sticky>
|
||||||
|
|
||||||
|
<!-- footer หน้ามือถือ-->
|
||||||
|
<q-footer reveal v-if="$q.screen.xs" class="bg-grey-2">
|
||||||
|
<q-separator />
|
||||||
|
<div v-if="!isDisabledCheckTime" class="col-12 q-pa-md">
|
||||||
|
<p
|
||||||
|
:class="
|
||||||
|
$q.screen.gt.xs
|
||||||
|
? 'text-red text-caption '
|
||||||
|
: 'text-red text-caption text-center'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
||||||
|
</p>
|
||||||
|
<q-btn
|
||||||
|
:label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
|
||||||
|
:color="img == null ? 'grey-6' : 'primary'"
|
||||||
|
push
|
||||||
|
size="18px"
|
||||||
|
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
|
||||||
|
:disable="camera && img ? false : true"
|
||||||
|
@click="validateForm"
|
||||||
|
:loading="inQueue"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="isDisabledCheckTime" class="col-12">
|
||||||
|
<q-separator />
|
||||||
|
<div class="text-red q-pa-md text-left">*{{ msgCheckTime }}</div>
|
||||||
|
</div>
|
||||||
|
</q-footer>
|
||||||
|
|
||||||
<!-- แสดงการลงเวลา -->
|
<!-- แสดงการลงเวลา -->
|
||||||
<q-dialog v-model="modalTime" persistent>
|
<q-dialog v-model="modalTime" persistent>
|
||||||
|
|
@ -619,8 +825,18 @@ onMounted(async () => {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: autu; /* Adjust as needed */
|
height: autu; /* Adjust as needed */
|
||||||
background: #f6f5f5;
|
background: #f5f5f5;
|
||||||
height: 35vh !important;
|
height: 35vh !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 1px solid #ededed;
|
||||||
|
}
|
||||||
|
.card-container-xs {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
height: autu; /* Adjust as needed */
|
||||||
|
background: #ffffff;
|
||||||
|
height: 35vh !important;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.image-container {
|
.image-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -641,4 +857,22 @@ onMounted(async () => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-topOut {
|
||||||
|
background: rgb(39, 50, 56);
|
||||||
|
background: linear-gradient(
|
||||||
|
175deg,
|
||||||
|
rgba(39, 50, 56, 1) 76%,
|
||||||
|
rgba(198, 40, 40, 1) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-topIn {
|
||||||
|
background: rgb(39, 50, 56);
|
||||||
|
background: linear-gradient(
|
||||||
|
175deg,
|
||||||
|
rgba(39, 50, 56, 1) 76%,
|
||||||
|
rgba(2, 169, 152, 1) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -27,9 +27,9 @@ const router = useRouter()
|
||||||
const $q = useQuasar()
|
const $q = useQuasar()
|
||||||
|
|
||||||
// landing page config url
|
// landing page config url
|
||||||
const configParam = {
|
// const configParam = {
|
||||||
landingPageUrl: import.meta.env.VITE_URL_LANDING,
|
// landingPageUrl: import.meta.env.VITE_URL_LANDING,
|
||||||
}
|
// }
|
||||||
|
|
||||||
const modalReset = ref<boolean>(false) //ตัวแปร popup reset password
|
const modalReset = ref<boolean>(false) //ตัวแปร popup reset password
|
||||||
const fullName = ref<string>('') //ชื่อผู้ใช้งาน
|
const fullName = ref<string>('') //ชื่อผู้ใช้งาน
|
||||||
|
|
@ -160,7 +160,7 @@ function onLoad(index: number, done: Function) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// landing page redirect
|
// landing page redirect
|
||||||
const landingPageUrl = ref<string>(configParam.landingPageUrl)
|
// const landingPageUrl = ref<string>(configParam.landingPageUrl)
|
||||||
|
|
||||||
/** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
|
/** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
|
||||||
async function fetchKeycloakPosition() {
|
async function fetchKeycloakPosition() {
|
||||||
|
|
@ -517,7 +517,7 @@ onMounted(async () => {
|
||||||
:style="
|
:style="
|
||||||
$q.screen.gt.xs
|
$q.screen.gt.xs
|
||||||
? 'padding: 1.8% 2%; margin-top: -200px;'
|
? 'padding: 1.8% 2%; margin-top: -200px;'
|
||||||
: 'padding: 5% 4%; margin-top: -200px;'
|
: 'padding: 0% 0%; margin-top: -200px;'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<router-view :key="$route.fullPath" />
|
<router-view :key="$route.fullPath" />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue