From 6552c214c7ffca0a120bb58b4a91614a71c097eb Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 8 Jan 2025 11:25:15 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20layout?=
 =?UTF-8?q?=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../position-employee/01_PositionMain.vue     | 120 +++++++++---------
 .../components/position/01_Position.vue       | 118 +++++++++--------
 2 files changed, 126 insertions(+), 112 deletions(-)

diff --git a/src/modules/01_metadata/components/position-employee/01_PositionMain.vue b/src/modules/01_metadata/components/position-employee/01_PositionMain.vue
index a6db9764..bc2cb067 100644
--- a/src/modules/01_metadata/components/position-employee/01_PositionMain.vue
+++ b/src/modules/01_metadata/components/position-employee/01_PositionMain.vue
@@ -321,68 +321,74 @@ onMounted(async () => {
       >
     </div>
 
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div class="col-xs-12 col-md-2">
-        <q-select
-          label="ค้นหาจาก"
-          v-model="formQuery.type"
-          :options="optionFilter"
-          emit-value
-          dense
-          map-options
-          outlined
-          option-label="name"
-          option-value="id"
-        />
-      </div>
+    <div class="row col-12 q-col-gutter-sm">
+      <div class="row q-col-gutter-sm align-items-center">
+        <div class="col-auto">
+          <q-select
+            label="ค้นหาจาก"
+            v-model="formQuery.type"
+            :options="optionFilter"
+            emit-value
+            dense
+            map-options
+            outlined
+            option-label="name"
+            option-value="id"
+          />
+        </div>
 
-      <div class="col-xs-12 col-md-3">
-        <q-input
-          ref="searchRef"
-          v-model="formQuery.keyword"
-          outlined
-          dense
-          lazy-rules
-          label="คำค้น"
-          hide-bottom-space
-          @keydown.enter="fetchData()"
-        >
-          <template v-slot:append>
-            <q-icon
-              v-if="formQuery.keyword"
-              name="cancel"
-              @click="formQuery.keyword = ''"
-              class="cursor-pointer"
-            ></q-icon>
-          </template>
-        </q-input>
-      </div>
+        <div class="col">
+          <q-input
+            ref="searchRef"
+            v-model="formQuery.keyword"
+            outlined
+            dense
+            lazy-rules
+            label="คำค้น"
+            hide-bottom-space
+            @keydown.enter="fetchData()"
+            style="min-width: 300px"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="formQuery.keyword"
+                name="cancel"
+                @click="formQuery.keyword = ''"
+                class="cursor-pointer"
+              ></q-icon>
+            </template>
+          </q-input>
+        </div>
 
-      <div class="col-xs-12 col-md-1">
-        <q-btn
-          outline
-          color="primary"
-          icon="search"
-          label="ค้นหา"
-          class="full-width full-height"
-          @click="fetchData()"
-        />
+        <div class="col-auto">
+          <q-btn
+            outline
+            color="primary"
+            icon="search"
+            label="ค้นหา"
+            class="full-width full-height"
+            @click="fetchData()"
+          />
+        </div>
       </div>
 
       <q-space />
-      <div class="col-xs-12 col-md-1">
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-        />
+      <div class="row q-col-gutter-sm align-items-center">
+        <div class="col-auto">
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/modules/01_metadata/components/position/01_Position.vue b/src/modules/01_metadata/components/position/01_Position.vue
index ca21e23f..2deb43b5 100644
--- a/src/modules/01_metadata/components/position/01_Position.vue
+++ b/src/modules/01_metadata/components/position/01_Position.vue
@@ -309,63 +309,71 @@ onMounted(async () => {
           ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
         >
       </div>
-      <div class="row col-12 q-col-gutter-sm q-mb-sm">
-        <div class="col-xs-12 col-md-2">
-          <q-select
-            label="ค้นหาจาก"
-            v-model="type"
-            :options="optionFilter"
-            emit-value
-            dense
-            map-options
-            outlined
-            option-label="name"
-            option-value="id"
-          />
-        </div>
-        <div class="col-xs-12 col-md-3">
-          <q-input
-            v-model="search"
-            outlined
-            dense
-            lazy-rules
-            label="คำค้น"
-            hide-bottom-space
-          >
-            <template v-slot:append>
-              <q-icon
-                v-if="search"
-                name="cancel"
-                @click="search = ''"
-                class="cursor-pointer"
-              ></q-icon>
-            </template>
-          </q-input>
-        </div>
-        <div class="col-xs-12 col-md-1">
-          <q-btn
-            outline
-            class="full-width full-height"
-            color="primary"
-            icon="search"
-            label="ค้นหา"
-            type="submit"
-          />
+      <div class="row col-12 q-col-gutter-sm">
+        <div class="row q-col-gutter-sm align-items-center">
+          <div class="col-auto">
+            <q-select
+              label="ค้นหาจาก"
+              v-model="type"
+              :options="optionFilter"
+              emit-value
+              dense
+              map-options
+              outlined
+              option-label="name"
+              option-value="id"
+            />
+          </div>
+          <div class="col">
+            <q-input
+              v-model="search"
+              outlined
+              dense
+              lazy-rules
+              label="คำค้น"
+              hide-bottom-space
+              style="min-width: 300px"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="search"
+                  name="cancel"
+                  @click="search = ''"
+                  class="cursor-pointer"
+                ></q-icon>
+              </template>
+            </q-input>
+          </div>
+
+          <div class="col-auto">
+            <q-btn
+              outline
+              color="primary"
+              icon="search"
+              label="ค้นหา"
+              type="submit"
+              class="full-width full-height"
+            />
+          </div>
         </div>
+
         <q-space />
-        <div class="col-xs-12 col-md-1">
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-          />
+        <div class="row q-col-gutter-sm align-items-center">
+          <div class="col-auto">
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
         </div>
       </div>
     </div>