แก้ พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)

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

@@ -78,6 +78,10 @@ const fieldLabels = {
 const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
 
 function clickList(index: string, data: any) {
+  showLoader()
+  setTimeout(()=>{
+    hideLoader()
+  },100)
   formScore.score1 = "";
   formScore.score2 = "";
   formScore.score3 = "";

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

@@ -16,50 +16,36 @@ const $q = useQuasar();
 const dataList = ref<ListCriteria[]>([]);
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
+const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", { 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%" >
+    <q-card style="min-width: 60%">
       <DialogHeader tittle="เกณฑ์การประเมินสมรรถนะ" :close="close" />
       <q-separator />
-      <q-card-section class="bg-grey-2">
+      <q-card-section class="">
         <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 class="bg-grey-2 q-pa-sm">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="text-center col-8">เกณฑ์การประเมิน</div>
+              <div class="text-center col-4">ระดับคะแนน</div>
             </div>
           </div>
+          <q-separator />
+          <div v-for="(item, index) in dataListCriteria" :key="item.id">
+            <div :class="`row q-pa-sm ${index %2 !== 0 && 'bg-grey-2'}`">
+              <div class="col-8"><span v-html="item.description"></span></div>
+              <div class="col-4 text-center self-center text-body1 text-weight-bold">
+                <span>{{ item.level }}</span>
+              </div>
+            </div>
+            <q-separator />
+          </div>
         </q-card>
       </q-card-section>
     </q-card>