From 781573147534cb90fb2fc34b935d4cef0a531853 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 26 Mar 2025 10:47:54 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20search=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=AB=E0=B8=99=E0=B8=B1=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B7=E0=B8=AD=E0=B9=80=E0=B8=A7=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=96=E0=B8=B6=E0=B8=87=E0=B9=81=E0=B8=81=E0=B9=88?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialogs/DialogOrgSelectOneStep.vue        | 343 +++++++++---------
 1 file changed, 174 insertions(+), 169 deletions(-)

diff --git a/src/components/Dialogs/DialogOrgSelectOneStep.vue b/src/components/Dialogs/DialogOrgSelectOneStep.vue
index 08deac9d8..334ad3ed6 100644
--- a/src/components/Dialogs/DialogOrgSelectOneStep.vue
+++ b/src/components/Dialogs/DialogOrgSelectOneStep.vue
@@ -22,6 +22,7 @@ import type {
 const { fetchStructureTree } = useStructureTree();
 
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const filterRef = ref<QInput>();
 const filterModal = ref<string>("");
 const props = defineProps({
@@ -41,6 +42,7 @@ const {
   hideLoader,
   date2Thai,
   dialogMessageNotify,
+  onSearchDataTable,
 } = mixin;
 
 const route = useRoute();
@@ -141,6 +143,7 @@ async function getDataTable(id: string, level: number = 0) {
     .then(async (res) => {
       const data = await res.data.result.data;
       rows.value = data;
+      rowsData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -242,6 +245,14 @@ function onSubmit() {
   }
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filterModal.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   await getTreeData();
 });
@@ -251,176 +262,170 @@ onMounted(async () => {
     <q-card class="no-scroll">
       <DialogHeader :tittle="title" :close="close" />
       <q-separator />
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-card-section style="max-height: 70vh">
-          <div class="row">
-            <q-card
-              bordered
-              class="col-12 col-sm-3 scroll q-pa-sm"
-              style="height: 75vh"
-            >
-              <q-input dense outlined v-model="filter" label="ค้นหา">
-                <template v-slot:append>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-              <q-tree
-                class="q-pa-sm q-gutter-sm"
-                dense
-                :nodes="lazy"
-                node-key="orgTreeId"
-                label-key="labelName"
-                :filter="filter.trim()"
-                no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                no-nodes-label="ไม่มีข้อมูล"
-                v-model:expanded="expanded"
-              >
-                <template v-slot:default-header="prop">
-                  <q-item
-                    @click.stop="updateSelected(prop.node)"
-                    clickable
-                    :active="nodeId == prop.node.orgTreeId"
-                    active-class="my-list-link text-primary text-weight-medium"
-                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                  >
-                    <div>
-                      <div class="text-weight-medium">
-                        {{ prop.node.orgTreeName }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{
-                          prop.node.orgCode == null ? null : prop.node.orgCode
-                        }}
-                        {{
-                          prop.node.orgTreeShortName == null
-                            ? null
-                            : prop.node.orgTreeShortName
-                        }}
-                      </div>
-                    </div>
-                  </q-item>
-                </template>
-              </q-tree>
-            </q-card>
-
-            <q-card
-              bordered
-              style="height: 75vh"
-              class="col-12 col-sm-9 q-pa-sm scroll"
-            >
-              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
-                <q-space />
-                <div class="items-center" style="display: flex">
-                  <q-checkbox
-                    keep-color
-                    v-model="isAll"
-                    label="แสดงทั้งหมด"
-                    color="primary"
-                  >
-                    <q-tooltip>แสดงทั้งหมด</q-tooltip>
-                  </q-checkbox>
-                  <q-input
-                    standout
-                    dense
-                    v-model="filterModal"
-                    ref="filterRef"
-                    outlined
-                    debounce="300"
-                    placeholder="ค้นหา"
-                    class="q-ml-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="search" />
-                    </template>
-                  </q-input>
-
-                  <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: 140px"
-                    class="gt-xs q-ml-sm"
-                  />
-                </div>
-                <div class="col-12">
-                  <d-table
-                    :rows="rows"
-                    :columns="columns"
-                    :visible-columns="visibleColumns"
-                    :filter="filterModal.trim()"
-                    row-key="id"
-                    selection="multiple"
-                    v-model:selected="selectedModal"
-                    :rows-per-page-options="[10, 25, 50, 100]"
-                  >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <q-th auto-width>
-                          <q-checkbox
-                            keep-color
-                            color="primary"
-                            dense
-                            v-model="props.selected"
-                          />
-                        </q-th>
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                          style="color: #000000; font-weight: 500"
-                        >
-                          <span class="text-weight-medium">{{
-                            col.label
-                          }}</span>
-                        </q-th>
-                      </q-tr>
-                    </template>
-                    <template v-slot:body="props">
-                      <q-tr :props="props" class="cursor-pointer">
-                        <q-td auto-width>
-                          <q-checkbox
-                            keep-color
-                            color="primary"
-                            dense
-                            v-model="props.selected"
-                          />
-                        </q-td>
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <div v-if="col.name == 'no'">
-                            {{ props.rowIndex + 1 }}
-                          </div>
-
-                          <div v-else>
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
-                </div>
-              </div>
-            </q-card>
-          </div>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+      <q-card-section style="max-height: 70vh">
+        <div class="row">
+          <q-card
+            bordered
+            class="col-12 col-sm-3 scroll q-pa-sm"
+            style="height: 75vh"
           >
-        </q-card-actions>
-      </q-form>
+            <q-input dense outlined v-model="filter" label="ค้นหา">
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-sm q-gutter-sm"
+              dense
+              :nodes="lazy"
+              node-key="orgTreeId"
+              label-key="labelName"
+              :filter="filter.trim()"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:expanded="expanded"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  @click.stop="updateSelected(prop.node)"
+                  clickable
+                  :active="nodeId == prop.node.orgTreeId"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card
+            bordered
+            style="height: 75vh"
+            class="col-12 col-sm-9 q-pa-sm scroll"
+          >
+            <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
+              <q-space />
+              <div class="items-center" style="display: flex">
+                <q-checkbox
+                  keep-color
+                  v-model="isAll"
+                  label="แสดงทั้งหมด"
+                  color="primary"
+                >
+                  <q-tooltip>แสดงทั้งหมด</q-tooltip>
+                </q-checkbox>
+                <q-input
+                  standout
+                  dense
+                  v-model="filterModal"
+                  ref="filterRef"
+                  outlined
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  class="q-ml-sm"
+                  @keydown.enter="onSearch"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+
+                <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: 140px"
+                  class="gt-xs q-ml-sm"
+                />
+              </div>
+              <div class="col-12">
+                <d-table
+                  :rows="rows"
+                  :columns="columns"
+                  :visible-columns="visibleColumns"
+                  row-key="id"
+                  selection="multiple"
+                  v-model:selected="selectedModal"
+                  :rows-per-page-options="[10, 25, 50, 100]"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th auto-width>
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-th>
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        style="color: #000000; font-weight: 500"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td auto-width>
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" type="submit" @click="onSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>