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

แบบ สอบถาม

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-10-10 11:16:52 +07:00
parent d3ddfc38d7
commit 736bd7eb6a
4 changed files with 861 additions and 469 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/api/leave/api.leave.ts
View file

@ -8,4 +8,6 @@ export default {
resingByid: (id: string) => `${retirementResign}/resign/${id}`, resingByid: (id: string) => `${retirementResign}/resign/${id}`,
questionnaireByid: (id: string) => `${retirementResign}/resign/questionnaire/${id}`, questionnaireByid: (id: string) => `${retirementResign}/resign/questionnaire/${id}`,
listquestionnaire: () => `${retirementResign}/resign/questionnaire`, listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
// คำถาม
questionList: () => `${retirementResign}/resign/questionnaire/question`
} }

29
src/modules/03_retire/interface/request/Main.ts Normal file
View file

@ -0,0 +1,29 @@
interface QuestionDescription {
question1Desc: string;
question2Desc: string;
question3Desc: string;
question4Desc: string;
question5Desc: string;
question6Desc: string;
question7Desc: string;
question8Desc: string;
question9Desc: string;
question10Desc: string;
[key: string]: string;
}
interface OptionQuestions {
label: string;
value: number;
}
interface OptionQuestions2 {
label: string;
value: boolean;
}
export type {
QuestionDescription,
OptionQuestions,
OptionQuestions2
};

882
src/modules/03_retire/views/result.vue
View file

