From b14834c1d55fe55afe563be281e2c9e89f12c724 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 25 Sep 2024 10:41:05 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20Tab3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Step/2_ListPersons.vue         | 370 ++++++++++--------
 src/modules/18_command/views/detail.vue       |  22 +-
 2 files changed, 208 insertions(+), 184 deletions(-)

diff --git a/src/modules/18_command/components/Step/2_ListPersons.vue b/src/modules/18_command/components/Step/2_ListPersons.vue
index dbaf6909c..e538c38d5 100644
--- a/src/modules/18_command/components/Step/2_ListPersons.vue
+++ b/src/modules/18_command/components/Step/2_ListPersons.vue
@@ -147,195 +147,217 @@ function getCommandSalaryList(type: string) {
 
 function onSubmit() {}
 
+onMounted(() => {
+  if (props.commandSysId) {
+    getCommandSalaryList(props.commandSysId);
+  }
+});
+
 /**
  * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
  */
 defineExpose({
   onSubmit,
 });
-
-onMounted(() => {
-  if (props.commandSysId) {
-    getCommandSalaryList(props.commandSysId);
-  }
-});
 </script>
 
 <template>
-  <q-card-section>
-    <div class="row q-col-gutter-sm">
-      <div class="col-12">
-        <q-select
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          lazy-rules
-          borderless
-          clearable
-          v-model="templatePos"
-          :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
-          option-label="name"
-          :options="ListCommandSalary"
-          option-value="name"
-          hide-bottom-space
-          emit-value
-          use-input
-          input-debounce="0"
-          @update:modelValue="updatePos"
-          @filter="(inputValue: any,
-            doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
-            )"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="position"
-          hide-bottom-space
-          :label="`${'ตำแหน่ง'}`"
-          type="textarea"
-        />
-      </div>
-
-      <div class="col-12 row q-pb-sm items-center">
-        <q-space />
-
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
+  <div class="q-col-gutter-sm">
+    <div class="col">
+      <q-card>
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-select
+                :class="store.classInput(!store.readonly)"
+                :readonly="store.readonly"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                clearable
+                v-model="templatePos"
+                :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                option-label="name"
+                :options="ListCommandSalary"
+                option-value="name"
+                hide-bottom-space
+                emit-value
+                use-input
+                input-debounce="0"
+                @update:modelValue="updatePos"
+                @filter="(inputValue: any,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                  )"
               />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-      </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="store.classInput(!store.readonly)"
+                :readonly="store.readonly"
+                outlined
+                dense
+                v-model="position"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
 
-      <div class="col-12">
-        <d-table
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :filter="filter"
-          row-key="name"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th auto-width />
-              <q-th auto-width />
-              <q-th auto-width />
-              <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="!store.readonly"
-                  dense
-                  flat
-                  round
-                  :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                  :disable="props.rowIndex + 1 == 1"
-                  @click="onSawpPos(props, 'up')"
-                  icon="mdi-arrow-up-bold"
-                >
-                  <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  v-if="!store.readonly"
-                  dense
-                  flat
-                  round
-                  :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                  :disable="rows.length == props.rowIndex + 1"
-                  @click="onSawpPos(props, 'down')"
-                  icon="mdi-arrow-down-bold"
-                >
-                  <q-tooltip>เลื่อนลำดับลง</q-tooltip>
-                </q-btn>
-              </q-td>
-              <!-- v-if="statuscode !== true" -->
-              <q-td auto-width>
-                <q-btn
-                  v-if="!store.readonly"
-                  dense
-                  flat
-                  round
-                  color="blue"
-                  @click="selectModal(props.row)"
-                  icon="mdi-cash-multiple"
-                >
-                  <q-tooltip>เงินเดือน</q-tooltip>
-                </q-btn>
-              </q-td>
+        <q-separator />
 
-              <q-td auto-width>
-                <q-btn
-                  v-if="!store.readonly"
-                  dense
-                  flat
-                  round
-                  color="red"
-                  @click="onDelete(props.row.personalId)"
-                  icon="mdi-delete"
-                >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                {{ col.value ?? "-" }}
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </div>
+        <q-card-actions align="right" v-if="!store.readonly">
+          <q-btn label="บันทึก" color="public" />
+        </q-card-actions>
+      </q-card>
     </div>
-  </q-card-section>
+    <div class="col">
+      <q-card>
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 row q-pb-sm items-center">
+              <q-space />
 
-  <q-separator />
+              <div class="items-center" style="display: flex">
+                <!-- ค้นหาข้อความใน table -->
+                <q-input
+                  standout
+                  dense
+                  v-model="filter"
+                  ref="filterRef"
+                  outlined
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  style="max-width: 200px"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="filter == ''" name="search" />
+                    <q-icon
+                      v-if="filter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    />
+                  </template>
+                </q-input>
+                <!-- แสดงคอลัมน์ใน table -->
+                <q-select
+                  v-model="visibleColumns"
+                  :display-value="$q.lang.table.columns"
+                  multiple
+                  outlined
+                  dense
+                  :options="columns"
+                  options-dense
+                  option-value="name"
+                  map-options
+                  emit-value
+                  style="min-width: 150px"
+                  class="gt-xs q-ml-sm"
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <d-table
+                :rows="rows"
+                :columns="columns"
+                :visible-columns="visibleColumns"
+                :filter="filter"
+                row-key="name"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width />
+                    <q-th auto-width />
+                    <q-th auto-width />
+                    <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="!store.readonly"
+                        dense
+                        flat
+                        round
+                        :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                        :disable="props.rowIndex + 1 == 1"
+                        @click="onSawpPos(props, 'up')"
+                        icon="mdi-arrow-up-bold"
+                      >
+                        <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                    <q-td auto-width>
+                      <q-btn
+                        v-if="!store.readonly"
+                        dense
+                        flat
+                        round
+                        :color="
+                          rows.length == props.rowIndex + 1 ? 'grey' : 'red'
+                        "
+                        :disable="rows.length == props.rowIndex + 1"
+                        @click="onSawpPos(props, 'down')"
+                        icon="mdi-arrow-down-bold"
+                      >
+                        <q-tooltip>เลื่อนลำดับลง</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                    <!-- v-if="statuscode !== true" -->
+                    <q-td auto-width>
+                      <q-btn
+                        v-if="!store.readonly"
+                        dense
+                        flat
+                        round
+                        color="blue"
+                        @click="selectModal(props.row)"
+                        icon="mdi-cash-multiple"
+                      >
+                        <q-tooltip>เงินเดือน</q-tooltip>
+                      </q-btn>
+                    </q-td>
 
-  <q-card-actions align="right" v-if="!store.readonly">
-    <q-btn label="บันทึก" color="public" />
-  </q-card-actions>
+                    <q-td auto-width>
+                      <q-btn
+                        v-if="!store.readonly"
+                        dense
+                        flat
+                        round
+                        color="red"
+                        @click="onDelete(props.row.personalId)"
+                        icon="mdi-delete"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      {{ col.value ?? "-" }}
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
 
   <DialogAddPerson v-model:modal="modalPerson" />
   <DialogSalary v-model:modal="modalSalary" :title-name="titleName" />
diff --git a/src/modules/18_command/views/detail.vue b/src/modules/18_command/views/detail.vue
index e5d445fea..ac0f7837c 100644
--- a/src/modules/18_command/views/detail.vue
+++ b/src/modules/18_command/views/detail.vue
@@ -190,16 +190,18 @@ onMounted(async () => {
           </q-card>
         </q-tab-panel>
 
-        <q-tab-panel style="padding: 0px" name="ListPersons">
-          <q-card>
-            <ListPersons
-              ref="childListPersonsRef"
-              v-model:is-change-data="isChangeData"
-              :on-check-change-data="onCheckChangeData"
-              :command-sys-id="formCommandList.commandSysId as string"
-              :fetch-data-command-list="fetchDataCommandList"
-            />
-          </q-card>
+        <q-tab-panel
+        class="bg-grey-2"
+          style="padding: 0px;"
+          name="ListPersons"
+        >
+          <ListPersons
+            ref="childListPersonsRef"
+            v-model:is-change-data="isChangeData"
+            :on-check-change-data="onCheckChangeData"
+            :fetch-data-command-list="fetchDataCommandList"
+            :command-sys-id="formCommandList?.commandSysId as string"
+          />
         </q-tab-panel>
 
         <q-tab-panel style="padding: 0px" name="ReceivedCopy">