hrms-user/src/modules/08_KPI/components/Tab/04_Result.vue

<script setup lang="ts">
import { computed, ref } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";

const store = useKpiDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, success, showLoader, hideLoader, dialogMessageNotify } =
  mixin;

const separator = ref<any>("cell");

const additionalSuperiorCommentRef = ref<any>(null);
const superiorCommentRef = ref<any>(null);

const title = ref<string>("");
const developmentMethod = ref<string>("");
const developmentPeriod = ref<string>("");

const evaluatorComment = ref<string>("");
const superiorComment = ref<string>("");
const additionalSuperiorComment = ref<string>("");

const superiorCommentCheck = ref<string>("");
const additionalSuperiorCheck = ref<string>("");

const weight1 = ref<number>(10);
const result1 = ref<number>(20);
const weight2 = ref<number>(50);
const result2 = ref<number>(60);
const sumWeight = computed(() => {
  return weight1.value + weight2.value;
});
const sumResult = computed(() => {
  return result1.value + result2.value;
});

const group = computed(() => {
  return convert(sumResult.value);
});
const options = ref<any[]>([
  {
    label: "ดีเด่น (คะแนนร้อยละ ๙๐.๐๐ ขึ้นไป)",
    value: "EXCELLENT",
  },
  {
    label: "ดีมาก (คะแนนร้อยละ ๘๐.๐๐ - ๘๙.๙๙)",
    value: "VERYGOOD",
  },
  {
    label: "ดี (คะแนนร้อยละ ๗๐.๐๐ - ๗๙.๙๙)",
    value: "GOOD",
  },
  {
    label: "พอใช้ (คะแนนร้อยละ ๖๐.๐๐ - ๖๙.๙๙)",
    value: "FAIR",
  },
  {
    label: "ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ ๖๐.๐๐)",
    value: "IMPROVEMENT",
  },
]);

function convert(score: any): string {
  if (score >= 90) {
    return "EXCELLENT";
  } else if (score >= 80) {
    return "VERYGOOD";
  } else if (score >= 70) {
    return "GOOD";
  } else if (score >= 60) {
    return "FAIR";
  } else {
    return "IMPROVEMENT";
  }
}

function onSubmit() {
  dialogConfirm($q, () => {});
}

function onSubmitCommander() {
  if (superiorCommentCheck.value == "") {
    dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
  } else {
    dialogConfirm($q, () => {});
  }
}
function onSubmitCommanderHigh() {
  if (additionalSuperiorCheck.value == "") {
    dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
  } else {
    dialogConfirm($q, () => {});
  }
}

function resetCommander() {
  superiorComment.value = "";
  superiorCommentRef.value.resetValidation();
}

