เพิ่ม filter popup มีมูลส่งไปสืบสวน

src/modules/11_discipline/components/1_Complaint/Popup.vue

@@ -114,7 +114,8 @@ const visibleColumns = ref<string[]>([
 
 const selected = ref<any>([]);
 const inspectionResults = ref<string>("");
-const inputRef = ref<any>(null);
+const filter = ref<string>("");
+// const inputRef = ref<any>(null);
 
 const initialPagination = ref<any>({
   descending: false,
@@ -122,8 +123,8 @@ const initialPagination = ref<any>({
 });
 
 function onclickSend() {
-  inputRef.value.validate();
-  if (!inputRef.value.hasError && selected.value.length > 0) {
+  // inputRef.value.validate();
+  if (selected.value.length > 0) {
     dialogConfirm(
       $q,
       async () => {
@@ -151,16 +152,58 @@ watch([() => props.modal], () => {
 </script>
 <template>
   <q-dialog v-model="props.modal">
-    <q-card style="width: 800px; max-width: 80vw">
+    <q-card style="width: 820px; max-width: 80vw">
       <DialogHeader tittle="มีมูลส่งไปสืบสวน" :close="onClickClose" />
 
       <q-separator />
 
       <q-card-section class="q-pt-none q-mt-md">
+        <div class="col-12 row q-pb-sm items-center">
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
         <d-table
           ref="table"
           :columns="columns"
           :rows="complainstStore.rowsAdd"
+          :filter="filter"
           row-key="id"
           flat
           bordered