KPI

src/api/14_KPI/api.KPI.ts

@@ -21,6 +21,7 @@ const urlFile = `${env.API_URI}/salary`;
 const kpiGroup = `${env.API_URI}/kpi/group`;
 const kpiLink = `${env.API_URI}/kpi/link`;
 const placementKeycloak = `${env.API_URI}/placement/officer/profileId`;
+const orgPosition = `${env.API_URI}/org/profile/profileid/position`;
 
 export default {
   KPI,
@@ -69,9 +70,12 @@ export default {
 
   kpiLink,
 
-  profilePosition: () => `${env.API_URI}/org/profile/profileid/position`,
+  profilePosition:`${env.API_URI}/org/profile/profileid/position`,
   placementKeycloak,
-
+  profilePositionKey: () => `${env.API_URI}/org/profile/keycloak/position`,
   /** Report*/
   kpiReport: () => `${KPI}/report/announcement`,
+  sendToCommander: `${KpiUser}/evaluation/admin/change-status`,
+  sendToSummary: (id: string) => `${kpiEvaluation}/summary/${id}`,
+  updatePoint: (id: string) => `${kpiEvaluation}/point/${id}`,
 };

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

@@ -21,14 +21,8 @@ const dataListCriteria = ref<ListCriteria[]>([]);
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
-const {
+const { hideLoader, messageError, success, showLoader, dialogRemove } =
-  hideLoader,
+  useCounterMixin();
-  messageError,
-  date2Thai,
-  success,
-  showLoader,
-  dialogRemove,
-} = useCounterMixin();
 const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
@@ -152,10 +146,6 @@ function fetchAssigned() {
     });
 }
 
-function onInfo() {
-  modalCriteria.value = true;
-}
-
 function getCriteria() {
   http
     .get(config.API.KpiEvaluationInfo)
@@ -169,7 +159,7 @@ function getCriteria() {
 }
 
 const isShowScore = computed(() => {
-  return store.tabOpen === 3 && store.tabMain === "3";
+  return store.tabMain === "3";
 });
 
 watch(
@@ -195,32 +185,40 @@ watch(
 
       store.indicatorScoreVal =
         store.indicatorPercentVal * (store.indicatorScore / 100);
+
+      if (store.isUpdate && store.tabMain === "3") {
+        http
+          .put(config.API.updatePoint(evaluationId.value), {
+            totalPoint1: (
+              store.indicatorPercentVal *
+              (store.indicatorScore / 100)
+            ).toFixed(2),
+            summaryPoint: (
+              store.indicatorScoreVal +
+              store.competencyScoreVal +
+              store.devScoreVal
+            ).toFixed(2),
+          })
+          .then((res) => {});
+      }
     }
   }
 );
 
