เพิ่ม comment ระบบลาออกและขอโอน

src/modules/03_retire/views/addRetire.vue

@@ -11,18 +11,20 @@ const mixin = useCounterMixin()
 const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
 const router = useRouter()
 const route = useRoute()
-const myform = ref<QForm | null>(null)
 const $q = useQuasar()
 const routeName = router.currentRoute.value.name
+
+/**
+ * ตัวแปรที่ใช้งาน
+ */
 const id = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const files = ref<any>()
+const myform = ref<QForm | null>(null)
 const tranferOrg = ref("")
 const dateCommand = ref<Date>(new Date())
 const dateLeave = ref<Date>(new Date())
 const noteReason = ref("")
-const nameFile = ref<string>("")
 
+/** ข้อมูล v-model ของฟอร์ม */
 const dataDetail = ref<any>({
 	datetext: "",
 	activeDate: new Date(),
@@ -46,10 +48,17 @@ const dataDetail = ref<any>({
 	fullname: "",
 })
 
+/**
+ * ฟังก์ชั่นย้อนกลับไปยังหน้ารายการลาออก
+ */
 const clickBack = () => {
 	router.push(`/retire`)
 }
 
+/**
+ * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
+ * @param val value ของ status true/false
+ */
 const statusOrder = (val: boolean) => {
 	switch (val) {
 		case true:
@@ -59,10 +68,9 @@ const statusOrder = (val: boolean) => {
 	}
 }
 
-const filesNull = () => {
-	files.value = null
-}
-
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
 onMounted(() => {
 	if (route.params.id !== undefined) {
 		id.value = route.params.id.toString()
@@ -70,6 +78,9 @@ onMounted(() => {
 	}
 })
 
+/**
+ * บันทึกข้อมูลการลาออก
+ */
 const saveData = async () => {
 	if (myform.value != null) {
 		await myform.value.validate().then(async (saveDataTest: Boolean) => {
@@ -80,12 +91,25 @@ const saveData = async () => {
 	}
 }
 
+/**
+ * ฟังก์ชั่นดาว์โหลดอัพโหลดไฟล์
+ */
+const filesNull = () => {
+	files.value = null
+}
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const files = ref<any>()
+//อัพโหลดไฟล์
 const fileUploadDoc = async (file: any) => {
 	fileDocDataUpload.value.push(file)
 	nameFile.value = file[0].name
 	files.value = file
 }
 
+/**
+ * ฟังก์ชั่นเซฟข้อมูลลาออกเเล้วเรียกใช้งานApi
+ */
 const saveResing = () => {
 	$q.dialog({
 		title: "ยืนยันการยื่นข้อมูลลาออก",
@@ -124,6 +148,10 @@ const cancelResing = () => {
 		.onDismiss(() => {})
 }
 
+/**
+ * ฟังก์ชั่นลบ
+ * @param id ไอดีของข้อมูลการลาออก
+ */
 const deleteResting = async (id: string) => {
 	showLoader()
 	await http
@@ -167,6 +195,11 @@ const createFormresign = async () => {
 			messageError($q, e)
 		})
 }
+
+/**
+ * ฟังก์ชั่นเรียกข้อมูลจาก Api
+ * @param id ไอดีของข้อมูล
+ */
 const fectDataresign = async (id: string) => {
 	showLoader()
 	await http

src/modules/03_retire/views/main.vue

@@ -16,6 +16,10 @@ const $q = useQuasar()
 const mixin = useCounterMixin()
 const { date2Thai, messageError, showLoader, hideLoader } = mixin
 
+/**
+ * เพิ่มหัวข้อตาราง
+ */
+const rows = ref<any>([])
 const filter = ref<string>("")
 const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "statustext"])
 const columns = ref<QTableProps["columns"]>([
@@ -65,11 +69,17 @@ const columns = ref<QTableProps["columns"]>([
 		style: "font-size: 14px; width:10%;",
 	},
 ])
-const rows = ref<any>([])
+
+/**
+ * ตั้งค่า pagination
+ */
 const initialPagination = ref({
 	rowsPerPage: 0,
 })
 
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
 onMounted(() => {
 	fectListleave()
 })
@@ -98,10 +108,16 @@ const fectListleave = async () => {
 		})
 }
 
+/**
+ * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มลาออก
+ */
 const clickAdd = async () => {
 	router.push(`/retire/add`)
 }
 
+/**
+ * กดเพื่อย้อนกลับ
+ */
 const clickBack = () => {
 	router.push(`/`)
 }

src/modules/03_retire/views/result.vue

@@ -1,36 +1,35 @@
 <script setup lang="ts">
-import { ref, reactive, 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";
+import { ref, reactive, 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"
 
-import type {
-  QuestionDescription,
-  OptionQuestions,
-  OptionQuestions2,
-} from "@/modules/03_retire/interface/request/Main";
+import type { QuestionDescription, OptionQuestions, OptionQuestions2 } from "@/modules/03_retire/interface/request/Main"
 
-const route = useRoute();
-const router = useRouter();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { success, messageError, notifyError, showLoader, hideLoader } = mixin;
-const dataId = ref<any>(route.params.id.toString());
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { success, messageError, notifyError, showLoader, hideLoader } = mixin
+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 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 reasonWorkOther = ref("")
 // const reasonWork_option = ref<any>([
 //   { label: "ความมั่นคงในการทำงาน ", value: 0 },
 //   { label: "สิทธิประโยชน์/สวัสดิการ", value: 1 },
@@ -46,7 +45,7 @@ const reasonWorkOther = ref("");
 //   { label: "การได้รับการยอมรับจากสังคม  ", value: 11 },
 //   { label: "อื่น ๆ (ระบุ)  ", value: 12 },
 // ]);
-const exitFactorOther = ref("");
+const exitFactorOther = ref("")
 // const exitFactor_option = ref<any>([
 //   { label: "อัตราเงินเดือน ", value: 0 },
 //   { label: "สวัสดิการ", value: 1 },
@@ -65,7 +64,7 @@ const exitFactorOther = ref("");
 //   { label: "โอกาสความก้าวหน้า  ", value: 14 },
 //   { label: "อื่น ๆ (ระบุ)  ", value: 15 },
 // ]);
-const suggestFriendsReason = ref("");
+const suggestFriendsReason = ref("")
 // const suggestFriends_option = ref<any>([
 //   { label: "แนะนำ  ", value: 0 },
 //   { label: "ไม่แนะนำ (ระบุ)", value: 1 },
@@ -76,17 +75,17 @@ const suggestFriendsReason = ref("");
 //   { label: "3 เดือน - 6 เดือน  ", value: 2 },
 //   { label: "6 เดือนขึ้นไป  ", value: 3 },
 // ]);
-const haveJobReason = ref<any>("");
+const haveJobReason = ref<any>("")
 // const haveJob_option = ref<any>([
 //   { label: "มี (ระบุ)", value: 0 },
 //   { label: "ไม่มี", value: 1 },
 // ]);
-const futureWorkReason = ref<any>("");
+const futureWorkReason = ref<any>("")
 // const futureWork_option = ref<any>([
 //   { label: "อยาก", value: 0 },
 //   { label: "ไม่อยาก (ระบุ)", value: 1 },
 // ]);
-const adjustOther = ref("");
+const adjustOther = ref("")
 // const adjust_option = ref<any>([
 //   { label: "อัตราเงินเดือน ", value: 0 },
 //   { label: "สวัสดิการ", value: 1 },
@@ -106,476 +105,382 @@ const adjustOther = ref("");
 //   { label: "อื่น ๆ (ระบุ)  ", value: 15 },
 // ]);
 
-//
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
 onMounted(async () => {
-  showLoader();
-  await fecthQuestion();
-});
+	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[]>([]);
+	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();
-    });
+	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 = () => {
-  let hasError = false;
-  if (
-    reasonWork.value.length === 0 ||
-    (reasonWork.value.filter((x: any) => x == 12).length > 0 &&
-      (reasonWorkOther.value == null || reasonWorkOther.value == "")) ||
-    timeThink.value.length === 0 ||
-    exitFactor.value.length === 0 ||
-    (exitFactor.value.filter((x: any) => x == 15).length > 0 &&
-      (exitFactorOther.value == null || exitFactorOther.value == "")) ||
-    adjust.value.length === 0 ||
-    (adjust.value.filter((x: any) => x == 15).length > 0 &&
-      (adjustOther.value == null || adjustOther.value == "")) ||
-    realReason.value.length < 1 ||
-    notExitFactor.value.length < 1 ||
-    haveJob.value.length === 0 ||
-    (haveJob.value === 0 &&
-      (haveJobReason.value == null || haveJobReason.value == "")) ||
-    suggestFriends.value.length === 0 ||
-    (suggestFriends.value === 1 &&
-      (suggestFriendsReason.value == null ||
-        suggestFriendsReason.value == "")) ||
-    futureWork.value.length === 0 ||
-    (futureWork.value === 1 &&
-      (futureWorkReason.value == null || futureWorkReason.value == "")) ||
-    suggestion.value.length < 1
-  ) {
-    hasError = true;
-  } else {
-    $q.dialog({
-      title: "ยืนยันข้อมูลแบบสอบถาม",
-      message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    })
-      .onOk(async () => {
-        createResult();
-      })
-      .onCancel(() => {})
-      .onDismiss(() => {});
-  }
-  if (hasError === true) {
-    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
-  }
-};
 
+/**
+ * บันทึกเเบบสอบถาม
+ */
+const saveForm = () => {
+	let hasError = false
+	if (
+		reasonWork.value.length === 0 ||
+		(reasonWork.value.filter((x: any) => x == 12).length > 0 && (reasonWorkOther.value == null || reasonWorkOther.value == "")) ||
+		timeThink.value.length === 0 ||
+		exitFactor.value.length === 0 ||
+		(exitFactor.value.filter((x: any) => x == 15).length > 0 && (exitFactorOther.value == null || exitFactorOther.value == "")) ||
+		adjust.value.length === 0 ||
+		(adjust.value.filter((x: any) => x == 15).length > 0 && (adjustOther.value == null || adjustOther.value == "")) ||
+		realReason.value.length < 1 ||
+		notExitFactor.value.length < 1 ||
+		haveJob.value.length === 0 ||
+		(haveJob.value === 0 && (haveJobReason.value == null || haveJobReason.value == "")) ||
+		suggestFriends.value.length === 0 ||
+		(suggestFriends.value === 1 && (suggestFriendsReason.value == null || suggestFriendsReason.value == "")) ||
+		futureWork.value.length === 0 ||
+		(futureWork.value === 1 && (futureWorkReason.value == null || futureWorkReason.value == "")) ||
+		suggestion.value.length < 1
+	) {
+		hasError = true
+	} else {
+		$q.dialog({
+			title: "ยืนยันข้อมูลแบบสอบถาม",
+			message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?",
+			cancel: {
+				flat: true,
+				color: "negative",
+			},
+			persistent: true,
+		})
+			.onOk(async () => {
+				createResult()
+			})
+			.onCancel(() => {})
+			.onDismiss(() => {})
+	}
+	if (hasError === true) {
+		notifyError($q, "กรุณากรอกข้อมูลให้ครบ")
+	}
+}
+
+/**
+ * สร้างเบบสอบถามไปยัง api
+ */
 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,
-    Suggestion: suggestion.value,
-  };
-  await http
-    .post(config.API.listquestionnaire(), data)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      router.push(`/retire`);
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
-};
+	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,
+		Suggestion: suggestion.value,
+	}
+	await http
+		.post(config.API.listquestionnaire(), data)
+		.then(() => {
+			success($q, "บันทึกข้อมูลสำเร็จ")
+			router.push(`/retire`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
 </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.push(`/retire`)"
-        />
-      </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-white-2 row items-center q-py-sm q-px-md justify-center text-bold"
-                >
-                  เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม
-                </div>
-                <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. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร
+	<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.push(`/retire`)" />
+			</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-white-2 row items-center q-py-sm q-px-md justify-center text-bold">เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม</div>
+								<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 ข้อ) -->
-                    {{ 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.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"
-                  />
+										{{ questionDesc.question2Desc }}
+									</div>
+									<q-option-group :options="question2Answer" type="radio" v-model="timeThink" />
 
-                  <div class="col-12 text-top0 items-center">
-                    <!-- 3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ
+									<div class="col-12 text-top0 items-center">
+										<!-- 3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ
                     (เลือกได้มากกว่า 1 ข้อ ) -->
-                    {{ questionDesc.question3Desc }}
-                  </div>
-                  <q-option-group
-                    :options="question3Answer"
-                    type="checkbox"
-                    v-model="exitFactor"
-                  />
-                  <div class="col-12 text-top0 items-center">
-                    <q-item-label>
-                      <q-input
-                        v-if="exitFactor.includes(question3Answer.length - 1)"
-                        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>
+										{{ questionDesc.question3Desc }}
+									</div>
+									<q-option-group :options="question3Answer" type="checkbox" v-model="exitFactor" />
+									<div class="col-12 text-top0 items-center">
+										<q-item-label>
+											<q-input
+												v-if="exitFactor.includes(question3Answer.length - 1)"
+												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">
-                    {{ questionDesc.question4Desc }}
-                  </div>
-                  <q-list>
-                    <q-option-group
-                      :options="question4Answer"
-                      type="checkbox"
-                      v-model="adjust"
-                    />
-                  </q-list>
-                  <div class="col-12 text-top0 items-center">
-                    <q-item-label>
-                      <q-input
-                        v-if="adjust.includes(question4Answer.length - 1)"
-                        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 class="col-12 text-top0 items-center">
+										{{ questionDesc.question4Desc }}
+									</div>
+									<q-list>
+										<q-option-group :options="question4Answer" type="checkbox" v-model="adjust" />
+									</q-list>
+									<div class="col-12 text-top0 items-center">
+										<q-item-label>
+											<q-input
+												v-if="adjust.includes(question4Answer.length - 1)"
+												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. โปรดระบุสาเหตุที่แท้จริง
                     ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร
                     ? -->
-                    {{ questionDesc.question5Desc }}
-                  </div>
-                  <q-input
-                    class="col-12"
-                    dense
-                    outlined
-                    v-model="realReason"
-                    label="  "
-                    type="textarea"
-                  />
+										{{ 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 class="col-12 text-top0 items-center">
+										<!-- 6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ
                     ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร -->
-                    {{ questionDesc.question6Desc }}
-                  </div>
-                  <q-input
-                    class="col-12"
-                    dense
-                    outlined
-                    v-model="notExitFactor"
-                    label="  "
-                    type="textarea"
-                  />
+										{{ questionDesc.question6Desc }}
+									</div>
+									<q-input class="col-12" dense outlined v-model="notExitFactor" label="  " type="textarea" />
 
-                  <div class="col-12 text-top0 items-center">
-                    <!-- 7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
+									<div class="col-12 text-top0 items-center">
+										<!-- 7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
                     ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ)
                     และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน
                     ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร -->
-                    {{ questionDesc.question7Desc }}
-                  </div>
-                  <q-option-group
-                    :options="question7Answer"
-                    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. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่
+										{{ questionDesc.question7Desc }}
+									</div>
+									<q-option-group :options="question7Answer" 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. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่
                     (ถ้าไม่ โปรดระบุเหตุผล) -->
-                    {{ questionDesc.question8Desc }}
-                  </div>
-                  <q-option-group
-                    :options="question8Answer"
-                    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. หากท่านมีโอกาสในอนาคต
+										{{ questionDesc.question8Desc }}
+									</div>
+									<q-option-group :options="question8Answer" 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. หากท่านมีโอกาสในอนาคต
                     ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่
                     โปรดระบุเหตุผล) -->
-                    {{ 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>
+										{{ 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. ความคิดเห็นและข้อเสนอแนะอื่น ๆ -->
-                    {{ questionDesc.question10Desc }}
-                  </div>
-                  <q-input
-                    class="col-12"
-                    dense
-                    outlined
-                    v-model="suggestion"
-                    label="  "
-                    type="textarea"
-                  />
+									<div class="col-12 text-top0 items-center">
+										<!-- 10. ความคิดเห็นและข้อเสนอแนะอื่น ๆ -->
+										{{ questionDesc.question10Desc }}
+									</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>
+									<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>