แก้ฟิลเตอร์ จากล่างขึ้นบนถึง พ้นราชการ

src/modules/06_retirement/components/06_dismissOrder/DialogSendToCommand.vue

@@ -9,10 +9,22 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
 
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
 
 import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 
+/** props*/
+const props = defineProps({
+  closeModal: Function,
+  fecthlistRecevice: Function,
+});
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<ResponseData[]>("rows", { required: true });
+const rowsData = defineModel<ResponseData[]>("rowsData", { required: true });
+const filterKeyword = defineModel<string>("filterKeyword2", { required: true });
+
 /** use */
 const $q = useQuasar();
 const { statusText } = useTransferDataStore();
@@ -36,10 +48,11 @@ const {
   dialogConfirm,
   hideLoader,
   date2Thai,
+  onSearchDataTable,
 } = mixin;
 
 /** คอลัมน์ */
-const columns2 = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -112,7 +125,7 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 /** คอลัมน์ที่แสดง */
-const visibleColumns2 = ref<string[]>([
+const visibleColumns = ref<string[]>([
   "no",
   "fullname",
   "positionLevel",
@@ -121,15 +134,6 @@ const visibleColumns2 = ref<string[]>([
   "status",
 ]);
 
-/** props*/
-const props = defineProps({
-  modal: Boolean,
-  closeModal: Function,
-  fecthlistRecevice: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
 const modalCommand = ref<boolean>(false);
 
 /**
@@ -164,15 +168,23 @@ function Reset() {
   emit("update:filterKeyword2", "");
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watchEffect(() => {
-  if (props.modal === true) {
+  if (modal.value === true) {
     selected.value = [];
     updateInput("");
   }
 });
 </script>
 <template>
-  <q-dialog v-model="props.modal" persistent>
+  <q-dialog v-model="modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader tittle="ส่งไปออกคำสั่งให้ออก" :close="closeModal" />
       <q-separator />
@@ -185,16 +197,16 @@ watchEffect(() => {
               outlined
               dense
               debounce="300"
-              :model-value="filterKeyword2"
-              @update:model-value="updateInput"
+              v-model="filterKeyword"
               placeholder="ค้นหา"
+              @keydown.enter="onSearch"
             >
               <template v-slot:append>
                 <q-icon name="search" />
               </template>
             </q-input>
             <q-select
-              v-model="visibleColumns2"
+              v-model="visibleColumns"
               multiple
               outlined
               dense
@@ -202,7 +214,7 @@ watchEffect(() => {
               :display-value="$q.lang.table.columns"
               emit-value
               map-options
-              :options="columns2"
+              :options="columns"
               option-value="name"
               style="min-width: 140px"
               class="gt-xs q-ml-sm"
@@ -211,11 +223,10 @@ watchEffect(() => {
 
           <div class="col-12">
             <d-table
-              :columns="columns2"
-              :rows="rows2"
-              :filter="filterKeyword2?.trim()"
+              :columns="columns"
+              :rows="rows"
               row-key="id"
-              :visible-columns="visibleColumns2"
+              :visible-columns="visibleColumns"
               selection="multiple"
               v-model:selected="selected"
             >