filter ==> คำสั่งและต้นแบบ

src/modules/05_command/views/lists.vue

@@ -247,7 +247,6 @@ async function fetchDataCommandTypeId(id: string) {
  */
 function filterSelector(val: string, update: Function) {
   update(() => {
-    category.value = val ? "" : category.value;
     categoryOP.value = dataCategory.value.filter(
       (v: DateOption) => v.name.indexOf(val) > -1
     );
@@ -281,13 +280,11 @@ onMounted(async () => {
             borderless
             dense
             outlined
-            clearable
             v-model="keyword"
             placeholder="ค้นหา"
-            @clear="(keyword = ''), searchByStatus()"
             @keydown.enter.prevent="searchByStatus()"
           >
-            <template v-slot:append v-if="keyword === ''">
+            <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
@@ -475,6 +472,8 @@ onMounted(async () => {
                 option-value="id"
                 lazy-rules
                 use-input
+                hide-selected
+                fill-input
                 hide-bottom-space
                 outlined
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกหมวดหมู่'}`]"
@@ -505,11 +504,7 @@ onMounted(async () => {
                 label="บัญชีแนบท้าย"
                 size="sm"
               />
-              <q-checkbox
-                v-model="isSalary"
-                label="แก้ไขเงินเดือน"
-                size="sm"
-              />
+              <q-checkbox v-model="isSalary" label="แก้ไขเงินเดือน" size="sm" />
             </div>
           </div>
         </q-card-section>

src/modules/05_command/views/salaryLists.vue

@@ -6,20 +6,17 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/modules/05_command/stores/main";
 
 import type {
   CommandSysType,
   ListTemplateSalary,
-  ActiveOptions,
 } from "@/modules/05_command/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
-import { options } from "@fullcalendar/core/preact";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const store = useDataStore();
+
 const {
   dialogConfirm,
   success,
@@ -42,16 +39,6 @@ const filter = ref<string>(""); // ตัวแปร ฟิลเตอร์
 const listOrder = ref<CommandSysType[]>([]);
 const activeOrderId = ref<string>(""); // ตัวแปรเก็บ id เพื่อเอาไป = class
 const isActive = ref<boolean>(true); // สถานะการใช้งาน
-const isActiveOption = ref<ActiveOptions[]>([
-  {
-    value: true,
-    label: "ใช้งาน",
-  },
-  {
-    value: false,
-    label: "ไม่ได้ใช้งาน",
-  },
-]);
 const dataForm = reactive<ListTemplateSalary>({
   id: "",
   name: "",
@@ -139,7 +126,6 @@ function closeDialog() {
   dataForm.id = "";
   dataForm.name = "";
   dataForm.isActive = false;
-
   isEdit.value = false;
   dialogForm.value = false;
 }
@@ -323,20 +309,13 @@ onMounted(() => {
                 <q-input
                   borderless
                   dense
-                  debounce="300"
                   outlined
                   v-model="filter"
                   placeholder="ค้นหา"
                   @keydown.enter="(pagination.page = 1), fetchSalaryList()"
                 >
                   <template v-slot:append>
-                    <q-icon name="search" v-if="filter == ''" />
-                    <q-icon
-                      name="clear"
-                      v-else
-                      class="cursor-pointer"
-                      @click="filter = ''"
-                    />
+                    <q-icon name="search" />
                   </template>
                 </q-input>
                 <q-select