hrms-user/src/modules/11_probation/component/07_EvaluateReport.vue

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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin();
const { date2Thai } = mixin;
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const mode = ref<any>($q.screen.gt.xs);

const id = ref<string>(route.params.id as string);
const profileId = ref<string>(route.params.profileId as string);
const status = ref<boolean>(false);
const achievement_score = ref<number>();
const achievement_percent = ref<number>();
const achievement_result = ref<number>();

const develop_orientation_score = ref<number>();
const develop_self_learning_score = ref<number>();
const develop_training_seminar_score = ref<number>();
const develop_other_training_score = ref<number>();
const develop_total_score = ref<number>();
const develop_orientation_percent = ref<number>();
const develop_self_learning_percent = ref<number>();
const develop_training_seminar_percent = ref<number>();
const develop_other_training_percent = ref<number>();
const develop_total_percent = ref<number>();
const develop_result = ref<number>();
const achievement_score_total = ref<number>();
const behavior_score = ref<number>();
const behavior_score_total = ref<number>();
const behavior_percent = ref<number>();
const behavior_result = ref<number>();
const sum_score = ref<number>();
const sum_percent = ref<number>();
const reason = ref<string>();
const pass_result = ref<number>();
const evaluate_date = ref<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 },
]);

/** get คะแนน */
async function getReportScore() {
  await http.get(config.API.summaryReportDetail(id.value)).then((res) => {
    const data = res.data.data;
    develop_orientation_score.value = data.develop_orientation_score;
    develop_self_learning_score.value = data.develop_self_learning_score;
    develop_training_seminar_score.value = data.develop_training_seminar_score;
    develop_other_training_score.value = data.develop_other_training_score;
    develop_total_score.value = data.develop_total_score;
    develop_orientation_percent.value = data.develop_orientation_percent;
    develop_self_learning_percent.value = data.develop_self_learning_percent;
    develop_training_seminar_percent.value =
      data.develop_training_seminar_percent;
    develop_other_training_percent.value = data.develop_other_training_percent;
    develop_total_percent.value = data.develop_total_percent;
    develop_result.value = data.develop_result == 0 ? 2 : data.develop_result;

    achievement_score.value = data.achievement_score;
    achievement_score_total.value = data.achievement_score_total;
    achievement_percent.value = data.achievement_percent;
    achievement_result.value = data.achievement_result;

    behavior_score.value = data.behavior_score;
    behavior_score_total.value = data.behavior_score_total;
    behavior_percent.value = data.behavior_percent;
    behavior_result.value = data.behavior_result;

    sum_score.value = data.sum_score;
    sum_percent.value = data.sum_percent;

    reason.value = data.reason;
    pass_result.value = data.pass_result;
    evaluate_date.value = data.evaluate_date;
  });
}

