โครงสร้างแสดงดาวน์โหลดรายงาน

src/modules/02_organization/components/TreeTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import config from "@/app.config";
@@ -103,7 +103,8 @@ const listMenu = ref<ListMenu[]>([
     color: "deep-purple",
   },
 ]);
-const document = ref<DataDocument[]>([
+
+const baseDocument = ref<DataDocument[]>([
   {
     name: "บัญชี 1",
     val: "report1",
@@ -118,6 +119,14 @@ const document = ref<DataDocument[]>([
   },
 ]);
 
+const document = computed(() => {
+  if (store.typeOrganizational === "draft") {
+    return baseDocument.value;
+  } else {
+    return baseDocument.value.filter((e: DataDocument) => e.val === "report2");
+  }
+});
+
 /** columns*/
 const columns = ref<QTableProps["columns"]>([
   {
@@ -513,14 +522,8 @@ watch(
         </q-btn>
       </div>
 
-      <q-btn
-        v-if="store.typeOrganizational === 'draft'"
-        flat
-        round
-        dense
-        color="deep-purple"
-        icon="save_alt"
-      >
+      <!-- v-if="store.typeOrganizational === 'draft'" -->
+      <q-btn flat round dense color="deep-purple" icon="save_alt">
         <q-menu>
           <q-list
             dense