ทะเบียนประวัติ ==> ข้อมูลตำแหน่ง

src/modules/21_report/components/CardPosition.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+/** props*/
+const props = defineProps({
+  id: {
+    type: String,
+    requier: true,
+  },
+
+  type: { type: String, default: "" },
+});
+
+const cardData = ref<any[]>([
+  {
+    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
+    data: [
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+      { name: "ตำแหน่ง", time: "1 ปี" },
+    ],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
+    data: [{ name: "ละดับ", time: "1 ปี" }],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
+    data: [{ name: "ตำแหน่งทางการบริหาร", time: "1 ปี" }],
+  },
+]);
+
+onMounted(() => {
+  console.log(props.id);
+  console.log(props.type);
+});
+</script>
+
+<template>
+  <div class="q-pa-md">
+    <div class="text-weight-bold row items-center">
+      <q-icon name="mdi-account-tie" color="grey-7" />
+      <span class="q-ml-md">ข้อมูลตำแหน่ง </span>
+    </div>
+    <div class="row q-pa-sm">
+      <q-list flat bordered class="col-12" style="border-radius: 5px;">
+        <q-card flat v-for="(item, index) in cardData" :key="index">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">{{ item.label }}</q-item-label>
+              <q-item-label
+                ><li v-for="data in item.data" :key="data.id">
+                  {{ data.name }} {{ data.time }}
+                </li>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-separator spaced v-if="index !==  2"  />
+        </q-card>
+      </q-list>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>