ui องค์ประกอบที่ 2

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

@@ -9,7 +9,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const store = useKpiDataStore();
+const expectedLevel = ref<any>();
 
+const weight = ref<number | null>(null);
 const { showLoader, hideLoader } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
 const competencyType = defineModel<string>("competencyType", {
@@ -26,6 +28,13 @@ const listCheck = ref<number | null>();
 const listTarget = ref<any>([]);
 const listTargetMain = ref<any>([]);
 
+const expectedLevelOp = ref<DataOptions[]>([
+  { id: "1", name: "1" },
+  { id: "2", name: "2" },
+  { id: "3", name: "3" },
+  { id: "4", name: "4" },
+  { id: "5", name: "5" },
+]);
 const formDetail = reactive<any>({
   type: "สมรรถนะหลัก",
   name: "สมรรถนะ 1",
@@ -84,6 +93,9 @@ function closeDialog() {
   formDetail.name = "";
   formDetail.definition = "";
   formDetail.criteria = "";
+
+  weight.value = null
+  expectedLevel.value = null
 }
 
 /** เรียกใช้ class */
@@ -126,6 +138,14 @@ watch(
   () => {
     if (modal.value == true) {
       type.value = competencyType.value;
+      if(type.value == 'HEAD'){
+        expectedLevel.value = store.defaultCompetencyCoreLevel
+      }
+      else if(type.value == 'GROUP'){
+        expectedLevel.value = store.defaultCompetencyGroupLevel
+      }else{
+        expectedLevel.value = null
+      }
       getData();
     }
   }
@@ -229,7 +249,7 @@ watch(
               <div class="row col-12 q-pa-md q-col-gutter-sm">
                 <div class="col-12">
                   <span class="text-body2 text-weight-medium"
-                    >รายละเอียดตัวชี้วัด</span
+                    >รายละเอียดสมรรถนะ</span
                   >
                 </div>
                 <div class="col-5 row">
@@ -262,6 +282,53 @@ watch(
                         </div>
                       </div>
                     </div>
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-6">
+                        <q-input
+                          v-model="weight"
+                          dense
+                          outlined
+                          type="number"
+                          label="น้ำหนัก (ร้อยละ)"
+                          lazy-rules
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                        />
+                      </div>
+                      <div
+                        v-if="type == 'HEAD' || type == 'GROUP'"
+                        class="col-6"
+                      >
+                        <q-select
+                          v-model="expectedLevel"
+                          :options="expectedLevelOp"
+                          dense
+                          emit-value
+                          map-options
+                          option-label="id"
+                          option-value="name"
+                          outlined
+                          lazy-rules
+                          label="ระดับที่คาดหวัง"
+                          :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับที่คาดหวัง'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                        />
+                      </div>
+                      <div v-else>
+                        <q-input
+                          v-model="expectedLevel"
+                          dense
+                          outlined
+                          label="ระดับที่คาดหวัง"
+                          lazy-rules
+                          :rules="[(val:string) => !!val || `${'กรุณาระดับที่คาดหวัง'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                        />
+                      </div>
+                    </div>
                   </q-card>
                 </div>
                 <div class="col-7 row">

src/modules/08_KPI/store.ts

@@ -180,5 +180,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     convertResults,
     checkCompetency,
     checkCompetencyDefaultCompetencyLevel,
+    defaultCompetencyCoreLevel,
+    defaultCompetencyGroupLevel
   };
 });