ฟิลเตอร์ระบบ บรรจุ

src/modules/05_placement/components/AppointEmployee/DialogOrders.vue

@@ -15,7 +15,7 @@ import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCom
 const $q = useQuasar();
 const storeCommand = useCommandMainStore();
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai } = mixin;
+const { dialogConfirm, date2Thai,onSearchDataTable } = mixin;
 
 const props = defineProps({
   Modal: Boolean,
@@ -23,8 +23,6 @@ const props = defineProps({
   fetchData: Function,
   nextPage: Function,
   optionsType: Array,
-  rows2: Array as PropType<PersonData[]>,
-  filterKeyword2: String,
   type: String,
 });
 const emit = defineEmits([
@@ -33,7 +31,10 @@ const emit = defineEmits([
   "update:selected",
 ]);
 
-const rows = ref<PersonData[]>([]); //ราชชื่อส่งไปออกคำสั่ง
+const filterKeyword2 = defineModel<string>('filterKeyword2',{required:true})
+const rows = defineModel<PersonData[]>('rows',{required:true})
+const rowsData = defineModel<PersonData[]>('rowsData',{required:true})
+
 const selected = ref<PersonData[]>([]); //ราชชื่อที่เลือกส่งไปออกคำสั่ง
 const dataMapToSend = computed(() => {
   return selected.value.map((i: any) => ({
@@ -92,6 +93,11 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val, row) => {
+      return row.firstName
+        ? `${row.prefix}${row.firstName} ${row.lastName}`
+        : "-";
+    },
   },
   {
     name: "organizationName",
@@ -154,7 +160,7 @@ function clickAddlist() {
 
 /**  ฟังก์ชันเลือกประเภทคำสั่ง */
 function filterSelectOrder() {
-  const data = props.rows2 ? props.rows2 : [];
+  const data = rowsData.value ? rowsData.value : [];
   selected.value = [];
   rows.value = data.filter((v: PersonData) => {
     switch (commandType.value) {
@@ -183,6 +189,14 @@ function filterSelector(val: string, update: Function) {
   });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterKeyword2.value,
+    rowsData.value,
+    columns2.value ? columns2.value : []
+  );
+}
+
 /**
  * เมื่อ props.modal เป็น true
  *
@@ -192,7 +206,7 @@ watch(
   () => props.Modal,
   async () => {
     if (props.Modal === true) {
-      rows.value = props.rows2 ? props.rows2 : [];
+      rows.value = rowsData.value ? rowsData.value : [];
       selected.value = [];
       commandType.value = "";
       const data = await storeCommand.getCommandTypes();
@@ -247,9 +261,9 @@ watch(
                   outlined
                   dense
                   debounce="300"
-                  :model-value="filterKeyword2"
-                  @update:model-value="updateInput"
+                  v-model="filterKeyword2"
                   placeholder="ค้นหา"
+                  @keydown.enter="onSearch"
                 >
                   <template v-slot:append>
                     <q-icon name="search" />
@@ -275,7 +289,6 @@ watch(
               <d-table
                 :columns="columns2"
                 :rows="rows"
-                :filter="filterKeyword2"
                 row-key="profileId"
                 flat
                 :visible-columns="visibleColumns2"
@@ -308,15 +321,6 @@ watch(
                       <div v-if="col.name == 'no'">
                         {{ props.rowIndex + 1 }}
                       </div>
-                      <div v-else-if="col.name == 'fullname'">
-                        {{
-                          props.row.firstName
-                            ? `${props.row.prefix ?? ""}${
-                                props.row.firstName ?? ""
-                              } ${props.row.lastName ?? ""}`
-                            : "-"
-                        }}
-                      </div>
 
                       <!-- <div v-else-if="col.name == 'status'">
                   {{ props.row.status ? statusText(props.row.status) : "-" }}