move map last page
This commit is contained in:
parent
feb78d06ce
commit
b3aeda65bd
1 changed files with 407 additions and 381 deletions
|
|
@ -59,8 +59,8 @@ function updateClock() {
|
|||
const hh = moment(date).format('HH')
|
||||
const mm = moment(date).format('mm')
|
||||
const ss = moment(date).format('ss')
|
||||
const HH = moment(date).format('hh');
|
||||
const A = moment(date).format('a');
|
||||
const HH = moment(date).format('hh')
|
||||
const A = moment(date).format('a')
|
||||
|
||||
formattedS.value = ss
|
||||
formattedM.value = mm
|
||||
|
|
@ -325,134 +325,142 @@ onMounted(async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-page :style="$q.screen.xs ? 'padding-top: 90px':''">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-card flat :class="$q.screen.gt.xs ? 'row col-12 cardNone': 'row col-12 bg-grey-2'">
|
||||
<!-- <q-header elevated class="bg-purple"> -->
|
||||
<div :class="getClass(stetusCheckin)" class="gt-xs">
|
||||
<div class="col">
|
||||
<div class="row col-12 justify-center q-py-sm text-subtitle1">
|
||||
<!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
|
||||
<q-page :style="$q.screen.xs ? 'padding-top: 90px' : ''">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-card
|
||||
flat
|
||||
:class="
|
||||
$q.screen.gt.xs ? 'row col-12 cardNone' : 'row col-12 bg-grey-2'
|
||||
"
|
||||
>
|
||||
<!-- <q-header elevated class="bg-purple"> -->
|
||||
<div :class="getClass(stetusCheckin)" class="gt-xs">
|
||||
<div class="col">
|
||||
<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 v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
|
||||
<strong v-if="!stetusCheckin && inQueue">
|
||||
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
|
||||
</strong>
|
||||
|
||||
<strong
|
||||
v-else-if="stetusCheckin && inQueue"
|
||||
>
|
||||
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
||||
</strong>
|
||||
<strong v-else-if="stetusCheckin && inQueue">
|
||||
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
||||
</strong>
|
||||
|
||||
<strong
|
||||
v-else-if="stetusCheckin && !inQueue"
|
||||
>
|
||||
ลงเวลาเข้างาน
|
||||
</strong>
|
||||
<strong v-else-if="stetusCheckin && !inQueue">
|
||||
ลงเวลาเข้างาน
|
||||
</strong>
|
||||
|
||||
<strong v-else > ลงเวลาออกงาน </strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-grey-9">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-12 row q-pt-md justify-center gt-xs">
|
||||
<div
|
||||
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
||||
>
|
||||
{{ date2Thai(Thai) }}
|
||||
<strong v-else> ลงเวลาออกงาน </strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-grey-9">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-12 row q-pt-md justify-center gt-xs">
|
||||
<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="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 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 class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg">
|
||||
<div class="col-12" v-if="$q.screen.xs">
|
||||
</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 @update:location="updateLocation" />
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8 gt-xs">
|
||||
<div class="col-12">
|
||||
<MapCheck @update:location="updateLocation" />
|
||||
<!-- <AscMaps /> -->
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<q-card
|
||||
:class="
|
||||
$q.screen.xs ? 'card-container-xs' : 'card-container'
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="!cameraIsOn && img == null"
|
||||
class="preview-placeholder"
|
||||
@click="() => !isDisabledCheckTime && openCamera()"
|
||||
>
|
||||
<div class="text-center">
|
||||
<q-icon
|
||||
name="mdi-camera"
|
||||
color="blue-grey-3"
|
||||
size="100px"
|
||||
class="center-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <AscMaps /> -->
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<q-card :class="$q.screen.xs? 'card-container-xs':'card-container'">
|
||||
<div
|
||||
v-if="!cameraIsOn && img == null"
|
||||
class="preview-placeholder"
|
||||
@click="() => !isDisabledCheckTime && openCamera()"
|
||||
>
|
||||
<div class="text-center">
|
||||
<q-icon
|
||||
name="mdi-camera"
|
||||
color="blue-grey-3"
|
||||
size="100px"
|
||||
class="center-icon"
|
||||
<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>
|
||||
<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">
|
||||
<div v-else>
|
||||
<div
|
||||
class="absolute-bottom text-subtitle2 text-center q-py-sm"
|
||||
style="background: #00000021"
|
||||
>
|
||||
<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;"
|
||||
style="background: #263238; color: white"
|
||||
@click="capturePhoto"
|
||||
unelevated
|
||||
/>
|
||||
|
|
@ -461,287 +469,300 @@ onMounted(async () => {
|
|||
round
|
||||
icon="refresh"
|
||||
size="18px"
|
||||
style="background: #263238; color: white;"
|
||||
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
|
||||
type="textarea"
|
||||
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
|
||||
class="col-12"
|
||||
v-if="model == 'อื่นๆ' && workplace === 'off-site'"
|
||||
>
|
||||
<q-card class="col-12">
|
||||
<q-input
|
||||
ref="useLocationRef"
|
||||
filled
|
||||
v-model="useLocation"
|
||||
label="ระบุสถานที่"
|
||||
bg-color="white"
|
||||
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</q-card>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
</q-card>
|
||||
</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
|
||||
<!-- กรอกข้อมูล หน้ามือถือ -->
|
||||
<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
|
||||
type="textarea"
|
||||
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
|
||||
class="col-12"
|
||||
v-if="model == 'อื่นๆ' && workplace === 'off-site'"
|
||||
>
|
||||
<q-card class="col-12">
|
||||
<q-input
|
||||
ref="useLocationRef"
|
||||
filled
|
||||
v-model="useLocation"
|
||||
label="ระบุสถานที่"
|
||||
bg-color="white"
|
||||
:rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-if="$q.screen.xs">
|
||||
<MapCheck @update:location="updateLocation" />
|
||||
</div>
|
||||
</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
|
||||
? 'text-red text-caption '
|
||||
: 'text-red text-caption text-center'
|
||||
? 'q-px-md q-py-sm row items-center shadow-0'
|
||||
: 'q-pa-md row items-center shadow-0'
|
||||
"
|
||||
>
|
||||
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
||||
</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 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">
|
||||
<q-separator />
|
||||
<div class="text-red q-pa-md">*{{ msgCheckTime }}</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="
|
||||
$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>
|
||||
</q-card>
|
||||
|
||||
<div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
|
||||
<q-separator />
|
||||
<div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
<!-- top page sticky หน้ามือถือ-->
|
||||
<q-page-sticky expand position="top" v-if="$q.screen.xs">
|
||||
<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>
|
||||
</q-page>
|
||||
|
||||
<!-- top page sticky หน้ามือถือ-->
|
||||
<q-page-sticky expand position="top" v-if="$q.screen.xs">
|
||||
<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">
|
||||
{{ formattedHH }}<span class="q-ma-xs">:</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-h4 text-weight-bold">
|
||||
{{ formattedM }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-caption q-pl-sm">{{ formattedA }}</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">
|
||||
{{ formattedHH }}<span class="q-ma-xs">:</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-h4 text-weight-bold">
|
||||
{{ formattedM }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="colunm">
|
||||
<div class="text-caption q-pl-sm">{{ formattedA }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-page-sticky>
|
||||
|
||||
<!-- footer หน้ามือถือ-->
|
||||
<q-footer reveal v-if="!isDisabledCheckTime && $q.screen.xs" class="bg-grey-2">
|
||||
<q-separator />
|
||||
<div 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>
|
||||
</q-footer>
|
||||
</div>
|
||||
</div>
|
||||
</q-page-sticky>
|
||||
|
||||
<!-- footer หน้ามือถือ-->
|
||||
<q-footer
|
||||
reveal
|
||||
v-if="!isDisabledCheckTime && $q.screen.xs"
|
||||
class="bg-grey-2"
|
||||
>
|
||||
<q-separator />
|
||||
<div 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>
|
||||
</q-footer>
|
||||
|
||||
<!-- แสดงการลงเวลา -->
|
||||
<q-dialog v-model="modalTime" persistent>
|
||||
|
|
@ -789,8 +810,6 @@ onMounted(async () => {
|
|||
</q-dialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
|
||||
.q-card.cardImg:hover {
|
||||
border: 1px solid #02a998 !important;
|
||||
}
|
||||
|
|
@ -807,9 +826,8 @@ onMounted(async () => {
|
|||
height: autu; /* Adjust as needed */
|
||||
background: #f5f5f5;
|
||||
height: 35vh !important;
|
||||
box-shadow: none !important;;
|
||||
border: 1px solid #EDEDED;
|
||||
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.card-container-xs {
|
||||
position: relative;
|
||||
|
|
@ -839,13 +857,21 @@ onMounted(async () => {
|
|||
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-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%);
|
||||
.bg-topIn {
|
||||
background: rgb(39, 50, 56);
|
||||
background: linear-gradient(
|
||||
175deg,
|
||||
rgba(39, 50, 56, 1) 76%,
|
||||
rgba(2, 169, 152, 1) 100%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue