รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด

src/modules/15_development/views/MainPage.vue

@@ -47,6 +47,27 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["year", "name", "org"]);
 
+const itemDownload = ref<any>([
+  {
+    label: "ดาวน์โหลด 1",
+    value: "",
+    icon: "mdi-file-pdf-box",
+    color: "green",
+  },
+  {
+    label: "ดาวน์โหลด 2",
+    value: "",
+    icon: "mdi-file-table",
+    color: "red",
+  },
+  {
+    label: "ดาวน์โหลด 3",
+    value: "",
+    icon: "mdi-file-word",
+    color: "blue",
+  },
+]);
+
 function fetchListProject() {
   showLoader();
   const data = [
@@ -115,11 +136,33 @@ onMounted(() => {
           </q-input>
         </template>
       </datepicker>
-      <q-btn flat round dense icon="add" color="primary" @click="onClickAddOrView()">
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="onClickAddOrView()"
+      >
         <q-tooltip>เพิ่ม</q-tooltip>
       </q-btn>
       <q-space />
       <div class="row q-gutter-sm">
+        <q-btn flat round color="primary" icon="mdi-download-outline">
+          <q-menu>
+            <q-list style="min-width: 100px" dense>
+              <q-item clickable v-close-popup v-for="items in itemDownload">
+                <q-item-section avatar>
+                  <q-icon :color="items.color" :name="items.icon" />
+                </q-item-section>
+                <q-item-section :class="`text-${items.color}`">{{
+                  items.label
+                }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+
         <q-input
           standout
           dense