User เพิ่มฟิลด์ตอนสร้างและแก้ไขการประเมิน ต่อ API

src/modules/08_KPI/views/main.vue

@@ -13,6 +13,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+const commanderOp = ref<any[]>([]);
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@@ -77,6 +78,10 @@ const evaluatorIdOp = ref<DataOptions[]>([]);
 const commanderIdOp = ref<DataOptions[]>([]);
 const commanderHighOp = ref<DataOptions[]>([]);
 
+const evaluatorIdMainOp = ref<DataOptions[]>([]);
+const commanderIdMainOp = ref<DataOptions[]>([]);
+const commanderHighMainOp = ref<DataOptions[]>([]);
+
 /** Dialog*/
 const modalDialog = ref<boolean>(false);
 const yearDialog = ref<number | null>(null);
@@ -185,6 +190,10 @@ function onSubmit() {
         prefix: formRound.prefix,
         firstName: formRound.firstName,
         lastName: formRound.lastName,
+
+        evaluatorId: formRound.evaluatorId,
+        commanderId: formRound.commanderId,
+        commanderHighId: formRound.commanderHighId,
       })
       .then((res) => {
         console.log(res);
@@ -247,17 +256,62 @@ watch(
   }
 );
 
-function getOrgOp(){
+function getOrgOp() {
   http
-  .get(config.API.Kpiorg)
-  .then((res)=>{
-    console.log(res)
-  })
+    .get(config.API.Kpiorg)
+    .then((res) => {
+      const data = res.data.result;
+      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+      commanderIdMainOp.value = data.commander.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
 }
+
+function filterOption(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "evaluatorIdOp":
+      update(() => {
+        evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "commanderIdOp":
+      update(() => {
+        commanderIdOp.value = commanderIdMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "commanderHighOp":
+      update(() => {
+        commanderHighOp.value = commanderHighMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
 onMounted(() => {
   getProfile();
   fetchRoundOption("main");
-  getOrgOp()
+  getOrgOp();
 });
 </script>
 
@@ -507,7 +561,19 @@ onMounted(() => {
                   (val:string) =>
                     !!val || `${'กรุณาเลือกผู้ประเมิน'}`,
                 ]"
-              />
+                use-input
+                @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
+                    ) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
             <div class="col-12">
               <q-select
@@ -520,6 +586,10 @@ onMounted(() => {
                 :options="commanderIdOp"
                 emit-value
                 map-options
+                use-input
+                @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
+                    ) "
               >
                 <template v-if="formRound.commanderId" v-slot:append>
                   <q-icon
@@ -528,6 +598,13 @@ onMounted(() => {
                     class="cursor-pointer"
                   />
                 </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
               </q-select>
             </div>
             <div class="col-12">
@@ -541,6 +618,10 @@ onMounted(() => {
                 :options="commanderHighOp"
                 emit-value
                 map-options
+                use-input
+                @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
+                    ) "
               >
                 <template v-if="formRound.commanderHighId" v-slot:append>
                   <q-icon
@@ -549,6 +630,13 @@ onMounted(() => {
                     class="cursor-pointer"
                   />
                 </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
               </q-select>
             </div>
           </div>