ทะเบียนประวัติ: q-select เพิ่มAPIกับfilter

src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue

@@ -673,6 +673,7 @@ onMounted(async () => {
                 :options="Ops.levelOptions"
                 option-value="id"
                 use-input
+                clearable
                 input-debounce="0"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -210,6 +210,13 @@ const educationOption = ref([
   { label: "ไม่ใช่", value: false },
 ]);
 
+const educationOptionFilter = ref([
+  { label: "ใช่", value: true },
+  { label: "ไม่ใช่", value: false },
+]);
+
+let educationLevelOption: any = [];
+
 const historyDialog = ref<boolean>(false);
 const educationData = reactive<RequestItemsObject>({
   isDate: isDate.value === "false" ? false : true,
@@ -291,6 +298,20 @@ async function onSubmit() {
   );
 }
 
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "options":
+      update(() => {
+        educationOption.value = educationOptionFilter.value.filter(
+          (v: any) => v.label.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
 function clearForm() {
   isDate.value = "false";
   educationData.educationLevel = "";
@@ -350,7 +371,23 @@ async function fetchData(id: string) {
     .get(config.API.profileNewEducationByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
-      console.log(rows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchEducationLevel() {
+  showLoader();
+  await http
+    .get(config.API.orgEducationLevel)
+    .then(async (res) => {
+      res.data.result.map((r: any) => {
+        educationLevelOption.push(r.name);
+      });
     })
     .catch((err) => {
       messageError($q, err);
@@ -433,6 +470,7 @@ function deleteData(idData: string) {
 
 onMounted(async () => {
   await fetchData(id.value);
+  fetchEducationLevel();
 });
 </script>
 
@@ -619,7 +657,6 @@ onMounted(async () => {
           </q-card-actions>
           <q-separator />
           <div class="row">
-            {{ console.log(props) }}
             <div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div>
             <div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div>
             <div class="col-2 q-pa-sm label-color">สถานศึกษา</div>
@@ -714,14 +751,22 @@ onMounted(async () => {
         <div class="col">
           <div class="row q-pa-md q-col-gutter-sm">
             <div class="col-6">
-              <q-input
+              <q-select
                 outlined
-                v-model="educationData.educationLevel"
-                label="ระดับการศึกษา"
-                bg-color="white"
                 dense
-                :rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
-                hide-bottom-space
+                emit-value
+                map-options
+                bg-color="white"
+                v-model="educationData.educationLevel"
+                :options="educationLevelOption"
+                input-debounce="0"
+                use-input
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'options'
+                      ) "
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                label="ระดับการศึกษา"
+                clearable
               />
             </div>
             <div class="col-6">
@@ -981,11 +1026,17 @@ onMounted(async () => {
                 dense
                 emit-value
                 map-options
+                clearable
                 bg-color="white"
                 v-model="educationData.isEducation"
                 :options="educationOption"
                 option-value="value"
                 option-label="label"
+                input-debounce="0"
+                use-input
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'options'
+                      ) "
                 :rules="[
                   (val) =>
                     val !== null || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,