/** get ค่า เมื่อโหลดหน้า */
onMounted(() => {
  getReportScore();
});
</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="`${$q.screen.gt.xs ? '' : 'mobileClass'}`">
    <div class="row q-col-gutter-sm">
      <div class="col-12">
        <span class="toptitle text-dark"
          >ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</span
        >
      </div>

      <div class="col-12 text-dark text-weight-bold">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
        ผลการประเมิน
      </div>

      <div v-if="$q.screen.gt.xs" class="col-12">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <div class="row q-col-gutter-sm q-px-md items-center">
              <div class="col-4">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-4">
                <q-list>
                  <q-item class="q-pa-none text-center">
                    <q-item-section>
                      <q-item-label class="text-weight-light"
                        >คะแนน</q-item-label
                      >
                      <q-item-label
                        class="text-weight-bold text-dark"
                        caption
                        >{{ achievement_score }}</q-item-label
                      >
                    </q-item-section>
                    <q-item-section class="q-ma-none">
                      <q-item-label class="text-weight-light"
                        >ร้อยละ</q-item-label
                      >
                      <q-item-label
                        class="text-weight-bold text-dark"
                        caption
                        >{{ achievement_percent }}</q-item-label
                      ></q-item-section
                    >
                  </q-item>
                </q-list>
              </div>
              <div class="col-4 text-weight-medium text-grey-7" align="end">
                <span v-if="achievement_result == 1">
                  ผ่าน (สูงกว่าร้อยละ 60)
                </span>
                <span v-else> ไม่ผ่าน (ต่ำกว่าร้อยละ 60) </span>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="row q-col-gutter-sm q-px-md items-center">
              <div class="col-4">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                2. คะแนนพฤติกรรมการปฏิบัติราชการ
              </div>
              <div class="col-4">
                <q-list>
                  <q-item class="q-pa-none text-center">
                    <q-item-section>
                      <q-item-label class="text-weight-light"
                        >คะแนน</q-item-label
                      >
                      <q-item-label
                        class="text-weight-bold text-dark"
                        caption
                        >{{ behavior_score }}</q-item-label
                      >
                    </q-item-section>
                    <q-item-section class="q-ma-none">
                      <q-item-label class="text-weight-light"
                        >ร้อยละ</q-item-label
                      >
                      <q-item-label
                        class="text-weight-bold text-dark"
                        caption
                        >{{ behavior_percent }}</q-item-label
                      ></q-item-section
                    >
                  </q-item>
                </q-list>
              </div>
              <div class="col-4 text-weight-medium text-grey-7" align="end">
                <span v-if="achievement_result == 1">
                  ผ่าน (สูงกว่าร้อยละ 60)
                </span>
                <span v-else> ไม่ผ่าน (ต่ำกว่าร้อยละ 60) </span>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="row q-col-gutter-sm q-px-md items-center">
              <div class="col-4">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                ผลคะแนนรวมการประเมินการทดลอง
              </div>
              <div class="col-4">
                <q-list>
                  <q-item class="q-pa-none text-center">
                    <q-item-section>
                      <q-item-label class="text-weight-light"
                        >คะแนน</q-item-label
                      >
                      <q-item-label
                        class="text-weight-bold text-dark"
                        caption
                        >{{ sum_score }}</q-item-label
                      >
                    </q-item-section>
                    <q-item-section class="q-ma-none">
                      <q-item-label class="text-weight-light"
                        >ร้อยละ</q-item-label
                      >
                      <q-item-label
                        class="text-weight-bold text-dark"
                        caption
                        >{{ sum_percent }}</q-item-label
                      ></q-item-section
                    >
                  </q-item>
                </q-list>
              </div>
              <div class="col-4 text-weight-medium text-grey-7" align="end">
                <span v-if="pass_result == 1"> ผ่าน (สูงกว่าร้อยละ 60) </span>
                <span v-else> ไม่ผ่าน (ต่ำกว่าร้อยละ 60) </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="col-12">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-card bordered>
              <div class="bg-grey-1 q-pa-sm">
                <span class="text-weight-medium"
                  >1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</span
                >
              </div>
              <q-separator />
              <q-card-section class="q-pa-none">
                <q-list>
                  <q-item class="q-pa-none text-center">
                    <q-item-section>
                      <q-item-label>คะแนน</q-item-label>
                      <q-item-label>{{ achievement_score }}</q-item-label>
                    </q-item-section>
                    <q-separator color="grey-3" vertical />
                    <q-item-section class="q-ma-none">
                      <q-item-label>ร้อยละ</q-item-label>
                      <q-item-label>{{
                        achievement_percent
                      }}</q-item-label></q-item-section
                    >
                  </q-item>
                  <q-separator />
                  <q-item class="q-pa-none text-center">
                    <q-item-section v-if="achievement_result == 1">
                      ผ่าน (สูงกว่าร้อยละ 60)
                    </q-item-section>
                    <q-item-section v-else>
                      ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card-section>
            </q-card>
          </div>

          <div class="col-12">
            <q-card bordered>
              <div class="bg-grey-1 q-pa-sm">
                <span class="text-weight-medium"
                  >2. คะแนนพฤติกรรมการปฏิบัติราชการ</span
                >
              </div>
              <q-separator />
              <q-card-section class="q-pa-none">
                <q-list>
                  <q-item class="q-pa-none text-center">
                    <q-item-section>
                      <q-item-label>คะแนน</q-item-label>
                      <q-item-label>{{ behavior_score }}</q-item-label>
                    </q-item-section>
                    <q-separator color="grey-3" vertical />
                    <q-item-section class="q-ma-none">
                      <q-item-label>ร้อยละ</q-item-label>
                      <q-item-label>{{
                        behavior_percent
                      }}</q-item-label></q-item-section
                    >
                  </q-item>
                  <q-separator />
                  <q-item class="q-pa-none text-center">
                    <q-item-section v-if="behavior_result == 1">
                      ผ่าน (สูงกว่าร้อยละ 60)
                    </q-item-section>
                    <q-item-section v-else>
                      ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card-section>
            </q-card>
          </div>

          <div class="col-12">
            <q-card bordered>
              <div class="bg-grey-1 q-pa-sm">
                <span class="text-weight-medium"
                  >ผลคะแนนรวมการประเมินการทดลอง</span
                >
              </div>
              <q-separator />
              <q-card-section class="q-pa-none">
                <q-list>
                  <q-item class="q-pa-none text-center">
                    <q-item-section>
                      <q-item-label>คะแนน</q-item-label>
                      <q-item-label>{{ sum_score }}</q-item-label>
                    </q-item-section>
                    <q-separator color="grey-3" vertical />
                    <q-item-section class="q-ma-none">
                      <q-item-label>ร้อยละ</q-item-label>
                      <q-item-label>{{
                        sum_percent
                      }}</q-item-label></q-item-section
                    >
                  </q-item>
                  <q-separator />
                  <q-item class="q-pa-none text-center">
                    <q-item-section v-if="pass_result == 1">
                      ผ่าน (สูงกว่าร้อยละ 60)
                    </q-item-section>
                    <q-item-section v-else>
                      ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>

      <div class="col-12 text-dark text-weight-bold">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
      </div>
      <div class="col-12">
        <q-card bordered class="bg-grey-1">
          <div class="row q-pa-sm text-weight-medium">
            <div class="col-8">หัวข้อ</div>
            <div class="col-2">คะแนน</div>
            <div class="col-2">ร้อยละ</div>
          </div>
          <q-separator />
          <div
            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
          >
            <div class="col-8">1. การปฐมนิเทศ</div>
            <div class="col-2">
              <q-input
                bg-color="white"
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="develop_orientation_score"
              />
            </div>
            <div class="col-2">
              <q-input
                bg-color="white"
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="develop_orientation_percent"
              />
            </div>
          </div>
          <q-separator />
          <div
            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
          >
            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
            <div class="col-2">
              <q-input
                outlined
                bg-color="white"
                dense
                type="number"
                :disable="!status"
                v-model="develop_self_learning_score"
              />
            </div>
            <div class="col-2">
              <q-input
                bg-color="white"
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="develop_self_learning_percent"
              />
            </div>
          </div>
          <q-separator />
          <div
            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
          >
            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
            <div class="col-2">
              <q-input
                outlined
                bg-color="white"
                dense
                type="number"
                :disable="!status"
                v-model="develop_training_seminar_score"
              />
            </div>
            <div class="col-2">
              <q-input
                outlined
                bg-color="white"
                dense
                type="number"
                :disable="!status"
                v-model="develop_training_seminar_percent"
              />
            </div>
          </div>
          <q-separator />
          <div
            class="row q-pa-sm text-weight-medium items-center q-col-gutter-sm"
          >
            <div class="col-8">
              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
            </div>
            <div class="col-2">
              <q-input
                bg-color="white"
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="develop_other_training_score"
              />
            </div>
            <div class="col-2">
              <q-input
                bg-color="white"
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="develop_other_training_percent"
              />
            </div>
          </div>
          <q-separator />
          <div
            class="row q-pa-sm text-weight-bold items-center q-col-gutter-sm"
          >
            <div class="col-8">
              คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-2 text-center">
              <span>{{ develop_total_score }}</span>
            </div>
            <div class="col-2 text-center">
              <span>{{ develop_total_percent }}</span>
            </div>
          </div>
        </q-card>
      </div>

      <div class="col-12 text-dark text-weight-bold">
        ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
      </div>
      <div class="col-12 col-sm-6">
        <q-select
          dense
          v-model="develop_result"
          outlined
          :options="dev_options"
          option-label="label"
          option-value="value"
          map-options
          emit-value
          :disable="!status"
        />
      </div>
      <div class="col-12 text-dark text-weight-bold">
        เหตุผลอื่น ๆ ในการพิจารณา
      </div>
      <div class="col-12">
        <q-input
          type="textarea"
          outlined
          dense
          v-model="reason"
          lazy-rules
          autogrow
          hide-bottom-space
          :row="3"
          :disable="!status"
        />
      </div>
      <div class="col-12 col-sm-6">
        <div class="column q-gutter-y-sm">
          <div class="text-dark text-weight-bold">
            ผลการทดลองปฏิบัติหน้าที่ราชการ
          </div>
          <q-select
            dense
            v-model="pass_result"
            outlined
            :options="result_option"
            option-label="name"
            option-value="value"
            map-options
            emit-value
            :disable="!status"
          />
        </div>
      </div>
      <div class="col-12 col-sm-6">
        <div class="column q-gutter-y-sm">
          <div class="text-dark text-weight-bold">วัน เดือน ปี ที่ประเมิน</div>
          <datepicker
            menu-class-name="modalfix"
            v-model="evaluate_date"
            :locale="'th'"
            autoApply
            :readonly="!status"
            borderless
            :enableTimePicker="false"
            week-start="0"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                outlined
                dense
                :disable="!status"
                class="full-width datepicker"
                hide-bottom-space
                :model-value="
                  evaluate_date != null ? date2Thai(evaluate_date) : null
                "
                :rules="[(val) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
</style>