function resetCommanderHigh() {
  additionalSuperiorComment.value = "";
  additionalSuperiorCommentRef.value.resetValidation();
}
</script>
<template>
  <div class="q-pa-sm">
    <!-- 1-4 สรุปผลการประเมิน -->
    <q-card bordered>
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <q-toolbar>
          <q-toolbar-title class="text-subtitle2 text-bold"
            >สรุปผลการประเมิน</q-toolbar-title
          >
        </q-toolbar>
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-markup-table
                :separator="separator"
                flat
                bordered
                class="custom-table2"
              >
                <thead>
                  <tr>
                    <th class="text-left txt-customHead">
                      องค์ประกอบการประเมิน
                    </th>
                    <th class="text-left txt-customHead">น้ำหนักคะแนน</th>
                    <th class="text-left txt-customHead">ผลการประเมิน</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="text-left">องค์ประกอบที่ ๑ ผลสัมฤทธิ์ของงาน</td>
                    <td class="text-left">{{ weight1 }}</td>
                    <td class="text-left">{{ result1 }}</td>
                  </tr>
                  <tr>
                    <td class="text-left">
                      องค์ประกอบที่ ๒ พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)
                    </td>
                    <td class="text-left">{{ weight2 }}</td>
                    <td class="text-left">{{ result2 }}</td>
                  </tr>
                  <tr>
                    <td class="text-right text-bold" style="font-size: 16px">
                      รวม
                    </td>
                    <td class="text-left">{{ sumWeight }}</td>
                    <td class="text-left">{{ sumResult }}</td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
            <div class="col-12">
              <div class="text-weight-bold text-body2">
                <span class="txt-under text-blue-6">ระดับผลการประเมิน</span>
              </div>
            </div>
            <div class="col-12 no-pointer">
              <div class="column">
                <q-radio
                  v-model="group"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="EXCELLENT"
                  label="ดีเด่น (คะแนนร้อยละ ๙๐.๐๐ ขึ้นไป)"
                />
                <q-radio
                  v-model="group"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="VERYGOOD"
                  label="ดีมาก (คะแนนร้อยละ ๘๐.๐๐ - ๘๙.๙๙)"
                />
                <q-radio
                  v-model="group"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="GOOD"
                  label="ดี (คะแนนร้อยละ ๗๐.๐๐ - ๗๙.๙๙)"
                />
                <q-radio
                  v-model="group"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="FAIR"
                  label="พอใช้ (คะแนนร้อยละ ๖๐.๐๐ - ๖๙.๙๙)"
                />
                <q-radio
                  v-model="group"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="IMPROVEMENT"
                  label="ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ ๖๐.๐๐)"
                />
              </div>
            </div>
            <div class="col-12">
              <div class="text-weight-bold text-body2">
                <span class="txt-under text-blue-6">ความรู้/ทักษะ/สมรรถนะ</span>
              </div>
            </div>

            <div class="col-12">
              <q-input
                v-model="title"
                outlined
                hide-bottom-space
                type="textarea"
                label="ชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา"
                :readonly="store.rolePerson !== 'EVALUATOR'"
                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา'}`,]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="developmentMethod"
                outlined
                hide-bottom-space
                type="textarea"
                label="วิธีการพัฒนา"
                :readonly="store.rolePerson !== 'EVALUATOR'"
                :rules="[(val:string) => !!val || `${'กรุณากรอกวิธีการพัฒนา'}`,]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="developmentPeriod"
                outlined
                hide-bottom-space
                type="textarea"
                label="ช่วงเวลาการพัฒนา"
                :readonly="store.rolePerson !== 'EVALUATOR'"
                :rules="[(val:string) => !!val || `${'กรุณากรอกช่วงเวลาการพัฒนา'}`,]"
              />
            </div>
            <div class="col-12">
              <div class="text-weight-bold text-body2">
                <span class="txt-under text-blue-6">ความเห็นของผู้ประเมิน</span>
              </div>
            </div>
            <div class="col-12">
              <q-input
                v-model="evaluatorComment"
                outlined
                type="textarea"
                hide-bottom-space
                label="ความเห็นของผู้ประเมิน"
                :readonly="store.rolePerson !== 'EVALUATOR'"
                :rules="[(val:string) => !!val || `${'กรุณากรอกความเห็นของ'}`,]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator v-if="store.rolePerson == 'EVALUATOR'" />
        <q-card-actions v-if="store.rolePerson == 'EVALUATOR'" align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>

    <q-card
      bordered
      class="q-mt-md"
      v-if="store.rolePerson == 'COMMANDER' && evaluatorComment !== '' && store.dataEvaluation.commanderId !== null"
    >
      <q-form greedy @submit.prevent @validation-success="onSubmitCommander">
        <q-toolbar>
          <q-toolbar-title class="text-subtitle2 text-bold"
            >ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป</q-toolbar-title
          >
        </q-toolbar>
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div class="column">
                <q-radio
                  v-model="superiorCommentCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="true"
                  label="เห็นด้วยกับผลการประเมิน"
                  @click="resetCommander()"
                />
                <q-radio
                  v-model="superiorCommentCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="false"
                  label="มีความเห็นต่าง ดังนี้"
                />
              </div>
            </div>

            <div class="col-12">
              <q-input
                v-model="superiorComment"
                outlined
                :readonly="superiorCommentCheck == 'true'"
                type="textarea"
                label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
                hide-bottom-space
                ref="superiorCommentRef"
                :rules="[(val:string) => superiorCommentCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>

    <q-card
      bordered
      class="q-mt-md"
      v-if="store.rolePerson == 'COMMANDERHIGH' && superiorComment !== '' && store.dataEvaluation.commanderHighId !== null"
    >
      <q-form
        greedy
        @submit.prevent
        @validation-success="onSubmitCommanderHigh"
      >
        <q-toolbar>
          <q-toolbar-title class="text-subtitle2 text-bold"
            >ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-toolbar-title
          >
        </q-toolbar>
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div class="column">
                <q-radio
                  v-model="additionalSuperiorCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="true"
                  label="เห็นด้วยกับผลการประเมิน"
                  @click="resetCommanderHigh()"
                />
                <q-radio
                  v-model="additionalSuperiorCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="false"
                  label="มีความเห็นต่าง ดังนี้"
                />
              </div>
            </div>
            <div class="col-12">
              <q-input
                ref="additionalSuperiorCommentRef"
                v-model="additionalSuperiorComment"
                outlined
                hide-bottom-space
                type="textarea"
                label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
                :readonly="additionalSuperiorCheck == 'true'"
                :rules="[(val:string) => additionalSuperiorCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </div>
</template>
<style scoped>
.no-pointer {
  pointer-events: none;
}
.txt-customHead {
  font-size: 14px;
  font-weight: 500;
}
.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;
  }

  .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: #fff;
  }
  .q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
    border: 1px solid #2196f3;
  }
}
</style>