From 16a9ad6a1d7314f7e1226d89ee8150d6e8b0be4b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 20 Dec 2024 13:25:39 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=3D=3D=20>=20=E0=B8=A3=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A9=E0=B8=B2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/17_acting/views/main.vue | 426 ++++++++++++++-------------
 1 file changed, 216 insertions(+), 210 deletions(-)

diff --git a/src/modules/17_acting/views/main.vue b/src/modules/17_acting/views/main.vue
index ef3ba3fcf..bbf8ecc1f 100644
--- a/src/modules/17_acting/views/main.vue
+++ b/src/modules/17_acting/views/main.vue
@@ -406,103 +406,105 @@ onMounted(() => {
       <!-- รายชื่อ -->
       <q-card-section
         v-if="posmasterId"
-        class="col-lg-9 col-md-8 col-xs-12 scroll"
+        class="col-lg-9 col-md-8 col-xs-12"
         style="height: 80vh"
       >
         <LoadView v-if="isLaod" />
-        <div class="column q-col-gutter-sm" v-else>
+        <div class="column q-col-gutter-sm" style="height: 80vh" v-else>
           <div class="col">
             <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
               <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                 รายชื่อ
               </div>
               <div class="col-12"><q-separator /></div>
-              <div class="row q-pa-md">
-                <div class="col-12">
-                  <q-toolbar style="padding: 0">
-                    <q-space />
-                    <div class="row q-gutter-md">
-                      <div>
-                        <q-checkbox
-                          @update:model-value="updateIsAll"
-                          keep-color
-                          v-model="isAll"
-                          label="แสดงตำแหน่งทั้งหมด"
-                          color="primary"
-                        >
-                          <q-tooltip>แสดงตำแหน่งทั้งหมด</q-tooltip>
-                        </q-checkbox>
+              <q-scroll-area style="height: 85%">
+                <div class="row q-pa-md">
+                  <div class="col-12">
+                    <q-toolbar style="padding: 0">
+                      <q-space />
+                      <div class="row q-gutter-md">
+                        <div>
+                          <q-checkbox
+                            @update:model-value="updateIsAll"
+                            keep-color
+                            v-model="isAll"
+                            label="แสดงตำแหน่งทั้งหมด"
+                            color="primary"
+                          >
+                            <q-tooltip>แสดงตำแหน่งทั้งหมด</q-tooltip>
+                          </q-checkbox>
+                        </div>
+                        <div>
+                          <q-input
+                            outlined
+                            dense
+                            v-model="keyword"
+                            label="ค้นหา"
+                            @keydown.enter="onSearchRowPosition"
+                          >
+                            <template v-slot:append>
+                              <q-icon name="search" color="grey-5" />
+                            </template>
+                          </q-input>
+                        </div>
                       </div>
-                      <div>
-                        <q-input
-                          outlined
-                          dense
-                          v-model="keyword"
-                          label="ค้นหา"
-                          @keydown.enter="onSearchRowPosition"
-                        >
-                          <template v-slot:append>
-                            <q-icon name="search" color="grey-5" />
-                          </template>
-                        </q-input>
-                      </div>
-                    </div>
-                  </q-toolbar>
-                </div>
-                <div class="col-12">
-                  <d-table
-                    ref="table"
-                    :columns="columns"
-                    :rows="rowPosition"
-                    :paging="true"
-                    row-key="id"
-                    flat
-                    bordered
-                    dense
-                    :rows-per-page-options="[10, 25, 50, 100]"
-                  >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
+                    </q-toolbar>
+                  </div>
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rowPosition"
+                      :paging="true"
+                      row-key="id"
+                      flat
+                      bordered
+                      dense
+                      :rows-per-page-options="[10, 25, 50, 100]"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <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"
-                        >
-                          <span class="text-weight-medium">{{
-                            col.label
-                          }}</span>
-                        </q-th>
-                      </q-tr>
-                    </template>
-                    <template v-slot:body="props">
-                      <q-tr
-                        :props="props"
-                        :class="
-                          checkPermission($route)?.attrIsUpdate &&
-                          'cursor-pointer'
-                        "
-                      >
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                          @click="
+                          :class="
                             checkPermission($route)?.attrIsUpdate &&
-                              selectPosition(props.row)
+                            'cursor-pointer'
                           "
                         >
-                          <div v-if="col.name === 'no'">
-                            {{ props.rowIndex + 1 }}
-                          </div>
-                          <div v-else>
-                            {{ col.value ? col.value : "-" }}
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            @click="
+                              checkPermission($route)?.attrIsUpdate &&
+                                selectPosition(props.row)
+                            "
+                          >
+                            <div v-if="col.name === 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else>
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
                 </div>
-              </div>
+              </q-scroll-area>
             </q-card>
           </div>
           <div class="col">
@@ -512,140 +514,144 @@ onMounted(() => {
               </div>
 
               <div class="col-12"><q-separator /></div>
-              <div class="row q-pa-md">
-                <div class="col-12">
-                  <q-toolbar style="padding: 0">
-                    <q-space />
-                    <div class="row q-gutter-md">
-                      <div>
-                        <q-input
-                          outlined
-                          dense
-                          v-model="keywordAct"
-                          label="ค้นหา"
-                          @keydown.enter="onSearchListPerson"
-                        >
-                          <template v-slot:append>
-                            <q-icon name="search" color="grey-5" />
-                          </template>
-                        </q-input>
+              <q-scroll-area style="height: 85%">
+                <div class="row q-pa-md">
+                  <div class="col-12">
+                    <q-toolbar style="padding: 0">
+                      <q-space />
+                      <div class="row q-gutter-md">
+                        <div>
+                          <q-input
+                            outlined
+                            dense
+                            v-model="keywordAct"
+                            label="ค้นหา"
+                            @keydown.enter="onSearchListPerson"
+                          >
+                            <template v-slot:append>
+                              <q-icon name="search" color="grey-5" />
+                            </template>
+                          </q-input>
+                        </div>
                       </div>
-                    </div>
-                  </q-toolbar>
-                </div>
-                <div class="col-12">
-                  <d-table
-                    ref="table"
-                    :columns="columns"
-                    :rows="rowListPerson"
-                    :paging="true"
-                    row-key="id"
-                    flat
-                    bordered
-                    dense
-                    :rows-per-page-options="[10, 25, 50, 100]"
-                  >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <q-th
-                          auto-width
-                          v-if="
-                            rowListPerson.length !== 1 &&
-                            checkPermission($route)?.attrIsUpdate
-                          "
-                        />
-                        <q-th
-                          auto-width
-                          v-if="
-                            rowListPerson.length !== 1 &&
-                            checkPermission($route)?.attrIsUpdate
-                          "
-                        />
-                        <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
-                          v-if="
-                            rowListPerson.length !== 1 &&
-                            checkPermission($route)?.attrIsUpdate
-                          "
-                        >
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                            :disable="props.rowIndex + 1 == 1"
-                            icon="mdi-arrow-up-bold"
-                            @click="onSwapPerson('up', props.row.id)"
-                          >
-                          </q-btn>
-                        </q-td>
-                        <q-td
-                          auto-width
-                          v-if="
-                            rowListPerson.length !== 1 &&
-                            checkPermission($route)?.attrIsUpdate
-                          "
-                        >
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            :color="
-                              rowListPerson.length == props.rowIndex + 1
-                                ? 'grey'
-                                : 'red'
+                    </q-toolbar>
+                  </div>
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rowListPerson"
+                      :paging="true"
+                      row-key="id"
+                      flat
+                      bordered
+                      dense
+                      :rows-per-page-options="[10, 25, 50, 100]"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th
+                            auto-width
+                            v-if="
+                              rowListPerson.length !== 1 &&
+                              checkPermission($route)?.attrIsUpdate
                             "
-                            :disable="
-                              rowListPerson.length == props.rowIndex + 1
+                          />
+                          <q-th
+                            auto-width
+                            v-if="
+                              rowListPerson.length !== 1 &&
+                              checkPermission($route)?.attrIsUpdate
                             "
-                            icon="mdi-arrow-down-bold"
-                            @click="onSwapPerson('down', props.row.id)"
+                          />
+                          <q-th auto-width />
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
                           >
-                          </q-btn>
-                        </q-td>
-                        <q-td auto-width>
-                          <q-btn
-                            v-if="checkPermission($route)?.attrIsDelete"
-                            dense
-                            flat
-                            round
-                            color="red"
-                            icon="delete"
-                            @click="onDelete(props.row.id)"
+                            <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
+                            v-if="
+                              rowListPerson.length !== 1 &&
+                              checkPermission($route)?.attrIsUpdate
+                            "
                           >
-                          </q-btn>
-                        </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 ? col.value : "-" }}
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              :color="
+                                props.rowIndex + 1 == 1 ? 'grey' : 'green'
+                              "
+                              :disable="props.rowIndex + 1 == 1"
+                              icon="mdi-arrow-up-bold"
+                              @click="onSwapPerson('up', props.row.id)"
+                            >
+                            </q-btn>
+                          </q-td>
+                          <q-td
+                            auto-width
+                            v-if="
+                              rowListPerson.length !== 1 &&
+                              checkPermission($route)?.attrIsUpdate
+                            "
+                          >
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              :color="
+                                rowListPerson.length == props.rowIndex + 1
+                                  ? 'grey'
+                                  : 'red'
+                              "
+                              :disable="
+                                rowListPerson.length == props.rowIndex + 1
+                              "
+                              icon="mdi-arrow-down-bold"
+                              @click="onSwapPerson('down', props.row.id)"
+                            >
+                            </q-btn>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              v-if="checkPermission($route)?.attrIsDelete"
+                              dense
+                              flat
+                              round
+                              color="red"
+                              icon="delete"
+                              @click="onDelete(props.row.id)"
+                            >
+                            </q-btn>
+                          </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 ? col.value : "-" }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
                 </div>
-              </div>
+              </q-scroll-area>
             </q-card>
           </div>
         </div>