531 lines
20 KiB
Vue
531 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import type {
|
|
QuestionDescription,
|
|
OptionQuestions,
|
|
OptionQuestions2,
|
|
} from "@/modules/03_retire/interface/Main";
|
|
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
success,
|
|
messageError,
|
|
notifyError,
|
|
showLoader,
|
|
hideLoader,
|
|
dialogConfirm,
|
|
} = mixin;
|
|
const dataId = ref<any>(route.params.id.toString());
|
|
|
|
/**
|
|
* ตัวแปรแบบสอบถาม
|
|
*/
|
|
const realReason = ref<string>("");
|
|
const notExitFactor = ref<string>("");
|
|
const suggestion = ref<string>("");
|
|
|
|
/** check box */
|
|
const exitFactor = ref<any>([]);
|
|
const reasonWork = ref<any>([]);
|
|
const adjust = ref<any>([]);
|
|
const timeThink = ref<any>();
|
|
const haveJob = ref<any>();
|
|
const suggestFriends = ref<any>();
|
|
const futureWork = ref<any>();
|
|
|
|
const reasonWorkOther = ref<string>("");
|
|
const exitFactorOther = ref<string>("");
|
|
const suggestFriendsReason = ref<string>("");
|
|
const haveJobReason = ref<string>("");
|
|
const futureWorkReason = ref<string>("");
|
|
const adjustOther = ref<string>("");
|
|
|
|
// เรียกชุดคำถาม
|
|
// คำถาม
|
|
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();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* บันทึกเเบบสอบถาม
|
|
*/
|
|
function 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 {
|
|
dialogConfirm(
|
|
$q,
|
|
() => {
|
|
createResult();
|
|
},
|
|
"ยืนยันข้อมูลแบบสอบถาม",
|
|
"ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่"
|
|
);
|
|
}
|
|
if (hasError === true) {
|
|
notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* สร้างเบบสอบถามไปยัง api
|
|
*/
|
|
async function createResult() {
|
|
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);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
|
*/
|
|
onMounted(async () => {
|
|
showLoader();
|
|
await fecthQuestion();
|
|
});
|
|
</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. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร
|
|
(เลือกได้มากกว่า 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:string) =>
|
|
(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 ข้อ ) -->
|
|
{{ 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:string) =>
|
|
(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:string) =>
|
|
(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. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ
|
|
ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร -->
|
|
{{ 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. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
|
|
ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ)
|
|
และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน
|
|
ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร -->
|
|
{{ 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:string) =>
|
|
(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:string) =>
|
|
(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:string) =>
|
|
(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"
|
|
/>
|
|
|
|
<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>
|