แก้ไข ui เพิ่ม funciton// รอบการปฏิบัติงาน

src/components/PopupCheckFeatures.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "ตรวจสอบคุณสมบัติ",
+  },
+  desc: {
+    type: String,
+    default: "",
+  },
+  clickClose: {
+    type: Function,
+  },
+  type: {
+    type: String,
+    default: "Expert",
+  },
+});
+
+const attrs = ref<any>(useAttrs());
+const currentPage = ref<number>(1);
+const pageSize = ref<number>(10);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const filter = ref<string>("");
+const rowsPerPage = ref<number>(10);
+
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "degree",
+    align: "center",
+    label: "คุณวุฒิ",
+    sortable: false,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Expert",
+    align: "center",
+    label: "ชำนาญการ",
+    sortable: false,
+    field: "Expert",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<String[]>(["degree", "level", "Expert"]);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 35vw; max-width: 35vw">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filter"
+        row-key="interrogated"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        v-bind="attrs"
+        :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <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-th auto-width></q-th> -->
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td auto-width>
+              <q-icon
+                v-if="props.row.isDefault === true"
+                name="mdi-bookmark"
+                size="xs"
+                color="primary"
+              >
+                <q-tooltip>เวลา Default</q-tooltip>
+              </q-icon>
+            </q-td>
+            <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>
+    </q-card>
+  </q-dialog>
+</template>