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

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
import http from "@/plugins/http";
import config from "@/app.config";
import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
import type { ListDataText } from "@/modules/05_placement/interface/index/Main";

const optionText = ref<ListDataText[]>([
  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
]);
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 checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
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 classBordered = ref<string>("");

/** ดึง ข้อมูลแบบสำรวจ */
async function getSurveyData() {
  await http
    .get(config.API.summarySurveyDetail(assignId.value))
    .then((res: any) => {
      const data = res.data.data;
      if (data !== null) {
        answer1.value = data.answer1;
        answer2.value = data.answer2;
        answer3.value = data.answer3;
        status.value = false;
      }
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/** save ข้อมูล */
async function save() {
  await myForm.value!.validate().then((result: boolean) => {
    if (result && answer3.value !== 0) {
      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);
          })
          .finally(() => {
            getSurveyData();
          });
      });
    } else if (answer3.value == 0) {
      classBordered.value = "border_custom";
    }
  });
}
/** ถ้าเป็น 0 ใส่ class */
watch(answer3, () => {
  if (answer3.value == 0) {
    classBordered.value = "border_custom";
  } else classBordered.value = "";
});

/** get ค่า เมื่อโหลดหน้า */
onMounted(() => {
  getSurveyData();
});
</script>

<template>
  <q-form ref="myForm" class="q-pa-md">
    <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 || checkRoutePermisson"
          label="ความคิดเห็น"
          class="bg-white"
          dense
          borderless
          outlined
          v-model="answer1"
          type="textarea"
          :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
        />
      </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 || checkRoutePermisson"
          label="ความคิดเห็น"
          class="bg-white"
          dense
          borderless
          outlined
          v-model="answer2"
          type="textarea"
          :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
        />
      </div>
    </div>

    <div :class="`col-12 row q-mt-md ${classBordered}`">
      <div class="text-top0 items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
        ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
      </div>
      <q-space />
        <q-btn-group outline>
          <q-btn
            v-for="(item, index) in 5"
            :disable="!status || checkRoutePermisson"
            :class="
              answer3 == item && 'active'
            "
            outline
            color="grey-6"
            :label="item"
            @click="answer3 = item"
          >
            <q-tooltip>
              <div class="text-body2">
                <span>{{ optionText[index].label }}</span>
              </div>
            </q-tooltip>
          </q-btn>
        </q-btn-group>

    </div>
    <div class="col-12 q-mt-md">
      <q-separator size="3px" color="grey-2" />
    </div>
    <criterion />
  </q-form>
  <!-- <Footer /> -->
  <div class="row col-12" v-if="!checkRoutePermisson">
    <q-space />
    <q-btn label="บันทึก" color="secondary" @click="save" v-if="status" />
  </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;
}

.border_custom {
  border: 2px solid #c10015;
  border-radius: 5px;
  color: #c10015;
  padding: 10px;
}
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
  border-right: 1px solid #c4c4c4;
}
.q-btn-group--outline > .q-btn-item.active {
  color: #2196f3 !important;
  background-color: #cde6fb !important;
}
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
  border-left: 1px solid #2196f3 !important;
  background-color: #cde6fb;
}
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
  border: 1px solid #2196f3;
  background-color: #cde6fb;
}
</style>