ทะเบียนประวัติ(ใหม่): แก้การแสดงผลตำแหน่ง

src/modules/04_registryNew/components/TableView.vue

@@ -74,18 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สายงาน",
     sortable: true,
-    field: "posPath",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "posPath",
+    field: (v) => v.posType.posTypeName,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -96,7 +85,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ระดับชั้นงาน",
     sortable: true,
-    field: "posLevel",
+    field: (v) => v.posLevel.posLevelName,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -280,7 +269,7 @@ watch(
     :grid="store.mode === 'card'"
     :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100] "
+    :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
     @update:pagination="updatePageSizePagination"
   >
@@ -340,7 +329,12 @@ watch(
     </template>
     <template v-slot:item="props" v-else>
       <div class="col-xs-12 col-sm-4 col-md-3">
-        <q-card flat bordered class="cardRO" @click="onClickViewDetail(props.row.id)">
+        <q-card
+          flat
+          bordered
+          class="cardRO"
+          @click="onClickViewDetail(props.row.id)"
+        >
           <q-card-section class="text-center q-pb-none">
             <q-avatar size="80px">
               <img src="@/assets/avatar_user.jpg" />
@@ -390,7 +384,7 @@ watch(
                   <q-item-section>
                     <q-item-label caption class="text-black">
                       {{
-                        props.row.posType ? props.row.posType : "-"
+                        props.row.posType ? props.row.posType.posTypeName : "-"
                       }}</q-item-label
                     >
                   </q-item-section>
@@ -403,8 +397,11 @@ watch(
                   <q-item-section>
                     <q-item-label caption class="text-black">
                       {{
-                        props.row.posLevel ? props.row.posLevel : "-"
-                      }}</q-item-label>
+                        props.row.posLevel
+                          ? props.row.posLevel.posLevelName
+                          : "-"
+                      }}</q-item-label
+                    >
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -480,18 +477,18 @@ watch(
   background: #f1f2f496 !important;
 }
 
-.my-custom-toggle{
+.my-custom-toggle {
   border: 1px solid #d0d0d2;
 }
-.cardRO{
+.cardRO {
   border-radius: 10px;
 }
 
-.cardRO:hover{
+.cardRO:hover {
   cursor: pointer;
   background: #dcdcdc33 !important;
 }
-.cardRO:hover .textName{
-  color: #02A998;
+.cardRO:hover .textName {
+  color: #02a998;
 }
 </style>