ปรับ layout โครงสร้างอัตรากำลัง

src/modules/02_organizationalNew/components/DialogMovePos.vue

@@ -126,66 +126,12 @@ watch(
       <q-separator />
 
       <q-card-section class="q-pt-none bg-grey-2 q-pa-md">
-        <div class="row">
-          <q-card
-            class="col-12 col-sm-3 scroll q-pa-sm"
-            style="max-height: 70vh"
-          >
-            <q-input
-              ref="filterRef"
-              dense
-              outlined
-              v-model="filterTree"
-              label="ค้นหา"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterTree !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="resetFilter"
-                />
-              </template>
-            </q-input>
-            <q-tree
-              class="q-pa-md q-gutter-sm"
-              dense
-              default-expand-all
-              selected-color="primary"
-              :nodes="nodeTree"
-              node-key="orgTreeId"
-              label-key="orgTreeName"
-              :filter="filterTree"
-              no-results-label="ไม่พบข้อมูลที่ค้นหา"
-              no-nodes-label="ไม่มีข้อมูล"
-              v-model:selected="selectedTree"
-            >
-              <template v-slot:default-header="prop">
-                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                <div
-                  class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                  @click="updateSelected(prop.node.orgLevel)"
-                >
-                  <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>
-                </div>
-              </template>
-            </q-tree>
-          </q-card>
-
-          <q-card class="col-12 col-sm-9 q-pa-sm">
+        <div class="row q-col-gutter-md">
+          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
             <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
+              >
               <q-space />
 
               <div>
@@ -240,6 +186,70 @@ watch(
               </template>
             </d-table>
           </q-card>
+
+          <q-card
+            bordered
+            class="col-12 col-sm-4 scroll q-pa-sm"
+            style="max-height: 70vh"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="orgTreeName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="selectedTree"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                <div
+                  class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                  @click="updateSelected(prop.node.orgLevel)"
+                >
+                  <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>
+                </div>
+              </template>
+            </q-tree>
+          </q-card>
         </div>
       </q-card-section>
       <q-separator />