hrms-bangkok/hrms-checkin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix switch Landscape -> Portrait

Browse source
This commit is contained in:
Warunee Tamkoo 2026-04-30 15:55:31 +07:00
parent ec22714f01
commit e9d28197df
5 changed files with 964 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/views/HomeView.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
import { useQuasar } from 'quasar'
import { format } from 'date-fns'
import Camera from 'simple-vue-camera'
@ -466,7 +466,12 @@ async function validateForm() {
}
}
const mapRef = ref<InstanceType<typeof MapCheck> | null>(null)
const mapRefDesktop = ref<InstanceType<typeof MapCheck> | null>(null)
const mapRefMobile = ref<InstanceType<typeof MapCheck> | null>(null)
// Computed ref that returns the correct map ref based on screen size
const mapRef = computed(() => ($q.screen.gt.xs ? mapRefDesktop.value : mapRefMobile.value))
const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
/** function ยืนยันการลงเวลาเข้า - ออก*/
@ -777,13 +782,13 @@ watch(
<div class="col-xs-12 col-sm-8 gt-xs">
<div class="col-12">
<MapCheck
v-if="$q.screen.gt.xs"
ref="mapRef"
ref="mapRefDesktop"
:initialPOI="formLocation.POI"
@update:location="updateLocation"
/>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="col-xs-12 col-sm-4 gt-xs">
<q-card
:class="
$q.screen.xs ? 'card-container-xs' : 'card-container'
@ -893,6 +898,81 @@ watch(
<!-- กรอกข้อมูล หน้ามือถือ -->
<div class="col-12 row q-col-gutter-y-md" v-if="$q.screen.xs">
<!-- กล้อง หน้ามือถือ -->
<div class="col-12">
<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 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
class="absolute-bottom text-subtitle2 text-center q-py-sm"
style="background: #00000021"
>
<q-btn
v-if="availableCameras.length > 1 && img == null"
round
icon="flip_camera_ios"
size="16px"
style="background: #424242; color: white"
@click="switchCamera"
unelevated
class="q-mr-xs"
/>
<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"
unelevated
/>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12" v-if="!isDisabledCheckTime">
<q-card
flat
@ -965,8 +1045,13 @@ watch(
</q-card>
</div>
<div class="col-12" v-if="$q.screen.xs">
<MapCheck ref="mapRef" @update:location="updateLocation" />
<!-- Map หน้ามือถือ -->
<div class="col-12">
<MapCheck
ref="mapRefMobile"
:initialPOI="formLocation.POI"
@update:location="updateLocation"
/>
</div>
</div>
<!-- กรอกข้อมูล หน้ามือถือ -->