ปรับ code ลงเวลาเข้า-ออกงาน (USER)
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
07b02a7818
commit
9f6fffd73c
2 changed files with 94 additions and 78 deletions
|
|
@ -1,40 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
import { ref,reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useQuasar } from 'quasar'
|
||||
import moment from 'moment'
|
||||
import Camera from 'simple-vue-camera'
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
|
||||
// import Type
|
||||
import type { FormRef } from '@/interface/response/checkin'
|
||||
|
||||
// import components
|
||||
import MapCheck from '@/components/MapCheckin.vue'
|
||||
|
||||
// import Stores
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, showLoader,hideLoader } = mixin
|
||||
const { date2Thai, showLoader, hideLoader } = mixin
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
|
||||
|
||||
const dialogTime = ref<boolean>(false)
|
||||
const stetusCheckin = ref<boolean>(true)
|
||||
const checkInId = ref<string|null> (null)
|
||||
|
||||
/** function เช็คเวลาต้องลงเวลาเข้าหรือออกงาน */
|
||||
async function fetchCheckTime() {
|
||||
showLoader()
|
||||
await http.get(config.API.checkTime())
|
||||
.then((res) => {
|
||||
const data = res.data.result
|
||||
stetusCheckin.value = data.checkInId ? false :true;
|
||||
checkInId.value = data.checkInId ? data.checkInId : ""
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
}).finally(() => {
|
||||
hideLoader();
|
||||
})
|
||||
await http
|
||||
.get(config.API.checkTime())
|
||||
.then((res) => {
|
||||
const data = res.data.result
|
||||
stetusCheckin.value = data.checkInId ? false : true
|
||||
checkInId.value = data.checkInId ? data.checkInId : ''
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
}
|
||||
|
||||
/** ref อัพเดทเวลา*/
|
||||
|
|
@ -55,27 +60,33 @@ function updateClock() {
|
|||
}
|
||||
setInterval(updateClock, 1000)
|
||||
|
||||
// const lat = ref<number>()
|
||||
// const lng = ref<number>()
|
||||
// const POI = ref<string>("")
|
||||
/** form-data */
|
||||
const formLocation = reactive({
|
||||
lat: null,
|
||||
lng: null,
|
||||
POI: "",
|
||||
lat: 0, //พิกัดละติจูด
|
||||
lng: 0, //พิกัดลองจิจูด
|
||||
POI: '', //ชื่อสถานที่
|
||||
})
|
||||
async function updateLocation(location:any,namePOI:string) {
|
||||
const workplace = ref<string>('in-place') //ณ สถานที่ตั้ง, นอกสถานที่ตั้ง
|
||||
const useLocation = ref<string>('') //กรณีเลือกนอกสถานที่ตั้ง ต้องระบุข้อมูลชื่อสถานะที่
|
||||
const fileImg = ref<any>() //รูปถ่ายสถานที่
|
||||
const remark = ref<string>('') //ข้อความหมายเหตุที่ต้องการระบุเพิ่ม
|
||||
const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าสุดที่ยังไม่ลงเวลาออก
|
||||
|
||||
/**
|
||||
* funciton เรียกพิกัดละติจูด พิกัดลองติจูด
|
||||
* @param location พิกัดละติจูด พิกัดลองติจูด
|
||||
* @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
|
||||
*/
|
||||
async function updateLocation(location: any, namePOI: string) {
|
||||
formLocation.lat = location.lat
|
||||
formLocation.lng = location.lng
|
||||
formLocation.POI = namePOI
|
||||
}
|
||||
|
||||
//location
|
||||
const remark = ref<string>('')
|
||||
const location = ref<string>('')
|
||||
const coordinates = ref<string>('')
|
||||
const workplace = ref<string>('in-place')
|
||||
const useLocation = ref<string | null>('')
|
||||
const model = ref<string | null>('')
|
||||
const model = ref<string>('')
|
||||
const options = ref<string[]>([
|
||||
'ปฏิบัติงานที่บ้าน',
|
||||
'ลืมลงเวลาปฏิบัติงาน',
|
||||
|
|
@ -83,6 +94,8 @@ const options = ref<string[]>([
|
|||
'ขออนุญาตออกนอกสถานที่',
|
||||
'อื่นๆ',
|
||||
])
|
||||
|
||||
/** function เลือกสถานที่*/
|
||||
function selectLocation() {
|
||||
if (model.value === 'อื่นๆ') {
|
||||
useLocation.value = ''
|
||||
|
|
@ -90,16 +103,16 @@ function selectLocation() {
|
|||
useLocation.value = model.value
|
||||
}
|
||||
}
|
||||
//camera
|
||||
|
||||
/** Camera */
|
||||
const camera = ref<InstanceType<typeof Camera>>()
|
||||
const cameraIsOn = ref<boolean>(false)
|
||||
const fileImg = ref<any>()
|
||||
const img = ref<any>(undefined)
|
||||
const photoWidth = ref<number>(350)
|
||||
const photoHeight = ref<number>(350)
|
||||
|
||||
const openCamera = async () => {
|
||||
/** function เปิดกล้อง */
|
||||
async function openCamera() {
|
||||
// change camera device
|
||||
if (cameraIsOn.value) {
|
||||
camera.value?.stop()
|
||||
|
|
@ -110,37 +123,37 @@ const openCamera = async () => {
|
|||
cameraIsOn.value = !cameraIsOn.value
|
||||
}
|
||||
|
||||
// change camera device
|
||||
const changeCamera = async () => {
|
||||
/** change camera device */
|
||||
async function changeCamera() {
|
||||
const devices: any = await camera.value?.devices(['videoinput'])
|
||||
const device = await devices[0]
|
||||
camera.value?.changeCamera(device.deviceId)
|
||||
|
||||
}
|
||||
|
||||
/** function ถ่ายรูป*/
|
||||
async function capturePhoto() {
|
||||
const imageBlob: any = await camera.value?.snapshot(
|
||||
{ width: photoWidth.value, height: photoHeight.value },
|
||||
'image/png',
|
||||
0.5
|
||||
)
|
||||
console.log(imageBlob);
|
||||
const fileName = 'photo.image';
|
||||
|
||||
const file = new File([imageBlob], fileName, { type: 'image/png' });
|
||||
fileImg.value = file
|
||||
|
||||
const fileName = 'photo.png'
|
||||
//ไฟล์รูป
|
||||
const file = new File([imageBlob], fileName, { type: 'image/png' })
|
||||
fileImg.value = file
|
||||
//แสดงรูป
|
||||
camera.value?.stop()
|
||||
const url = URL.createObjectURL(imageBlob)
|
||||
img.value = url
|
||||
img.value = url
|
||||
}
|
||||
|
||||
/** function เปลี่ยนรูปภาพ*/
|
||||
function refreshPhoto() {
|
||||
img.value = undefined
|
||||
camera.value?.start()
|
||||
}
|
||||
|
||||
// validate
|
||||
/** ref validate*/
|
||||
const useLocationRef = ref<object | null>(null)
|
||||
const modelRef = ref<object | null>(null)
|
||||
const objectRef: FormRef = {
|
||||
|
|
@ -148,7 +161,7 @@ const objectRef: FormRef = {
|
|||
useLocation: useLocationRef,
|
||||
}
|
||||
|
||||
|
||||
/** function ตรวจสอบค่าว่างของ input*/
|
||||
function validateForm() {
|
||||
const hasError = []
|
||||
for (const key in objectRef) {
|
||||
|
|
@ -166,35 +179,36 @@ function validateForm() {
|
|||
console.log('ไม่ผ่าน ')
|
||||
}
|
||||
}
|
||||
// ยืนยันการลงเวลา
|
||||
const dialogTime = ref<boolean>(false)
|
||||
async function confirm () {
|
||||
const isLocation = workplace.value === "in-place";
|
||||
const formdata = new FormData();
|
||||
formdata.append("lat", formLocation.lat);
|
||||
formdata.append("lon", formLocation.lng);
|
||||
formdata.append("POI", formLocation.POI);
|
||||
formdata.append("isLocation", isLocation.toString());
|
||||
formdata.append("locationName", useLocation.value);
|
||||
formdata.append("Img", fileImg.value);
|
||||
formdata.append("remark", remark.value);
|
||||
formdata.append("CheckInId", checkInId.value);
|
||||
await http.post(config.API.checkin(),formdata)
|
||||
.then(async(res) => {
|
||||
const data = res.data.result
|
||||
console.log(res.data.result);
|
||||
const dateTimeString = data.date.toString()
|
||||
const timeOnly = dateTimeString.split(" ")[1];
|
||||
console.log(timeOnly);
|
||||
dialogTime.value = true
|
||||
await fetchCheckTime()
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
|
||||
/** function ยืนยันการลงเวลาเข้า - ออก*/
|
||||
async function confirm() {
|
||||
const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
|
||||
const formdata = new FormData()
|
||||
formdata.append('lat', formLocation.lat.toString())
|
||||
formdata.append('lon', formLocation.lng.toString())
|
||||
formdata.append('POI', formLocation.POI)
|
||||
formdata.append('isLocation', isLocation.toString())
|
||||
formdata.append('locationName', useLocation.value)
|
||||
formdata.append('Img', fileImg.value)
|
||||
formdata.append('remark', remark.value)
|
||||
formdata.append('CheckInId', checkInId.value)
|
||||
await http
|
||||
.post(config.API.checkin(), formdata)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result
|
||||
console.log(res.data.result)
|
||||
const dateTimeString = data.date.toString()
|
||||
const timeOnly = dateTimeString.split(' ')[1]
|
||||
console.log(timeOnly)
|
||||
dialogTime.value = true
|
||||
await fetchCheckTime()
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
// ยิงไปที่ api แล้วแสดง popup
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// class
|
||||
const getClass = (val: boolean) => {
|
||||
|
|
@ -204,7 +218,7 @@ const getClass = (val: boolean) => {
|
|||
}
|
||||
}
|
||||
/** Hook*/
|
||||
onMounted(async() => {
|
||||
onMounted(async () => {
|
||||
await fetchCheckTime()
|
||||
|
||||
updateClock()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue