Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
251f18ca51
9 changed files with 674 additions and 21 deletions
|
|
@ -125,8 +125,9 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
|
|||
*/
|
||||
function fetchOption(op: any) {
|
||||
const aId = agency.value ?? "00000000-0000-0000-0000-000000000000";
|
||||
const hasID = op.find((e: any) => e.id === agency.value);
|
||||
|
||||
if (aId !== "00000000-0000-0000-0000-000000000000") {
|
||||
if (aId !== "00000000-0000-0000-0000-000000000000" && hasID) {
|
||||
typeOc.value = agency.value;
|
||||
optionsTypeOc.value = op;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ import { useQuasar } from "quasar";
|
|||
/** import Type*/
|
||||
import type { FormDetail } from "@/modules/09_leave/interface/response/work";
|
||||
|
||||
/** importComponents*/
|
||||
import Map from "@/modules/09_leave/components/1_Work/DialogMap.vue";
|
||||
|
||||
/** importStores */
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
|
||||
|
|
@ -122,6 +125,13 @@ function closePopup() {
|
|||
props.close ? props.close() : false;
|
||||
}
|
||||
|
||||
const modalMap = ref<boolean>(false);
|
||||
const titleMap = ref<string>("");
|
||||
function onClickMap(title: string) {
|
||||
titleMap.value = title;
|
||||
modalMap.value = !modalMap.value;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
|
|
@ -222,6 +232,15 @@ watch(
|
|||
{{ formData.checkInLocation }}
|
||||
<div class="text-grey-6" v-if="formData.checkInLat">
|
||||
({{ formData.checkInLat }}, {{ formData.checkInLon }})
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="map"
|
||||
@click="onClickMap('พิกัดสถานที่เข้างาน')"
|
||||
><q-tooltip>พิกัดสถานที่เข้างาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -276,7 +295,16 @@ watch(
|
|||
<div class="col">
|
||||
{{ formData.checkOutLocation }}
|
||||
<div class="text-grey-6" v-if="formData.checkOutLat">
|
||||
({{ formData.checkOutLat }}, {{ formData.checkOutLon }})
|
||||
({{ formData.checkOutLat }},
|
||||
{{ formData.checkOutLon }})<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="map"
|
||||
@click="onClickMap('พิกัดสถานที่ออกงาน')"
|
||||
><q-tooltip>พิกัดสถานที่ออกงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -319,6 +347,13 @@ watch(
|
|||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<Map
|
||||
:modal="modalMap"
|
||||
:title="titleMap"
|
||||
:close="onClickMap"
|
||||
:data="props.detail"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
123
src/modules/09_leave/components/1_Work/DialogMap.vue
Normal file
123
src/modules/09_leave/components/1_Work/DialogMap.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { loadModules } from "esri-loader";
|
||||
|
||||
const apiKey = ref<string>(
|
||||
"AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP"
|
||||
);
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
close: {
|
||||
type: Function,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
});
|
||||
|
||||
const isLoadMap = ref<boolean>(false);
|
||||
async function initializeMap(lat: number, long: number) {
|
||||
isLoadMap.value = false;
|
||||
try {
|
||||
// Load modules of ArcGIS
|
||||
const [esriConfig, Map, MapView, Point, Graphic] = await loadModules([
|
||||
"esri/config",
|
||||
"esri/Map",
|
||||
"esri/views/MapView",
|
||||
"esri/geometry/Point",
|
||||
"esri/Graphic",
|
||||
]);
|
||||
// Set apiKey
|
||||
esriConfig.apiKey = apiKey.value;
|
||||
const map = new Map({
|
||||
basemap: "arcgis-topographic",
|
||||
});
|
||||
|
||||
const point = new Point({
|
||||
type: "point",
|
||||
longitude: long,
|
||||
latitude: lat,
|
||||
});
|
||||
|
||||
const mapView = new MapView({
|
||||
container: "mapViewDisplay",
|
||||
map: map,
|
||||
center: {
|
||||
latitude: lat,
|
||||
longitude: long,
|
||||
}, // Set the initial map center current position
|
||||
zoom: 16,
|
||||
ui: {
|
||||
components: [], // Empty array to remove all default UI components
|
||||
},
|
||||
});
|
||||
|
||||
// Pin icon
|
||||
const pinSymbol = {
|
||||
type: "picture-marker",
|
||||
url: "http://maps.google.com/mapfiles/ms/icons/red.png",
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
};
|
||||
|
||||
// Create a graphic using the point and symbol
|
||||
const pointGraphic = new Graphic({
|
||||
geometry: point,
|
||||
symbol: pinSymbol,
|
||||
});
|
||||
mapView.graphics.add(pointGraphic);
|
||||
setTimeout(() => {
|
||||
isLoadMap.value = true;
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error("Error loading the map", error);
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
const lat =
|
||||
props.title === "พิกัดสถานที่เข้างาน"
|
||||
? props.data?.checkInLat
|
||||
: props.data?.checkOutLat;
|
||||
const long =
|
||||
props.title === "พิกัดสถานที่เข้างาน"
|
||||
? props.data?.checkInLon
|
||||
: props.data?.checkOutLon;
|
||||
|
||||
props.modal && initializeMap(lat, long);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="props.modal">
|
||||
<q-card style="width: 950px; max-width: 80vw; min-height: 65vh;">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle1 text-weight-bold">
|
||||
<span style="margin-right: 0"> {{ props.title }}</span>
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
for="closeDialog"
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="props.close"
|
||||
style="color: #eb0505; background-color: #ffdede"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-separator />
|
||||
<q-card flat bordered>
|
||||
<div id="mapViewDisplay" style="height: 65vh" v-show="isLoadMap"></div>
|
||||
<q-skeleton height="65vh" square v-if="!isLoadMap" />
|
||||
</q-card> </q-card
|
||||
></q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -892,12 +892,12 @@ onMounted(async () => {
|
|||
:href="downloadDocEditUrl"
|
||||
target="_blank"
|
||||
class="col-12"
|
||||
icon="download"
|
||||
color="indigo"
|
||||
icon="visibility"
|
||||
color="blue"
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
|
||||
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ function addData(formData: any) {
|
|||
http
|
||||
.post(config.API.meeting(), {
|
||||
round: formData.rounded ?? "",
|
||||
tittle: formData.title,
|
||||
title: formData.title,
|
||||
dateEnd: formData.dateMeetingEnd,
|
||||
dateStart: formData.dateMeetingStart,
|
||||
result: formData.consider,
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const fetchData = async () => {
|
|||
.get(config.API.meetingById(personalId.value))
|
||||
.then((res) => {
|
||||
const dataApi = res.data.result;
|
||||
data.title = dataApi.tittle;
|
||||
data.title = dataApi.title;
|
||||
data.rounded = dataApi.round;
|
||||
data.consider = dataApi.result;
|
||||
data.period = dataApi.duration;
|
||||
|
|
@ -86,7 +86,7 @@ function putData(formData: any) {
|
|||
http
|
||||
.put(config.API.meetingById(personalId.value), {
|
||||
round: formData.rounded ?? "",
|
||||
tittle: formData.title,
|
||||
title: formData.title,
|
||||
dateStart: dateToISO(formData.dateMeetingStart),
|
||||
dateEnd: dateToISO(formData.dateMeetingEnd),
|
||||
result: formData.consider,
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export const useEvaluateMeetingDataStore = defineStore(
|
|||
lastUpdateUserId: item.lastUpdateUserId,
|
||||
createdFullName: item.createdFullName,
|
||||
lastUpdateFullName: item.lastUpdateFullName,
|
||||
title: item.tittle,
|
||||
title: item.title,
|
||||
round: item.round,
|
||||
date: `${date2Thai(item.dateStart as Date, false, true)} - ${date2Thai(
|
||||
item.dateEnd as Date,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue