From 670f25cb1a25b10c0b6c7f3c59e965b495184e8c Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 19 Apr 2024 15:51:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20layout?=
 =?UTF-8?q?=20=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogMovePos.vue              | 346 +++++++++---------
 .../components/DialogMovePos.vue              | 345 ++++++++---------
 2 files changed, 361 insertions(+), 330 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogMovePos.vue b/src/modules/02_organizationalNew/components/DialogMovePos.vue
index 812c3667f..8335e92cf 100644
--- a/src/modules/02_organizationalNew/components/DialogMovePos.vue
+++ b/src/modules/02_organizationalNew/components/DialogMovePos.vue
@@ -154,176 +154,192 @@ const pagination = ref({
   rowsPerPage: reqMaster.value.pageSize,
 });
 </script>
+
 <template>
   <q-dialog v-model="modal" full-width persistent>
-    <q-card>
-      <HeaderDialog :tittle="title" :close="() => (modal = false)" />
-      <q-separator />
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 90vh"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-      <q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
-        <div class="row">
-          <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>
-                <q-input outlined dense v-model="filterTable" label="ค้นหา" />
-              </div>
-            </q-toolbar>
-
-            <d-table
-              flat
-              bordered
-              :rows="rows"
-              :columns="columns"
-              row-key="id"
-              :filter="filterTable"
-              no-data-label="ไม่มีข้อมูล"
-              selection="multiple"
-              v-model:selected="selectedFilter"
-              :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
-              @update:pagination="updatePagination"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td>
-                    <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'">
-                      {{
-                        (reqMaster.page - 1) * Number(reqMaster.pageSize) +
-                        props.rowIndex +
-                        1
-                      }}
-                    </div>
-
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="reqMaster.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="totalPage"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
-            </d-table>
-          </q-card>
-
-          <q-card
-            bordered
-            class="col-12 col-sm-4 scroll q-pa-sm"
-            style="height: 750px"
-          >
-            <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="labelName"
-              :filter="filterTree"
-              no-results-label="ไม่พบข้อมูลที่ค้นหา"
-              no-nodes-label="ไม่มีข้อมูล"
-            >
-              <template v-slot:default-header="prop">
-                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-
-                <q-item
-                  clickable
-                  :active="selectedTree == prop.node.orgTreeId"
-                  @click.stop="updateSelected(prop.node)"
-                  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"
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div class="row">
+            <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
                 >
-                  <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>
-        </div>
-      </q-card-section>
-      <q-separator />
+                <q-space />
 
-      <q-card-actions align="right">
-        <q-btn
-          unelevated
-          label="ย้ายตำแหน่ง"
-          color="public"
-          @click="onClickMovePos"
-          class="q-px-md"
-          :disable="isDisable"
-        >
-          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
+                <div>
+                  <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+                </div>
+              </q-toolbar>
+
+              <d-table
+                flat
+                bordered
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                :filter="filterTable"
+                no-data-label="ไม่มีข้อมูล"
+                selection="multiple"
+                v-model:selected="selectedFilter"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                v-model:pagination="pagination"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <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'">
+                        {{
+                          (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="totalPage"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </q-card>
+
+            <q-card
+              bordered
+              class="col-12 col-sm-4 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <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="labelName"
+                :filter="filterTree"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+              >
+                <template v-slot:default-header="prop">
+                  <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                  <q-item
+                    clickable
+                    :active="selectedTree == prop.node.orgTreeId"
+                    @click.stop="updateSelected(prop.node)"
+                    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>
+          </div>
+        </q-page>
+      </q-page-container>
+
+      <q-footer>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            unelevated
+            label="ย้ายตำแหน่ง"
+            color="public"
+            @click="onClickMovePos"
+            class="q-px-md"
+            :disable="isDisable"
+          >
+            <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </q-footer>
+    </q-layout>
   </q-dialog>
 </template>
 
diff --git a/src/modules/16_positionEmployee/components/DialogMovePos.vue b/src/modules/16_positionEmployee/components/DialogMovePos.vue
index fd9f28ae4..7795987c7 100644
--- a/src/modules/16_positionEmployee/components/DialogMovePos.vue
+++ b/src/modules/16_positionEmployee/components/DialogMovePos.vue
@@ -153,174 +153,189 @@ watch(
 </script>
 <template>
   <q-dialog v-model="modal" full-width persistent>
-    <q-card>
-      <HeaderDialog :tittle="title" :close="() => (modal = false)" />
-      <q-separator />
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 90vh"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-      <q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
-        <div class="row">
-          <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>
-                <q-input outlined dense v-model="filterTable" label="ค้นหา" />
-              </div>
-            </q-toolbar>
-
-            <d-table
-              flat
-              bordered
-              :rows="rows"
-              :columns="columns"
-              row-key="id"
-              :filter="filterTable"
-              no-data-label="ไม่มีข้อมูล"
-              selection="multiple"
-              v-model:selected="selectedFilter"
-              :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
-              @update:pagination="updatePagination"
-            >
-              <template v-slot:header-selection="scope">
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="scope.selected"
-                />
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td>
-                    <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'">
-                      {{
-                        (reqMaster.page - 1) * Number(reqMaster.pageSize) +
-                        props.rowIndex +
-                        1
-                      }}
-                    </div>
-
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="reqMaster.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="totalPage"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
-            </d-table>
-          </q-card>
-
-          <q-card
-            bordered
-            class="col-12 col-sm-4 scroll q-pa-sm"
-            style="height: 750px"
-          >
-            <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="labelName"
-              :filter="filterTree"
-              no-results-label="ไม่พบข้อมูลที่ค้นหา"
-              no-nodes-label="ไม่มีข้อมูล"
-            >
-              <template v-slot:default-header="prop">
-                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-
-                <q-item
-                  clickable
-                  :active="selectedTree == prop.node.orgTreeId"
-                  @click.stop="updateSelected(prop.node)"
-                  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"
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div class="row">
+            <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
                 >
-                  <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>
-        </div>
-      </q-card-section>
-      <q-separator />
+                <q-space />
 
-      <q-card-actions align="right">
-        <q-btn
-          unelevated
-          label="ย้ายตำแหน่ง"
-          color="public"
-          @click="onClickMovePos"
-          class="q-px-md"
-          :disable="isDisable"
-        >
-          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
+                <div>
+                  <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+                </div>
+              </q-toolbar>
+
+              <d-table
+                flat
+                bordered
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                :filter="filterTable"
+                no-data-label="ไม่มีข้อมูล"
+                selection="multiple"
+                v-model:selected="selectedFilter"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                v-model:pagination="pagination"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <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'">
+                        {{
+                          (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="totalPage"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </q-card>
+
+            <q-card
+              bordered
+              class="col-12 col-sm-4 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <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="labelName"
+                :filter="filterTree"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+              >
+                <template v-slot:default-header="prop">
+                  <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                  <q-item
+                    clickable
+                    :active="selectedTree == prop.node.orgTreeId"
+                    @click.stop="updateSelected(prop.node)"
+                    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>
+          </div>
+        </q-page>
+      </q-page-container>
+
+      <q-footer>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            unelevated
+            label="ย้ายตำแหน่ง"
+            color="public"
+            @click="onClickMovePos"
+            class="q-px-md"
+            :disable="isDisable"
+          >
+            <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </q-footer>
+    </q-layout>
   </q-dialog>
 </template>