From f258a9fcfeba98b56de23d4151b901e93e3a170e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 6 Oct 2025 11:10:42 +0700
Subject: [PATCH] style(transfer):responsive

---
 .../05_placement/views/02_transferMain.vue    | 279 +++++++++---------
 1 file changed, 147 insertions(+), 132 deletions(-)

diff --git a/src/modules/05_placement/views/02_transferMain.vue b/src/modules/05_placement/views/02_transferMain.vue
index 259d0e0f3..efd36dc90 100644
--- a/src/modules/05_placement/views/02_transferMain.vue
+++ b/src/modules/05_placement/views/02_transferMain.vue
@@ -205,145 +205,160 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="row q-pa-md">
-      <div class="col-12 q-col-gutter-sm">
-        <div class="row">
-          <div class="col-2">
-            <q-select
-              :model-value="status ? status : 'ทั้งหมด'"
-              outlined
-              dense
-              label="สถานะ"
-              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
-              emit-value
-              map-options
-              option-label="name"
-              option-value="id"
-              fill-input
-              use-input
-              hide-selected
-              bg-color="white"
-              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
-              @update:model-value="(value:string)=>{(status = value),fetchData()}"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-              <template v-if="status" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="(status = ''), fetchData()"
-                  class="cursor-pointer"
-                  style="opacity: 0.6"
-                />
-              </template>
-            </q-select>
+  <q-card flat bordered class="col-12">
+    <div class="row q-pa-md q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-xs items-end">
+          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
+            <div class="row q-col-gutter-sm">
+              <div class="col-xs-11 col-sm-7 col-md-7 col-lg-7">
+                <q-select
+                  :model-value="status ? status : 'ทั้งหมด'"
+                  outlined
+                  dense
+                  label="สถานะ"
+                  :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  fill-input
+                  use-input
+                  hide-selected
+                  bg-color="white"
+                  @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+                  @update:model-value="(value:string)=>{(status = value),fetchData()}"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                  <template v-if="status" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="(status = ''), fetchData()"
+                      class="cursor-pointer"
+                      style="opacity: 0.6"
+                    />
+                  </template>
+                </q-select>
+              </div>
+
+              <div class="col-xs-1 col-sm-5 col-md-5 col-lg-5">
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermissionList(['COMMAND']) &&
+                    checkPermissionCreate('COMMAND')
+                  "
+                  @click="openModalOrder"
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-account-arrow-right"
+                >
+                  <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
           </div>
-          <q-btn
-            v-if="
-              checkPermission($route)?.attrIsUpdate &&
-              checkPermissionList(['COMMAND']) &&
-              checkPermissionCreate('COMMAND')
-            "
-            @click="openModalOrder"
-            flat
-            round
-            color="primary"
-            icon="mdi-account-arrow-right"
-          >
-            <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-          </q-btn>
 
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keyup.enter="onSearch"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
+          <div class="col-xs-0 col-sm-1 col-md-3 col-lg-5"></div>
 
-          <q-select
-            class="q-ml-sm"
-            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 class="col-xs-12 col-sm-5 col-md-3 col-lg-4">
+            <div class="row q-col-gutter-sm">
+              <!-- Search Input -->
+              <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7">
+                <q-input
+                  standout
+                  dense
+                  v-model="filter"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keyup.enter="onSearch"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
+                <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>
+            </div>
+          </div>
         </div>
+      </div>
 
-        <div class="col-12">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            row-key="id"
-            :visible-columns="visibleColumns"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td auto-width>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    flat
-                    dense
-                    round
-                    color="info"
-                    icon="mdi-eye"
-                    @click.stop.prevent="
-                      router.push(`/placement/transfer/${props.row.id}`)
-                    "
-                  >
-                    <q-tooltip>รายละเอียด</q-tooltip>
-                  </q-btn>
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div v-if="col.name === 'no'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
+      <div class="col-12">
+        <d-table
+          :columns="columns"
+          :rows="rows"
+          row-key="id"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click.stop.prevent="
+                    router.push(`/placement/transfer/${props.row.id}`)
+                  "
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
 
-                  <div
-                    v-else-if="col.name === 'organizationPositionOld'"
-                    class="text-html"
-                  >
-                    {{ props.row.organizationPositionOld ?? "-" }}
-                  </div>
+                <div
+                  v-else-if="col.name === 'organizationPositionOld'"
+                  class="text-html"
+                >
+                  {{ props.row.organizationPositionOld ?? "-" }}
+                </div>
 
-                  <div v-else>
-                    {{
-                      col.value == null ? "" : col.value == "" ? "-" : col.value
-                    }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
+                <div v-else>
+                  {{
+                    col.value == null ? "" : col.value == "" ? "-" : col.value
+                  }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
       </div>
     </div>
   </q-card>