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

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="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight"
-            >
+          <div class="row">
+            <div class="bg-grey-1 q-pa-md col-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
-                                class="row items-center"
-                                style="height: 20px"
-                              >
+                              <div class="row items-center">
                                 <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="row col-12 q-pa-md q-col-gutter-sm">
-                <div class="col-12">
-                  <span class="text-body2 text-weight-medium"
-                    >รายละเอียดสมรรถนะ</span
-                  >
-                </div>
+            <div class="col-9 q-pa-md q-col-gutter-sm">
+              <span class="text-body2 text-weight-medium"
+                >รายละเอียดสมรรถนะ</span
+              >
+
+              <div class="row q-col-gutter-sm">
                 <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="col-6">
+                    <div class="row q-col-gutter-sm q-pa-sm">
+                      <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>