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

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

@@ -1,12 +1,199 @@
 <script setup lang="ts">
-import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
+/** importStore*/
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+
 /** use*/
+const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const router = useRouter();
+const { showLoader, hideLoader } = useCounterMixin();
+
+/** หัวตาราง */
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบ",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["year", "name", "org"]);
+
+function fetchListProject() {
+  showLoader();
+  const data = [
+    {
+      id: "1",
+      year: 2567,
+      name: "โครงการฝึกอบรมสำนักงานข้าราชการ",
+      org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
+    },
+    {
+      id: "2",
+      year: 2567,
+      name: "โครงการฝึกอบรม",
+      org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
+    },
+  ];
+  rows.value = data;
+  setTimeout(() => {
+    hideLoader();
+  }, 500);
+}
+
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  status ? router.push(`development/${id}`) : router.push("development/add");
+}
+
+onMounted(() => {
+  fetchListProject();
+});
 </script>
 
-<template>development Page</template>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formFilter.year"
+        :locale="'th'"
+        autoApply
+        year-picker
+        :enableTimePicker="false"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            lazy-rules
+            outlined
+            :model-value="Number(store.formFilter.year) + 543"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+      <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-input
+          standout
+          dense
+          v-model="store.formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="store.formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="store.formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="store.formFilter.keyword = ''"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="onClickAddOrView(true, props.row.id)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
 
 <style scoped></style>