exit interview ความคิดเห็น และแกไขคำถาม

This commit is contained in:
Warunee Tamkoo 2023-09-24 11:16:05 +07:00
parent 040a191573
commit 13203150cc
6 changed files with 757 additions and 191 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
@ -37,6 +37,20 @@ const haveJob = ref<any>();
const suggestFriends = ref<any>();
const futureWork = ref<any>();
const suggestion = ref<any>("");
const comment = ref<string>("");
const score = reactive([
{ no: 1, score: 0 },
{ no: 2, score: 0 },
{ no: 3, score: 0 },
{ no: 4, score: 0 },
{ no: 5, score: 0 },
{ no: 6, score: 0 },
{ no: 7, score: 0 },
{ no: 8, score: 0 },
{ no: 9, score: 0 },
{ no: 10, score: 0 },
]);
const scoreTotal = ref<number>(0);
const reasonWorkOther = ref("");
const reasonWork_option = ref<any>([
@ -158,19 +172,16 @@ const getData = async () => {
hideLoader();
});
};
watch(score, () => {
scoreTotal.value = score.reduce((accumulator, object) => {
return accumulator + Number(object.score);
}, 0);
})
</script>
<template>
<div class="toptitle text-dark 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)"
/>
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
รายละเอยด Exit interview ของ {{ prefix }} {{ fullname }}
</div>
<q-card bordered class="row col-12 text-dark">
@ -227,252 +238,191 @@ const getData = async () => {
<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 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">
<div class="col-10 text-top0 items-center">
1. เหตใดทานจงตดสนใจรวมงานกบกรงเทพมหานคร (เลอกไดมากกว
1 )
</div>
<q-option-group
:options="reasonWork_option"
type="checkbox"
v-model="reasonWork"
disable
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[0].score" label="คะแนนข้อ 1" type="number" />
</div>
<q-option-group :options="reasonWork_option" type="checkbox" v-model="reasonWork" disable />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="reasonWork.includes(12)"
v-model="reasonWorkOther"
disable
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
<q-input v-if="reasonWork.includes(12)" v-model="reasonWorkOther" disable 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">
<div class="col-10 text-top0 items-center">
2. สำหรบการลาออกในครงน
านไดดทบทวนอยางจรงจงเปนระยะเวลานานเทาใด
</div>
<q-option-group
:options="timeThink_option"
type="radio"
v-model="timeThink"
disable
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[1].score" label="คะแนนข้อ 2" type="number" />
</div>
<div class="col-12 text-top0 items-center">
<div class="col-12">
<q-option-group :options="timeThink_option" type="radio" v-model="timeThink" disable />
</div>
<div class="col-10 text-top0 items-center">
3. จจยใดททำใหานตดสนใจลาออกจากราชการ (เลอกไดมากกว 1
)
</div>
<q-option-group
:options="exitFactor_option"
type="checkbox"
v-model="exitFactor"
disable
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[2].score" label="คะแนนข้อ 3" type="number" />
</div>
<q-option-group :options="exitFactor_option" type="checkbox" v-model="exitFactor" disable />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="exitFactor.includes(15)"
v-model="exitFactorOther"
label="กรอกข้อความ"
dense
disable
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
<q-input v-if="exitFactor.includes(15)" v-model="exitFactorOther" label="กรอกข้อความ" dense disable
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">
<div class="col-10 text-top0 items-center">
4. อะไรคอสงทานเหนวาควรปรบปร (เลอกไดมากกว 1 )
</div>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[3].score" label="คะแนนข้อ 4" type="number" />
</div>
<q-list>
<q-option-group
:options="adjust_option"
type="checkbox"
v-model="adjust"
disable
/>
<q-option-group :options="adjust_option" type="checkbox" v-model="adjust" disable />
</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
disable
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
<q-input v-if="adjust.includes(15)" v-model="adjustOther" label="กรอกอื่นๆ" dense disable 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">
<div class="col-10 text-top0 items-center">
5. โปรดระบสาเหตแทจร
ทำใหานตดสนใจลาออกจากการปฏราชการกบกรงเทพมหานคร ?
</div>
<q-input
class="col-12"
dense
disable
outlined
v-model="realReason"
label=" "
type="textarea"
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[4].score" label="คะแนนข้อ 5" type="number" />
</div>
<div class="col-12 text-top0 items-center">
<q-input class="col-12" dense disable outlined v-model="realReason" label=" " type="textarea" />
<div class="col-10 text-top0 items-center">
6. จจยใดทจะชวยทำใหานเปลยนใจ
ไมอยากลาออกจากการปฏราชการกบกรงเทพมหานคร
</div>
<q-input
class="col-12"
dense
outlined
disable
v-model="notExitFactor"
label=" "
type="textarea"
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[5].score" label="คะแนนข้อ 6" type="number" />
</div>
<div class="col-12 text-top0 items-center">
<q-input class="col-12" dense outlined disable v-model="notExitFactor" label=" " type="textarea" />
<div class="col-10 text-top0 items-center">
7. านมงานใหมหรอไม าม (โปรดระบ
อบรทเอกชน/หนวยงานภาคร)
และอะไรคอสงททำงานใหมใหบทาน
งทานรกวาเปนทาพอใจมากกวาการปฏราชการกบกรงเทพมหานคร
</div>
<q-option-group
:options="haveJob_option"
type="radio"
v-model="haveJob"
disable
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[6].score" label="คะแนนข้อ 7" type="number" />
</div>
<q-option-group :options="haveJob_option" type="radio" v-model="haveJob" disable />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="haveJob === true"
v-model="haveJobReason"
label="กรอกอื่นๆ"
dense
disable
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
<q-input v-if="haveJob === true" v-model="haveJobReason" label="กรอกอื่นๆ" dense disable 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">
<div class="col-10 text-top0 items-center">
8. านจะแนะนำเพอนใหมารวมงานกบกรงเทพมหานครหรอไม (าไม
โปรดระบเหตผล)
</div>
<q-option-group
:options="suggestFriends_option"
type="radio"
v-model="suggestFriends"
disable
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[7].score" label="คะแนนข้อ 8" type="number" />
</div>
<q-option-group :options="suggestFriends_option" type="radio" v-model="suggestFriends" disable />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="suggestFriends === false"
v-model="suggestFriendsReason"
label="กรอกข้อความ"
dense
lazy-rules
disable
type="text"
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
<q-input v-if="suggestFriends === false" v-model="suggestFriendsReason" label="กรอกข้อความ" dense
lazy-rules disable 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">
<div class="col-10 text-top0 items-center">
9. หากทานมโอกาสในอนาคต
านอยากกลบมารวมงานกบกรงเทพมหานครหรอไม (าไม
โปรดระบเหตผล)
</div>
<q-option-group
:options="futureWork_option"
type="radio"
v-model="futureWork"
disable
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[8].score" label="คะแนนข้อ 9" type="number" />
</div>
<q-option-group :options="futureWork_option" type="radio" v-model="futureWork" disable />
<div class="col-12 text-top0 items-center">
<q-item-label>
<q-input
v-if="futureWork === false"
v-model="futureWorkReason"
label="กรอกข้อความ"
dense
lazy-rules
type="text"
autogrow
hide-bottom-space
outlined
disable
class="bg-white"
:rules="[
<q-input v-if="futureWork === false" v-model="futureWorkReason" label="กรอกข้อความ" dense lazy-rules
type="text" autogrow hide-bottom-space outlined disable class="bg-white" :rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
]" />
</q-item-label>
</div>
<div class="col-12 text-top0 items-center">
<div class="col-10 text-top0 items-center">
10. ความคดเหนและขอเสนอแนะอ
</div>
<q-input
class="col-12"
dense
disable
outlined
v-model="suggestion"
label=" "
type="textarea"
/>
<div class="col-2 text-top0 items-center">
<q-input dense outlined v-model="score[9].score" label="คะแนนข้อ 10" type="number" />
</div>
<q-input class="col-12" dense disable outlined v-model="suggestion" label=" " type="textarea" />
</div>
</q-card>
<q-card bordered flat class="q-mt-md">
<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="row col-12 q-pa-sm q-col-gutter-sm">
<div class="col-10">
<q-input dense outlined v-model="comment" label="กรอกความคิดเห็น" type="textarea" />
</div>
<div class="col-2 text-top0">
<q-input dense outlined v-model="scoreTotal" label="คะแนนรวม" />
</div>
</div>
<div class="col-12"><q-separator /></div>
<q-card-actions class="col-12 text-primary q-pa-md">
<q-space />
<q-btn unelevated label="บันทึก" color="public" @click="">
</q-btn>
</q-card-actions>
<q-separator />
</div>
</q-card>
</div>
@ -485,11 +435,13 @@ const getData = async () => {
border-radius: 5px;
height: 70px;
}
.text-top {
color: gray;
font-weight: 400;
padding-bottom: 3px;
}
.text-detail {
font-weight: 500;
}