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

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue

@@ -289,6 +289,27 @@ const posExecutiveOptionMain = ref<DataOption[]>([]);
 
 const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
 
+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 ปี" }],
+  },
+]);
+
 /** function fetch รายการ ตำแหน่งเงินเดือน*/
 async function fetchListSalary() {
   showLoader();
@@ -715,7 +736,24 @@ onMounted(() => {
   fetchListSalary();
 });
 </script>
+
 <template>
+  <div class="row q-col-gutter-sm q-pb-sm">
+    <div class="col" v-for="(item, index) in cardData" :key="index">
+      <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+          {{ item.label }}
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <q-card-section class="q-pt-none" style="min-height: 200px">
+          <li v-for="data in item.data" :key="data.id">
+            {{ data.name }} {{ data.time }}
+          </li>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
       v-if="!isLeave && checkPermission($route)?.attrIsUpdate"