-onMounted(async () => {
+onMounted(() => {
-  showLoader();
+  getCriteria();
-  try {
+  fetchListPlanned();
-    await Promise.all([
+  fetchListRole();
-      getCriteria(),
+  fetchAssigned();
-      fetchListPlanned(),
+  setTimeout(() => {
-      fetchListRole(),
+    hideLoader();
-      fetchAssigned(),
+  }, 1000);
-    ]);
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    setTimeout(() => {
-      hideLoader();
-    }, 4000);
-  }
 });
 </script>
 
 <template>
   <q-scroll-area
-    style="height: 100vh"
+    style="height: 100vh; width: auto"
     class="bg-white row col-12 text-dark q-pa-md"
   >
     <div class="text-weight-bold text-body2">
@@ -229,7 +227,12 @@ onMounted(async () => {
     </div>
     <div class="q-gutter-md q-mt-sm">
       <!-- องค์ประกอบที่ 1 -->
-      <div v-if="store.dataEvaluation.posExecutiveName != null">
+      <div
+        v-if="
+          store.dataEvaluation.posTypeName == 'อำนวยการ' &&
+          store.dataEvaluation.posTypeName == 'บริหาร'
+        "
+      >
         <Work
           v-model:data="rows_01"
           :title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
@@ -415,16 +418,6 @@ onMounted(async () => {
       <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 v-model:dataListCriteria="dataListCriteria" />
@@ -437,7 +430,8 @@ onMounted(async () => {
         :rows="[
           {
             name: `สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม ${
-              !store.dataEvaluation.posExecutiveName
+              store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+              store.dataEvaluation.posTypeName != 'บริหาร'
                 ? store.competencyScore
                 : store.excusiveCompetencyScore
             } คะแนน)`,
@@ -464,7 +458,12 @@ onMounted(async () => {
         class="q-mt-xs q-mb-md"
       />
 
-      <div v-if="!store.dataEvaluation.posExecutiveName">
+      <div
+        v-if="
+          store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+          store.dataEvaluation.posTypeName != 'บริหาร'
+        "
+      >
         <Develop />
 
         <div v-if="isShowScore">
@@ -502,7 +501,10 @@ onMounted(async () => {
 
       <div v-if="isShowScore">
         <div
-          v-if="store.dataEvaluation.posExecutiveName == null"
+          v-if="
+            store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+            store.dataEvaluation.posTypeName != 'บริหาร'
+          "
           class="row text-body2 text-weight-bold"
         >
           <div class="col-12 text-center row justify-center">

src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue

@@ -123,12 +123,14 @@ function fetchListPlanByid(id: string) {
       formDetail.achievement4 = data.achievement4;
       formDetail.achievement5 = data.achievement5;
       formDetail.documentInfoEvidence = data.documentInfoEvidence;
+
       if (data.startDate && data.endDate) {
         formDetail.date = [];
         formDetail.date[0] = data.startDate;
         formDetail.date[1] = data.endDate;
       }
-      clickList(data.kpiPlanId, true);
+
+      listCheckID.value = data.kpiPlanId;
     })
     .catch((err) => {
       messageError($q, err);
@@ -183,7 +185,9 @@ function fetchRoleByid(id: string) {
         formDetail.date[0] = data.startDate;
         formDetail.date[1] = data.endDate;
       }
-      clickList(data.kpiRoleId, true);
+
+      listCheckID.value = data.kpiRoleId;
+      // clickList(data.kpiRoleId, true);
     })
     .catch((err) => {
       messageError($q, err);
@@ -462,7 +466,7 @@ const title = computed(() => {
 
         <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
           <div class="col-12 row">
-            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
               <div class="col-12 fit">
                 <div class="row col-12" v-if="numpage !== 3">
                   <q-checkbox
@@ -617,14 +621,14 @@ const title = computed(() => {
               </div>
             </div>
 
-            <div class="col-9">
+            <div class="col-xs-12 col-md-9">
               <div class="row q-pa-md q-col-gutter-sm">
                 <div class="col-12">
                   <span class="text-body2 text-weight-medium"
                     >รายละเอียดตัวชี้วัด</span
                   >
                 </div>
-                <div class="col-6">
+                <div class="col-xs-12 col-6">
                   <q-card bordered class="full-height q-pa-sm">
                     <div class="q-pa-sm q-col-gutter-lg">
                       <div class="col-12 row" v-if="numpage !== 3">
@@ -647,7 +651,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) =>
+                              (val:string) =>
                                 !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
                             ]"
                             lazy-rules
@@ -668,7 +672,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
+                              (val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
                             ]"
                             lazy-rules
                             hide-bottom-space
@@ -686,7 +690,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
+                              (val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
                             ]"
                             hide-bottom-space
                             lazy-rules
@@ -703,7 +707,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
+                              (val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
                             ]"
                             lazy-rules
                             hide-bottom-space
@@ -721,7 +725,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) =>
+                              (val:string) =>
                                 !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
                             ]"
                             hide-bottom-space
@@ -733,17 +737,16 @@ const title = computed(() => {
                     </div>
                   </q-card>
                 </div>
-                <div class="col-6 row">
+                <div class="col-12">
-                  <div class="row col-12 card-box">
+                  <q-card bordered>
                     <div
                       class="col-12 bg-grey-2 row items-center text-weight-medium"
                     >
                       <div class="col-6 text-center">ระดับคะแนน</div>
                       <div class="col-6 text-center">ผลสำเร็จของงาน</div>
                     </div>
-                    <div
+                    <q-separator />
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    <div class="row col-12 items-center q-pa-sm">
-                    >
                       <div class="col-6 text-center text-body2">5</div>
                       <div class="col-6">
                         <q-input
@@ -757,9 +760,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
+                    <q-separator />
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    <div class="row col-12 items-center q-pa-sm">
-                    >
                       <div class="col-6 text-center text-body2">4</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -773,9 +775,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
+                    <q-separator />
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    <div class="row col-12 items-center q-pa-sm">
-                    >
                       <div class="col-6 text-center text-body2">3</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -789,9 +790,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
+                    <q-separator />
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    <div class="row col-12 items-center q-pa-sm">
-                    >
                       <div class="col-6 text-center text-body2">2</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -805,9 +805,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
+                    <q-separator />
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    <div class="row col-12 items-center q-pa-sm">
-                    >
                       <div class="col-6 text-center text-body2">1</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -821,7 +820,7 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                  </div>
+                  </q-card>
                 </div>
                 <div class="col-12">
                   <q-input

src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue

@@ -14,11 +14,21 @@ import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+const numLevel = ref<string>("");
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
 
+const check = ref<string>("");
+const rows = defineModel<any>("rows");
 const modal = defineModel<boolean>("modal", { required: true });
 const type = defineModel<string>("type", { required: true });
 const idList = defineModel<string>("idList", { required: true });
@@ -45,7 +55,8 @@ const formDataView = reactive<FormCommentByRole>({
   id: "",
   topic: "",
   reason: "",
-
+  createdFullName: "",
+  score: "",
   reasonEvaluator: "",
   reasonCommander: "",
   reasonCommanderHigh: "",
@@ -58,6 +69,8 @@ function clickList(index: string, data: any) {
   formDataView.id = data.id;
   formDataView.topic = data.topic;
   formDataView.reason = data.reason;
+  formDataView.createdFullName = data.createdFullName;
+  formDataView.score = data.score;
 
   formDataView.reasonEvaluator = data.reasonEvaluator;
   formDataView.reasonCommander = data.reasonCommander;
@@ -80,33 +93,38 @@ function clickList(index: string, data: any) {
 }
 
 function onSubmitAdd() {
-  dialogConfirm($q, () => {
+  // type
-    showLoader();
+  if (
-    http
+    numLevel.value == "" &&
-      .put(
+    type.value != "capacity" &&
-        config.API.kpiCommentP(
+    type.value != "development"
-          "progress",
+  ) {
-          type.value,
+    dialogMessageNotify($q, "กรุณาเลือกคะแนน");
-          store.rolePerson.toLocaleLowerCase(),
+  } else {
-          idList.value
+    dialogConfirm($q, () => {
-        ),
+      showLoader();
-        {
+      http
-          reason: formDataAdd.reason,
+        .put(
-          topic: formDataAdd.topic,
+          config.API.kpiCommentP("progress", type.value, "user", idList.value),
-        }
+          {
-      )
+            reason: formDataAdd.reason,
-      .then((res) => {
+            topic: formDataAdd.topic,
-        success($q, "บันทึกข้อมูลสำเร็จ");
+            score: type.value == "capacity" ? undefined : numLevel.value,
-        getList();
+          }
-        closeAdd();
+        )
-      })
+        .then((res) => {
-      .catch((e) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
-        messageError($q, e);
+          getList();
-      })
+          closeAdd();
-      .finally(() => {
+        })
-        hideLoader();
+        .catch((e) => {
-      });
+          messageError($q, e);
-  });
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
 }
 
 function onSubmit() {}
@@ -127,6 +145,7 @@ function closeAdd() {
   modalAdd.value = false;
   formDataAdd.topic = "";
   formDataAdd.reason = "";
+  numLevel.value = "";
 }
 
 function getList() {
@@ -197,6 +216,11 @@ function onSubmitComment(role: string) {
       });
   });
 }
+
+function onCheckNumber(num: number) {
+  numLevel.value = num.toString();
+}
+
 watch(
   () => modal.value,
   () => {
@@ -210,7 +234,14 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 70vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader tittle="รายงานความก้าวหน้า" :close="close" />
+        <DialogHeader
+          :tittle="
+            type == 'capacity' || type == 'development'
+              ? 'บันทึกเหตุการณ์/พฤติกรรม'
+              : 'รายงานความก้าวหน้า'
+          "
+          :close="close"
+        />
         <q-separator />
         <q-card-section class="q-pa-none">
           <q-splitter
@@ -222,7 +253,13 @@ watch(
             <template v-slot:before>
               <div class="q-pa-sm">
                 <q-btn
-                  v-if="store.rolePerson === 'USER'"
+                  v-if="
+                    type == 'capacity' ||
+                    type == 'development' ||
+                    (type != 'capacity' &&
+                      type != 'development' &&
+                      store.rolePerson == 'USER')
+                  "
                   icon="add"
                   color="teal"
                   flat
@@ -233,23 +270,38 @@ watch(
                     }
                   "
                 >
-                  <q-tooltip>เพิ่มความก้าวหน้า</q-tooltip>
+                  <q-tooltip>{{
+                    type == "capacity" || type == "development"
+                      ? "เพิ่มเหตุการณ์/พฤติกรรม"
+                      : "เพิ่มความก้าวหน้า"
+                  }}</q-tooltip>
                 </q-btn>
 
-                <q-card bordered flat class="no-shadow bg-white col-12">
+                <q-card
+                  bordered
+                  flat
+                  class="no-shadow bg-white col-12"
+                  style="min-height: 300px"
+                >
                   <div class="row q-px-md q-py-sm items-center bg-grey-1">
                     <div class="col-12">
-                      <span>ความก้าวหน้า</span>
+                      <span>{{
+                        type == "capacity" || type == "development"
+                          ? "เหตุการณ์/พฤติกรรม"
+                          : "ความก้าวหน้า"
+                      }}</span>
                     </div>
                   </div>
 
                   <q-separator />
                   <q-card-section class="q-pa-none">
                     <div v-if="listTarget.length > 0">
-                      <q-list separator dense>
+                      <q-list
+                        dense
+                        v-for="(item, index) in listTarget"
+                        :key="item.id"
+                      >
                         <q-item
-                          v-for="(item, index) in listTarget"
-                          :key="item.id"
                           clickable
                           v-ripple
                           :active="listCheck === item.id"
@@ -264,6 +316,7 @@ watch(
                             </div>
                           </q-item-section>
                         </q-item>
+                        <q-separator />
                       </q-list>
                     </div>
 
@@ -295,168 +348,197 @@ watch(
               <div v-else>
                 <div class="row q-pa-md q-col-gutter-sm">
                   <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">หัวข้อความก้าวหน้า</div>
+                    <div class="col-4 text-grey-6">
+                      {{
+                        type == "capacity" || type == "development"
+                          ? "เหตุการณ์/พฤติกรรม"
+                          : "หัวข้อความก้าวหน้า"
+                      }}
+                    </div>
                     <div class="col-8">{{ formDataView.topic }}</div>
                   </div>
                   <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">รายละเอียดความก้าวหน้า</div>
+                    <div class="col-4 text-grey-6">
+                      {{
+                        type == "capacity" || type == "development"
+                          ? "รายละเอียด"
+                          : "รายละเอียดความก้าวหน้า"
+                      }}
+                    </div>
                     <div class="col-8">{{ formDataView.reason }}</div>
                   </div>
-                  <div class="col-12">
+                  <div
-                    <q-separator />
+                    class="row col-12 text-weight-medium"
+                    v-if="type !== 'capacity' && type !== 'development'"
+                  >
+                    <div class="col-4 text-grey-6">คะแนน</div>
+                    <div class="col-8">{{ formDataView.score }}</div>
+                  </div>
+                  <div class="row col-12 text-weight-medium">
+                    <div class="col-4 text-grey-6">ผู้สร้าง</div>
+                    <div class="col-8">{{ formDataView.createdFullName }}</div>
                   </div>
 
-                  <!-- ความคิดเห็นของผู้ประเมิน -->
+                  <div
-                  <q-form
+                    class="col-12"
-                    v-if="store.dataEvaluation.evaluatorId"
+                    v-if="type != 'capacity' && type != 'development'"
-                    ref="reasonEvaluatorRef"
-                    greedy
-                    @submit.prevent
-                    @validation-success="onSubmitComment('evaluator')"
-                    class="full-width q-mt-sm"
                   >
-                    <div class="row col-12 q-col-gutter-sm">
+                    <div class="col-12">
-                      <div class="col-12">
+                      <q-separator />
-                        <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้ประเมิน</span
-                        >
-                      </div>
-                      <div class="col-12">
-                        <q-input
-                          outlined
-                          dense
-                          :readonly="
-                            formDataView.reasonEvaluator !== null ||
-                            store.rolePerson !== 'EVALUATOR'
-                          "
-                          label="ความคิดเห็นของผู้ประเมิน"
-                          v-model="reasonEvaluator"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonEvaluator == null &&
-                          store.rolePerson == 'EVALUATOR'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                        >
-                      </div>
                     </div>
-                  </q-form>
 
-                  <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
+                    <!-- ความคิดเห็นของผู้ประเมิน -->
-                  <q-form
+                    <q-form
-                    v-if="store.dataEvaluation.commanderId"
+                      v-if="store.dataEvaluation.evaluatorId"
-                    class="full-width q-mt-sm"
+                      ref="reasonEvaluatorRef"
-                    ref="reasonCommanderRef"
+                      greedy
-                    greedy
+                      @submit.prevent
-                    @submit.prevent
+                      @validation-success="onSubmitComment('evaluator')"
-                    @validation-success="onSubmitComment('commander')"
+                      class="full-width q-mt-sm"
-                  >
+                    >
-                    <div class="row col-12 q-col-gutter-sm">
+                      <div class="row col-12 q-col-gutter-sm">
-                      <div class="col-12">
+                        <div class="col-12">
-                        <span class="text-weight-medium text-grey-6"
+                          <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
+                            >ความคิดเห็นของผู้ประเมิน</span
-                        >
+                          >
-                      </div>
+                        </div>
-                      <div class="col-12">
+                        <div class="col-12">
-                        <q-input
+                          <q-input
-                          outlined
+                            outlined
-                          dense
+                            dense
-                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
+                            :readonly="
-                          v-model="reasonCommander"
+                              formDataView.reasonEvaluator !== null ||
-                          type="textarea"
+                              store.rolePerson !== 'EVALUATOR'
-                          class="inputgreen"
+                            "
-                          lazy-rules
+                            label="ความคิดเห็นของผู้ประเมิน"
-                          :readonly="
+                            v-model="reasonEvaluator"
-                            formDataView.reasonCommander !== null ||
+                            type="textarea"
-                            store.rolePerson !== 'COMMANDER'
+                            class="inputgreen"
+                            lazy-rules
+                            hide-bottom-space
+                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
+                          ></q-input>
+                        </div>
+
+                        <div
+                          v-if="
+                            formDataView.reasonEvaluator == null &&
+                            store.rolePerson == 'EVALUATOR'
                           "
-                          hide-bottom-space
+                          class="col-12"
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                          align="right"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommander == null &&
-                          store.rolePerson == 'COMMANDER'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
                         >
+                          <q-btn
+                            label="บันทึกความคิดเห็น"
+                            color="secondary"
+                            type="submit"
+                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          >
+                        </div>
                       </div>
-                    </div>
+                    </q-form>
-                  </q-form>
 
-                  <q-form
+                    <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
-                    v-if="store.dataEvaluation.commanderHighId"
+                    <q-form
-                    class="full-width q-mt-sm"
+                      v-if="store.dataEvaluation.commanderId"
-                    ref="reasonCommanderHighRef"
+                      class="full-width q-mt-sm"
-                    greedy
+                      ref="reasonCommanderRef"
-                    @submit.prevent
+                      greedy
-                    @validation-success="onSubmitComment('commanderhigh')"
+                      @submit.prevent
-                  >
+                      @validation-success="onSubmitComment('commander')"
-                    <div class="row col-12 q-col-gutter-sm">
+                    >
-                      <div class="col-12">
+                      <div class="row col-12 q-col-gutter-sm">
-                        <span class="text-weight-medium text-grey-6"
+                        <div class="col-12">
-                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
+                          <span class="text-weight-medium text-grey-6"
-                        >
+                            >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
-                      </div>
+                          >
-                      <div class="col-12">
+                        </div>
-                        <q-input
+                        <div class="col-12">
-                          outlined
+                          <q-input
-                          dense
+                            outlined
-                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
+                            dense
-                          v-model="reasonCommanderHigh"
+                            label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
-                          type="textarea"
+                            v-model="reasonCommander"
-                          class="inputgreen"
+                            type="textarea"
-                          lazy-rules
+                            class="inputgreen"
-                          :readonly="
+                            lazy-rules
-                            formDataView.reasonCommanderHigh !== null ||
+                            :readonly="
-                            store.rolePerson !== 'COMMANDERHIGH'
+                              formDataView.reasonCommander !== null ||
+                              store.rolePerson !== 'COMMANDER'
+                            "
+                            hide-bottom-space
+                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                          ></q-input>
+                        </div>
+
+                        <div
+                          v-if="
+                            formDataView.reasonCommander == null &&
+                            store.rolePerson == 'COMMANDER'
                           "
-                          hide-bottom-space
+                          class="col-12"
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                          align="right"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommanderHigh == null &&
-                          store.rolePerson == 'COMMANDERHIGH'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
                         >
+                          <q-btn
+                            label="บันทึกความคิดเห็น"
+                            color="secondary"
+                            type="submit"
+                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          >
+                        </div>
                       </div>
-                    </div>
+                    </q-form>
-                  </q-form>
+
+                    <q-form
+                      v-if="store.dataEvaluation.commanderHighId"
+                      class="full-width q-mt-sm"
+                      ref="reasonCommanderHighRef"
+                      greedy
+                      @submit.prevent
+                      @validation-success="onSubmitComment('commanderhigh')"
+                    >
+                      <div class="row col-12 q-col-gutter-sm">
+                        <div class="col-12">
+                          <span class="text-weight-medium text-grey-6"
+                            >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
+                          >
+                        </div>
+                        <div class="col-12">
+                          <q-input
+                            outlined
+                            dense
+                            label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
+                            v-model="reasonCommanderHigh"
+                            type="textarea"
+                            class="inputgreen"
+                            lazy-rules
+                            :readonly="
+                              formDataView.reasonCommanderHigh !== null ||
+                              store.rolePerson !== 'COMMANDERHIGH'
+                            "
+                            hide-bottom-space
+                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                          ></q-input>
+                        </div>
+
+                        <div
+                          v-if="
+                            formDataView.reasonCommanderHigh == null &&
+                            store.rolePerson == 'COMMANDERHIGH'
+                          "
+                          class="col-12"
+                          align="right"
+                        >
+                          <q-btn
+                            label="บันทึกความคิดเห็น"
+                            color="secondary"
+                            type="submit"
+                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-form>
+                  </div>
                 </div>
               </div>
             </template>
@@ -469,7 +551,14 @@ watch(
   <q-dialog v-model="modalAdd" persistent>
     <q-card style="min-width: 30vw">
       <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
-        <DialogHeader tittle="เพิ่มหัวข้อความก้าวหน้า" :close="closeAdd" />
+        <DialogHeader
+          :tittle="
+            type == 'capacity' || type == 'development'
+              ? 'เพิ่มหัวข้อบันทึกเหตุการณ์/พฤติกรรม'
+              : 'เพิ่มหัวข้อความก้าวหน้า'
+          "
+          :close="closeAdd"
+        />
         <q-separator />
 
         <q-card-section>
@@ -479,23 +568,70 @@ watch(
                 v-model="formDataAdd.topic"
                 outlined
                 class="inputgreen"
-                label="หัวข้อความก้าวหน้า"
+                :label="
+                  type == 'capacity' || type == 'development'
+                    ? 'เหตุการณ์/พฤติกรรม'
+                    : 'หัวข้อความก้าวหน้า'
+                "
                 dense
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val:string) => !!val || `${'กรุณากรอกหัวข้อความก้าวหน้า'}`,]"
+                :rules="[(val:string) => !!val || `${type == 'capacity'||type == 'development' ? 'กรุณากรอกเหตุการณ์/พฤติกรรม':'กรุณากรอกหัวข้อความก้าวหน้า' }`,]"
               />
             </div>
+            <!-- <div
+              class="col-12"
+              v-if="type !== 'capacity' && type !== 'development'"
+            >
+              <q-input
+                v-model="numLevel"
+                outlined
+                class="inputgreen"
+                label="คะแนน"
+                dense
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกคะแนน'}`,]"
+              />
+            </div> -->
+            <div
+              class="col-12"
+              v-if="type !== 'capacity' && type !== 'development'"
+            >
+              <div class="col-12">
+                <q-label class="text-grey-6">คะแนนความก้าวหน้า</q-label>
+              </div>
+
+              <q-btn-group outline>
+                <q-btn
+                  v-for="i in 5"
+                  :class="numLevel == i.toString() && 'active'"
+                  outline
+                  color="grey-6"
+                  :label="i"
+                  @click="onCheckNumber(i)"
+                >
+                  <q-tooltip>
+                    <div class="text-body2">
+                      <span>{{ i }}</span>
+                    </div>
+                  </q-tooltip>
+                </q-btn>
+              </q-btn-group>
+            </div>
             <div class="col-12">
               <q-input
                 v-model="formDataAdd.reason"
                 outlined
                 class="inputgreen"
-                label="รายละเอียดความก้าวหน้า"
+                :label="
+                  type == 'capacity' || type == 'development'
+                    ? 'รายละเอียด'
+                    : 'รายละเอียดความก้าวหน้า'
+                "
                 dense
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดความก้าวหน้า'}`,]"
                 type="textarea"
               />
             </div>
@@ -520,4 +656,20 @@ watch(
   background: #ebf9f7 !important;
   color: #1bb19ab8 !important;
 }
+
+.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: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>

src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("rows", { required: true });
+const dataRows = ref<any[]>([]);
+
+const visibleColumns = ref<String[]>(["level", "description"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "center",
+    label: "ระดับสมรรถนะ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+  dataRows.value = [];
+}
+
+watch(
+  () => rows.value,
+  () => {
+    if (rows.value) {
+      const data = rows.value;
+      dataRows.value = data.sort((a: any, b: any) => a.level - b.level);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <DialogHeader :tittle="`พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย`" :close="closeDialog" />
+      <q-separator />
+
+      <q-card-section class="q-pa-sm scroll" style="max-height: 80vh">
+        <div class="row">
+          <div class="col-12">
+            <d-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="level"
+              virtual-scroll
+              :rows="dataRows"
+              hide-pagination
+              :columns="columns"
+              :visible-columns="visibleColumns"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="bg-grey-2"
+                  >
+                    <span class="text-weight-bold">{{ 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.name"
+                    :props="props"
+                  >
+                    <div v-if="(col.name = 'description')">
+                      <span v-html="col.value"></span>
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card bordered flat>
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="(col.name = 'description')">
+                            <span v-html="col.value"></span
+                          ></q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+              <template v-slot:no-data="{ icon, message }">
+                <div class="q-pa-md text-weight-bold full-width text-center">
+                  <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
+                </div>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+.custom-table2 {
+  .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/14_KPI/components/Tab/Dialog/DialogGovernment.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
-import { ref,watch } from "vue";
+import { ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -23,7 +25,7 @@ const {
 
 const route = useRoute();
 const router = useRouter();
-const id = ref<string>(route.params.id as string)
+const id = ref<string>(route.params.id as string);
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
@@ -75,7 +77,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "positionLevel",
     align: "left",
-    label: "ประเภทตำแหน่ง",
+    label: "ตำแหน่งประเภท",
     sortable: true,
     field: "positionLevel",
     headerStyle: "font-size: 14px",
@@ -190,24 +192,29 @@ function close() {
   modal.value = false;
 }
 
-function getData(){
+function getData() {
-    showLoader()
+  showLoader();
-    http
+  http
-    .get(config.API.placementKeycloak+`/${id.value}`)
+    .get(config.API.placementKeycloak + `/${store.dataProfile.profileId}`)
-    .then((res)=>{
+    .then((res) => {
-        const data = res.data.result
+      const data = res.data.result;
-        rows.value = data
+      rows.value = data;
-    }).catch((e)=>{
-        messageError($q,e)
-    }).finally(()=>{
-        hideLoader()
     })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
-watch(()=>modal.value,(n)=>{
+watch(
-    if(n == true){
+  () => modal.value,
-        getData()
+  (n) => {
+    if (n == true) {
+      getData();
     }
-})
+  }
+);
 </script>
 <template>
   <q-dialog persistent v-model="modal">

src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("rows", { required: true });
+const dataRows = ref<any[]>([]);
+
+const visibleColumns = ref<String[]>([ "description"]);
+const columns = ref<QTableProps["columns"]>([
+
+  {
+    name: "description",
+    align: "left",
+    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+  dataRows.value = [];
+}
+
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <DialogHeader :tittle="`ข้อมูลพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย`" :close="closeDialog" />
+      <q-separator />
+
+      <q-card-section class="q-pa-sm scroll" style="max-height: 80vh">
+        <div class="row">
+          <div class="col-12">
+            <d-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="level"
+              virtual-scroll
+              :rows="rows"
+              hide-pagination
+              :columns="columns"
+              :visible-columns="visibleColumns"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="bg-grey-2"
+                  >
+                    <span class="text-weight-bold">{{ 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.name"
+                    :props="props"
+                  >
+                    <div v-if="(col.name = 'description')">
+                      <span v-html="col.value"></span>
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card bordered flat>
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="(col.name = 'description')">
+                            <span v-html="col.value"></span
+                          ></q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+              <template v-slot:no-data="{ icon, message }">
+                <div class="q-pa-md text-weight-bold full-width text-center">
+                  <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
+                </div>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+.custom-table2 {
+  .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/14_KPI/components/Tab/Dialog/DialogStatus.vue

@@ -1,21 +1,35 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
-
+import type { QTableProps } from "quasar";
 import { ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-const route = useRoute();
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+const store = useKpiDataStore();
+
+const route = useRoute();
+const router = useRouter();
+const id = ref<string>(route.params.id as string);
 const work = ref<boolean>(false);
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const {
+  dialogConfirm,
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  findPosMasterNoOld,
+  findOrgNameOld,
+  date2Thai,
+} = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
-const profileId = defineModel<string>("profileId", { required: true });
+const isProbation = defineModel<boolean>("isProbation", { required: true });
 
 function close() {
   modal.value = false;
@@ -24,7 +38,7 @@ function close() {
 function getData() {
   showLoader();
   http
-    .get(config.API.profilePosition() + `/${profileId.value}`)
+    .get(config.API.profilePosition+`/${store.dataProfile.profileId}`)
     .then((res) => {
       const data = res.data.result.isProbation;
       work.value = data;
@@ -45,6 +59,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog persistent v-model="modal">
     <q-card bordered style="min-width: 20vw">
@@ -54,7 +69,7 @@ watch(
         <div class="row">
           <div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
             <span class="text-weight-bold text-teal">{{
-              work ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
+              isProbation ? `อยู่ระหว่างทดลองงาน` : "-"
             }}</span>
           </div>
         </div>

src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue

@@ -130,6 +130,8 @@ function onSubmit() {
   dialogConfirm($q, async () => {
     try {
       showLoader();
+      store.isUpdate = true;
+
       const formData = rows.value.map((e: any) => ({
         id: e.id,
         point: e.point,
@@ -144,8 +146,9 @@ function onSubmit() {
           : numpage.value === 3
           ? config.API.kpiAchievementPoint("special")
           : "";
-      await http.post(url, formData);
+      await http.post(url, formData).then((res) => {
-      props.fetchList();
+        props.fetchList();
+      });
       success($q, "บันทึกข้อมูลสำเร็จ");
     } catch (err) {
       messageError($q, err);

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

@@ -115,6 +115,7 @@ function onSubmit() {
     dialogMessageNotify($q, "กรุณาเลือกระดับคะแนนตามเกณฑ์การประเมิน");
   } else {
     dialogConfirm($q, () => {
+      store.isUpdate = true;
       const data = rows.value;
       const body = data.map((i: any) => ({
         id: i.id,

src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue

@@ -47,7 +47,7 @@ const visibleColumns = ref<string[]>(
         "achievement",
         "evaluationResults",
       ]
-    : ["includingName", "target", "weight"]
+    : ["includingName", "target", "point", "weight"]
 );
 const columns = ref<QTableProps["columns"]>([
   {
@@ -238,7 +238,7 @@ const isEditStep3 = computed(() => {
 </script>
 
 <template>
-  <q-card bordered style="border-radius: 5px" class="no-shadow">
+  <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
     <q-card-section class="bg-grey-2 q-py-sm">
       <div class="row items-center no-wrap">
         <div class="col">
@@ -275,7 +275,7 @@ const isEditStep3 = computed(() => {
     </q-card-section>
     <q-separator />
     <q-card-section class="q-pa-sm">
-      <q-table
+      <d-table
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -285,7 +285,6 @@ const isEditStep3 = computed(() => {
         bordered
         dense
         hide-pagination
-        class="custom-table2"
         :visible-columns="visibleColumns"
         :rows-per-page-options="[20]"
         no-data-label="ไม่มีข้อมูล"
@@ -305,7 +304,7 @@ const isEditStep3 = computed(() => {
               <q-btn
                 flat
                 round
-                icon="info"
+                icon="mdi-eye"
                 color="info"
                 size="12px"
                 dense
@@ -331,31 +330,6 @@ const isEditStep3 = computed(() => {
                     </q-tooltip>
                   </q-btn>
                 </q-btn-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>{{ props.row.achievement1 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
-                  </template>
-                </q-rating> -->
               </div>
               <div v-else-if="col.name === 'achievement'">
                 {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -431,7 +405,96 @@ const isEditStep3 = computed(() => {
             </td>
           </q-tr>
         </template>
-      </q-table>
+        <template #item="props">
+          <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <div class="row justify-end">
+                <q-btn
+                  flat
+                  round
+                  icon="info"
+                  color="info"
+                  size="14px"
+                  @click="onClickView(props.row.id)"
+                >
+                  <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+                </q-btn>
+              </div>
+
+              <q-separator />
+              <q-list>
+                <q-item
+                  v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                  :key="col.name"
+                >
+                  <q-item-section>
+                    <q-item-label caption>{{ col.label }}</q-item-label>
+                    <q-item-label>{{ col.value ?? "-" }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator />
+              <q-card-actions
+                align="around"
+                v-if="
+                  store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                  store.tabMain === '2'
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  icon="mdi-developer-board"
+                  color="blue-6"
+                  size="12px"
+                  dense
+                  @click="openPopupProgress(props.row.id)"
+                >
+                  <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="warning"
+                  color="red-5"
+                  size="12px"
+                  dense
+                  main="problem"
+                  @click="openPopupProblem(props.row.id)"
+                >
+                  <q-tooltip>รายงานปัญหา</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+
+              <q-card-actions align="around" v-if="isEditStep1">
+                <q-btn
+                  flat
+                  round
+                  icon="edit"
+                  color="edit"
+                  size="12px"
+                  dense
+                  @click="onAdd(true, props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  size="12px"
+                  dense
+                  @click="onDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
     </q-card-section>
   </q-card>
 
@@ -466,6 +529,7 @@ const isEditStep3 = computed(() => {
   <DialogProgress
     v-model:modal="modalProgress"
     v-model:type="type"
+    v-model:rows="rows"
     :idList="idList"
   />
   <DialogProblem

src/modules/14_KPI/components/Tab/Topic/02_Competency.vue

@@ -17,6 +17,15 @@ import type {
   ListCriteria,
 } from "@/modules/14_KPI/interface/request/index";
 
+import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
+import DialogCompetncyByRow from "@/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
+import DialogLevel from "@/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue";
+
+const modalLevel = ref<boolean>(false);
+const modalCompetncyByRow = ref<boolean>(false);
+const dataCompetncyByRow = ref<any[]>([]);
+const dataLevel = ref<any[]>([]);
+const modalCriteria = ref<boolean>(false);
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
   required: true,
 });
@@ -74,7 +83,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "point",
     align: "left",
     label: "ระดับคะแนนตามเกณฑ์การประเมิน",
-    sortable: true,
+    sortable: false,
     field: "point",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -108,7 +117,7 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>(
   store.tabOpen === 3 && store.tabMain === "3"
     ? ["name", "level", "point", "weight", "summary"]
-    : ["name", "level", "weight"]
+    : ["name", "level", "point", "weight"]
 );
 
 const typeCompetency = ref<string>("");
@@ -162,7 +171,10 @@ function getData(type: string) {
         let weightAvg = weight / total;
         let resultAvg = result / total;
 
-        if (store.dataEvaluation.posExecutiveName != null) {
+        if (
+          store.dataEvaluation.posTypeName == "อำนวยการ" &&
+          store.dataEvaluation.posTypeName == "บริหาร"
+        ) {
           store.competencyScoreVal =
             weightAvg != 0
               ? (resultAvg / weightAvg) * store.excusiveCompetencyScore
@@ -173,6 +185,24 @@ function getData(type: string) {
               ? (resultAvg / weightAvg) * store.competencyScore
               : 0;
         }
+
+        if (
+          store.isUpdate &&
+          store.tabMain === "3" &&
+          (store.dataEvaluation.evaluationStatus === "EVALUATOR" ||
+            store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR")
+        ) {
+          http
+            .put(config.API.updatePoint(store.dataEvaluation.id), {
+              totalPoint2_1: store.competencyScoreVal.toFixed(2),
+              summaryPoint: (
+                store.indicatorScoreVal +
+                store.competencyScoreVal +
+                store.devScoreVal
+              ).toFixed(2),
+            })
+            .then((res) => {});
+        }
       }
     });
 }
@@ -256,6 +286,20 @@ watch(
   }
 );
 
+function onInfo() {
+  modalCriteria.value = true;
+}
+
+function onAchievement(data: any) {
+  modalCompetncyByRow.value = true;
+  dataCompetncyByRow.value = data;
+}
+
+function onLevel(num: number, list: any) {
+  dataLevel.value = list.filter((i: any) => i.level == num);
+  modalLevel.value = true;
+}
+
 onMounted(() => {
   for (let index = 0; index < store.competencyType.length; index++) {
     const element = store.competencyType[index];
@@ -266,13 +310,13 @@ onMounted(() => {
 
 <template>
   <div v-for="(item, index) in store.competencyType" :key="index">
-    <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
       <q-card-section class="bg-grey-2 q-py-sm">
         <div class="row items-center">
           <div class="col">
             <span class="text-weight-medium">{{ item.name }}</span>
             <q-btn
-              v-if="isEditStep1"
+              v-if="isEditStep1 && item.id != 'HEAD' && item.id != 'GROUP'"
               class="q-ml-xs"
               flat
               round
@@ -302,7 +346,7 @@ onMounted(() => {
         </div>
       </q-card-section>
       <q-card-section class="q-pa-sm">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows[item.id]"
@@ -312,20 +356,44 @@ onMounted(() => {
           :paging="true"
           dense
           hide-pagination
-          class="custom-table2"
           no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
+              <q-th auto-width />
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
+                <span v-if="col.name == 'point'" class="text-weight-medium">
+                  <q-btn
+                    flat
+                    icon="mdi-eye"
+                    color="info"
+                    round
+                    class="q-ml-xs"
+                    @click="onInfo"
+                  >
+                    <q-tooltip>เกณฑ์การประเมิน</q-tooltip> </q-btn
+                  >{{ col.label }}</span
+                >
+                <span v-else class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
+              <q-td auto-width>
+                <q-btn
+                  flat
+                  icon="mdi-eye"
+                  color="info"
+                  round
+                  class="q-ml-xs"
+                  @click="onAchievement(props.row.achievement)"
+                >
+                  <q-tooltip>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</q-tooltip>
+                </q-btn>
+              </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
                 <div v-if="col.name == 'createDate'">
                   {{ col.value ? date2Thai(col.value) : "-" }}
@@ -348,29 +416,7 @@ onMounted(() => {
                         </q-tooltip>
                       </q-btn>
                     </q-btn-group>
-                    <!-- <q-rating
-                      v-model="props.row.point"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="store.ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                      disable
-                    >
-                      <template
-                        v-for="(i, index) in sortedDataListCriteria"
-                        :key="i.level"
-                        v-slot:[`tip-${index+1}`]
-                      >
-                        <q-tooltip>
-                          <div class="text-body2">
-                            <span v-html="i.description"></span>
-                          </div>
-                        </q-tooltip>
-                      </template>
-                    </q-rating> -->
                   </div>
-                  <!-- <div v-else>รอ ทำ select</div> -->
                 </div>
                 <div v-else-if="col.name == 'summary'">
                   {{
@@ -379,6 +425,14 @@ onMounted(() => {
                       : "-"
                   }}
                 </div>
+                <div v-else-if="col.name == 'level'">
+                  <div
+                    @click="onLevel(props.row.level, props.row.achievement)"
+                    class="text-teal"
+                  >
+                    {{ props.row.level }}
+                  </div>
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -389,6 +443,96 @@ onMounted(() => {
                     store.dataEvaluation.evaluationStatus == 'APPROVE' &&
                     store.tabMain === '2'
                   "
+                >
+                  <q-btn
+                    flat
+                    round
+                    icon="mdi-account-details"
+                    color="blue-6"
+                    size="12px"
+                    dense
+                    @click="openPopupProgress(props.row.id)"
+                  >
+                    <q-tooltip>บันทึกเหตุการณ์/พฤติกรรม</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-if="isEditStep1">
+                  <q-btn
+                    flat
+                    round
+                    :icon="
+                      item.id == 'HEAD' || item.id == 'GROUP'
+                        ? 'edit'
+                        : 'edit'
+                    "
+                    color="info"
+                    @click.stop.pervent="onEdit(props.row, item.id)"
+                  >
+                    <q-tooltip>แก้ไข </q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    flat
+                    round
+                    icon="delete"
+                    color="red"
+                    @click.stop.pervent="onDelete(props.row.id, item.id)"
+                  >
+                    <q-tooltip>ลบข้อมูล </q-tooltip>
+                  </q-btn>
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template #item="props">
+            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+              <q-card bordered flat>
+                <q-list>
+                  <q-item
+                    v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                    :key="col.name"
+                  >
+                    <q-item-section>
+                      <q-item-label caption>{{ col.label }}</q-item-label>
+                      <q-item-label v-if="col.name == 'createDate'">
+                        {{ col.value ? date2Thai(col.value) : "-" }}
+                      </q-item-label>
+                      <q-item-label v-else-if="col.name == 'point'">
+                        <q-btn-group outline>
+                          <q-btn
+                            v-for="(i, index) in sortedDataListCriteria"
+                            :key="index"
+                            :class="props.row.point == i.level && 'active'"
+                            outline
+                            color="grey-6"
+                            :label="i.level"
+                          >
+                            <q-tooltip>
+                              <div class="text-body2">
+                                <span v-html="i.description"></span>
+                              </div>
+                            </q-tooltip>
+                          </q-btn>
+                        </q-btn-group>
+                      </q-item-label>
+                      <q-item-label v-else-if="col.name == 'summary'">
+                        {{
+                          props.row.point !== 0
+                            ? (props.row.point / 5) * props.row.weight
+                            : "-"
+                        }}
+                      </q-item-label>
+                      <q-item-label v-else>{{ col.value ?? "-" }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+                <q-separator />
+                <q-card-actions
+                  align="around"
+                  v-if="
+                    store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                    store.tabMain === '2'
+                  "
                 >
                   <q-btn
                     flat
@@ -413,9 +557,9 @@ onMounted(() => {
                   >
                     <q-tooltip>รายงานปัญหา</q-tooltip>
                   </q-btn>
-                </div>
+                </q-card-actions>
 
-                <div v-if="isEditStep1">
+                <q-card-actions align="around" v-if="isEditStep1">
                   <q-btn
                     flat
                     round
@@ -434,11 +578,11 @@ onMounted(() => {
                   >
                     <q-tooltip>ลบข้อมูล </q-tooltip>
                   </q-btn>
-                </div>
+                </q-card-actions>
-              </q-td>
+              </q-card>
-            </q-tr>
+            </div>
           </template>
-        </q-table>
+        </d-table>
       </q-card-section>
     </q-card>
   </div>
@@ -468,6 +612,18 @@ onMounted(() => {
     v-model:type="type"
     :idList="idList"
   />
+
+  <DialogListCriteria
+    v-model:modal="modalCriteria"
+    v-model:dataListCriteria="dataListCriteria"
+  />
+
+  <DialogCompetncyByRow
+    v-model:modal="modalCompetncyByRow"
+    v-model:rows="dataCompetncyByRow"
+  />
+
+  <DialogLevel v-model:modal="modalLevel" v-model:rows="dataLevel" />
 </template>
 
 <style scoped>

src/modules/14_KPI/interface/request/index.ts

@@ -57,7 +57,8 @@ interface FormCommentByRole {
   id: string;
   topic: string;
   reason: string;
-
+  createdFullName: string;
+score:string
   reasonEvaluator: string;
   reasonCommander: string;
   reasonCommanderHigh: string;

src/modules/14_KPI/store.ts

@@ -13,7 +13,7 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
     keyword: "",
   });
   const selected = ref([]);
-
+  const isUpdate = ref<boolean>(false);
   const tabMain = ref<string>("1");
   const dataProfile = ref<any>({
     profileId: null,
@@ -280,51 +280,58 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
   const rolePerson = ref<string>("USER"); //"USER" | "EVALUATOR" |  "COMMANDER", "COMMANDERHIGH"
   const tabOpen = ref<number>(1);
   function checkStep() {
-    const role =
+    // const role =
-      dataEvaluation.value.profileId == dataProfile.value.profileId
+    // dataEvaluation.value.profileId == 'USER'
-        ? "USER"
+    rolePerson.value = "USER";
-        : dataEvaluation.value.evaluatorId == dataProfile.value.profileId
-        ? "EVALUATOR"
-        : dataEvaluation.value.commanderId == dataProfile.value.profileId
-        ? "COMMANDER"
-        : dataEvaluation.value.commanderHighId == dataProfile.value.profileId
-        ? "COMMANDERHIGH"
-        : "";
-    rolePerson.value = role;
 
     switch (dataEvaluation.value.evaluationStatus) {
       case "NEW":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "NEW_EVALUATOR":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "NEW_COMMANDER":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "NEW_COMMANDER_HIGH":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "APPROVE":
         tabOpen.value = 2;
+        tabMain.value = "2";
         break;
       case "EVALUATING":
         tabOpen.value = 3;
+        tabMain.value = "3";
         break;
       case "EVALUATING_EVALUATOR":
         tabOpen.value = 3;
+        tabMain.value = "3";
         break;
-      case "EVALUATING_COMMANDER":
+      case "SUMMARY":
-        tabOpen.value = 3;
+        tabOpen.value = 4;
+        tabMain.value = "3";
         break;
-      case "EVALUATING_COMMANDER_HIGH":
+      case "SUMMARY_COMMANDER":
-        tabOpen.value = 3;
+        tabOpen.value = 4;
+        tabMain.value = "3";
+        break;
+      case "SUMMARY_COMMANDER_HIGH":
+        tabOpen.value = 4;
+        tabMain.value = "3";
         break;
       case "COMPLETE":
-        tabOpen.value = 3;
+        tabOpen.value = 4;
+        tabMain.value = "4";
         break;
       default:
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
     }
   }
@@ -398,5 +405,6 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
     yearRound,
     selected,
     statusOptions,
+    isUpdate,
   };
 });