@ -1,339 +1,581 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue" import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar" import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router" import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http" import http from "@/plugins/http";
import config from "@/app.config" import config from "@/app.config";
const route = useRoute() import type {
const router = useRouter() QuestionDescription,
const $q = useQuasar() OptionQuestions,
const mixin = useCounterMixin() OptionQuestions2,
const { success, messageError, notifyError } = mixin } from "@/modules/03_retire/interface/request/Main";
const dataId = ref<any>(route.params.id.toString())
const exitFactor = ref<any>([]) const route = useRoute();
const reasonWork = ref<any>([]) const router = useRouter();
const adjust = ref<any>([]) const $q = useQuasar();
const timeThink = ref<any>() const mixin = useCounterMixin();
const realReason = ref<any>("") const { success, messageError, notifyError, showLoader, hideLoader } = mixin;
const notExitFactor = ref<any>("") const dataId = ref<any>(route.params.id.toString());
const haveJob = ref<any>()
const suggestFriends = ref<any>()
const futureWork = ref<any>()
const suggestion = ref<any>("")
const reasonWorkOther = ref("") const exitFactor = ref<any>([]);
const reasonWork_option = ref<any>([ const reasonWork = ref<any>([]);
{ label: "ความมั่นคงในการทำงาน ", value: 0 }, const adjust = ref<any>([]);
{ label: "สิทธิประโยชน์/สวัสดิการ", value: 1 }, const timeThink = ref<any>();
{ label: "อัตราเงินเดือน ", value: 2 }, const realReason = ref<any>("");
{ label: "ลักษณะงาน ", value: 3 }, const notExitFactor = ref<any>("");
{ label: "วัฒนธรรมการทำงานของข้าราชการ ", value: 4 }, const haveJob = ref<any>();
{ label: "นโยบายของหน่วยงาน ", value: 5 }, const suggestFriends = ref<any>();
{ label: "ระบบการทำงาน", value: 6 }, const futureWork = ref<any>();
{ label: "สมดุลชีวิตการทำงาน ", value: 7 }, const suggestion = ref<any>("");
{ label: "บรรยากาศในการทำงาน ", value: 8 },
{ label: "การพัฒนาในสายอาชีพ ", value: 9 },
{ label: "โอกาสความก้าวหน้า ", value: 10 },
{ label: "การได้รับการยอมรับจากสังคม ", value: 11 },
{ label: "อื่น ๆ (ระบุ) ", value: 12 },
])
const exitFactorOther = ref("")
const exitFactor_option = ref<any>([
{ label: "อัตราเงินเดือน ", value: 0 },
{ label: "สวัสดิการ", value: 1 },
{ label: "ลักษณะงาน ", value: 2 },
{ label: "ระบบการทำงาน ", value: 3 },
{ label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
{ label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
{ label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
{ label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
{ label: "ระบบบริหารงานภายในหน่วยงาน ", value: 8 },
{ label: "บรรยากาศในการทำงาน ", value: 9 },
{ label: "การปฏิบัติอย่างเป็นธรรม ", value: 10 },
{ label: "การยอมรับความแตกต่างหลากหลาย ", value: 11 },
{ label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน ", value: 12 },
{ label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
{ label: "โอกาสความก้าวหน้า ", value: 14 },
{ label: "อื่น ๆ (ระบุ) ", value: 15 },
])
const suggestFriendsReason = ref("")
const suggestFriends_option = ref<any>([
{ label: "แนะนำ ", value: 0 },
{ label: "ไม่แนะนำ (ระบุ)", value: 1 },
])
const timeThink_option = ref<any>([
{ label: "น้อยกว่า 2 สัปดาห์ ", value: 0 },
{ label: "1 เดือน - 3 เดือน", value: 1 },
{ label: "3 เดือน - 6 เดือน ", value: 2 },
{ label: "6 เดือนขึ้นไป ", value: 3 },
])
const haveJobReason = ref<any>("")
const haveJob_option = ref<any>([
{ label: "มี (ระบุ)", value: 0 },
{ label: "ไม่มี", value: 1 },
])
const futureWorkReason = ref<any>("")
const futureWork_option = ref<any>([
{ label: "อยาก ", value: 0 },
{ label: "ไม่อยาก (ระบุ)", value: 1 },
])
const adjustOther = ref("")
const adjust_option = ref<any>([
{ label: "อัตราเงินเดือน ", value: 0 },
{ label: "สวัสดิการ", value: 1 },
{ label: "ลักษณะงาน ", value: 2 },
{ label: "ระบบการทำงาน ", value: 3 },
{ label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
{ label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
{ label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
{ label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
{ label: "ระบบบริหารงานภายในหน่วยงาน ", value: 8 },
{ label: "บรรยากาศในการทำงาน ", value: 9 },
{ label: "การปฏิบัติอย่างเป็นธรรม ", value: 10 },
{ label: "การยอมรับความแตกต่างหลากหลาย ", value: 11 },
{ label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน ", value: 12 },
{ label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
{ label: "โอกาสความก้าวหน้า ", value: 14 },
{ label: "อื่น ๆ (ระบุ) ", value: 15 },
])
const reasonWorkOther = ref("");
// const reasonWork_option = ref<any>([
// { label: "ความมั่นคงในการทำงาน ", value: 0 },
// { label: "สิทธิประโยชน์/สวัสดิการ", value: 1 },
// { label: "อัตราเงินเดือน ", value: 2 },
// { label: "ลักษณะงาน ", value: 3 },
// { label: "วัฒนธรรมการทำงานของข้าราชการ ", value: 4 },
// { label: "นโยบายของหน่วยงาน ", value: 5 },
// { label: "ระบบการทำงาน", value: 6 },
// { label: "สมดุลชีวิตการทำงาน ", value: 7 },
// { label: "บรรยากาศในการทำงาน ", value: 8 },
// { label: "การพัฒนาในสายอาชีพ ", value: 9 },
// { label: "โอกาสความก้าวหน้า ", value: 10 },
// { label: "การได้รับการยอมรับจากสังคม ", value: 11 },
// { label: "อื่น ๆ (ระบุ) ", value: 12 },
// ]);
const exitFactorOther = ref("");
// const exitFactor_option = ref<any>([
// { label: "อัตราเงินเดือน ", value: 0 },
// { label: "สวัสดิการ", value: 1 },
// { label: "ลักษณะงาน ", value: 2 },
// { label: "ระบบการทำงาน ", value: 3 },
// { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
// { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
// { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
// { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
// { label: "ระบบบริหารงานภายในหน่วยงาน ", value: 8 },
// { label: "บรรยากาศในการทำงาน ", value: 9 },
// { label: "การปฏิบัติอย่างเป็นธรรม ", value: 10 },
// { label: "การยอมรับความแตกต่างหลากหลาย ", value: 11 },
// { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน ", value: 12 },
// { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
// { label: "โอกาสความก้าวหน้า ", value: 14 },
// { label: "อื่น ๆ (ระบุ) ", value: 15 },
// ]);
const suggestFriendsReason = ref("");
// const suggestFriends_option = ref<any>([
// { label: "แนะนำ ", value: 0 },
// { label: "ไม่แนะนำ (ระบุ)", value: 1 },
// ]);
// const timeThink_option = ref<any>([
// { label: "น้อยกว่า 2 สัปดาห์ ", value: 0 },
// { label: "1 เดือน - 3 เดือน", value: 1 },
// { label: "3 เดือน - 6 เดือน ", value: 2 },
// { label: "6 เดือนขึ้นไป ", value: 3 },
// ]);
const haveJobReason = ref<any>("");
// const haveJob_option = ref<any>([
// { label: "มี (ระบุ)", value: 0 },
// { label: "ไม่มี", value: 1 },
// ]);
const futureWorkReason = ref<any>("");
// const futureWork_option = ref<any>([
// { label: "อยาก", value: 0 },
// { label: "ไม่อยาก (ระบุ)", value: 1 },
// ]);
const adjustOther = ref("");
// const adjust_option = ref<any>([
// { label: "อัตราเงินเดือน ", value: 0 },
// { label: "สวัสดิการ", value: 1 },
// { label: "ลักษณะงาน ", value: 2 },
// { label: "ระบบการทำงาน ", value: 3 },
// { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
// { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
// { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
// { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
// { label: "ระบบบริหารงานภายในหน่วยงาน ", value: 8 },
// { label: "บรรยากาศในการทำงาน ", value: 9 },
// { label: "การปฏิบัติอย่างเป็นธรรม ", value: 10 },
// { label: "การยอมรับความแตกต่างหลากหลาย ", value: 11 },
// { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน ", value: 12 },
// { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
// { label: "โอกาสความก้าวหน้า ", value: 14 },
// { label: "อื่น ๆ (ระบุ) ", value: 15 },
// ]);
//
onMounted(async () => {
showLoader();
await fecthQuestion();
});
// เรียกชุดคำถาม
// คำถาม
const questionDesc = ref<QuestionDescription>({
question1Desc: "",
question2Desc: "",
question3Desc: "",
question4Desc: "",
question5Desc: "",
question6Desc: "",
question7Desc: "",
question8Desc: "",
question9Desc: "",
question10Desc: "",
});
const question1Answer = ref<OptionQuestions[]>([]);
const question2Answer = ref<OptionQuestions[]>([]);
const question3Answer = ref<OptionQuestions[]>([]);
const question4Answer = ref<OptionQuestions[]>([]);
const question7Answer = ref<OptionQuestions2[]>([]);
const question8Answer = ref<OptionQuestions2[]>([]);
const question9Answer = ref<OptionQuestions2[]>([]);
async function fecthQuestion() {
await http
.get(config.API.questionList())
.then((res) => {
const data = res.data.result;
question1Answer.value = [];
question3Answer.value = [];
question4Answer.value = [];
// คำถามแบบสอบถามหลัก
for (let i = 1; i <= 10; i++) {
const questionKey = `question${i}Desc`;
questionDesc.value[questionKey] = `${i}. ${data[questionKey]}`;
}
// คำถามแบบสอบถามย่อย
const Answer1 = data.question1Answer.map((e: any, index: number) => ({
label: e,
value: index,
}));
question1Answer.value = Answer1;
question1Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer1.length,
});
question2Answer.value = data.question2Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
const Answer3 = data.question3Answer.map((e: any, index: number) => ({
label: e,
value: index,
}));
question3Answer.value = Answer3;
question3Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer3.length,
});
const Answer4 = data.question4Answer.map((e: any, index: number) => ({
label: e,
value: index,
}));
question4Answer.value = Answer4;
question4Answer.value.push({
label: "อื่น ๆ (ระบุ)",
value: Answer4.length,
});
question7Answer.value = data.question7Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
question8Answer.value = data.question8Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
question9Answer.value = data.question9Answer.map(
(e: any, index: number) => ({
label: e,
value: index,
})
);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
//บันทึกเเบบสอบถาม //บันทึกเเบบสอบถาม
const saveForm = () => { const saveForm = () => {
let hasError = false let hasError = false;
if ( if (
reasonWork.value.length === 0 || reasonWork.value.length === 0 ||
(reasonWork.value.filter((x: any) => x == 12).length > 0 && (reasonWorkOther.value == null || reasonWorkOther.value == "")) || (reasonWork.value.filter((x: any) => x == 12).length > 0 &&
timeThink.value.length === 0 || (reasonWorkOther.value == null || reasonWorkOther.value == "")) ||
exitFactor.value.length === 0 || timeThink.value.length === 0 ||
(exitFactor.value.filter((x: any) => x == 15).length > 0 && (exitFactorOther.value == null || exitFactorOther.value == "")) || exitFactor.value.length === 0 ||
adjust.value.length === 0 || (exitFactor.value.filter((x: any) => x == 15).length > 0 &&
(adjust.value.filter((x: any) => x == 15).length > 0 && (adjustOther.value == null || adjustOther.value == "")) || (exitFactorOther.value == null || exitFactorOther.value == "")) ||
realReason.value.length < 1 || adjust.value.length === 0 ||
notExitFactor.value.length < 1 || (adjust.value.filter((x: any) => x == 15).length > 0 &&
haveJob.value.length === 0 || (adjustOther.value == null || adjustOther.value == "")) ||
(haveJob.value === 0 && (haveJobReason.value == null || haveJobReason.value == "")) || realReason.value.length < 1 ||
suggestFriends.value.length === 0 || notExitFactor.value.length < 1 ||
(suggestFriends.value === 1 && (suggestFriendsReason.value == null || suggestFriendsReason.value == "")) || haveJob.value.length === 0 ||
futureWork.value.length === 0 || (haveJob.value === 0 &&
(futureWork.value === 1 && (futureWorkReason.value == null || futureWorkReason.value == "")) || (haveJobReason.value == null || haveJobReason.value == "")) ||
suggestion.value.length < 1 suggestFriends.value.length === 0 ||
) { (suggestFriends.value === 1 &&
hasError = true (suggestFriendsReason.value == null ||
} else { suggestFriendsReason.value == "")) ||
$q.dialog({ futureWork.value.length === 0 ||
title: "ยืนยันข้อมูลแบบสอบถาม", (futureWork.value === 1 &&
message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?", (futureWorkReason.value == null || futureWorkReason.value == "")) ||
cancel: { suggestion.value.length < 1
flat: true, ) {
color: "negative", hasError = true;
}, } else {
persistent: true, $q.dialog({
}) title: "ยืนยันข้อมูลแบบสอบถาม",
.onOk(async () => { message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?",
createResult() cancel: {
}) flat: true,
.onCancel(() => {}) color: "negative",
.onDismiss(() => {}) },
} persistent: true,
if (hasError === true) { })
notifyError($q, "กรุณากรอกข้อมูลให้ครบ") .onOk(async () => {
} createResult();
} })
.onCancel(() => {})
.onDismiss(() => {});
}
if (hasError === true) {
notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
}
};
const createResult = async () => { const createResult = async () => {
const data = { const data = {
RetirementResignId: dataId.value, RetirementResignId: dataId.value,
ReasonWork: reasonWork.value, ReasonWork: reasonWork.value,
ReasonWorkOther: reasonWorkOther.value, ReasonWorkOther: reasonWorkOther.value,
TimeThink: timeThink.value, TimeThink: timeThink.value,
ExitFactor: exitFactor.value, ExitFactor: exitFactor.value,
ExitFactorOther: exitFactorOther.value, ExitFactorOther: exitFactorOther.value,
Adjust: adjust.value, Adjust: adjust.value,
AdjustOther: adjustOther.value, AdjustOther: adjustOther.value,
RealReason: realReason.value, RealReason: realReason.value,
NotExitFactor: notExitFactor.value, NotExitFactor: notExitFactor.value,
Havejob: haveJob.value, Havejob: haveJob.value,
HavejobReason: haveJobReason.value, HavejobReason: haveJobReason.value,
SuggestFriends: suggestFriends.value, SuggestFriends: suggestFriends.value,
SuggestFriendsReason: suggestFriendsReason.value, SuggestFriendsReason: suggestFriendsReason.value,
FutureWork: futureWork.value, FutureWork: futureWork.value,
FutureWorkReason: futureWorkReason.value, FutureWorkReason: futureWorkReason.value,
Suggestion: suggestion.value, Suggestion: suggestion.value,
} };
await http await http
.post(config.API.listquestionnaire(), data) .post(config.API.listquestionnaire(), data)
.then((res: any) => { .then(() => {
success($q, "บันทึกข้อมูลสำเร็จ") success($q, "บันทึกข้อมูลสำเร็จ");
router.push(`/retire`) router.push(`/retire`);
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e) messageError($q, e);
}) });
} };
</script> </script>
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11"> <div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center"> <div class="toptitle text-white col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.push(`/retire`)" /> <q-btn
</div> icon="mdi-arrow-left"
<div class="col-12"> unelevated
<q-card bordered> round
<div class="col-12 row q-col-gutter-md q-pa-md"> dense
<div class="col-xs-12 col-sm-12"> flat
<q-card bordered flat> color="primary"
<div class="q-pa-xs bg-white-2 row items-center q-py-sm q-px-md justify-center text-bold">เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม</div> class="q-mr-sm"
<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">แบบสอบถาม</div> @click="router.push(`/retire`)"
<q-separator /> />
<div class="col-12 row q-pa-sm q-col-gutter-sm"> </div>
<div class="col-12 text-top0 items-center">1. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)</div> <div class="col-12">
<q-option-group :options="reasonWork_option" type="checkbox" v-model="reasonWork" /> <q-card bordered>
<div class="col-12 text-top0 items-center"> <div class="col-12 row q-col-gutter-md q-pa-md">
<q-item-label> <div class="col-xs-12 col-sm-12">
<q-input <q-card bordered flat>
v-if="reasonWork.includes(12)" <div
v-model="reasonWorkOther" class="q-pa-xs bg-white-2 row items-center q-py-sm q-px-md justify-center text-bold"
label="กรอกอื่นๆ" >
dense เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม
lazy-rules </div>
type="text" <div
autogrow class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
hide-bottom-space >
outlined แบบสอบถาม
class="bg-white" </div>
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']" <q-separator />
/> <div class="col-12 row q-pa-sm q-col-gutter-sm">
</q-item-label> <div class="col-12 text-top0 items-center">
</div> <!-- 1. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร
<div class="col-12 text-top0 items-center">2. สำหรับการลาออกในครั้งนี้ ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด</div> (เลือกได้มากกว่า 1 ข้อ) -->
<q-option-group :options="timeThink_option" type="radio" v-model="timeThink" /> {{ questionDesc.question1Desc }}
</div>
<q-option-group
:options="question1Answer"
type="checkbox"
v-model="reasonWork"
/>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="reasonWork.includes(question1Answer.length - 1)"
v-model="reasonWorkOther"
label="กรอกอื่นๆ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 2. สำหรับการลาออกในครั้งนี้
ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด -->
{{ questionDesc.question2Desc }}
</div>
<q-option-group
:options="question2Answer"
type="radio"
v-model="timeThink"
/>
<div class="col-12 text-top0 items-center">3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ )</div> <div class="col-12 text-top0 items-center">
<q-option-group :options="exitFactor_option" type="checkbox" v-model="exitFactor" /> <!-- 3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ
<div class="col-12 text-top0 items-center"> (เลือกได้มากกว่า 1 ข้อ ) -->
<q-item-label> {{ questionDesc.question3Desc }}
<q-input </div>
v-if="exitFactor.includes(15)" <q-option-group
v-model="exitFactorOther" :options="question3Answer"
label="กรอกอื่นๆ" type="checkbox"
dense v-model="exitFactor"
lazy-rules />
type="text" <div class="col-12 text-top0 items-center">
autogrow <q-item-label>
hide-bottom-space <q-input
outlined v-if="exitFactor.includes(question3Answer.length - 1)"
class="bg-white" v-model="exitFactorOther"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']" label="กรอกอื่นๆ"
/> dense
</q-item-label> lazy-rules
</div> type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">4. อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)</div> <div class="col-12 text-top0 items-center">
<q-list> {{ questionDesc.question4Desc }}
<q-option-group :options="adjust_option" type="checkbox" v-model="adjust" /> </div>
</q-list> <q-list>
<div class="col-12 text-top0 items-center"> <q-option-group
<q-item-label> :options="question4Answer"
<q-input type="checkbox"
v-if="adjust.includes(15)" v-model="adjust"
v-model="adjustOther" />
label="กรอกอื่นๆ" </q-list>
dense <div class="col-12 text-top0 items-center">
lazy-rules <q-item-label>
type="text" <q-input
autogrow v-if="adjust.includes(question4Answer.length - 1)"
hide-bottom-space v-model="adjustOther"
outlined label="กรอกอื่นๆ"
class="bg-white" dense
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']" lazy-rules
/> type="text"
</q-item-label> autogrow
</div> hide-bottom-space
<div class="col-12 text-top0 items-center">5. โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?</div> outlined
<q-input class="col-12" dense outlined v-model="realReason" label=" " type="textarea" /> class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 5. โปรดระบุสาเหตุที่แท้จริง
ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร
? -->
{{ questionDesc.question5Desc }}
</div>
<q-input
class="col-12"
dense
outlined
v-model="realReason"
label=" "
type="textarea"
/>
<div class="col-12 text-top0 items-center">6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร</div> <div class="col-12 text-top0 items-center">
<q-input class="col-12" dense outlined v-model="notExitFactor" label=" " type="textarea" /> <!-- 6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ
ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร -->
{{ questionDesc.question6Desc }}
</div>
<q-input
class="col-12"
dense
outlined
v-model="notExitFactor"
label=" "
type="textarea"
/>
<div class="col-12 text-top0 items-center"> <div class="col-12 text-top0 items-center">
7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน <!-- 7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ)
</div> และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน
<q-option-group :options="haveJob_option" type="radio" v-model="haveJob" /> ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร -->
<div class="col-12 text-top0 items-center"> {{ questionDesc.question7Desc }}
<q-item-label> </div>
<q-input <q-option-group
v-if="haveJob === 0" :options="question7Answer"
v-model="haveJobReason" type="radio"
label="กรอกข้อความ" v-model="haveJob"
dense />
lazy-rules <div class="col-12 text-top0 items-center">
type="text" <q-item-label>
autogrow <q-input
hide-bottom-space v-if="haveJob === 0"
outlined v-model="haveJobReason"
class="bg-white" label="กรอกข้อความ"
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']" dense
/> lazy-rules
</q-item-label> type="text"
</div> autogrow
<div class="col-12 text-top0 items-center">8. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)</div> hide-bottom-space
<q-option-group :options="suggestFriends_option" type="radio" v-model="suggestFriends" /> outlined
<div class="col-12 text-top0 items-center"> class="bg-white"
<q-item-label> :rules="[
<q-input (val) =>
v-if="suggestFriends === 1" (val && val.length > 0) || 'กรุณากรอกข้อความ',
v-model="suggestFriendsReason" ]"
label="กรอกข้อความ" />
dense </q-item-label>
lazy-rules </div>
type="text" <div class="col-12 text-top0 items-center">
autogrow <!-- 8. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่
hide-bottom-space (ถ้าไม่ โปรดระบุเหตุผล) -->
outlined {{ questionDesc.question8Desc }}
class="bg-white" </div>
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']" <q-option-group
/> :options="question8Answer"
</q-item-label> type="radio"
</div> v-model="suggestFriends"
<div class="col-12 text-top0 items-center">9. หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)</div> />
<q-option-group :options="futureWork_option" type="radio" v-model="futureWork" /> <div class="col-12 text-top0 items-center">
<div class="col-12 text-top0 items-center"> <q-item-label>
<q-item-label> <q-input
<q-input v-if="suggestFriends === 1"
v-if="futureWork === 1" v-model="suggestFriendsReason"
v-model="futureWorkReason" label="กรอกข้อความ"
label="กรอกข้อความ" dense
dense lazy-rules
lazy-rules type="text"
type="text" autogrow
autogrow hide-bottom-space
hide-bottom-space outlined
outlined class="bg-white"
class="bg-white" :rules="[
:rules="[val => (val && val.length > 0) || 'กรุณากรอกข้อความ']" (val) =>
/> (val && val.length > 0) || 'กรุณากรอกข้อความ',
</q-item-label> ]"
</div> />
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<!-- 9. หากท่านมีโอกาสในอนาคต
ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่
โปรดระบุเหตุผล) -->
{{ questionDesc.question9Desc }}
</div>
<q-option-group
:options="question9Answer"
type="radio"
v-model="futureWork"
/>
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="futureWork === 1"
v-model="futureWorkReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) =>
(val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">10. ความคิดเห็นและข้อเสนอแนะอื่น ๆ</div> <div class="col-12 text-top0 items-center">
<q-input class="col-12" dense outlined v-model="suggestion" label=" " type="textarea" /> <!-- 10. ความคิดเห็นและข้อเสนอแนะอื่น ๆ -->
{{ questionDesc.question10Desc }}
</div>
<q-input
class="col-12"
dense
outlined
v-model="suggestion"
label=" "
type="textarea"
/>
<q-separator /> <q-separator />
</div> </div>
</q-card> </q-card>
</div> </div>
</div> </div>
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />
<q-btn unelevated dense class="q-px-md items-center" color="primary" label="บันทึกข้อมูลแบบสอบถาม" @click="saveForm" /> <q-btn
</div> unelevated
</q-card> dense
</div> class="q-px-md items-center"
</div> color="primary"
</div> label="บันทึกข้อมูลแบบสอบถาม"
@click="saveForm"
/>
</div>
</q-card>
</div>
</div>
</div>
</template> </template>

417
src/modules/04_checkin/views/Checkin.vue
View file

@ -1,158 +1,221 @@
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11 "> <div class="col-xs-12 col-sm-12 col-md-11">
<q-card flat class="row col-12 cardNone" > <q-card flat class="row col-12 cardNone">
<div :class="getClass(checkIn)"> <div :class="getClass(checkIn)">
<div class="col-2"> <div class="col-2">
<q-btn <q-btn
icon="mdi-arrow-left" icon="mdi-arrow-left"
unelevated unelevated
round round
dense dense
flat flat
color="white" color="white"
@click="router.go(-1)" @click="router.go(-1)"
/> />
</div>
<span class="text-body1 text-weight-bold col-8 text-center">
<span v-if="checkIn">ลงเวลาเข้างาน</span>
<span v-else>ลงเวลาออกงาน</span>
</span>
<div class="col-2 text-right">
<q-btn
icon="mdi-history"
unelevated
rounded
dense
flat
color="white"
:label="$q.screen.gt.xs ? 'ประวัติการลงเวลา': ''"
:class="$q.screen.gt.xs ? 'q-px-sm': ''"
@click="router.push('/check-in/history')"
/>
</div>
</div> </div>
<div class="col-12 q-pa-md text-grey-9"> <span class="text-body1 text-weight-bold col-8 text-center">
<div class="col-12 row justify-center"> <span v-if="checkIn">ลงเวลาเข้างาน</span>
<div class="col-12 row q-py-sm justify-center"> <span v-else>ลงเวลาออกงาน</span>
<div </span>
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold" <div class="col-2 text-right">
> <q-btn
{{ Thai }} icon="mdi-history"
unelevated
rounded
dense
flat
color="white"
:label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
:class="$q.screen.gt.xs ? 'q-px-sm' : ''"
@click="router.push('/check-in/history')"
/>
</div>
</div>
<div class="col-12 q-pa-md text-grey-9">
<div class="col-12 row justify-center">
<div class="col-12 row q-py-sm justify-center">
<div
class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
>
{{ 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> </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> -->
</div>
<div class="colunm">
<div class="text-h3 text-weight-bold">
{{ formattedM }}<span class="q-ma-md">:</span>
</div>
<!-- <div>นาที</div> -->
</div>
<div class="colunm">
<div class="text-h3 text-weight-bold">{{ formattedS }}</div>
<!-- <div>วินาที</div> -->
</div> </div>
<!-- <div>นาที</div> -->
</div>
<div class="colunm">
<div class="text-h3 text-weight-bold">{{ formattedS }}</div>
<!-- <div>วินาที</div> -->
</div> </div>
</div> </div>
<!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> --> </div>
<div class="col-xs-12 col-md-11 row q-col-gutter-md"> <!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> -->
<div class="col-12 col-sm-8"> <div class="col-xs-12 col-md-11 row q-col-gutter-md">
<q-card <div class="col-12 col-sm-8">
bordered <q-card
flat bordered
class="col-12 bg-grey-2 shadow-0" flat
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'" class="col-12 bg-grey-2 shadow-0"
> :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
<!-- <mapCheckin /> --> >
<q-img <!-- <mapCheckin /> -->
src="@/assets/map1.png" <q-img
:style=" src="@/assets/map1.png"
$q.screen.gt.xs ? 'height: 300px;' : 'height: 168px;' :style="
" $q.screen.gt.xs ? 'height: 300px;' : 'height: 168px;'
></q-img> "
<div class="q-pa-md text-weight-medium text-grey-8"> ></q-img>
พื้นที่ใกล้เคียง <div class="q-pa-md text-weight-medium text-grey-8">
<span class="q-px-sm">:</span> พื้นที่ใกล้เคียง
{{location}} <span class="q-px-sm">:</span>
{{ location }}
</div>
</q-card>
</div>
<div class="col-12 col-sm-4">
<q-card
flat
bordered
class="cardImg col-12 bg-grey-2 items-center row cursor-pointer shadow-0"
@click="photo()"
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
>
<div class="column col-12" v-if="!camera">
<div class="text-center">
<q-icon
name="mdi-camera"
size="100px"
color="blue-grey-3"
/>
</div> </div>
<!-- <div class="text-center q-pt-md text-grey-7">
</q-card>
</div>
<div class="col-12 col-sm-4">
<q-card
flat
bordered
class="cardImg col-12 bg-grey-2 items-center row cursor-pointer shadow-0"
@click="photo()"
:style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
>
<div class="column col-12" v-if="!camera">
<div class="text-center">
<q-icon
name="mdi-image-off-outline"
size="100px"
color="blue-grey-3"
/>
</div>
<!-- <div class="text-center q-pt-md text-grey-7">
ไม่มีรูปภาพ ไม่มีรูปภาพ
</div> --> </div> -->
</div>
<div v-else>
<div v-if="hasPhoto">
<video
ref="video"
autoplay
:style="{
width: videoWidth + 'px',
height: videoHeight + 'px',
}"
></video>
<canvas
ref="canvas"
:width="videoWidth"
:height="videoHeight"
></canvas>
</div> </div>
<q-img
v-else <div v-else class="q-mt-sm">
src="@/assets/camera.jpg" <q-img
:style=" :src="img"
$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;' :style="{
" width: videoWidth + 'px',
> height: videoHeight + 'px',
</q-img> }"
<!-- <div class="absolute-bottom-right q-ma-md"> class="q-mt-lg"
></q-img>
<canvas
ref="canvas"
:width="canvasWidth"
:height="canvasHeight"
:style="{
width: videoWidth + 'px',
height: videoHeight + 'px',
}"
></canvas>
</div>
<div class="absolute-bottom-right q-ma-md">
<q-btn <q-btn
round round
push push
icon="mdi-camera" icon="mdi-camera"
size="md" size="md"
color="positive" color="positive"
@click="photo()" @click="capturePhoto"
/> />
</div> -->
</q-card>
</div>
<div class="col-12 q-mb-md">
<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="ในสถานที่" />
<q-radio v-model="workplace" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="off-site" label="นอกสถานที่" />
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-4"> </div>
<q-select v-if="workplace == 'off-site'" dense class="q-ml-md" outlined v-model="model" :options="options" prefix="ระบุสถานที่ :" /> </q-card>
</div> </div>
</q-card> <div class="col-12 q-mb-md">
</div> <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="ในสถานที่"
/>
<q-radio
v-model="workplace"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="off-site"
label="นอกสถานที่"
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<q-select
v-if="workplace == 'off-site'"
dense
class="q-ml-md"
outlined
v-model="model"
:options="options"
prefix="ระบุสถานที่ :"
/>
</div>
</q-card>
</div> </div>
</div>
</div>
<div class="col-12 text-right" v-if="camera">
<div class="col-12">
<q-separator />
</div>
<div class="col-12 q-pa-md">
<q-btn
:label="checkIn == true ? 'ลงเวลาเข้างาน': 'ลงเวลาออกงาน'"
:color="checkIn == true ? 'primary': 'red-9'"
push
size="14px"
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
@click="confirm"
/>
</div> </div>
</div> </div>
</div>
<div class="col-12 text-right" v-if="camera">
<div class="col-12">
<q-separator />
</div>
<div class="col-12 q-pa-md">
<q-btn
:label="checkIn == true ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
:color="checkIn == true ? 'primary' : 'red-9'"
push
size="14px"
:class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'"
@click="confirm"
/>
</div>
</div>
</q-card> </q-card>
</div> </div>
</div> </div>
@ -167,10 +230,8 @@
</div> </div>
<q-card-section class="row col-12 justify-center"> <q-card-section class="row col-12 justify-center">
<div class="bg-grey-2 rounded-borders q-pa-md col-11"> <div class="bg-grey-2 rounded-borders q-pa-md col-11">
<div <div class="col-12 text-subtitle1 text-center text-weight-medium">
class="col-12 text-subtitle1 text-center text-weight-medium" {{ Thai }}
>
{{ Thai }}
</div> </div>
<div class="row col-12 justify-center q-pt-sm"> <div class="row col-12 justify-center q-pt-sm">
<div class="text-h3 text-weight-bold"> <div class="text-h3 text-weight-bold">
@ -180,13 +241,21 @@
</div> </div>
</div> </div>
<div class="col-12 text-center row q-pt-md"> <div class="col-12 text-center row q-pt-md">
<div class="col-12 text-subtitle1 text-weight-medium text-secondary">{{location}}</div> <div class="col-12 text-subtitle1 text-weight-medium text-secondary">
{{ location }}
</div>
<div class="col-12 text-grey-7">{{ coordinates }}</div> <div class="col-12 text-grey-7">{{ coordinates }}</div>
</div> </div>
</q-card-section> </q-card-section>
<q-card-actions align="center" class="q-mb-md row"> <q-card-actions align="center" class="q-mb-md row">
<q-btn class="col-xs-11 col-sm-6" push label="ตกลง" color="secondary" v-close-popup /> <q-btn
class="col-xs-11 col-sm-6"
push
label="ตกลง"
color="secondary"
v-close-popup
/>
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
@ -200,21 +269,24 @@ import { useRouter } from "vue-router";
import moment, { Moment } from "moment"; import moment, { Moment } from "moment";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const { dateThai } = mixin;
dateThai,
} = mixin;
// import mapCheckin from "../componenst/mapCheck.vue"; // import mapCheckin from "../componenst/mapCheck.vue";
const router = useRouter(); const router = useRouter();
const $q = useQuasar(); const $q = useQuasar();
const dateNow = ref(new Date()); const dateNow = ref(new Date());
const Thai = ref(dateThai(dateNow.value)) const Thai = ref(dateThai(dateNow.value));
const location = ref('สำนักงาน ก.ก'); const location = ref("สำนักงาน ก.ก");
const coordinates = ref('13° 43’ 45” N 100° 31’ 26” E'); const coordinates = ref("13° 43’ 45” N 100° 31’ 26” E");
const workplace = ref('in-place'); const workplace = ref("in-place");
const model = ref(null); const model = ref(null);
const options = ref(['ปฏิบัติงานที่บ้าน', 'ลืมลงเวลาปฏิบัติงาน', 'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่', 'ขออนุญาตออกนอกสถานที่']); const options = ref([
"ปฏิบัติงานที่บ้าน",
"ลืมลงเวลาปฏิบัติงาน",
"ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่",
"ขออนุญาตออกนอกสถานที่",
]);
const checkIn = ref(true); //เช็คการเช็คอิน ถ้าลงเวลาครั้งแรกเป็นเช็คอิน(สีเขียว) true แต่ถ้าครั้ง 2 เป็นเช็คเอ้าท์(สีแดง) false const checkIn = ref(true); //เช็คการเช็คอิน ถ้าลงเวลาครั้งแรกเป็นเช็คอิน(สีเขียว) true แต่ถ้าครั้ง 2 เป็นเช็คเอ้าท์(สีแดง) false
@ -223,10 +295,57 @@ const dialogTime = ref(false);
const photo = () => { const photo = () => {
camera.value = true; camera.value = true;
camera.value && setupCamera();
}; };
const confirm = () => { const confirm = () => {
dialogTime.value = true; dialogTime.value = true;
}; };
const mediaStream = ref<MediaStream | null>(null);
const video = ref<HTMLVideoElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);
const hasPhoto = ref<boolean>(true);
const img = ref<any>();
const videoWidth = ref<number>(335);
const videoHeight = ref<number>(350);
const canvasWidth = ref<number>(335);
const canvasHeight = ref<number>(350);
function capturePhoto() {
const videoElement = video.value;
const canvasElement = canvas.value;
if (!videoElement || !canvasElement) {
console.error("Video or Canvas element not available");
return;
}
const context = canvasElement.getContext("2d");
if (!context) {
console.error("Canvas context not available");
return;
}
context.drawImage(videoElement, 0, 0, 335, 270);
//ไฟล์รูป
const dataURL = canvasElement.toDataURL(".image/.png");
img.value = dataURL;
console.log(img.value);
if (mediaStream.value) {
mediaStream.value.getTracks().forEach((track) => track.stop());
videoElement.srcObject = null;
hasPhoto.value = false;
}
}
const setupCamera = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
if (video.value) {
video.value.srcObject = stream;
}
mediaStream.value = stream;
} catch (error) {
console.error("Error accessing camera:", error);
}
};
// var date = Date.now(); // var date = Date.now();
// let formattedH = moment(date).format("HH"); // let formattedH = moment(date).format("HH");
@ -262,7 +381,7 @@ const getClass = (val: boolean) => {
</script> </script>
<style> <style>
.q-card.cardImg:hover{ .q-card.cardImg:hover {
border: 1px solid #02A998 !important; border: 1px solid #02a998 !important;
} }
</style> </style>