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 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 HH = moment(date).format('hh')
|
||||||
const A = moment(date).format('a');
|
const A = moment(date).format('a')
|
||||||
|
|
||||||
formattedS.value = ss
|
formattedS.value = ss
|
||||||
formattedM.value = mm
|
formattedM.value = mm
|
||||||
|
|
@ -325,134 +325,142 @@ onMounted(async () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-page :style="$q.screen.xs ? 'padding-top: 90px':''">
|
<q-page :style="$q.screen.xs ? 'padding-top: 90px' : ''">
|
||||||
<div class="col-12 row justify-center">
|
<div class="col-12 row justify-center">
|
||||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
<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-card
|
||||||
<!-- <q-header elevated class="bg-purple"> -->
|
flat
|
||||||
<div :class="getClass(stetusCheckin)" class="gt-xs">
|
:class="
|
||||||
<div class="col">
|
$q.screen.gt.xs ? 'row col-12 cardNone' : 'row col-12 bg-grey-2'
|
||||||
<div class="row col-12 justify-center q-py-sm text-subtitle1">
|
"
|
||||||
<!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
|
>
|
||||||
|
<!-- <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> -->
|
||||||
<!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
|
<!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
|
||||||
<strong v-if="!stetusCheckin && inQueue" >
|
<strong v-if="!stetusCheckin && inQueue">
|
||||||
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
|
ลงเวลาออกงาน (ระบบกำลังประมวลผล)
|
||||||
</strong>
|
</strong>
|
||||||
|
|
||||||
<strong
|
<strong v-else-if="stetusCheckin && inQueue">
|
||||||
v-else-if="stetusCheckin && inQueue"
|
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
||||||
>
|
</strong>
|
||||||
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<strong
|
<strong v-else-if="stetusCheckin && !inQueue">
|
||||||
v-else-if="stetusCheckin && !inQueue"
|
ลงเวลาเข้างาน
|
||||||
>
|
</strong>
|
||||||
ลงเวลาเข้างาน
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<strong v-else > ลงเวลาออกงาน </strong>
|
<strong v-else> ลงเวลาออกงาน </strong>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 text-grey-9">
|
</div>
|
||||||
<div class="col-12 row justify-center">
|
<div class="col-12 text-grey-9">
|
||||||
<div class="col-12 row q-pt-md justify-center gt-xs">
|
<div class="col-12 row justify-center">
|
||||||
<div
|
<div class="col-12 row q-pt-md justify-center gt-xs">
|
||||||
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
<div
|
||||||
>
|
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
|
||||||
{{ date2Thai(Thai) }}
|
>
|
||||||
|
{{ 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>
|
||||||
<div class="row col-12 justify-center q-py-sm">
|
<div class="colunm">
|
||||||
<div class="colunm">
|
<div class="text-h3 text-weight-bold">
|
||||||
<div class="text-h3 text-weight-bold">
|
{{ formattedM }}<span class="q-ma-md">:</span>
|
||||||
{{ 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 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>
|
||||||
<div class="col-12" v-if="$q.screen.xs">
|
<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" />
|
<MapCheck @update:location="updateLocation" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 col-sm-8 gt-xs">
|
<!-- <AscMaps /> -->
|
||||||
<div class="col-12">
|
</div>
|
||||||
<MapCheck @update:location="updateLocation" />
|
<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>
|
</div>
|
||||||
<!-- <AscMaps /> -->
|
<div class="col-12 row items-center">
|
||||||
</div>
|
<!-- แสดงกล้องตอนกดถ่ายภาพ -->
|
||||||
<div class="col-xs-12 col-sm-4">
|
|
||||||
<q-card :class="$q.screen.xs? 'card-container-xs':'card-container'">
|
<Camera
|
||||||
<div
|
:resolution="{ width: photoWidth, height: photoHeight }"
|
||||||
v-if="!cameraIsOn && img == null"
|
ref="camera"
|
||||||
class="preview-placeholder"
|
:autoplay="false"
|
||||||
@click="() => !isDisabledCheckTime && openCamera()"
|
:style="!img ? 'display: block' : 'display: none'"
|
||||||
>
|
/>
|
||||||
<div class="text-center">
|
|
||||||
<q-icon
|
<!-- แสดงรูปเมื่อกด capture -->
|
||||||
name="mdi-camera"
|
<div v-if="img" class="image-container">
|
||||||
color="blue-grey-3"
|
<q-img :src="img" class="image-element"></q-img>
|
||||||
size="100px"
|
</div>
|
||||||
class="center-icon"
|
|
||||||
|
<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>
|
<div v-else>
|
||||||
<div class="col-12 row items-center">
|
<div
|
||||||
<!-- แสดงกล้องตอนกดถ่ายภาพ -->
|
class="absolute-bottom text-subtitle2 text-center q-py-sm"
|
||||||
|
style="background: #00000021"
|
||||||
<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
|
<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
|
round
|
||||||
v-if="img == null"
|
v-if="img == null"
|
||||||
icon="photo_camera"
|
icon="photo_camera"
|
||||||
size="18px"
|
size="18px"
|
||||||
style="background: #263238; color: white;"
|
style="background: #263238; color: white"
|
||||||
@click="capturePhoto"
|
@click="capturePhoto"
|
||||||
unelevated
|
unelevated
|
||||||
/>
|
/>
|
||||||
|
|
@ -461,287 +469,300 @@ onMounted(async () => {
|
||||||
round
|
round
|
||||||
icon="refresh"
|
icon="refresh"
|
||||||
size="18px"
|
size="18px"
|
||||||
style="background: #263238; color: white;"
|
style="background: #263238; color: white"
|
||||||
@click="refreshPhoto"
|
@click="refreshPhoto"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<div class="col-12" v-if="workplace == 'off-site'">
|
</q-card>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="!isDisabledCheckTime && $q.screen.gt.xs" class="col-12 text-right">
|
<!-- กรอกข้อมูล หน้ามือถือ -->
|
||||||
<q-separator />
|
<div class="col-12 row q-col-gutter-y-md" v-if="$q.screen.xs">
|
||||||
<div class="col-12 q-pa-md">
|
<div class="col-12" v-if="!isDisabledCheckTime">
|
||||||
<p
|
<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="
|
:class="
|
||||||
$q.screen.gt.xs
|
$q.screen.gt.xs
|
||||||
? 'text-red text-caption '
|
? 'q-px-md q-py-sm row items-center shadow-0'
|
||||||
: 'text-red text-caption text-center'
|
: 'q-pa-md row items-center shadow-0'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
<div class="text-weight-bold">สถานที่ทำงาน</div>
|
||||||
</p>
|
<div
|
||||||
<q-btn
|
:class="
|
||||||
:label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
|
$q.screen.gt.xs
|
||||||
:color="img == null ? 'grey-6' : 'primary'"
|
? 'row q-gutter-md q-pl-md col-sm-6 col-md-3'
|
||||||
push
|
: 'column col-12'
|
||||||
size="18px"
|
"
|
||||||
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
|
>
|
||||||
:disable="camera && img ? false : true"
|
<q-radio
|
||||||
@click="validateForm"
|
v-model="workplace"
|
||||||
:loading="inQueue"
|
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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
|
<div
|
||||||
<q-separator />
|
v-if="!isDisabledCheckTime"
|
||||||
<div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
|
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>
|
</div>
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-page>
|
|
||||||
|
|
||||||
<!-- top page sticky หน้ามือถือ-->
|
<div
|
||||||
<q-page-sticky expand position="top" v-if="$q.screen.xs">
|
v-if="!isDisabledCheckTime && $q.screen.gt.xs"
|
||||||
<div :class="getClassXS(stetusCheckin)" >
|
class="col-12 text-right"
|
||||||
<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"
|
|
||||||
>
|
>
|
||||||
ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
|
<q-separator />
|
||||||
</strong>
|
<div class="col-12 q-pa-md">
|
||||||
|
<p
|
||||||
<strong
|
:class="
|
||||||
v-else-if="stetusCheckin && !inQueue"
|
$q.screen.gt.xs
|
||||||
>
|
? 'text-red text-caption '
|
||||||
ลงเวลาเข้างาน
|
: 'text-red text-caption text-center'
|
||||||
</strong>
|
"
|
||||||
|
>
|
||||||
<strong v-else > ลงเวลาออกงาน </strong>
|
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
||||||
</div>
|
</p>
|
||||||
<div class="text-white text-body2 row col-12" style="line-height:1.5rem">
|
<q-btn
|
||||||
{{ date2Thai(Thai) }}
|
:label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
|
||||||
</div>
|
:color="img == null ? 'grey-6' : 'primary'"
|
||||||
</div>
|
push
|
||||||
<div class="col-6 row items-center" >
|
size="18px"
|
||||||
<div class="row col-12 justify-end">
|
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
|
||||||
<div class="colunm">
|
:disable="camera && img ? false : true"
|
||||||
<div class="text-h4 text-weight-bold">
|
@click="validateForm"
|
||||||
{{ formattedHH }}<span class="q-ma-xs">:</span>
|
:loading="inQueue"
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</q-page-sticky>
|
<div class="col-6 row items-center">
|
||||||
|
<div class="row col-12 justify-end">
|
||||||
<!-- footer หน้ามือถือ-->
|
<div class="colunm">
|
||||||
<q-footer reveal v-if="!isDisabledCheckTime && $q.screen.xs" class="bg-grey-2">
|
<div class="text-h4 text-weight-bold">
|
||||||
<q-separator />
|
{{ formattedHH }}<span class="q-ma-xs">:</span>
|
||||||
<div class="col-12 q-pa-md">
|
</div>
|
||||||
<p
|
</div>
|
||||||
:class="
|
<div class="colunm">
|
||||||
$q.screen.gt.xs
|
<div class="text-h4 text-weight-bold">
|
||||||
? 'text-red text-caption '
|
{{ formattedM }}
|
||||||
: 'text-red text-caption text-center'
|
</div>
|
||||||
"
|
</div>
|
||||||
>
|
<div class="colunm">
|
||||||
*หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
|
<div class="text-caption q-pl-sm">{{ formattedA }}</div>
|
||||||
</p>
|
</div>
|
||||||
<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-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>
|
<q-dialog v-model="modalTime" persistent>
|
||||||
|
|
@ -789,8 +810,6 @@ onMounted(async () => {
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
|
|
||||||
.q-card.cardImg:hover {
|
.q-card.cardImg:hover {
|
||||||
border: 1px solid #02a998 !important;
|
border: 1px solid #02a998 !important;
|
||||||
}
|
}
|
||||||
|
|
@ -807,9 +826,8 @@ onMounted(async () => {
|
||||||
height: autu; /* Adjust as needed */
|
height: autu; /* Adjust as needed */
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
height: 35vh !important;
|
height: 35vh !important;
|
||||||
box-shadow: none !important;;
|
box-shadow: none !important;
|
||||||
border: 1px solid #EDEDED;
|
border: 1px solid #ededed;
|
||||||
|
|
||||||
}
|
}
|
||||||
.card-container-xs {
|
.card-container-xs {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -839,13 +857,21 @@ onMounted(async () => {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-topOut{
|
.bg-topOut {
|
||||||
background: rgb(39,50,56);
|
background: rgb(39, 50, 56);
|
||||||
background: linear-gradient(175deg, rgba(39,50,56,1) 76%, rgba(198,40,40,1) 100%);
|
background: linear-gradient(
|
||||||
|
175deg,
|
||||||
|
rgba(39, 50, 56, 1) 76%,
|
||||||
|
rgba(198, 40, 40, 1) 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-topIn{
|
.bg-topIn {
|
||||||
background: rgb(39,50,56);
|
background: rgb(39, 50, 56);
|
||||||
background: linear-gradient(175deg, rgba(39,50,56,1) 76%, rgba(2,169,152,1) 100%);
|
background: linear-gradient(
|
||||||
|
175deg,
|
||||||
|
rgba(39, 50, 56, 1) 76%,
|
||||||
|
rgba(2, 169, 152, 1) 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue