hrms-user/src/modules/08_KPI/components/Tab/01_Assessment.vue

<script setup lang="ts">
import { ref, onMounted, computed, watch } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { useRoute } from "vue-router";

import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
import DialogDevelop from '@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue'


import config from "@/app.config";
import http from "@/plugins/http";

import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";

import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";


const indicatorScore = defineModel("indicatorScore", {
  type: Number,
  default: 0,
});
const competencyScore = defineModel("competencyScore", {
  type: Number,
  default: 0,
});
const dataListCriteria = ref<ListCriteria[]>([]);

const rows = ref<any[]>([]);
const modalCriteria = ref<boolean>(false);
const modalDevelop = ref<boolean>(false);
const editDevelop = ref<boolean>(false);
const $q = useQuasar();
const route = useRoute();
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
const { hideLoader, messageError, date2Thai } = useCounterMixin();
const store = useKpiDataStore();

const evaluationId = ref<string>(route.params.id.toString());

const rows_01 = ref<any[]>();
const rows_02 = ref<any[]>();
const rows_03 = ref<any[]>();

const totalResults1 = ref<number>(0);
const totalResults2 = ref<number>(0);
const totalResults3 = ref<number>(0);
// const resultWork = ref<number>(0);

const columns = ref<QTableProps["columns"]>([
  {
    name: "name",
    align: "left",
    label: "ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "develop",
    align: "left",
    label: "วิธีการพัฒนา",
    sortable: true,
    field: "develop",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "target",
    align: "left",
    label: "เป้าหมายการนำไปพัฒนางาน",
    sortable: true,
    field: "target",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "achievement",
    align: "left",
    label: "เกณฑ์การประเมินผลการพัฒนา",
    sortable: true,
    field: "achievement",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "summary",
    align: "left",
    label: "ผลการประเมิน",
    sortable: true,
    field: "summary",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

function fetchListPlanned() {
  http
    .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      const newRow = data.map((e: any) => ({
        ...e,
        evaluationResults: (e.point / 5) * e.weight,
      }));
      rows_01.value = newRow;

      if (newRow.length > 0) {
        const result = newRow.reduce(
          (sum: number, e: any) => sum + e.evaluationResults,
          0
        );
        const weight = newRow.reduce(
          (sum: number, e: any) => sum + e.weight,
          0
        );

        totalResults1.value =
          (result * store.dataEvaluation.plannedPoint) / weight;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function fetchListRole() {
  http
    .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      const newRow = data.map((e: any) => ({
        ...e,
        evaluationResults: (e.point / 5) * e.weight,
      }));
      rows_02.value = newRow;

      if (newRow.length > 0) {
        const result = newRow.reduce(
          (sum: number, e: any) => sum + e.evaluationResults,
          0
        );
        const weight = newRow.reduce(
          (sum: number, e: any) => sum + e.weight,
          0
        );

        totalResults2.value =
          (result * store.dataEvaluation.rolePoint) / weight;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function fetchAssigned() {
  http
    .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      const newRow = data.map((e: any) => ({
        ...e,
        evaluationResults: (e.point / 5) * e.weight,
      }));

      rows_03.value = newRow;

      if (newRow.length > 0) {
        const result = newRow.reduce(
          (sum: number, e: any) => sum + e.evaluationResults,
          0
        );
        const weight = newRow.reduce(
          (sum: number, e: any) => sum + e.weight,
          0
        );

        totalResults3.value =
          (result * store.dataEvaluation.specialPoint) / weight;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function onInfo() {
  modalCriteria.value = true;
}

const resultWork = computed(() => {
  const total = totalResults1.value + totalResults2.value + totalResults3.value;
  indicatorScore.value = total;
  return total.toFixed(2);
});

function getCriteria() {
  http
    .get(config.API.KpiEvaluationInfo)
    .then((res) => {
      const data = res.data.result.data;
      dataListCriteria.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

watch(
  () => store.dataEvaluation.plannedPoint,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      fetchListPlanned();
    }
  }
);

watch(
  () => store.dataEvaluation.rolePoint,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      fetchListRole();
    }
  }
);

watch(
  () => store.dataEvaluation.specialPoint,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      fetchAssigned();
    }
  }
);

function onAdd() {
  modalDevelop.value = true
  editDevelop.value = false
}

function onEdit(id: string) {
  modalDevelop.value = true
  editDevelop.value = true
}

function onDelete(id: string) {}
onMounted(() => {
  getCriteria();
  fetchListPlanned();
  fetchListRole();
  fetchAssigned();
  setTimeout(() => {
    hideLoader();
  }, 1000);
});
</script>

<template>
  <q-scroll-area
    style="height: 100vh"
    class="bg-white row col-12 text-dark q-pa-md"
  >
    <div class="text-weight-bold text-body2">
      <span class="txt-under text-blue-6">องค์ประกอบที่ 1 </span>
      <span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
    </div>

    <div class="q-gutter-md q-mt-sm">
      <!-- องค์ประกอบที่ 1 -->
      <Work
        v-model:data="rows_01"
        :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
        :page="1"
        :fetchList="fetchListPlanned"
        :total="totalResults1"
      />
      <Work
        v-model:data="rows_02"
        :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
        :page="2"
        :fetchList="fetchListRole"
        :total="totalResults2"
      />
      <Work
        v-model:data="rows_03"
        :title="`3. งานที่ได้รับมอบหมายพิเศษ`"
        :page="3"
        :fetchList="fetchAssigned"
        :total="totalResults3"
      />
      <div class="row text-body2 text-weight-bold">
        <!-- <div class="col-6 text-center row justify-center">
          <span>รวมผลการประเมิน (ร้อยละ) 100</span>
          <div class="text-primary q-pl-md">{{ total }}</div>
        </div> -->

        <div class="col-12 text-center row justify-center">
          <span
            >สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม
            {{
              store.dataEvaluation.plannedPoint +
              store.dataEvaluation.rolePoint +
              store.dataEvaluation.specialPoint
            }}
            คะแนน)</span
          >
          <div class="text-primary q-pl-md">{{ resultWork }}</div>
        </div>
      </div>

      <q-separator size="3px" class="q-my-lg" />

      <!-- องค์ประกอบที่ 2 -->
      <div class="text-weight-bold text-body2 q-mb-sm">
        <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
        <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
        <q-btn
          flat
          icon="info"
          color="info"
          round
          class="q-ml-xs"
          @click="onInfo"
        >
          <q-tooltip>เกณฑ์การประเมิน</q-tooltip>
        </q-btn>
      </div>

      <Competency
        v-model:dataListCriteria="dataListCriteria"
        v-model:competencyScore="competencyScore"
      />

      <q-card bordered style="border-radius: 5px" class="no-shadow">
        <q-card-section class="bg-grey-2 q-py-sm">
          <div class="row items-center">
            <div class="col">
              <span class="text-weight-medium">การพัฒนาตนเอง</span>
              <q-btn
                v-if="!isReadonly"
                class="q-ml-xs"
                flat
                round
                icon="mdi-plus"
                color="primary"
                size="12px"
                dense
                @click="onAdd()"
              >
                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
              </q-btn>
            </div>

            <q-space />
            <!-- <q-btn
            v-if="!isReadonly"
            flat
            round
            icon="mdi-clipboard-check-outline"
            color="blue-5"
            size="12px"
            dense
            @click="onEvaluate(item.id)"
          >
            <q-tooltip>ประเมิน</q-tooltip>
          </q-btn> -->
          </div>
        </q-card-section>
        <q-card-section class="q-pa-sm">
          <q-table
            ref="table"
            :columns="columns"
            :rows="rows"
            row-key="id"
            flat
            bordered
            :paging="true"
            dense
            hide-pagination
            class="custom-table2"
            no-data-label="ไม่มีข้อมูล"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  <span class="text-weight-medium">{{ col.label }}</span>
                </q-th>
                <q-th auto-width v-if="!isReadonly" />
              </q-tr>
            </template>
            <template v-slot:body="props">
              <q-tr :props="props" class="cursor-pointer">
                <q-td v-for="col in props.cols" :key="col.id">
                  <div v-if="col.name == 'createDate'">
                    {{ col.value ? date2Thai(col.value) : "-" }}
                  </div>

                  <div v-else-if="col.name == 'summary'">
                    {{
                      props.row.point !== 0
                        ? (props.row.point / 5) * props.row.weight
                        : "-"
                    }}
                  </div>
                  <div v-else>
                    {{ col.value }}
                  </div>
                </q-td>
                <q-td v-if="!isReadonly">
                  <q-btn
                    flat
                    round
                    icon="edit"
                    color="edit"
                    @click.stop.pervent="onEdit(props.row.id)"
                  >
                    <q-tooltip>แก้ไข </q-tooltip>
                  </q-btn>
                  <q-btn
                    flat
                    round
                    icon="delete"
                    color="red"
                    @click.stop.pervent="onDelete(props.row.id)"
                  >
                    <q-tooltip>ลบข้อมูล </q-tooltip>
                  </q-btn>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card-section>
      </q-card>

      <div class="row text-body2 text-weight-bold justify-center">
        <span
          >สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม
          {{ store.dataEvaluation.capacityPoint }} คะแนน)</span
        >
        <div class="text-primary q-pl-md">{{ competencyScore }}</div>
      </div>
    </div>
  </q-scroll-area>

  <DialogListCriteria
    v-model:modal="modalCriteria"
    v-model:dataListCriteria="dataListCriteria"
  />

  <DialogDevelop v-model:modal="modalDevelop" v-model:isEdit="editDevelop"/>

</template>

<style scoped>
.txt-under {
  text-decoration: underline;
}

.custom-table2 {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
  }

  .q-table td:nth-of-type(2) {
    z-index: 3 !important;
  }

  .q-table th:nth-of-type(2),
  .q-table td:nth-of-type(2) {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>