hrms-mgt/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";

import type { QForm } from "quasar";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();

const dataId = route.params.id.toString();
const { messageError, showLoader, hideLoader } = mixin;

const myForm = ref<QForm | null>(null);
const roleAdmin = 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 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>([
  { 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 },
]);

onMounted(async () => {
  if (keycloak.tokenParsed != null) {
    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
  }
  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 ?? "";
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      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)" />
    รายละเอียด 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>
    <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-10 text-top0 items-center">
                1. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า
                1 ข้อ)
              </div>
              <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="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]" />
                </q-item-label>
              </div>
              <div class="col-10 text-top0 items-center">
                2. สำหรับการลาออกในครั้งนี้
                ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด
              </div>
              <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">
                <q-option-group :options="timeThink_option" type="radio" v-model="timeThink" disable />
              </div>

              <div class="col-10 text-top0 items-center">
                3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1
                ข้อ )
              </div>

              <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="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]" />
                </q-item-label>
              </div>

              <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-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-10 text-top0 items-center">
                5. โปรดระบุสาเหตุที่แท้จริง
                ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?
              </div>
              <div class="col-2 text-top0 items-center">
                <q-input dense outlined v-model="score[4].score" label="คะแนนข้อ 5" type="number" />
              </div>

              <q-input class="col-12" dense disable outlined v-model="realReason" label="  " type="textarea" />

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

              <q-input class="col-12" dense outlined disable v-model="notExitFactor" label="  " type="textarea" />

              <div class="col-10 text-top0 items-center">
                7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
                ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ)
                และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน
                ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร
              </div>

              <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="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]" />
                </q-item-label>
              </div>
              <div class="col-10 text-top0 items-center">
                8. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่
                โปรดระบุเหตุผล)
              </div>

              <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="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]" />
                </q-item-label>
              </div>
              <div class="col-10 text-top0 items-center">
                9. หากท่านมีโอกาสในอนาคต
                ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่
                โปรดระบุเหตุผล)
              </div>
              <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="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]" />
                </q-item-label>
              </div>

              <div class="col-10 text-top0 items-center">
                10. ความคิดเห็นและข้อเสนอแนะอื่น ๆ
              </div>
              <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>

            </div>
          </q-card>
        </div>
      </div>
    </q-form>
  </q-card>
</template>
<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>