hrms-user/src/modules/15_probationReport/views/main.vue

<script setup lang="ts">
import { onMounted, ref, reactive, type Ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useProbationReport } from "@/modules/15_probationReport/store";

import type {
  DataSurvey,
  ProbationReportType,
} from "@/modules/15_probationReport/interface/Main";

import SurveyPage from "@/modules/15_probationReport/components/01_SurveyPage.vue";
import ResultPage from "@/modules/15_probationReport/components/02_ResultPage.vue";
import AssignPage from "@/modules/15_probationReport/components/03_AssignPage.vue";

const $q = useQuasar();
const store = useProbationReport();
const router = useRouter();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

const dataSurvey = ref<any>(null);
const isData = ref<boolean>(true);
const dataProbation = ref<string>("");
const dataResult1 = ref<string>("");
const dataResult2 = ref<string>("");

const formDataResult = ref<ProbationReportType>({
  develop_orientation_score: 0,
  develop_self_learning_score: 0,
  develop_training_seminar_score: 0,
  develop_other_training_score: 0,
  develop_total_score: 0,
  develop_orientation_percent: 0,
  develop_self_learning_percent: 0,
  develop_training_seminar_percent: 0,
  develop_other_training_percent: 0,
  develop_total_percent: 0,
  develop_result: 0,
  achievement_score: 0,
  achievement_score_total: 0,
  achievement_percent: 0,
  achievement_result: 0,
  behavior_score: 0,
  behavior_score_total: 0,
  behavior_percent: 0,
  behavior_result: 0,
  sum_score: 0,
  sum_percent: 0,
  reason: "",
  pass_result: 0,
  evaluate_date: new Date(),
});

const dev_options = reactive([
  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
]);

const result_option = reactive([
  { name: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ", value: 1 },
  { name: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ", value: 2 },
  { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
]);

/** ดึง ข้อมูลแบบสำรวจ */
async function getSurveyData() {
  isData.value = true;
  showLoader();
  await http
    .get(config.API.summaryDetail())
    .then(async (res: any) => {
      const data = await res.data.result.data;
      isData.value = true;
      store.assignId = res.data.result.assignId;
      if (res.data.result.assignId) {
        await Promise.all([
          getSalary(
            res.data.result.assignId,
            "ทดลองงาน",
            "มอบหมายงาน",
            dataProbation
          ),
          getSalary(
            res.data.result.assignId,
            "ทดลองงาน",
            "รายงานผลครั้งที่ 1",
            dataResult1
          ),
          getSalary(
            res.data.result.assignId,
            "ทดลองงาน",
            "รายงานผลครั้งที่ 2",
            dataResult2
          ),
        ]);
      }
      if (data !== null) {
        dataSurvey.value = data;
      }
      hideLoader();
    })
    .catch((e) => {
      // messageError($q, e);
      isData.value = false;
      hideLoader();
    });
}

async function getSalary(
  id: string,
  name: string,
  group: string,
  val: Ref<string>
) {
  await http
    .get(config.API.developmentSalaryFile(name, group, id))
    .then((res) => {
      val.value = res.data.fileName;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

onMounted(async () => {
  await getSurveyData();
});
</script>
<template>
  <div class="col-12 row justify-center">
    <div 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.push(`/`)"
        />
        ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น
      </div>

      <div class="col-12">
        <div class="col-12" v-if="!isData">
          <q-banner
            inline-actions
            rounded
            class="text-center"
            style="min-height: 100px"
          >
            ไม่พบผลการประเมินการทดลองปฏิบัติหน้าที่ราชการนี้
          </q-banner>
        </div>
        <q-card bordered v-else>
          <q-tabs
            v-model="store.tabMain"
            inline-label
            align="left"
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
          >
            <q-tab name="SURVEY" label="แบบสํารวจความคิดเห็น" />
            <q-tab
              v-if="dataResult1"
              name="RESULT1"
              label="ผลการประเมินการฯ ครั้งที่ 1"
            />
            <q-tab
              v-if="dataResult2"
              name="RESULT2"
              label="ผลการประเมินการฯ ครั้งที่ 2"
            />
            <q-tab v-if="dataProbation" name="ASSIGN" label="แบบมอบหมายงานฯ" />
          </q-tabs>

          <q-separator />

          <q-tab-panels v-model="store.tabMain" animated>
            <q-tab-panel name="SURVEY" class="q-pa-none">
              <SurveyPage
                v-model:is-data="isData"
                v-model:data-survey="dataSurvey"
                :get-survey-data="getSurveyData"
              />
            </q-tab-panel>
            <q-tab-panel name="RESULT1" class="q-pa-sm">
              <ResultPage
                v-model:form-data="formDataResult"
                v-model:dev_options="dev_options"
                v-model:result_option="result_option"
              />
            </q-tab-panel>
            <q-tab-panel name="RESULT2" class="q-pa-sm">
              <ResultPage
                v-model:form-data="formDataResult"
                v-model:dev_options="dev_options"
                v-model:result_option="result_option"
              />
            </q-tab-panel>
            <q-tab-panel name="ASSIGN">
              <AssignPage />
            </q-tab-panel>
          </q-tab-panels>
        </q-card>
      </div>
    </div>
  </div>
</template>