เปลี่ยนเป็นคะแนน

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

@@ -18,8 +18,9 @@ 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 });
@@ -85,34 +86,39 @@ function clickList(index: string, data: any) {
 }
 
 function onSubmitAdd() {
-  dialogConfirm($q, () => {
+  // type
-    showLoader();
+  if (numLevel.value == "") {
-    http
+    dialogMessageNotify($q,'กรุณาเลือกคะแนน')
-      .put(
+  } else {
-        config.API.kpiCommentP(
+    dialogConfirm($q, () => {
-          "progress",
+      showLoader();
-          type.value,
+      http
-          store.rolePerson.toLocaleLowerCase(),
+        .put(
-          idList.value
+          config.API.kpiCommentP(
-        ),
+            "progress",
-        {
+            type.value,
-          reason: formDataAdd.reason,
+            store.rolePerson.toLocaleLowerCase(),
-          topic: formDataAdd.topic,
+            idList.value
-          score: type.value == "capacity" ? undefined : numLevel.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() {}
@@ -204,6 +210,10 @@ function onSubmitComment(role: string) {
   });
 }
 
+function onCheckNumber(num: number) {
+  numLevel.value = num.toString();
+}
+
 watch(
   () => modal.value,
   () => {
@@ -257,10 +267,10 @@ watch(
                   <div class="row q-px-md q-py-sm items-center bg-grey-1">
                     <div class="col-12">
                       <span>{{
-                    type == "capacity" || type == "development"
+                        type == "capacity" || type == "development"
-                      ? "เหตุการณ์/พฤติกรรม"
+                          ? "เหตุการณ์/พฤติกรรม"
-                      : "ความก้าวหน้า"
+                          : "ความก้าวหน้า"
-                  }}</span>
+                      }}</span>
                     </div>
                   </div>
 
@@ -541,7 +551,7 @@ watch(
                 :rules="[(val:string) => !!val || `${type == 'capacity'||type == 'development' ? 'กรุณากรอกเหตุการณ์/พฤติกรรม':'กรุณากรอกหัวข้อความก้าวหน้า' }`,]"
               />
             </div>
-            <div
+            <!-- <div
               class="col-12"
               v-if="type !== 'capacity' && type !== 'development'"
             >
@@ -555,6 +565,27 @@ watch(
                 hide-bottom-space
                 :rules="[(val:string) => !!val || `${'กรุณากรอกคะแนน'}`,]"
               />
+            </div> -->
+            <div
+              class="col-12"
+              v-if="type !== 'capacity' && type !== 'development'"
+            >
+              <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