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

<script setup lang="ts">
import { computed, ref } from "vue";

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

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(){

}

function onSubmitCommander(){
  
}
function onSubmitCommanderHigh(){
  
}
</script>
<template>
  <div class="q-pa-sm ">
    <!-- 1-4 สรุปผลการประเมิน -->
    <q-card bordered>
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <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-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
                type="textarea"
                label="ชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="developmentMethod"
                outlined
                type="textarea"
                label="วิธีการพัฒนา"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="developmentPeriod"
                outlined
                type="textarea"
                label="ช่วงเวลาการพัฒนา"
              />
            </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"
                label="ความเห็นของผู้ประเมิน"
              />
            </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">
      <q-form greedy @submit.prevent @validation-success="onSubmitCommander">
        <q-card-section>
      <div class="row q-gutter-sm">
        <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">
          <div class="column">
            <q-radio
              v-model="superiorCommentCheck"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="true"
              label="เห็นด้วยกับผลการประเมิน"
            />
            <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
            type="textarea"
            label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
            :readonly="superiorCommentCheck == 'true'"
          />
        </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">
      <q-form greedy @submit.prevent @validation-success="onSubmitCommanderHigh">
        <q-card-section>
      <div class="row q-gutter-sm">
        <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">
          <div class="column">
            <q-radio
              v-model="additionalSuperiorCheck"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="true"
              label="เห็นด้วยกับผลการประเมิน"
            />
            <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
            v-model="additionalSuperiorComment"
            outlined
            type="textarea"
            label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
            :readonly="additionalSuperiorCheck == 'true'"
          />
        </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>