617 lines
23 KiB
Vue
617 lines
23 KiB
Vue
<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)"
|
|
/>
|
|
รายละเอียด Exit interview ของ {{ prefix }} {{ fullname }}
|
|
</div>
|
|
<q-card bordered class="row col-12 text-dark">
|
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
|
<div class="q-pl-sm text-weight-bold text-subtitle2">
|
|
{{ fullname }}
|
|
</div>
|
|
<q-space />
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-pa-md">
|
|
<div class="col-12 row bg-white q-col-gutter-md">
|
|
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
|
<q-img :src="avata" v-if="avata !== ''" />
|
|
<q-img src="@/assets/avatar_user.jpg" v-else />
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 row items-center">
|
|
<div class="col-12 q-pl-md">
|
|
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
|
<div class="col-12 text-detail">
|
|
{{ Position }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 row items-center">
|
|
<div class="col-12">
|
|
<div class="col-12 text-top">ระดับ</div>
|
|
<div class="col-12 text-detail">
|
|
{{ PositionLevel }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 row items-center">
|
|
<div class="col-12">
|
|
<div class="col-12 text-top">สังกัด</div>
|
|
<div class="col-12 text-detail">
|
|
{{ Org }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
|
<div class="q-pl-sm text-weight-bold text-dark">
|
|
ข้อมูลการตอบแบบสอบถาม
|
|
</div>
|
|
<q-space />
|
|
<!-- <div class="q-gutter-sm" v-if="!edit">
|
|
<q-btn
|
|
outline
|
|
color="primary"
|
|
dense
|
|
icon-right="mdi-file-edit-outline"
|
|
class="q-px-sm"
|
|
label="แก้ไข"
|
|
style="width: 80px"
|
|
@click="edit = !edit"
|
|
/>
|
|
</div>
|
|
<div class="q-gutter-sm" v-else>
|
|
<q-btn
|
|
outline
|
|
color="public"
|
|
dense
|
|
class="q-px-sm"
|
|
label="บันทึก"
|
|
style="width: 80px"
|
|
@click="conditionSave"
|
|
/>
|
|
<q-btn
|
|
outline
|
|
color="red"
|
|
dense
|
|
class="q-px-sm"
|
|
label="ยกเลิก"
|
|
style="width: 80px"
|
|
@click="edit = !edit"
|
|
/>
|
|
</div> -->
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<q-form ref="myForm">
|
|
<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"
|
|
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="[
|
|
(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"
|
|
disable
|
|
/>
|
|
|
|
<div class="col-12 text-top0 items-center">
|
|
3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1
|
|
ข้อ )
|
|
</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="[
|
|
(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"
|
|
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="[
|
|
(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
|
|
disable
|
|
outlined
|
|
v-model="realReason"
|
|
label=" "
|
|
type="textarea"
|
|
/>
|
|
|
|
<div class="col-12 text-top0 items-center">
|
|
6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ
|
|
ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร
|
|
</div>
|
|
<q-input
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
disable
|
|
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"
|
|
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="[
|
|
(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"
|
|
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="[
|
|
(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"
|
|
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="[
|
|
(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
|
|
disable
|
|
outlined
|
|
v-model="suggestion"
|
|
label=" "
|
|
type="textarea"
|
|
/>
|
|
|
|
<q-separator />
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import CurrencyInput from "@/components/CurruncyInput.vue";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import keycloak from "@/plugins/keycloak";
|
|
|
|
import type { QTableProps, QForm } from "quasar";
|
|
import type {
|
|
TypeFile,
|
|
ResponseDataDetail,
|
|
} from "@/modules/06_retirement/interface/response/exit";
|
|
import PositionSide from "@/modules/01_metadata/components/positionEmployee/PositionSide.vue";
|
|
import FullCalendarComponent from "@fullcalendar/vue3";
|
|
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const mixin = useCounterMixin();
|
|
|
|
const dataId = route.params.id.toString();
|
|
const {
|
|
date2Thai,
|
|
dialogMessage,
|
|
messageError,
|
|
showLoader,
|
|
hideLoader,
|
|
success,
|
|
} = mixin;
|
|
|
|
const myForm = ref<QForm | null>(null);
|
|
const roleAdmin = ref<boolean>(false);
|
|
const edit = ref<boolean>(false);
|
|
const Org = ref<string>("");
|
|
const PositionLevel = ref<string>("");
|
|
const Position = ref<string>("");
|
|
const prefix = ref<string>("");
|
|
const exitFactor = ref<any>([]);
|
|
const reasonWork = ref<any>([]);
|
|
const adjust = ref<any>([]);
|
|
const timeThink = ref<any>([]);
|
|
const fullname = ref<any>("");
|
|
const avata = 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: true },
|
|
{ label: "ไม่แนะนำ (ระบุ)", value: false },
|
|
]);
|
|
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: true },
|
|
{ label: "ไม่มี", value: false },
|
|
]);
|
|
const futureWorkReason = ref<any>("");
|
|
const futureWork_option = ref<any>([
|
|
{ label: "อยาก ", value: true },
|
|
{ label: "ไม่อยาก (ระบุ)", value: false },
|
|
]);
|
|
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 responseData = ref<any>({
|
|
Position: "",
|
|
PositionLevel: "",
|
|
Org: "",
|
|
Prefix: "",
|
|
Avatar: "",
|
|
reason: "",
|
|
salary: 0,
|
|
status: "",
|
|
fullname: "",
|
|
ReasonWork: 0,
|
|
ReasonWorkOther: "",
|
|
TimeThink: 0,
|
|
ExitFactor: 0,
|
|
ExitFactorOther: "",
|
|
Adjust: 0,
|
|
AdjustOther: "",
|
|
RealReason: "",
|
|
NotExitFactor: "",
|
|
Havejob: null,
|
|
HavejobReason: "",
|
|
SuggestFriends: null,
|
|
SuggestFriendsReason: "",
|
|
FutureWork: null,
|
|
FutureWorkReason: "",
|
|
});
|
|
|
|
onMounted(async () => {
|
|
if (keycloak.tokenParsed != null) {
|
|
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
|
|
console.log("roleAdmin===>", roleAdmin.value);
|
|
}
|
|
await getData();
|
|
});
|
|
|
|
const getData = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.ExitInterviewByid(dataId))
|
|
.then((res: any) => {
|
|
const data = res.data.result;
|
|
avata.value = data.avatar ?? "";
|
|
Position.value = data.position ?? "";
|
|
PositionLevel.value = data.positionLevel ?? "";
|
|
Org.value = data.org ?? "";
|
|
|
|
fullname.value = data.fullname ?? "";
|
|
prefix.value = data.prefix ?? "";
|
|
reasonWork.value = data.reasonWork ?? [];
|
|
reasonWorkOther.value = data.reasonWorkOther ?? "";
|
|
timeThink.value = data.TimeThink ?? 0;
|
|
exitFactor.value = data.exitFactor ?? [];
|
|
exitFactorOther.value = data.exitFactorOther ?? 0;
|
|
adjust.value = data.adjust ?? [];
|
|
adjustOther.value = data.adjustOther ?? "";
|
|
realReason.value = data.realReason ?? "";
|
|
notExitFactor.value = data.notExitFactor ?? "";
|
|
haveJob.value = data.havejob ?? null;
|
|
haveJobReason.value = data.havejobReason ?? "";
|
|
suggestFriends.value = data.suggestFriends ?? null;
|
|
suggestFriendsReason.value = data.suggestFriendsReason ?? "";
|
|
futureWork.value = data.futureWork ?? null;
|
|
futureWorkReason.value = data.futureWorkReason ?? "";
|
|
suggestion.value = data.suggestion ?? "";
|
|
// console.log(data.value);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const conditionSave = async () => {
|
|
if (myForm.value !== null) {
|
|
myForm.value.validate().then((success) => {
|
|
if (success) {
|
|
dialogMessage(
|
|
$q,
|
|
"ต้องการแก้ไขข้อมูลหรือไม่?",
|
|
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
|
|
"mdi-help-circle-outline",
|
|
"ตกลง",
|
|
"public",
|
|
async () => await saveData(),
|
|
undefined
|
|
);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const saveData = async () => {
|
|
const body = {};
|
|
showLoader();
|
|
await http
|
|
.put(config.API.ExitInterviewByid(dataId), body)
|
|
.then((res: any) => {
|
|
// const data = res.data.result;
|
|
// console.log(data);
|
|
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
|
|
edit.value = false;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
await getData();
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const getClass = (val: boolean) => {
|
|
return {
|
|
"full-width inputgreen cursor-pointer": val,
|
|
"full-width cursor-pointer": !val,
|
|
};
|
|
};
|
|
</script>
|
|
<style lang="scss" scope>
|
|
.q-img {
|
|
border-radius: 5px;
|
|
height: 70px;
|
|
}
|
|
.text-top {
|
|
color: gray;
|
|
font-weight: 400;
|
|
padding-bottom: 3px;
|
|
}
|
|
.text-detail {
|
|
font-weight: 500;
|
|
}
|
|
</style>
|