โครงสร้าอัตรากำลัง

src/modules/02_organizationalNew/components/tableTree.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importStore*/
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const stroe = useOrganizational();
+const filter = ref<string>("");
+const document = ref<any>([
+  {
+    name: "บัญชี 1",
+    val: "1",
+  },
+  {
+    name: "บัญชี 2",
+    val: "2",
+  },
+  {
+    name: "บัญชี 3",
+    val: "3",
+  },
+]);
+</script>
+<template>
+  <q-toolbar class="text" style="padding: 0">
+    <div v-if="stroe.typeOrganizational === 'draft'">
+      <q-btn flat round dense color="primary" icon="add">
+        <q-tooltip>เพิ่ม</q-tooltip></q-btn
+      >
+      <q-btn flat round dense color="blue" icon="filter_list">
+        <q-tooltip>ค้นหา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <q-btn flat round dense color="blue-10" icon="save_alt">
+      <q-menu>
+        <q-list
+          style="min-width: 100px"
+          v-for="(item, index) in document"
+          :key="index"
+        >
+          <q-item clickable v-close-popup>
+            <q-item-section>{{ item.name }}</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+      <q-tooltip>ดาวน์โหลด</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input outlined dense v-model="filter" label="ค้นหา" />
+  </q-toolbar>
+</template>
+
+<style scoped></style>