แก้ รายการตัวชี้วัดตามตำแหน่ง

src/modules/14_KPI/components/indicatorByRole/DetailView.vue

@@ -14,6 +14,7 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 
+const heightSize = ref<string>("224");
 const filter = ref<string>("");
 const node = ref<any>([]);
 const expanded = ref<any>([]);
@@ -32,6 +33,7 @@ const {
   success,
   date2Thai,
   calculateDurationYmd,
+  dialogMessageNotify,
 } = useCounterMixin();
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 
@@ -119,7 +121,7 @@ function selectAgency() {
 
 /** บันทึกข้อมูล */
 function onSubmit() {
-  showLoader();
+
   const url = id.value
     ? config.API.kpiRoleMainList + `/${id.value}`
     : config.API.kpiRoleMainList;
@@ -145,14 +147,19 @@ function onSubmit() {
     orgRevisionId: form.orgRevisionId, //RevisionId หน่วยงาน
   };
 
-  http[id.value ? "put" : "post"](url, body)
-    .then((res) => {
-      success($q, "บันทึกสำเร็จ");
-      router.push(`/KPI-indicator-role`);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  if (form.nodeId == null) {
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงาน/ส่วนราชการ");
+  } else {
+    showLoader();
+    http[id.value ? "put" : "post"](url, body)
+      .then((res) => {
+        success($q, "บันทึกสำเร็จ");
+        router.push(`/KPI-indicator-role`);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 }
 
 //
@@ -164,8 +171,8 @@ function getDetail() {
     .then((res) => {
       const data = res.data.result;
       form.position = data.position;
-      form.year = data.year == null ? 0:data.year;
-      form.round = data.round;
+      form.year = data.year == null ? 0 : data.year;
+      form.round = data.kpiPeriodId;
       form.including = data.including;
       form.includingName = data.includingName;
       form.target = data.target;
@@ -223,14 +230,11 @@ async function fetchTree(id: string) {
 }
 
 function updateTicked(val: any) {
-  console.log(expanded.value);
-
   ticked.value = [];
   ticked.value.push(val[val.length - 1]);
 }
 
 function updateSelected(data: any) {
-  console.log(data);
   nodeId.value = data.orgTreeId;
   orgName.value = data.orgTreeName;
   form.node = data.orgLevel;
@@ -241,24 +245,19 @@ function updateSelected(data: any) {
 function getRound() {
   showLoader();
   http
-    .get(
-      config.API.kpiPeriod +
-        `?year=${form.year}`
-    )
+    .get(config.API.kpiPeriod + `?year=${form.year}`)
     .then((res) => {
       const data = res.data.result.data;
       roundOp.value = data.map((item: any) => ({
         id: item.id,
         name: statusTothai(item.durationKPI),
-      }))
-      console.log(roundOp.value)
+      }));
     })
     .finally(() => {
-      hideLoader()
+      hideLoader();
     });
 }
 
-
 function statusTothai(val: string) {
   switch (val) {
     case "SPECIAL":
@@ -272,12 +271,19 @@ function statusTothai(val: string) {
   }
 }
 
+function onResize(size: any) {
+  heightSize.value = `${size.height - 99}`;
+}
+
+function setModel(val: string) {
+  form.position = val;
+}
+
 onMounted(() => {
   fetchActive();
   getOptions();
-  getRound()
+  getRound();
   if (id.value !== "") {
-    console.log("edit");
     getDetail();
   }
 });
@@ -302,11 +308,13 @@ onMounted(() => {
           <div class="col-8">
             <q-select
               dense
-              v-model="form.position"
+              :model-value="form.position"
               label="ตำแหน่งในสายงาน"
               outlined
               emit-value
               map-options
+              fill-input
+              hide-selected
               lazy-rules
               :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
               hide-bottom-space
@@ -315,6 +323,7 @@ onMounted(() => {
               class="inputgreen"
               :options="positionOp"
               use-input
+              @input-value="setModel"
               @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
             >
               <template v-slot:no-option>
@@ -334,7 +343,7 @@ onMounted(() => {
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="form.round = '',getRound()"
+              @update:model-value="(form.round = ''), getRound()"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -351,7 +360,6 @@ onMounted(() => {
                     form.year === 0 ? null : Number(form.year) + 543
                   "
                   :label="`${'ปีงบประมาณ'}`"
-
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -443,8 +451,8 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-4" style="height: 340px">
-            <q-card flat bordered>
+          <div class="col-4">
+            <q-card flat bordered class="full-height">
               <q-card-section class="bg-grey-3 q-pa-sm">
                 <div class="text-dark text-body2 text-weight-medium">
                   หน่วยงาน/ส่วนราชการ
@@ -468,7 +476,10 @@ onMounted(() => {
                     <q-icon v-else name="search" color="grey-5" />
                   </template>
                 </q-input>
-                <q-scroll-area visible style="height: 223px; margin-top: 5px">
+                <q-scroll-area
+                  visible
+                  :style="{ height: `${heightSize}px`, marginTop: '5px' }"
+                >
                   <q-tree
                     dense
                     :nodes="node"
@@ -511,8 +522,9 @@ onMounted(() => {
               </q-card-section>
             </q-card>
           </div>
-          <div class="col-8" style="height: 340px">
+          <div class="col-8">
             <q-card flat bordered>
+              <q-resize-observer @resize="onResize" />
               <q-card-section class="bg-grey-3 q-pa-sm">
                 <div class="row text-dark text-body2 text-weight-medium">
                   <div class="text-center col-4">ระดับคะแนน</div>

src/modules/14_KPI/views/indicatorByRole.vue

@@ -74,10 +74,9 @@ function fetchList() {
   http
     .get(
       config.API.kpiRoleMainList +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}&year=2024`
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}`
     )
     .then((res) => {
-      console.log(res);
       const data = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       rows.value = data;
@@ -172,7 +171,6 @@ function getRound() {
         id: item.id,
         name: statusTothai(item.durationKPI),
       }))
-      console.log(roundOp.value)
     })
     .finally(() => {
       hideLoader()
@@ -192,6 +190,10 @@ function statusTothai(val: string) {
   }
 }
 
+function setModel(val:string){
+  formFilter.position = val
+}
+
 onMounted(async () => {
   await getOptions();
   await getRound();
@@ -208,17 +210,20 @@ onMounted(async () => {
       <div class="row q-gutter-sm">
         <q-select
           dense
-          v-model="formFilter.position"
+          :model-value="formFilter.position"
           label="ตำแหน่ง"
           outlined
           emit-value
           map-options
+          fill-input
+          hide-selected
           hide-bottom-space
           option-label="name"
           option-value="id"
           class="inputgreen"
           :options="positionOp"
           use-input
+          @input-value="setModel"
           @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
           @update:model-value="fetchList"
         >