From 7ee6e5413bbeacd4b9c25ceeeb22f91b61fd3825 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 21 Oct 2024 16:41:13 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=81?=
 =?UTF-8?q?=E0=B8=94=20enter=20tab=203?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Step/3_ReceivedCopy.vue        | 274 +++++++++---------
 1 file changed, 141 insertions(+), 133 deletions(-)

diff --git a/src/modules/18_command/components/Step/3_ReceivedCopy.vue b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
index 4f20c3626..7a4248fb7 100644
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@@ -199,149 +199,157 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <q-card-section>
-      <div class="row q-col-gutter-sm">
-        <div class="col-12 row items-center">
-          <q-btn
-            v-if="!store.readonly"
-            flat
-            round
-            color="primary"
-            @click="modal = true"
-            icon="mdi-plus"
-          >
-            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-          </q-btn>
-          <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"
-              class="q-ml-sm"
-            >
-              <template v-slot:append>
-                <q-icon v-if="filter == ''" name="search" />
-                <q-icon
-                  v-if="filter !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click.prevent="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"
+  <q-card flat>
+    <div class="row items-center q-pt-sm q-mr-sm">
+      <q-btn
+        v-if="!store.readonly"
+        flat
+        round
+        color="primary"
+        @click="modal = true"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ค้นหาข้อความใน table -->
+        <q-input
+          standout
+          dense
+          v-model="filter"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filter == ''" name="search" />
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click.prevent="filter = ''"
             />
-          </div>
-        </div>
-
-        <div class="col-12">
-          <d-table
-            :rows="rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="id"
-          >
-            <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="!store.readonly"
-                    dense
-                    flat
-                    round
-                    color="red"
-                    @click="onDelete(props.row.id)"
-                    icon="mdi-delete"
+          </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>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section class="q-pa-sm">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <d-table
+              :rows="rows"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              :filter="filter"
+              row-key="id"
+            >
+              <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"
                   >
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name === 'send'">
-                    <q-select
-                      :readonly="store.readonly"
-                      :class="store.classInput(!store.readonly)"
-                      hide-bottom-space
-                      multiple
-                      :outlined="true"
+                    <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
-                      v-model="props.row.sendCC"
-                      :rules="[
+                      flat
+                      round
+                      color="red"
+                      @click="onDelete(props.row.id)"
+                      icon="mdi-delete"
+                    >
+                      <q-tooltip>ลบข้อมูล</q-tooltip>
+                    </q-btn>
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'send'">
+                      <q-select
+                        :readonly="store.readonly"
+                        :class="store.classInput(!store.readonly)"
+                        hide-bottom-space
+                        multiple
+                        :outlined="true"
+                        dense
+                        v-model="props.row.sendCC"
+                        :rules="[
                         (val:string) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
                         (val:string) =>
                           val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
                       ]"
-                      :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="optionSelect"
-                      option-value="id"
-                      input-debounce="0"
-                      color="primary"
-                      @update:model-value="onCheckChangeData()"
-                    >
-                      <template v-slot:no-option>
-                        <q-item>
-                          <q-item-section class="text-black">
-                            ไม่พบข้อมูลที่ค้นหา
-                          </q-item-section>
-                        </q-item>
-                      </template>
-                    </q-select>
-                  </div>
-                  <div v-else class="table_ellipsis2">
-                    {{ col.value ?? "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
+                        :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="optionSelect"
+                        option-value="id"
+                        input-debounce="0"
+                        color="primary"
+                        @update:model-value="onCheckChangeData()"
+                      >
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-black">
+                              ไม่พบข้อมูลที่ค้นหา
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </div>
+                    <div v-else class="table_ellipsis2">
+                      {{ col.value ?? "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
         </div>
-      </div>
-    </q-card-section>
+      </q-card-section>
 
-    <q-separator />
+      <q-separator />
 
-    <q-card-actions align="right" v-if="!store.readonly">
-      <q-btn
-        label="บันทึก"
-        type="submit"
-        color="public"
-        :disable="rows.length === 0"
-      />
-    </q-card-actions>
-  </q-form>
+      <q-card-actions align="right" v-if="!store.readonly">
+        <q-btn
+          label="บันทึก"
+          type="submit"
+          color="public"
+          :disable="rows.length === 0"
+        />
+      </q-card-actions>
+    </q-form>
+  </q-card>
 
   <DialogOrgSelectOneStep
     v-model:modal="modal"