From 802bd374da013a2e730985ded53da36e310477fc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Aug 2023 11:52:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=84=20Tab=20=E0=B8=9A=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=81=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/07_insignia/views/ResultPage.vue | 331 ++-----------------
 1 file changed, 36 insertions(+), 295 deletions(-)

diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index c7cf4f82c..572138b01 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -213,6 +213,9 @@ const rows = ref<any>([
   // },
 ]);
 watch(tab, () => {
+  console.log(tab.value);
+  console.log(DataStore.insigniaType);
+
   if (tab.value !== "doc") {
     fecthlistInsignia();
   }
@@ -280,6 +283,7 @@ const uploadFile = async (event: any, action: string) => {
         })
         .catch((err) => {
           console.log(err);
+          messageError($q, err);
         })
         .finally(async () => {
           await fecthlistInsignia();
@@ -295,6 +299,7 @@ const uploadFile = async (event: any, action: string) => {
         })
         .catch((err) => {
           console.log(err);
+          messageError($q, err);
         })
         .finally(async () => {
           await fecthlistInsignia();
@@ -374,18 +379,18 @@ const resetFilter = () => {
       <div v-for="item in DataStore.insigniaType">
         <q-tab :name="item.name" :label="item.label" />
       </div>
-      <!-- <q-tab name="hight" label="ขั้นสายสะพาน" />
-      <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
-      <q-tab name="medal" label="เหรียญตรา" /> -->
 
       <q-tab name="doc" label="เอกสารอ้างอิง" />
     </q-tabs>
-
     <q-separator />
-
-    <div>
-      <div v-for="item in DataStore.insigniaType">
-        <div v-if="tab == item.name" class="q-pa-md">
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="item in DataStore.insigniaType"
+        :key="item.name"
+        :name="item.name"
+        class="q-pa-none"
+      >
+        <div class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
             <div>
               <q-select
@@ -438,25 +443,25 @@ const resetFilter = () => {
               </q-file>
 
               <!-- <q-btn flat round color="light-blue" icon="upload">
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section
-                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
-                      >
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn> -->
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="green-7" name="mdi-file-excel"
+                  /></q-item-section>
+                  <q-item-section
+                    >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
+                  >
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="green-7" name="mdi-file-excel"
+                  /></q-item-section>
+                  <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn> -->
             </div>
             <div v-if="fileResult !== null">
               <q-btn
@@ -543,7 +548,6 @@ const resetFilter = () => {
               />
             </div>
           </div>
-
           <d-table
             :rows="rows"
             :columns="columns"
@@ -578,274 +582,11 @@ const resetFilter = () => {
             </template>
           </d-table>
         </div>
-
-        <div v-else-if="tab == item.name" class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <selector
-              outlined
-              dense
-              lazy-rules
-              v-model="DataStore.insignia"
-              hide-bottom-space
-              :label="`${'เครื่องราชฯ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="DataStore.insigniaOp"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              style="min-width: 150px"
-            />
-            <div>
-              <q-btn
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </div>
-            <div>
-              <q-btn flat round color="light-blue" icon="upload">
-                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section
-                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
-                      >
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
-
-            <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="resetFilter"
-                  />
-                </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>
-
-          <d-table
-            :rows="rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-          >
-            <template v-slot:body-cell="props">
-              <q-td :props="props">
-                <div v-if="props.col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-
-                <div v-else-if="props.col.name == 'action'">
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="primary"
-                    @click="editData(props.row)"
-                    icon="mdi-pencil-outline"
-                  >
-                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
-                </div>
-
-                <div v-else>
-                  {{ props.value }}
-                </div>
-              </q-td>
-            </template>
-          </d-table>
-        </div>
-
-        <div v-else-if="tab == item.name" class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <selector
-              outlined
-              dense
-              lazy-rules
-              v-model="DataStore.insignia"
-              hide-bottom-space
-              :label="`${'เครื่องราชฯ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="DataStore.insigniaOp"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              style="min-width: 150px"
-            />
-            <div>
-              <q-btn
-                @click="addData()"
-                size="12px"
-                flat
-                round
-                color="add"
-                icon="mdi-plus"
-              >
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </div>
-            <div>
-              <q-btn flat round color="light-blue" icon="upload">
-                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section
-                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
-                      >
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
-            <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="resetFilter"
-                  />
-                </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>
-
-          <d-table
-            :rows="rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-          >
-            <template v-slot:body-cell="props">
-              <q-td :props="props">
-                <div v-if="props.col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-
-                <div v-else-if="props.col.name == 'action'">
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="primary"
-                    @click="editData(props.row)"
-                    icon="mdi-pencil-outline"
-                  >
-                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
-                </div>
-
-                <div v-else>
-                  {{ props.value }}
-                </div>
-              </q-td>
-            </template>
-          </d-table>
-        </div>
-      </div>
-      <div v-if="tab == 'doc'">
+      </q-tab-panel>
+      <q-tab-panel name="doc" class="q-pa-none">
         <fileUploadview :roundId="selectRound" />
-      </div>
-    </div>
+      </q-tab-panel>
+    </q-tab-panels>
 
     <DialogForm
       :modal="modal"