วินัย => แสดงรายการทั้งหมด , ตัวชี้วัดตามแผน => ปรับ tree

src/modules/11_discipline/components/8_AppealComplain/MainPage.vue

@@ -34,6 +34,8 @@ const dataRow = ref<RowList[]>([]);
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
+const totalList = ref<number>(0);
+
 const rowsPerPage = ref<number>(10);
 
 /**
@@ -236,6 +238,7 @@ async function getData() {
     )
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = res.data.result.total;
       fetchAppealComplain(res.data.result.data);
     })
     .catch((e) => {
@@ -277,57 +280,57 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row q-mb-sm q-col-gutter-sm">
-        <div>
-          <q-btn
-            id="addComplaints"
-            for="addComplaints"
-            size="12px"
-            flat
-            round
-            color="primary"
-            icon="mdi-plus"
-            @click="redirectToPageadd()"
-            ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
-          >
-        </div>
-        <q-space />
-        <q-input
-          for="#search"
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          placeholder="ค้นหา"
-          @keydown.enter.prevent="filterFn"
+      <div>
+        <q-btn
+          id="addComplaints"
+          for="addComplaints"
+          size="12px"
+          flat
+          round
+          color="primary"
+          icon="mdi-plus"
+          @click="redirectToPageadd()"
+          ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
         >
-          <template v-slot:append>
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
+      </div>
+      <q-space />
+      <q-input
+        for="#search"
+        class="col-xs-12 col-sm-3 col-md-2"
+        standout
+        dense
+        v-model="filterKeyword"
+        ref="filterRef"
+        outlined
+        placeholder="ค้นหา"
+        @keydown.enter.prevent="filterFn"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
 
-        <q-select
-          id="visibleColumns"
-          for="visibleColumns"
-          v-model="dataStore.visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="dataStore.columns"
-          option-value="name"
-          options-cover
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+      <q-select
+        id="visibleColumns"
+        for="visibleColumns"
+        v-model="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
     </div>
     <div class="col-12 row q-mb-sm">
       <q-card bordered class="col-12 filter-card q-pa-sm">
@@ -404,7 +407,6 @@ onMounted(async () => {
               @update:model-value="dataUpdate"
             />
           </div>
-          
         </div>
       </q-card>
     </div>
@@ -425,6 +427,7 @@ onMounted(async () => {
         :rows-per-page-options="[10, 25, 50, 100]"
       >
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="currentPage"
             active-color="primary"
@@ -469,10 +472,10 @@ onMounted(async () => {
                 v-else-if="col.name === 'description'"
                 class="table_ellipsis"
               >
-                {{ props.row.description }}
+                {{ props.row.description ? props.row.description : "-" }}
               </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>