hrms-mgt/src/modules/05_placement/components/probation/SummarySurvey.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import { useProbationDataStore } from "@/modules/05_placement/store";
import http from "@/plugins/http";
import config from "@/app.config";
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();
const router = useRouter();
const {
  date2Thai,
  notifyError,
  messageError,
  success,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;
const route = useRoute();

const assignId = ref<string>(route.params.form.toString());
const action = ref<string>("edit");
const status = ref<boolean>(true);

const score1 = ref<number>(0);
const score2 = ref<number>(0);
const score3 = ref<number>(0);
const Allscore = ref<number>(0);

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

const result = ref<any>();
const result_option = ref<any>([
  { name: "ผ่าน", value: 1 },
  { name: "ไม่ผ่าน", value: 0 },
]);

const note = ref<string>("");
const date = ref<Date>(new Date());

const saveEdit = (id: string) => {
  dialogConfirm($q, () => console.log("save"));
};
const edit = () => {
  status.value = true;
};
const cancel = () => {
  status.value = false;
};

const getSurveyData = async () => {
  await http
    .get(config.API.summarySurveyDetail(assignId.value))
    .then((res: any) => {
      const data = res.data.data;
      answer1.value = data.answer1,
      answer2.value = data.answer2,
      answer3.value = data.answer3
      status.value = false
})
    .catch((e) => {
      console.log(e);
    });
};
const save = () => {
  const data = {
    answer1: answer1.value,
    answer2: answer2.value,
    answer3: answer3.value,
  };
  dialogConfirm($q, async () => {
    await http
      .post(config.API.summarySurveyDetail(assignId.value), data)
      .then((res: any) => {
        success($q, "บันทึกสำเร็จ");
      })
      .catch((e: any) => {
        messageError($q, e);
      });
  });
};
onMounted(() => {
  getSurveyData();
});
</script>

<template>
  <div class="row col-12 q-ma-xs">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
    </div>
    <div class="col-12 row">
      <div class="col-12 text-top0 items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
        คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
      </div>
      <div class="col-12">
        <q-input
        :disable="!status"
          label="ความคิดเห็น"
          class="bg-white"
          dense
          borderless
          outlined
          v-model="answer1"
          type="textarea"
        />
      </div>
    </div>
    <div class="col-12 row q-mt-md">
      <div class="col-12 text-top0 items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
        ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
      </div>
      <div class="col-12">
        <q-input
        :disable="!status"
          label="ความคิดเห็น"
          class="bg-white"
          dense
          borderless
          outlined
          v-model="answer2"
          type="textarea"
        />
      </div>
    </div>

    <div class="col-12 row q-mt-md">
      <div class="text-top0 items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
        ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
      </div>
      <q-space />
      <q-rating
        :disable="!status"
        v-model="answer3"
        max="5"
        size="sm"
        color="grey"
        :color-selected="ratingColors"
        label="ระดับการประเมินพฤติกรรม"
      >
        <template v-slot:tip-1>
          <q-tooltip>ไม่พึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-2>
          <q-tooltip>ค่อนข้างพึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-3>
          <q-tooltip>พึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-4>
          <q-tooltip>พึงพอใจมาก</q-tooltip>
        </template>
        <template v-slot:tip-5>
          <q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
        </template>
      </q-rating>
    </div>
    <div class="col-12 q-my-md">
      <q-separator size="3px" color="grey-2" />
    </div>
    <!-- <Footer /> -->
    <div class="row col-12">
      <q-space />
      <q-btn label="บันทึก" color="secondary" @click="save" v-if="status" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.q-rating__icon {
  text-shadow: transparent !important;
}

.q-card {
  box-shadow: 0px 0px 0px 0px !important;
}
</style>