Merge branch 'NiceDev' into develop

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

@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -13,13 +14,19 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
 
-const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const numpage = defineModel<number>("numpage", { required: true });
 
 const search = ref<string>("");
-const listCheck = ref<number | null>(null);
+const listCheckID = ref<string | null>(null);
 const listTarget = ref<any>([]);
 
 const formDetail = reactive<any>({
@@ -86,13 +93,13 @@ function fetchListRole() {
     });
 }
 
-function clickList(index: number, id: string) {
+function clickList(id: string) {
   showLoader();
   const url = numpage.value === 1 ? config.API.kpiPlan : config.API.kpiRole;
   http
     .get(`${url}/${id}`)
     .then((res) => {
-      listCheck.value = index;
+      listCheckID.value = id;
       const data = res.data.result;
       formDetail.orgRevisionId = data.corgRevisionId;
       formDetail.id = data.id;
@@ -117,7 +124,6 @@ function clickList(index: number, id: string) {
       formDetail.strategy = data.strategy;
       formDetail.strategyId = data.strategyId;
       formDetail.strategyName = data.strategyName;
-
     })
     .catch((err) => {
       messageError($q, err);
@@ -131,7 +137,7 @@ function clickList(index: number, id: string) {
 function closeDialog() {
   modal.value = false;
   search.value = "";
-  listCheck.value = null;
+  listCheckID.value = null;
   formDetail.orgRevisionId = "";
   formDetail.id = "";
   formDetail.year = "";
@@ -155,13 +161,12 @@ function closeDialog() {
   formDetail.strategyId = "";
 }
 
-/** เรียกใช้ class */
-function getclass() {
-  return "inputgreen";
-}
-
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  if (!listCheckID.value) {
+    dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
+  } else {
+    dialogConfirm($q, () => {});
+  }
 }
 
 watch(
@@ -179,7 +184,7 @@ watch(
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 70%">
+    <q-card class="col-12" style="width: 100%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="
@@ -193,9 +198,7 @@ watch(
 
         <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
           <div class="col-12 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 fit">
                 <div class="col-12">
                   <q-input
@@ -203,7 +206,7 @@ watch(
                     outlined
                     dense
                     label="ค้นหา"
-                    :class="getclass()"
+                    class="inputgreen"
                   >
                     <template v-slot:append>
                       <q-icon v-if="search == ''" name="search" />
@@ -234,9 +237,9 @@ watch(
                         :key="index"
                         clickable
                         v-ripple
-                        :active="listCheck === index"
+                        :active="listCheckID === item.id"
                         active-class="my-menu-link"
-                        @click="clickList(index, item.id)"
+                        @click="clickList(item.id)"
                       >
                         <q-item-section class="q-pa-none">
                           <div class="row items-center" style="height: 20px">
@@ -255,14 +258,14 @@ watch(
               </div>
             </div>
 
-            <div class="col-xs-12 col-sm-8 col-md-9 row">
+            <div class="col-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-8">
+                <div class="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">
@@ -338,7 +341,7 @@ watch(
                     </div>
                   </q-card>
                 </div>
-                <div class="col-4 row">
+                <div class="col-6 row">
                   <div class="row col-12 card-box">
                     <div
                       class="col-12 bg-grey-2 row items-center text-weight-medium"
@@ -384,24 +387,23 @@ watch(
                     label="นิยามหรือความหมายของตัวชี้วัด"
                     type="textarea"
                     outlined
-                    autogrow
                     dense
                     :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                     hide-bottom-space
-                    :class="getclass()"
+                    class="inputgreen"
                   />
                 </div>
+
                 <div class="col-12">
                   <q-input
                     v-model="formDetail.formula"
                     label="สูตรคำนวณ"
                     type="textarea"
                     outlined
-                    autogrow
                     dense
                     :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                     hide-bottom-space
-                    :class="getclass()"
+                    class="inputgreen"
                   />
                 </div>
               </div>

src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue

@@ -1,4 +1,4 @@
-divdivdiv<script setup lang="ts">
+<script setup lang="ts">
 import { ref, reactive } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index";