ทะเบียนประวัติ

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from "vue";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -13,6 +14,7 @@ import DialogHistory from "@/modules/04_registryNew/components/DialogHistory.vue
 import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
 
 const store = useRegistryNewDataStore();
+const router = useRouter();
 
 const formFilter = defineModel<FormFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
@@ -173,6 +175,10 @@ function onClickHistory() {
   modalHistory.value = !modalHistory.value;
 }
 
+function onClickViewDetail(id: string) {
+  router.push(`/registry-new/${id}`);
+}
+
 watch(
   () => formFilter.value.pageSize,
   () => {
@@ -278,7 +284,11 @@ watch(
     </template>
     <template v-slot:body="props" v-if="store.mode === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td v-for="col in props.cols" :key="col.id">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="onClickViewDetail(props.row.id)"
+        >
           <div v-if="col.name === 'no'">
             {{
               (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
@@ -388,67 +398,10 @@ watch(
             color="black"
             label="ดูเพิ่มเติม"
             class="hover-button full-width q-pa-md"
+            @click="onClickViewDetail(props.row.id)"
           />
         </q-card>
       </div>
-
-      <!-- <div class="col-xs-12 col-sm-6 col-md-3"> -->
-      <!-- <q-card style="border: 0.5px solid #e4e4e4">
-          <div class="flex justify-center q-pt-md q-px-md">
-            <q-item-section avatar class="q-pa-none">
-              <img
-                src="@/assets/avatar_user.jpg"
-                class="col-4 img-info q-mt-md"
-                style="width: 120px; height: 120px; border-radius: 50%"
-              />
-              <div class="text-weight-medium q-mt-md">
-                {{
-                  `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
-                }}
-              </div>
-              <div class="text-weight-light full-width text-center">
-                {{ props.row.citizenId }}
-              </div>
-            </q-item-section>
-            <q-card
-              bordered
-              class="q-my-md q-py-md full-width bg-grey-2"
-              style="border: 0.5px solid #e4e4e4"
-            >
-              <div class="row q-pl-md">
-                <div class="col">
-                  <div class="text-weight-light">ตำแหน่งเลขที่</div>
-                  <div class="text-weight-medium">{{ props.row.posNo }}</div>
-                </div>
-                <div class="col">
-                  <div class="text-weight-light">ตำแหน่ง</div>
-                  <div class="text-weight-medium">
-                    {{ props.row.position }}
-                  </div>
-                </div>
-              </div>
-              <div class="row q-pl-md q-pt-md">
-                <div class="col">
-                  <div class="text-weight-light">ประเภท</div>
-                  <div class="text-weight-medium">
-                    {{ props.row.posType }}
-                  </div>
-                </div>
-                <div class="col">
-                  <div class="text-weight-light">ระดับชั้นงาน</div>
-                  <div class="text-weight-medium">
-                    {{ props.row.posLevel }}
-                  </div>
-                </div>
-              </div>
-            </q-card>
-          </div>
-          <q-separator class="" color="" />
-          <div class="see-more text-center q-py-md" style="width: 100%">
-            <span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
-          </div>
-        </q-card> -->
-      <!-- </div> -->
     </template>
     <template v-slot:pagination="scope">
       <q-pagination