Popup โครงสร้างอัตรากำลังใหม่

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

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const rows = ref<any[]>([]);
+
+
+const columns = ref<QTableProps["columns"]>([
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      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: "lastUpdatedAt",
+      align: "left",
+      label: "วันที่แก้ไข",
+      sortable: true,
+      field: "lastUpdatedAt",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+
+  ]);
+  const visibleColumns = ref<string[]>([
+    "no",
+    "name",
+    "lastUpdatedAt",
+  ]);
+
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 40vw">
+          <DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-12">
+                <d-table
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="idcard"
+                  flat
+                  bordered
+                  :paging="true"
+                  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"
+                        style="color: #000000; font-weight: 500"
+                      >
+                        <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>
+                </d-table>
+              </div>
+            </div>
+          </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>