hrms-user/src/modules/11_probation/component/08_SurveyComment.vue

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

import Criterion from "@/modules/11_probation/component/Criterion.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useProbationStore } from "@/modules/11_probation/store/probation";

const borderCustom = ref<boolean>(false);
const store = useProbationStore();
const router = useRouter();
const route = useRoute();

const status = ref<boolean>(false);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, dialogConfirm,success } = mixin;
const id = ref<string>(route.params.id as string);
const $q = useQuasar();
const mode = ref<any>($q.screen.gt.xs);

const answer1 = ref<string>("");
const answer2 = ref<string>("");
const answer3 = ref<number>(0);

function onSubmit() {
  if (answer3.value == 0) {
    borderCustom.value = true;
  } else {
    dialogConfirm($q, () => {
      http
        .post(config.API.summarySurveyDetail(id.value), {
          answer1: answer1.value,
          answer2: answer2.value,
          answer3: answer3.value,
        })
        .then((res) => {
          success($q, "บันทึกสำเร็จ");
          getData()
        }).catch((e)=>{
          messageError($q,e)
        }).finally(()=>{

        })
    });
  }
}

function getData() {
  showLoader();
  http
    .get(config.API.summarySurveyDetail(id.value))
    .then((res) => {
      const data = res.data.data;
      if (data !== null) {
        answer1.value = data.answer1;
        answer2.value = data.answer2;
        answer3.value = data.answer3;
        status.value = true;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ถ้าเป็น 0 ใส่ class */
watch(answer3, () => {
  if (answer3.value !== 0) {
    borderCustom.value = false;
  }
});

onMounted(() => {
  borderCustom.value = false;
  getData();
});
</script>
<template>
  <div v-if="!$q.screen.gt.xs" 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.go(-1)"
      />
      <div>แบบสํารวจความคิดเห็น</div>
    </div>
  </div>
  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
    <q-form
      greedy
      @submit.prevent
      @validation-success="onSubmit"
      class="full-width"
    >
      <div class="row q-col-gutter-sm">
        <div class="col-12">
          <span class="toptitle text-dark"
            >แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</span
          >
        </div>

        <div class="col-12 text-weight-medium">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
          คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div class="col-12">
          <q-input
            :disable="status"
            label="ความคิดเห็น"
            bg-color="white"
            dense
            borderless
            outlined
            v-model="answer1"
            type="textarea"
            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
          />
        </div>

        <div class="col-12 text-weight-medium">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
          ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div class="col-12">
          <q-input
            :disable="status"
            label="ความคิดเห็น"
            bg-color="white"
            dense
            borderless
            outlined
            v-model="answer2"
            type="textarea"
            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
          />
        </div>

        <div
          v-if="$q.screen.gt.xs"
          :class="`col-12 row text-weight-medium items-center ${
            borderCustom ? 'border_custom' : ''
          }`"
        >
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
          ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
          <q-space />

          <q-rating
            :disable="status"
            v-model="answer3"
            max="5"
            size="sm"
            color="grey"
            :color-selected="store.ratingColors"
            label="ระดับการประเมินพฤติกรรม"
          >
            <template v-slot:tip-1>
              <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
            </template>
            <template v-slot:tip-2>
              <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
            </template>
            <template v-slot:tip-3>
              <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
            </template>
            <template v-slot:tip-4>
              <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
            </template>
            <template v-slot:tip-5>
              <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
            </template>
          </q-rating>
        </div>

        <div v-else class="col-12 text-weight-medium">
          <div class="col-12 row no-wrap text-weight-medium">
            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
            ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
          </div>

          <div
            :class="`col-12 text-center q-pa-sm q-mt-sm ${
              borderCustom ? 'border_customMR' : 'border_customM'
            }`"
          >
            <q-rating
              :disable="status"
              v-model="answer3"
              max="5"
              size="sm"
              color="grey"
              :color-selected="store.ratingColors"
              label="ระดับการประเมินพฤติกรรม"
            >
              <template v-slot:tip-1>
                <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
              </template>
              <template v-slot:tip-2>
                <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
              </template>
              <template v-slot:tip-3>
                <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
              </template>
              <template v-slot:tip-4>
                <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
              </template>
              <template v-slot:tip-5>
                <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
              </template>
            </q-rating>
          </div>
        </div>
        <div class="col-12">
          <q-separator size="3px" color="grey-2" />
        </div>

          <Criterion />

        <div class="col-12" align="right">
          <q-btn label="บันทึก" color="secondary" type="submit" v-if="!status"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </div>
      </div>
    </q-form>
  </div>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}

.border_custom {
  border: 2px solid #c10015;
  border-radius: 5px;
  color: #c10015;
  padding: 10px;
}

.border_customM {
  border: 1px solid #ededed;
  border-radius: 20px;
}

.border_customMR {
  border: 2px solid #c10015;
  border-radius: 20px;
  padding: 10px;
}
</style>