สร้าง component ตรวจสอบคุณสมบัติ

src/components/PopupCheckFeatures.vue

@@ -18,6 +18,7 @@ const props = defineProps({
   },
   clickClose: {
     type: Function,
+    default: () => {},
   },
   type: {
     type: String,
@@ -46,7 +47,7 @@ const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "degree",
-    align: "center",
+    align: "left",
     label: "คุณวุฒิ",
     sortable: false,
     field: "degree",
@@ -55,7 +56,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "level",
-    align: "left",
+    align: "center",
     label: "ระดับ",
     sortable: true,
     field: "level",
@@ -76,63 +77,137 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const visibleColumns = ref<String[]>(["degree", "level", "Expert"]);
+const columnsSpecial = ref<QTableProps["columns"]>([
+  {
+    name: "degree",
+    align: "left",
+    label: "คุณวุฒิ",
+    sortable: false,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "center",
+    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: "Special",
+    align: "center",
+    label: "ชำนาญการพิเศษ",
+    sortable: false,
+    field: "Special",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumnsSpecial = ref<String[]>(["degree", "level", "Special"]);
 </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-card style="width: 35vw; max-width: 35vw" v-if="props.type === 'EXPERT'">
+      <DialogHeader :tittle="props.title" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <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"
               >
-                <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>
+                <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 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-section>
+    </q-card>
+    <q-card style="width: 35vw; max-width: 35vw" v-else>
+      <DialogHeader :tittle="props.title" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm bg-grey-1">
+        <d-table
+          ref="table"
+          :columns="columnsSpecial"
+          :rows="rows"
+          :filter="filter"
+          row-key="interrogated"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumnsSpecial"
+          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 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-section>
     </q-card>
   </q-dialog>
 </template>