no message

src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue

@@ -73,6 +73,8 @@ const modalHistory = ref<boolean>(false); //แสดง popup ประวั
 const OpsFilter = ref<InsigniaOps>({
   insigniaOptions: [],
 });
+
+const insigniaOptions = ref<any[]>([]);
 //ต้วลือกรายการครื่องราช
 const Ops = ref<InsigniaOps>({
   insigniaOptions: [],
@@ -600,7 +602,7 @@ function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "insigniaOptions":
       update(() => {
-        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
+        insigniaOptions.value = OpsFilter.value.insigniaOptions.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
@@ -650,6 +652,7 @@ onMounted(async () => {
   store.insigniaOption.length === 0 ? await fetchInsignia() : "";
   Ops.value.insigniaOptions = store.insigniaOption;
   OpsFilter.value.insigniaOptions = store.insigniaOption;
+  insigniaOptions.value = store.insigniaOption;
 });
 </script>
 
@@ -677,18 +680,7 @@ onMounted(async () => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="filterSearch == ''"
-          name="search"
-          @click.stop.prevent="filterSearch = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="filterSearch"
-          name="cancel"
-          @click.stop.prevent="filterSearch = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -703,7 +695,6 @@ onMounted(async () => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
     <q-btn-toggle
@@ -745,7 +736,7 @@ onMounted(async () => {
     :rows="rows"
     :paging="true"
     :columns="columns"
-    :filter="filterSearch"
+    :filter="filterSearch.trim()"
     v-model:pagination="pagination"
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
@@ -776,9 +767,7 @@ onMounted(async () => {
           </q-btn>
 
           <q-btn
-            v-if="
-              isLeave == false && checkPermission($route)?.attrIsUpdate
-            "
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -811,9 +800,7 @@ onMounted(async () => {
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
             <q-btn
-              v-if="
-                isLeave == false && checkPermission($route)?.attrIsUpdate
-              "
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="edit"
@@ -945,10 +932,12 @@ onMounted(async () => {
               </datepicker>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
+                hide-selected
+                fill-input
                 emit-value
                 lazy-rules
                 map-options
@@ -959,13 +948,21 @@ onMounted(async () => {
                 v-model="insigniaForm.insigniaId"
                 class="inputgreen"
                 :label="`${'ชื่อเครื่องราชฯ'}`"
-                :options="Ops.insigniaOptions"
+                :options="insigniaOptions"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
                 @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
                     ) "
                 @update:modelValue="insigniaTypeSelection"
-              />
+              >
+                <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-xs-6 col-sm-6 col-md-6">
               <q-input
@@ -1165,7 +1162,11 @@ onMounted(async () => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-        :close="() => ((modalHistory = false), (rowsHistory = []))"
+        :close="
+          () => (
+            (modalHistory = false), (rowsHistory = []), (filterHistory = '')
+          )
+        "
       />
       <q-separator />
 
@@ -1182,18 +1183,7 @@ onMounted(async () => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterHistory"
-                name="cancel"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -1207,7 +1197,6 @@ onMounted(async () => {
             map-options
             :options="columnsHistory"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -1222,7 +1211,7 @@ onMounted(async () => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory"
+          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">