พฤติกรรมการปฎิบัติราชการ (สมรรถนะ) ไม่เสร็จ

src/api/KPI/api.kpis.ts

@@ -7,6 +7,7 @@ const kpiPlan = `${env.API_URI}/kpi/plan`;
 const kpiRole = `${env.API_URI}/kpi/role`;
 const KpiCapacity = `${env.API_URI}/kpi/capacity`;
 const KpiFile = `${env.API_URI}/salary/file`;
+const KpiEvaluation = `${env.API_URI}/kpi/evaluation`;
 
 const KpiUser = `${env.API_URI}/kpi/user`;
 const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
@@ -25,5 +26,6 @@ export default {
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
 
-  kpiUserCapacity:`${KpiUser}/capacity`
+  kpiUserCapacity:`${KpiUser}/capacity`,
+  KpiEvaluation
 };

src/modules/08_KPI/components/Tab/01_Assessment.vue

@@ -3,6 +3,8 @@ import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
+import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -12,6 +14,7 @@ import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue"
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+const modalCriteria = ref<boolean>(false)
 const $q = useQuasar();
 const route = useRoute();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
@@ -73,6 +76,10 @@ function fetchAssigned() {
   rows_03.value = data;
 }
 
+function onInfo(){
+  modalCriteria.value = true
+}
+
 onMounted(() => {
   fetchListPlanned();
   fetchListRole();
@@ -128,16 +135,21 @@ onMounted(() => {
       <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 />
 
       <div class="row text-body2 text-weight-bold justify-center">
-        <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
+        <span>สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม 20 คะแนน)</span>
         <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
       </div>
     </div>
   </q-scroll-area>
+
+  <DialogListCriteria v-model:modal="modalCriteria"/>
 </template>
 
 <style scoped>

src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue

@@ -145,7 +145,6 @@ function onSubmit() {
         kpiCapacityId: formDetail.id,
         level: expectedLevel.value.toString(),
         weight: weight.value,
-        point: 0,
         summary: 0,
       };
       showLoader();
@@ -247,10 +246,8 @@ watch(
         <q-separator />
 
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
-          <div class="col-12 row">
+          <div class="row">
-            <div
+            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
-              class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight"
-            >
               <div class="col-12 q-col-gutter-sm fit">
                 <div class="col-12">
                   <q-select
@@ -311,10 +308,7 @@ watch(
                             @click="clickList(item.name, item)"
                           >
                             <q-item-section class="q-pa-none">
-                              <div
+                              <div class="row items-center">
-                                class="row items-center"
-                                style="height: 20px"
-                              >
                                 <div class="col-12">
                                   <span>{{ item.name }}</span>
                                 </div>
@@ -333,13 +327,12 @@ watch(
               </div>
             </div>
 
-            <div class="col-xs-12 col-sm-8 col-md-9 row">
+            <div class="col-9 q-pa-md q-col-gutter-sm">
-              <div class="row col-12 q-pa-md q-col-gutter-sm">
+              <span class="text-body2 text-weight-medium"
-                <div class="col-12">
+                >รายละเอียดสมรรถนะ</span
-                  <span class="text-body2 text-weight-medium"
+              >
-                    >รายละเอียดสมรรถนะ</span
+
-                  >
+              <div class="row q-col-gutter-sm">
-                </div>
                 <div class="col-5 row">
                   <q-card bordered class="fit q-pa-sm no-shadow">
                     <div
@@ -370,23 +363,24 @@ watch(
                         </div>
                       </div>
                     </div>
-                    <div class="row q-col-gutter-sm">
+                    <div class="row q-col-gutter-sm q-pa-sm">
-                      <div class="col-6">
+                      <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
+                      <div class="col-8">
                         <q-input
                           v-model="weight"
                           dense
                           outlined
-                          type="number"
-                          label="น้ำหนัก (ร้อยละ)"
                           lazy-rules
                           :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
                           hide-bottom-space
                           class="inputgreen"
+                          mask="###"
                         />
                       </div>
+                      <div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
                       <div
                         v-if="type == 'HEAD' || type == 'GROUP'"
-                        class="col-6"
+                        class="col-8"
                       >
                         <q-select
                           v-model="expectedLevel"
@@ -398,7 +392,6 @@ watch(
                           option-value="name"
                           outlined
                           lazy-rules
-                          label="ระดับที่คาดหวัง"
                           :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับที่คาดหวัง'}`,]"
                           hide-bottom-space
                           class="inputgreen"
@@ -409,7 +402,6 @@ watch(
                           v-model="expectedLevel"
                           dense
                           outlined
-                          label="ระดับที่คาดหวัง"
                           lazy-rules
                           :rules="[(val:string) => !!val || `${'กรุณาระดับที่คาดหวัง'}`,]"
                           hide-bottom-space

src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { watch, ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+interface ListCriteria {
+  id: string;
+  level: number;
+  description: string;
+}
+
+const $q = useQuasar();
+const dataList = ref<ListCriteria[]>([]);
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+const modal = defineModel<boolean>("modal", { required: true });
+
+function close() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  (newValue, oldValue) => {
+    if (newValue == true) {
+      showLoader();
+      http
+        .get(config.API.KpiEvaluation)
+        .then((res) => {
+          const data = res.data.result.data;
+          dataList.value = data;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="min-width: 60%" >
+      <DialogHeader tittle="เกณฑ์การประเมินสมรรถนะ" :close="close" />
+      <q-separator />
+      <q-card-section class="bg-grey-2">
+        <q-card bordered>
+          <div class="column">
+            <div v-for="(item, index) in dataList" :key="item.id">
+              <div class="q-pa-sm">
+                <div class="row">
+                    <span v-html="item.description"></span>
+                </div>
+              </div>
+              <q-separator />
+            </div>
+          </div>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+
+import { useQuasar, type QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  getData: Function,
+});
+const {
+  dialogConfirm,
+  hideLoader,
+  showLoader,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = useCounterMixin();
+const store = useKpiDataStore();
+const $q = useQuasar();
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("data", { required: true });
+const type = defineModel<string>("type", { required: true });
+const visibleColumns = ref<string[]>([
+  "name",
+  "level",
+  "point",
+  "weight",
+  "summary",
+]);
+
+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: "level",
+    align: "left",
+    label: "ระดับที่คาดหวัง",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    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 closeDialog() {
+  modal.value = false;
+  props.getData?.();
+}
+
+function onSubmit() {
+  const main = rows.value;
+  const checkPoint = main.some((item: any) => item.point === 0);
+
+  if (checkPoint) {
+    dialogMessageNotify($q, "กรุณาเลือกระดับคะแนนตามเกณฑ์การประเมิน");
+  } else {
+    dialogConfirm($q, () => {
+      closeDialog();
+    });
+  }
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 1200px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
+        <q-separator />
+        <q-card-section class="q-pt-none">
+          <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"
+              :visible-columns="visibleColumns"
+              :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">
+                    <div v-if="col.name === 'point'">
+                      <div v-if="type == 'HEAD' || type == 'GROUP'">
+                        <q-rating
+                          v-model="props.row.point"
+                          max="5"
+                          size="sm"
+                          color="grey"
+                          :color-selected="store.ratingColors"
+                          label="ระดับการประเมินพฤติกรรม"
+                          
+                        >
+                          <template v-slot:tip-1>
+                            <q-tooltip>ต่ำกว่าระดับที่คาดหวังมาก (1)</q-tooltip>
+                          </template>
+                          <template v-slot:tip-2>
+                            <q-tooltip>ต่ำกว่าระดับที่คาดหวัง (2)</q-tooltip>
+                          </template>
+                          <template v-slot:tip-3>
+                            <q-tooltip>อยู่ในระดับที่คาดหวัง (3)</q-tooltip>
+                          </template>
+                          <template v-slot:tip-4>
+                            <q-tooltip
+                              >อยู่ในระดับสูงกว่าที่คาดหวัง (4)</q-tooltip
+                            >
+                          </template>
+                          <template v-slot:tip-5>
+                            <q-tooltip
+                              >เป็นแบบอย่างที่ดีให้กับผู้อื่น (5)</q-tooltip
+                            >
+                          </template>
+                        </q-rating>
+                      </div>
+                      <div v-else>รอ ทำ select</div>
+                    </div>
+                    <div v-else-if="col.name === 'summary'">
+                      {{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <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;
+  }
+}
+</style>

src/modules/08_KPI/components/Tab/Topic/02_CompetencyCard.vue

@@ -1,21 +1,35 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
+import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
 
 import { useQuasar, type QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 import http from "@/plugins/http";
-import config from '@/app.config'
+import config from "@/app.config";
 import { useRoute } from "vue-router";
 
-import type { FormCapacityList } from '@/modules/08_KPI/interface/request/index'
+import type { FormCapacityList } from "@/modules/08_KPI/interface/request/index";
-const route = useRoute()
-const id = ref<string>(route.params.id as string);
-const idCapacity = ref<string|null>(null)
 
-const $q = useQuasar()
+const modalEvaluate = ref<boolean>(false);
+const point = ref<number>(0);
+const store = useKpiDataStore();
+
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const idCapacity = ref<string | null>(null);
+
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai,messageError,showLoader,hideLoader,dialogRemove,success } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+} = mixin;
 
 const type = defineModel<string>("type", { required: true });
 const name = defineModel<any>("name", { required: true });
@@ -95,64 +109,87 @@ function onAdd() {
 
 const rows = ref<FormCapacityList[]>([]);
 
-
+function getData() {
-function getData(){
+  showLoader();
-  showLoader()
   http
-  .get(config.API.kpiUserCapacity+`?id=${id.value}&type=${type.value}`)
+    .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type.value}`)
-  .then((res)=>{
+    .then((res) => {
-    
+      const data = res.data.result.data;
-    const data = res.data.result.data
+      rows.value = data;
-    rows.value = data
-  }).catch((e)=>{
-    messageError($q,e)
-  }).finally(()=>{
-    hideLoader()
-  })
-}
-
-function onEdit(data:FormCapacityList){
-  modal.value = true;
-  idCapacity.value = data.id
-}
-
-function onDelete(id:string){
-  dialogRemove($q,()=>{
-    showLoader()
-    http
-    .delete(config.API.kpiUserCapacity+`/${id}`)
-    .then((res)=>{
-      success($q,'ลบข้อมูลสำเร็จ')
-      getData()
-    }).catch((e)=>{
-      messageError($q,e)
-    }).finally(()=>{
-      hideLoader()
     })
-  })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-onMounted(()=>{
+function onEdit(data: FormCapacityList) {
-  getData()
+  modal.value = true;
-})
+  idCapacity.value = data.id;
+}
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiUserCapacity + `/${id}`)
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        getData();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onEvaluate() {
+  modalEvaluate.value = true;
+}
+
+onMounted(() => {
+  getData();
+});
 </script>
 
 <template>
   <q-card bordered style="border-radius: 5px" class="no-shadow">
-    <q-card-section class="bg-grey-3 q-py-sm">
+    <q-card-section class="bg-grey-2 q-py-sm">
-      <span class="text-weight-medium">{{ name }}</span>
+      <div class="row items-center">
-      <q-btn
+        <div class="col">
-        class="q-ml-xs"
+          <span class="text-weight-medium">{{ name }}</span>
-        flat
+          <q-btn
-        round
+            class="q-ml-xs"
-        icon="mdi-plus"
+            flat
-        color="primary"
+            round
-        size="12px"
+            icon="mdi-plus"
-        dense
+            color="primary"
-        @click="onAdd"
+            size="12px"
-      >
+            dense
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            @click="onAdd"
-      </q-btn>
+          >
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+
+        <q-space />
+        <q-btn
+          flat
+          round
+          icon="mdi-clipboard-check-outline"
+          color="blue-5"
+          size="12px"
+          dense
+          @click="onEvaluate"
+        >
+          <q-tooltip>ประเมิน</q-tooltip>
+        </q-btn>
+      </div>
     </q-card-section>
     <q-card-section class="q-pa-sm">
       <q-table
@@ -184,6 +221,41 @@ onMounted(()=>{
               <div v-if="col.name == 'createDate'">
                 {{ col.value ? date2Thai(col.value) : "-" }}
               </div>
+              <div v-else-if="col.name == 'point'">
+                <div v-if="type == 'HEAD' || type == 'GROUP'">
+                  <q-rating
+                    v-model="props.row.point"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                    disable
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าระดับที่คาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าระดับที่คาดหวัง (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>อยู่ในระดับที่คาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>อยู่ในระดับสูงกว่าที่คาดหวัง (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>เป็นแบบอย่างที่ดีให้กับผู้อื่น (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </div>
+                <div v-else>
+                  รอ ทำ select
+                </div>
+              </div>
+              <div v-else-if="col.name == 'summary'">
+                {{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
+              </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
@@ -214,7 +286,20 @@ onMounted(()=>{
     </q-card-section>
   </q-card>
 
-  <Dialog v-model:modal="modal" v-model:competency-type="type" v-model:id="idCapacity" :get-data-list="getData"/>
+  <Dialog
+    v-model:modal="modal"
+    v-model:competency-type="type"
+    v-model:id="idCapacity"
+    :get-data-list="getData"
+  />
+
+  <DialogEvaluate
+    v-model:modal="modalEvaluate"
+    v-model:data="rows"
+    v-model:type="type"
+    :get-data="getData"
+
+  />
 </template>
 
 <style scoped>