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

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

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+const showData = defineModel<boolean>("showData", { required: true });
 const stroe = useOrganizational();
 const filter = ref<string>("");
 const document = ref<any>([
@@ -20,35 +24,153 @@ const document = ref<any>([
     val: "3",
   },
 ]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "noPosition",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "noPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "namePosition",
+    align: "left",
+    label: "ชื่อตำแหน่ง",
+    field: "namePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "typePosition",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "typePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "levelPositoion",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "levelPositoion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isStatus",
+    align: "left",
+    label: "มีคนครองหรือไม่",
+    sortable: true,
+    field: "isStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([]);
 </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"
+  <!-- TOOLBAR -->
+  <div class="col-12">
+    <q-toolbar 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-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>
+        <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 />
+      <div class="row q-gutter-md">
+        <div>
+          <q-checkbox
+            keep-color
+            v-model="showData"
+            label="แสดงตำแหน่งทั้งหมด"
+            color="primary"
+          />
+        </div>
+        <div><q-input outlined dense v-model="filter" label="ค้นหา" /></div>
+      </div>
+    </q-toolbar>
+  </div>
+
+  <!-- TABLE -->
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :rows-per-page-options="[10, 25, 50, 100]"
+    >
+      <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">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <!-- <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template> -->
+    </d-table>
+  </div>
 </template>
 
 <style scoped></style>