hrms-user/src/modules/03_leave/views/result.vue

<script setup lang="ts">
import type { QTableProps } from "quasar"
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"
import config from "@/app.config"

const route = useRoute()
const router = useRouter()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, dialogConfirm } = mixin
const leaveReason = ref("")
const id = ref<string>("")
const noteReason = ref("")
const routeName = router.currentRoute.value.name
const dataId = ref<any>(route.params.id.toString())

const exitFactor = ref<any>([])
const reasonWork = ref<any>([])
const adjust = ref<any>([])
const timeThink = ref<any>([])
const realReason = ref<any>("")
const notExitFactor = ref<any>("")
const haveJob = ref<any>("")
const suggestFriends = ref<any>([])
const futureWork = ref<any>([])
const suggestion = ref<any>("")

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 },
])
const saveForm = () => {
	$q.dialog({
		title: "ยืนยันข้อมูลแบบสอบถาม",
		message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?",
		cancel: {
			flat: true,
			color: "negative",
		},
		persistent: true,
	})
		.onOk(async () => {
			createResult()
		})
		.onCancel(() => {})
		.onDismiss(() => {})
}

// const putData = () => {
// 	const data = {
// 		ReasonWork: reasonWork.value,
// 		ReasonWorkOther: reasonWorkOther.value,
// 		TimeThink: timeThink.value,
// 		ExitFactor: exitFactor.value,
// 		ExitFactorOther: exitFactorOther.value,
// 		Adjust: adjust.value,
// 		AdjustOther: adjustOther.value,
// 		RealReason: realReason.value,
// 		NotExitFactor: notExitFactor.value,
// 		Havejob: haveJob.value,
// 		HavejobReason: haveJobReason.value,
// 		SuggestFriends: suggestFriends.value,
// 		SuggestFriendsReason: suggestFriendsReason.value,
// 		FutureWork: futureWork.value,
// 		FutureWorkReason: futureWorkReason.value,
// 	}
// 	createResult(data)
// }

const createResult = async () => {
	const data = {
		RetirementResignId: dataId.value,
		ReasonWork: reasonWork.value,
		ReasonWorkOther: reasonWorkOther.value,
		TimeThink: timeThink.value,
		ExitFactor: exitFactor.value,
		ExitFactorOther: exitFactorOther.value,
		Adjust: adjust.value,
		AdjustOther: adjustOther.value,
		RealReason: realReason.value,
		NotExitFactor: notExitFactor.value,
		Havejob: haveJob.value,
		HavejobReason: haveJobReason.value,
		SuggestFriends: suggestFriends.value,
		SuggestFriendsReason: suggestFriendsReason.value,
		FutureWork: futureWork.value,
		FutureWorkReason: futureWorkReason.value,
	}
	await http
		.post(config.API.listquestionnaire(), data)
		.then((res: any) => {
			// console.log(res);
			success($q, "บันทึกข้อมูลสำเร็จ")
			router.push(`/leave`)
		})
		.catch((e: any) => {
			messageError($q, e)
			console.log(e)
		})
	success($q, "บันทึกข้อมูลสำเร็จ")
	router.push(`/leave`)
}
</script>

<template>
	<div class="col-12 row justify-center">
		<div class="col-xs-12 col-sm-12 col-md-11">
			<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.go(-1)" />
				<div>เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม</div>
			</div>
			<div class="col-12">
				<q-card bordered>
					<div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-12">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">แบบสอบถาม</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<div class="col-12 text-top0 items-center">1. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)</div>
									<q-option-group :options="reasonWork_option" type="checkbox" v-model="reasonWork" />
									<div class="col-12 text-top0 items-center">
										<q-item-label>
											<q-input
												v-if="reasonWork.includes(12)"
												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. สำหรับการลาออกในครั้งนี้ ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด</div>
									<q-option-group :options="timeThink_option" type="radio" v-model="timeThink" />

									<div class="col-12 text-top0 items-center">3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ )</div>
									<q-option-group :options="exitFactor_option" type="checkbox" v-model="exitFactor" />
									<div class="col-12 text-top0 items-center">
										<q-item-label>
											<q-input
												v-if="exitFactor.includes(15)"
												v-model="exitFactorOther"
												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">4. อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)</div>
									<q-list>
										<q-option-group :options="adjust_option" type="checkbox" v-model="adjust" />
									</q-list>
									<div class="col-12 text-top0 items-center">
										<q-item-label>
											<q-input
												v-if="adjust.includes(15)"
												v-model="adjustOther"
												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">5. โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?</div>
									<q-input class="col-12" dense outlined v-model="realReason" label="  " type="textarea" />

									<div class="col-12 text-top0 items-center">6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร</div>
									<q-input class="col-12" dense outlined v-model="notExitFactor" label="  " type="textarea" />

									<div class="col-12 text-top0 items-center">
										7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน
										ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร
									</div>
									<q-option-group :options="haveJob_option" type="radio" v-model="haveJob" />
									<div class="col-12 text-top0 items-center">
										<q-item-label>
											<q-input
												v-if="haveJob === 0"
												v-model="haveJobReason"
												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">8. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)</div>
									<q-option-group :options="suggestFriends_option" type="radio" v-model="suggestFriends" />
									<div class="col-12 text-top0 items-center">
										<q-item-label>
											<q-input
												v-if="suggestFriends === 1"
												v-model="suggestFriendsReason"
												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">9. หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)</div>
									<q-option-group :options="futureWork_option" 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>
									<q-input class="col-12" dense outlined v-model="suggestion" label="  " type="textarea" />

									<q-separator />
								</div>
							</q-card>
						</div>
					</div>
					<div class="row col-12 q-pa-sm">
						<q-space />
						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="บันทึกข้อมูลแบบสอบถาม" @click="saveForm" />
					</div>
				</q-card>
			</div>
		</div>
	</div>
</template>