fix MAP
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
aed5362e86
commit
4340eb5e02
5 changed files with 541 additions and 119 deletions
|
|
@ -19,11 +19,11 @@
|
||||||
<body>
|
<body>
|
||||||
<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> -->
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
381
src/components/AscGISMapTime.vue
Normal file
381
src/components/AscGISMapTime.vue
Normal file
|
|
@ -0,0 +1,381 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
import { loadModules } from 'esri-loader'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
import type { LocationObject } from '@/interface/index/Main'
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:location'])
|
||||||
|
|
||||||
|
function updateLocation(latitude: number, longitude: number, namePOI: string) {
|
||||||
|
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
|
||||||
|
emit('update:location', latitude, longitude, namePOI)
|
||||||
|
}
|
||||||
|
|
||||||
|
const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
|
||||||
|
|
||||||
|
// Replace ArcGIS api key
|
||||||
|
const apiKey = ref<string>(
|
||||||
|
'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
|
||||||
|
// 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
|
||||||
|
)
|
||||||
|
const zoomMap = ref<number>(18)
|
||||||
|
|
||||||
|
async function initializeMap() {
|
||||||
|
try {
|
||||||
|
// Load modules of ArcGIS
|
||||||
|
loadModules([
|
||||||
|
'esri/config',
|
||||||
|
'esri/Map',
|
||||||
|
'esri/views/MapView',
|
||||||
|
'esri/Graphic',
|
||||||
|
'esri/geometry/Point',
|
||||||
|
'esri/symbols/PictureMarkerSymbol',
|
||||||
|
'esri/widgets/Search',
|
||||||
|
]).then(
|
||||||
|
async ([
|
||||||
|
esriConfig,
|
||||||
|
Map,
|
||||||
|
MapView,
|
||||||
|
Graphic,
|
||||||
|
Point,
|
||||||
|
PictureMarkerSymbol,
|
||||||
|
Search,
|
||||||
|
]) => {
|
||||||
|
// Set apiKey
|
||||||
|
// esriConfig.apiKey =
|
||||||
|
// 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
|
||||||
|
|
||||||
|
// Create a FeatureLayer using a custom server URL
|
||||||
|
// const hillshadeLayer = new TileLayer({
|
||||||
|
// url: `https://bmagis.bangkok.go.th/arcgis/rest/services/cache/BMA_3D_2D_Cache/MapServer`,
|
||||||
|
// })
|
||||||
|
|
||||||
|
const map = new Map({
|
||||||
|
basemap: 'streets',
|
||||||
|
// basemap: 'streets-navigation-vector',
|
||||||
|
// basemap: 'arcgis-topographic',
|
||||||
|
// layers: [hillshadeLayer],
|
||||||
|
})
|
||||||
|
|
||||||
|
navigator.geolocation.getCurrentPosition(async (position) => {
|
||||||
|
const { latitude, longitude } = position.coords
|
||||||
|
const pointDefult = new Point({
|
||||||
|
latitude,
|
||||||
|
longitude,
|
||||||
|
})
|
||||||
|
|
||||||
|
// สร้าง MapView
|
||||||
|
const mapView = new MapView({
|
||||||
|
container: 'mapViewDisplay', // div ที่จะแสดงแผนที่
|
||||||
|
map: map,
|
||||||
|
center: {
|
||||||
|
latitude: latitude,
|
||||||
|
longitude: longitude,
|
||||||
|
}, // Set the initial map center current position
|
||||||
|
zoom: zoomMap.value, // ระดับการซูม
|
||||||
|
|
||||||
|
ui: {
|
||||||
|
components: [], // Empty array to remove all default UI components
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// สร้างสัญลักษณ์ของหมุด
|
||||||
|
const markerSymbol = new PictureMarkerSymbol({
|
||||||
|
url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // รูปหมุด
|
||||||
|
width: '32px',
|
||||||
|
height: '32px',
|
||||||
|
})
|
||||||
|
|
||||||
|
// สร้าง Search widget เพื่อค้นหาสถานที่
|
||||||
|
const search = new Search({
|
||||||
|
view: mapView,
|
||||||
|
popupEnabled: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
// เพิ่ม Search widget ไปยังแผนที่
|
||||||
|
mapView.ui.add(search, {
|
||||||
|
position: 'top-right', // ตำแหน่งของ Search widget
|
||||||
|
})
|
||||||
|
|
||||||
|
await axios
|
||||||
|
.get(
|
||||||
|
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
f: 'json', // Format JSON response
|
||||||
|
distance: 2000,
|
||||||
|
category: 'POI',
|
||||||
|
location: {
|
||||||
|
spatialReference: { wkid: 4326 },
|
||||||
|
x: longitude,
|
||||||
|
y: latitude,
|
||||||
|
},
|
||||||
|
token: apiKey.value,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
console.log('poi', response.data.location)
|
||||||
|
poiPlaceName.value = response.data.address
|
||||||
|
? response.data.address.PlaceName === ''
|
||||||
|
? response.data.address.ShortLabel
|
||||||
|
: response.data.address.PlaceName
|
||||||
|
: 'ไม่พบข้อมูล'
|
||||||
|
const poiPoint = new Point({
|
||||||
|
longitude: response.data.location.x,
|
||||||
|
latitude: response.data.location.y,
|
||||||
|
})
|
||||||
|
|
||||||
|
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||||
|
})
|
||||||
|
.catch(async () => {
|
||||||
|
await axios
|
||||||
|
.get(
|
||||||
|
'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
f: 'json', // Format JSON response
|
||||||
|
distance: 2000,
|
||||||
|
category: 'POI',
|
||||||
|
location: {
|
||||||
|
spatialReference: { wkid: 4326 },
|
||||||
|
x: longitude,
|
||||||
|
y: latitude,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
// console.log('poi', response.data.location)
|
||||||
|
poiPlaceName.value = response.data.address
|
||||||
|
? response.data.address.PlaceName === ''
|
||||||
|
? response.data.address.ShortLabel
|
||||||
|
: response.data.address.PlaceName
|
||||||
|
: 'ไม่พบข้อมูล'
|
||||||
|
|
||||||
|
updateLocation(longitude, latitude, poiPlaceName.value)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
let searchMarker: any = null
|
||||||
|
|
||||||
|
searchMarker = new Graphic({
|
||||||
|
geometry: pointDefult,
|
||||||
|
symbol: markerSymbol,
|
||||||
|
})
|
||||||
|
mapView.graphics.add(searchMarker)
|
||||||
|
|
||||||
|
// ฟังก์ชันจับการคลิกบนแผนที่
|
||||||
|
search.on('select-result', async function (event: any) {
|
||||||
|
const { latitude, longitude } = event.result.extent.center
|
||||||
|
|
||||||
|
const point = new Point({
|
||||||
|
latitude,
|
||||||
|
longitude,
|
||||||
|
})
|
||||||
|
|
||||||
|
// ลบหมุดเก่า (ถ้ามี)
|
||||||
|
if (searchMarker) {
|
||||||
|
mapView.graphics.remove(searchMarker)
|
||||||
|
}
|
||||||
|
|
||||||
|
// สร้างและเพิ่มหมุดใหม่
|
||||||
|
searchMarker = new Graphic({
|
||||||
|
geometry: point,
|
||||||
|
symbol: markerSymbol,
|
||||||
|
})
|
||||||
|
if (searchMarker) {
|
||||||
|
await axios
|
||||||
|
.get(
|
||||||
|
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
f: 'json', // Format JSON response
|
||||||
|
distance: 2000,
|
||||||
|
category: 'POI',
|
||||||
|
location: {
|
||||||
|
spatialReference: { wkid: 4326 },
|
||||||
|
x: longitude,
|
||||||
|
y: latitude,
|
||||||
|
},
|
||||||
|
token: apiKey.value,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
console.log('poi', response.data.location)
|
||||||
|
poiPlaceName.value = response.data.address
|
||||||
|
? response.data.address.PlaceName === ''
|
||||||
|
? response.data.address.ShortLabel
|
||||||
|
: response.data.address.PlaceName
|
||||||
|
: 'ไม่พบข้อมูล'
|
||||||
|
const poiPoint = new Point({
|
||||||
|
longitude: response.data.location.x,
|
||||||
|
latitude: response.data.location.y,
|
||||||
|
})
|
||||||
|
|
||||||
|
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||||
|
})
|
||||||
|
.catch(async () => {
|
||||||
|
await axios
|
||||||
|
.get(
|
||||||
|
'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
f: 'json', // Format JSON response
|
||||||
|
distance: 2000,
|
||||||
|
category: 'POI',
|
||||||
|
location: {
|
||||||
|
spatialReference: { wkid: 4326 },
|
||||||
|
x: longitude,
|
||||||
|
y: latitude,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
// console.log('poi', response.data.location)
|
||||||
|
poiPlaceName.value = response.data.address
|
||||||
|
? response.data.address.PlaceName === ''
|
||||||
|
? response.data.address.ShortLabel
|
||||||
|
: response.data.address.PlaceName
|
||||||
|
: 'ไม่พบข้อมูล'
|
||||||
|
|
||||||
|
updateLocation(longitude, latitude, poiPlaceName.value)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
mapView.graphics.add(searchMarker)
|
||||||
|
|
||||||
|
// เคลื่อนไปยังตำแหน่งที่เลือก
|
||||||
|
mapView.goTo({
|
||||||
|
target: point,
|
||||||
|
zoom: zoomMap.value,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
mapView.on('click', async function (event: any) {
|
||||||
|
const lat = event.mapPoint.latitude
|
||||||
|
const lon = event.mapPoint.longitude
|
||||||
|
|
||||||
|
const point = new Point({
|
||||||
|
longitude: lon,
|
||||||
|
latitude: lat,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!searchMarker) {
|
||||||
|
searchMarker = new Graphic({
|
||||||
|
geometry: point,
|
||||||
|
symbol: markerSymbol,
|
||||||
|
})
|
||||||
|
|
||||||
|
mapView.graphics.add(searchMarker)
|
||||||
|
} else {
|
||||||
|
searchMarker.geometry = point // ย้ายหมุดไปยังตำแหน่งใหม่
|
||||||
|
if (searchMarker) {
|
||||||
|
await axios
|
||||||
|
.get(
|
||||||
|
'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
f: 'json', // Format JSON response
|
||||||
|
distance: 2000,
|
||||||
|
category: 'POI',
|
||||||
|
location: {
|
||||||
|
spatialReference: { wkid: 4326 },
|
||||||
|
x: lon,
|
||||||
|
y: lat,
|
||||||
|
},
|
||||||
|
token: apiKey.value,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
console.log('poi', response.data.location)
|
||||||
|
poiPlaceName.value = response.data.address
|
||||||
|
? response.data.address.PlaceName === ''
|
||||||
|
? response.data.address.ShortLabel
|
||||||
|
: response.data.address.PlaceName
|
||||||
|
: 'ไม่พบข้อมูล'
|
||||||
|
const poiPoint = new Point({
|
||||||
|
longitude: response.data.location.x,
|
||||||
|
latitude: response.data.location.y,
|
||||||
|
})
|
||||||
|
|
||||||
|
updateLocation(latitude, longitude, poiPlaceName.value)
|
||||||
|
})
|
||||||
|
.catch(async () => {
|
||||||
|
await axios
|
||||||
|
.get(
|
||||||
|
'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
f: 'json', // Format JSON response
|
||||||
|
distance: 2000,
|
||||||
|
category: 'POI',
|
||||||
|
location: {
|
||||||
|
spatialReference: { wkid: 4326 },
|
||||||
|
x: lon,
|
||||||
|
y: lat,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
// console.log('poi', response.data.location)
|
||||||
|
poiPlaceName.value = response.data.address
|
||||||
|
? response.data.address.PlaceName === ''
|
||||||
|
? response.data.address.ShortLabel
|
||||||
|
: response.data.address.PlaceName
|
||||||
|
: 'ไม่พบข้อมูล'
|
||||||
|
|
||||||
|
updateLocation(lat, lon, poiPlaceName.value)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mapView.goTo({
|
||||||
|
target: point,
|
||||||
|
zoom: zoomMap.value,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading the map', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await initializeMap()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
flat
|
||||||
|
class="col-12 bg-grey-2 shadow-0"
|
||||||
|
:style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
|
||||||
|
>
|
||||||
|
<div id="mapViewDisplay" style="height: 35vh"></div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
$q.screen.gt.xs
|
||||||
|
? 'q-pa-xs text-weight-medium text-grey-8'
|
||||||
|
: 'q-pa-xs text-weight-medium text-grey-8'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
พื้นที่ใกล้เคียง
|
||||||
|
<span class="q-px-sm">:</span>
|
||||||
|
{{ poiPlaceName }}
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch, onMounted } from 'vue'
|
import { ref, watch, onMounted, reactive } from 'vue'
|
||||||
import { PropType } from 'vue'
|
import { PropType } from 'vue'
|
||||||
import { useQuasar } from 'quasar'
|
import { useQuasar } from 'quasar'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
|
@ -11,6 +11,8 @@ import { useCounterMixin } from '@/stores/mixin'
|
||||||
import type { FormRef, DataCheckIn } from '@/interface/index/Main'
|
import type { FormRef, DataCheckIn } from '@/interface/index/Main'
|
||||||
import type { FormTimeStemp } from '@/interface/response/checkin'
|
import type { FormTimeStemp } from '@/interface/response/checkin'
|
||||||
|
|
||||||
|
import MapCheck from '@/components/AscGISMapTime.vue'
|
||||||
|
|
||||||
const $q = useQuasar()
|
const $q = useQuasar()
|
||||||
const {
|
const {
|
||||||
date2Thai,
|
date2Thai,
|
||||||
|
|
@ -62,6 +64,11 @@ const objectRef: FormRef = {
|
||||||
reason: reasonRef,
|
reason: reasonRef,
|
||||||
}
|
}
|
||||||
const checkstatusBox = ref<boolean>(false) //สถานะการเลือกเวลาเข้า,ออก
|
const checkstatusBox = ref<boolean>(false) //สถานะการเลือกเวลาเข้า,ออก
|
||||||
|
const formLocation = reactive({
|
||||||
|
lat: 0, //พิกัดละติจูด
|
||||||
|
lng: 0, //พิกัดลองจิจูด
|
||||||
|
POI: '', //ชื่อสถานที่
|
||||||
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังก์ชันอัปเดตเวลา
|
* ฟังก์ชันอัปเดตเวลา
|
||||||
|
|
@ -108,6 +115,9 @@ function onCkickSave() {
|
||||||
checkInEdit: checkboxIn.value,
|
checkInEdit: checkboxIn.value,
|
||||||
checkOutEdit: checkboxOut.value,
|
checkOutEdit: checkboxOut.value,
|
||||||
description: reason.value,
|
description: reason.value,
|
||||||
|
latitude: formLocation.lat.toString(),
|
||||||
|
longitude: formLocation.lng.toString(),
|
||||||
|
POI: formLocation.POI,
|
||||||
}
|
}
|
||||||
|
|
||||||
createListTime(data)
|
createListTime(data)
|
||||||
|
|
@ -137,6 +147,21 @@ async function createListTime(data: FormTimeStemp) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* funciton เรียกพิกัดละติจูด พิกัดลองติจูด
|
||||||
|
* @param location พิกัดละติจูด พิกัดลองติจูด
|
||||||
|
* @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
|
||||||
|
*/
|
||||||
|
async function updateLocation(
|
||||||
|
latitude: number,
|
||||||
|
longitude: number,
|
||||||
|
namePOI: string
|
||||||
|
) {
|
||||||
|
formLocation.lat = latitude
|
||||||
|
formLocation.lng = longitude
|
||||||
|
formLocation.POI = namePOI
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* watch การเปลี่ยนแปลงของ checkboxIn และ checkboxOut
|
* watch การเปลี่ยนแปลงของ checkboxIn และ checkboxOut
|
||||||
*/
|
*/
|
||||||
|
|
@ -167,134 +192,147 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row">
|
<q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
|
||||||
<div class="row q-col-q-gutter-sm q-pa-md">
|
<div class="col-12">
|
||||||
<q-card
|
<div class="row q-col-q-gutter-sm">
|
||||||
flat
|
<div class="q-pa-md col-md-5 col-xs-12">
|
||||||
bordered
|
<q-card
|
||||||
:class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
|
flat
|
||||||
>
|
bordered
|
||||||
<q-card-section class="bg-primary text-white q-pa-sm">
|
:class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
|
||||||
<div class="text-center text-bold">เวลาปัจจุบัน</div>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-card-section class="text-center q-pa-sm">
|
|
||||||
<div class="row q-gutter-md">
|
|
||||||
<div class="col">{{ date2Thai(dateNow) }}</div>
|
|
||||||
<div class="col">{{ timeNoew }}</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card flat bordered class="col-12 q-mt-sm">
|
|
||||||
<div class="q-pa-sm">
|
|
||||||
<datepicker
|
|
||||||
:readonly="!statusAction"
|
|
||||||
v-model="date"
|
|
||||||
:locale="'th'"
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
autoApply
|
|
||||||
outlined
|
|
||||||
lazy-rules
|
|
||||||
:max-date="dateNow"
|
|
||||||
>
|
>
|
||||||
<template #year="{ year }">
|
<q-card-section class="bg-primary text-white q-pa-sm">
|
||||||
{{ year + 543 }}
|
<div class="text-center text-bold">เวลาปัจจุบัน</div>
|
||||||
</template>
|
</q-card-section>
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ parseInt(value + 543) }}
|
<q-card-section class="text-center q-pa-sm">
|
||||||
</template>
|
<div class="row q-gutter-md">
|
||||||
<template #trigger>
|
<div class="col">{{ date2Thai(dateNow) }}</div>
|
||||||
<q-input
|
<div class="col">{{ timeNoew }}</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-card flat bordered class="col-12 q-mt-sm">
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<datepicker
|
||||||
:readonly="!statusAction"
|
:readonly="!statusAction"
|
||||||
ref="dateRef"
|
v-model="date"
|
||||||
|
:locale="'th'"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
autoApply
|
||||||
outlined
|
outlined
|
||||||
dense
|
|
||||||
:model-value="date !== null ? date2Thai(new Date(date)) : null"
|
|
||||||
:label="`${
|
|
||||||
action === 'edit'
|
|
||||||
? 'วันที่ขอแก้ไข'
|
|
||||||
: 'วันที่ขอลงเวลากรณีพิเศษ'
|
|
||||||
}`"
|
|
||||||
format-header="YYYY-MM-DD"
|
|
||||||
lazy-rules
|
lazy-rules
|
||||||
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
:max-date="dateNow"
|
||||||
hide-bottom-space
|
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template #year="{ year }">
|
||||||
<q-icon
|
{{ year + 543 }}
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
</template>
|
||||||
</q-input> </template
|
<template #year-overlay-value="{ value }">
|
||||||
></datepicker>
|
{{ parseInt(value + 543) }}
|
||||||
</div>
|
</template>
|
||||||
</q-card>
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:readonly="!statusAction"
|
||||||
|
ref="dateRef"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:model-value="
|
||||||
|
date !== null ? date2Thai(new Date(date)) : null
|
||||||
|
"
|
||||||
|
:label="`${
|
||||||
|
action === 'edit'
|
||||||
|
? 'วันที่ขอแก้ไข'
|
||||||
|
: 'วันที่ขอลงเวลากรณีพิเศษ'
|
||||||
|
}`"
|
||||||
|
format-header="YYYY-MM-DD"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
||||||
|
hide-bottom-space
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input> </template
|
||||||
|
></datepicker>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<q-card
|
<q-card
|
||||||
v-if="action === 'edit'"
|
v-if="action === 'edit'"
|
||||||
flat
|
flat
|
||||||
bordered
|
bordered
|
||||||
class="q-pa-sm col-12 q-mt-sm"
|
class="q-pa-sm col-12 q-mt-sm"
|
||||||
:style="{
|
:style="{
|
||||||
borderColor: checkstatusBox ? '#B22222' : '',
|
borderColor: checkstatusBox ? '#B22222' : '',
|
||||||
borderWidth: checkstatusBox ? '2px' : '',
|
borderWidth: checkstatusBox ? '2px' : '',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div class="row q-gutter-xs">
|
<div class="row q-gutter-xs">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<q-checkbox
|
<q-checkbox
|
||||||
keep-color
|
keep-color
|
||||||
color="primary"
|
color="primary"
|
||||||
v-model="checkboxIn"
|
v-model="checkboxIn"
|
||||||
label="ขอแก้ไขเวลาเข้างาน"
|
label="ขอแก้ไขเวลาเข้างาน"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="checkboxOut"
|
||||||
|
color="primary"
|
||||||
|
label="ขอแก้ไขเวลาออกงาน"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="checkstatusBox"
|
||||||
|
class="text-red-9 q-pa-sm"
|
||||||
|
style="font-size: 10px"
|
||||||
|
>
|
||||||
|
กรุณาเลือก
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<!-- :style="action == 'special' ? 'margin-bottom: 150px' : ''" -->
|
||||||
<q-checkbox
|
<q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
|
||||||
keep-color
|
<q-input
|
||||||
v-model="checkboxOut"
|
ref="reasonRef"
|
||||||
color="primary"
|
dense
|
||||||
label="ขอแก้ไขเวลาออกงาน"
|
outlined
|
||||||
|
v-model="reason"
|
||||||
|
label="เหตุผล"
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
label-color="grey-5"
|
||||||
|
:rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
class="custom-aqua-border"
|
||||||
/>
|
/>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<q-separator vertical />
|
||||||
|
<div class="q-pa-md col">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
|
||||||
|
<MapCheck @update:location="updateLocation" />
|
||||||
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<div
|
<!-- :style="action == 'special' ? 'margin-bottom: 120px' : ''" -->
|
||||||
v-if="checkstatusBox"
|
|
||||||
class="text-red-9 q-pa-sm"
|
|
||||||
style="font-size: 10px"
|
|
||||||
>
|
|
||||||
กรุณาเลือก
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="q-pa-sm col-12 q-mt-sm"
|
|
||||||
:style="action == 'special' ? 'margin-bottom: 150px' : ''"
|
|
||||||
>
|
|
||||||
<q-input
|
|
||||||
ref="reasonRef"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
v-model="reason"
|
|
||||||
label="เหตุผล"
|
|
||||||
type="textarea"
|
|
||||||
:rows="4"
|
|
||||||
label-color="grey-5"
|
|
||||||
:rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
|
|
||||||
lazy-rules
|
|
||||||
hide-bottom-space
|
|
||||||
class="custom-aqua-border"
|
|
||||||
/>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<div class="col-12">
|
||||||
<div class="col-12"><q-separator /></div>
|
<div class="col-12"><q-separator /></div>
|
||||||
<div class="row col-12 q-pa-sm">
|
<div class="row col-12 q-pa-sm">
|
||||||
<q-space />
|
<q-space />
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ watch(
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="props.modal" persistent m>
|
<q-dialog v-model="props.modal" persistent m>
|
||||||
<q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'width: 320px;'">
|
<q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'min-width: 80vh;'">
|
||||||
<HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
|
<HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
|
||||||
|
|
||||||
<FormTime
|
<FormTime
|
||||||
|
|
|
||||||
|
|
@ -39,5 +39,8 @@ interface FormTimeStemp {
|
||||||
checkInEdit: boolean
|
checkInEdit: boolean
|
||||||
checkOutEdit: boolean
|
checkOutEdit: boolean
|
||||||
description: string
|
description: string
|
||||||
|
latitude: string
|
||||||
|
longitude: string
|
||||||
|
POI: string
|
||||||
}
|
}
|
||||||
export type { FormRef, FormData, Datalist, FormTimeStemp }
|
export type { FormRef, FormData, Datalist, FormTimeStemp }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue