hrms-mgt/src/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue

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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";

import DialogHeader from "@/components/DialogHeader.vue";

const props = defineProps({
  getAll: Function,
});

const $q = useQuasar();
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  success,
  messageError,
} = mixin;

const modal = defineModel<boolean>("modal", { required: true });
const rows = defineModel<any[]>("data", { required: true });
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 onSubmit() {
  const data = rows.value.map((i: any) => ({
    id: i.id,
    point: i.summary,
    summary: i.summary,
  }));
  showLoader();
  http
    .post(config.API.kpiAchievementDevelop + `/point`, data)
    .then((res) => {
      success($q, "บันทึกข้อมลสำเร็จ");
      close();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function close() {
  modal.value = false;
  rows.value = [];
  props.getAll?.();
}
</script>
<template>
  <q-dialog v-model="modal" persistent style="width: 60vw">
    <q-card style="width: 1200px; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="ประเมิน" :close="close" />
        <q-separator />
        <q-card-section style="min-height: 70vh">
          <div class="col-12 q-pa-sm">
            <q-table
              ref="table"
              :columns="columns"
              :rows="rows"
              row-key="id"
              flat
              bordered
              dense
              hide-pagination
              class="custom-table2"
              :rows-per-page-options="[20]"
              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-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"
                    class="vertical-top"
                  >
                    <div v-if="col.name == 'develop'">
                      <div class="column">
                        <q-checkbox
                          size="xs"
                          :model-value="props.row.isDevelopment70"
                          label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
                        />
                        <q-checkbox
                          size="xs"
                          :model-value="props.row.isDevelopment20"
                          label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
                        />
                        <q-checkbox
                          size="xs"
                          :model-value="props.row.isDevelopment10"
                          label="10 การฝึกอบรมอื่นๆ"
                        />
                      </div>
                    </div>
                    <div v-else-if="col.name === 'summary'">
                      {{ props.row.summary ? props.row.summary : 0 }}
                    </div>

                    <div v-else-if="col.name == 'achievement'">
                      <q-btn-group outline>
                        <q-btn
                          outline
                          color="grey-6"
                          label="0"
                          :class="props.row.summary == 0 && 'active'"
                          @click="props.row.summary = 0"
                          ><q-tooltip>{{
                            props.row.achievement0
                          }}</q-tooltip></q-btn
                        >
                        <q-btn
                          outline
                          color="grey-6"
                          label="5"
                          :class="props.row.summary == 5 && 'active'"
                          @click="props.row.summary = 5"
                          ><q-tooltip>{{
                            props.row.achievement5
                          }}</q-tooltip></q-btn
                        >
                        <q-btn
                          outline
                          color="grey-6"
                          label="10"
                          :class="props.row.summary == 10 && 'active'"
                          @click="props.row.summary = 10"
                          ><q-tooltip>{{
                            props.row.achievement10
                          }}</q-tooltip></q-btn
                        >
                      </q-btn-group>
                    </div>
                    <div v-else>
                      {{ col.value ? col.value : "-" }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
            </q-table>
          </div>
        </q-card-section>
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<style scoped>
.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>