diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index 99633c1..7786e09 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -31,4 +31,5 @@ export default {
   kpiUserCapacity: `${KpiUser}/capacity`,
   KpiEvaluation,
   Kpiorg,
+  kpiEvaluationCheck:`${kpiEvaluation}/check`,
 };
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 3e9cff3..8b80236 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -21,17 +21,19 @@ const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
+const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
 
 const evaluatorIdOp = ref<DataOptions[]>([]);
 const commanderIdOp = ref<DataOptions[]>([]);
 const commanderHighOp = ref<DataOptions[]>([]);
 
-const formEva = reactive({
-  evaluatorId: "",
-  commanderId: "",
-  commanderHighId: "",
-});
+const evaluatorIdMainOp = ref<DataOptions[]>([]);
+const commanderIdMainOp = ref<DataOptions[]>([]);
+const commanderHighMainOp = ref<DataOptions[]>([]);
+
+const evaluatorId = ref<any>();
+const commanderId = ref<any>();
+const commanderHighId = ref<any>();
 
 const formProfile = reactive<FormProfile>({
   fullName: "",
@@ -56,7 +58,7 @@ function fetchEvaluation() {
       formProfile.status = store.convertStatus(data.evaluationStatus);
       formProfile.result = store.convertResults(data.evaluationResults);
       fetchProfile(data.profileId);
-      console.log(store.dataEvaluation)
+      console.log(store.dataEvaluation);
     })
     .catch((e) => {
       messageError($q, e);
@@ -113,22 +115,113 @@ function close() {
   modalEdit.value = false;
 }
 
-function clearDialog() {
+async function clearDialog() {
   modalEdit.value = false;
-  formEva.evaluatorId = "";
-  formEva.commanderId = "";
-  formEva.commanderHighId = "";
+  evaluatorId.value = null;
+  commanderId.value = null;
+  commanderHighId.value = null;
+  await fetchEvaluation();
+  await getProfile();
+  await getOrgOp();
 }
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    clearDialog();
+    showLoader();
+    http
+      .put(config.API.kpiEvaluationCheck + `/${id.value}`, {
+        evaluatorId: evaluatorId.value.id,
+        commanderId: commanderId.value.id,
+        commanderHighId: commanderHighId.value.id,
+      })
+      .then((res) => {
+        success($q, "บันทึกสำเร็จ");
+        clearDialog();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-onMounted(() => {
-  fetchEvaluation();
-  getProfile();
+function getOrgOp() {
+  http
+    .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}`,
+      }));
+
+      evaluatorId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.evaluatorId);
+      commanderId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.commanderId);
+      commanderHighId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.commanderHighId);
+    })
+    .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(async () => {
+  await fetchEvaluation();
+  await getProfile();
+  await getOrgOp();
 });
 </script>
 
@@ -148,7 +241,13 @@ onMounted(() => {
             isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
           "
         />
-        {{ id ? `แก้ไขแบบประเมิน` : `เพิ่มแบบประเมิน` }}
+        {{
+          isReadonly
+            ? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
+            : id
+            ? `แก้ไขแบบประเมิน`
+            : `เพิ่มแบบประเมิน`
+        }}
         <q-space />
 
         <!-- <q-btn label="บันทึก" color="secondary" unelevated @click="onSave"
@@ -175,6 +274,7 @@ onMounted(() => {
                   <q-space />
                   <div class="q-gutter-x-sm">
                     <q-btn
+                      v-if="!isReadonly"
                       unelevated
                       round
                       icon="edit"
@@ -282,14 +382,14 @@ onMounted(() => {
         <q-card-section>
           <div class="column q-gutter-sm">
             <q-select
-              v-model="formEva.evaluatorId"
+              v-model="evaluatorId"
               outlined
               label="ผู้ประเมิน"
               dense
               option-label="name"
               option-value="id"
               :options="evaluatorIdOp"
-              emit-value
+              class="inputgreen"
               map-options
               hide-bottom-space
               lazy-rules
@@ -297,41 +397,53 @@ onMounted(() => {
                   (val:string) =>
                     !!val || `${'กรุณาเลือกผู้ประเมิน'}`,
                 ]"
+              use-input
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
+                    ) "
             />
             <q-select
-              v-model="formEva.commanderId"
+              v-model="commanderId"
               outlined
               label="ผู้บังคับบัญชาเหนือขึ้นไป"
               dense
               option-label="name"
               option-value="id"
               :options="commanderIdOp"
-              emit-value
               map-options
+              class="inputgreen"
+              use-input
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
+                    ) "
             >
-              <template v-if="formEva.commanderId" v-slot:append>
+              <template v-if="commanderId" v-slot:append>
                 <q-icon
                   name="cancel"
-                  @click.stop.prevent="formEva.commanderId = ''"
+                  @click.stop.prevent="commanderId = null"
                   class="cursor-pointer"
                 />
               </template>
             </q-select>
             <q-select
-              v-model="formEva.commanderHighId"
+              v-model="commanderHighId"
               outlined
               label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
               dense
               option-label="name"
               option-value="id"
               :options="commanderHighOp"
-              emit-value
               map-options
+              use-input
+              class="inputgreen"
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
+                    ) "
             >
-              <template v-if="formEva.commanderHighId" v-slot:append>
+              <template v-if="commanderHighId" v-slot:append>
                 <q-icon
                   name="cancel"
-                  @click.stop.prevent="formEva.commanderHighId = ''"
+                  @click.stop.prevent="commanderHighId = null"
                   class="cursor-pointer"
                 />
               </template>
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index f02382b..4b60cf9 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/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>