hrms-mgt/src/modules/04_registryPerson/views/requestEditView.vue

<script setup lang="ts">
import { ref } from "vue";

import { useRouter } from "vue-router";

import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";

import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";

const router = useRouter();
const store = useRegistryNewDataStore();
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      รายการคำร้องขอแก้ไขทะเบียนประวัติ
    </div>
  </div>

  <q-card class="q-mt-sm">
    <q-card-section style="padding: 0px">
      <q-separator />
      <q-tabs
        v-model="store.tabs"
        inline-label
        align="left"
        indicator-color="primary"
        active-color="primary bg-teal-1"
      >
        <q-tab
          v-for="(tab, index) in store.tabsManu"
          :key="index"
          :name="tab.id"
          :label="tab.name"
        />
      </q-tabs>
      <q-separator />

      <q-tab-panels v-model="store.tabs" animated>
        <q-tab-panel style="padding: 0px" name="Main">
          <TabInformation />
        </q-tab-panel>

        <q-tab-panel style="padding: 0px" name="IDP"> <TabIDP /> </q-tab-panel>
      </q-tab-panels>
    </q-card-section>
  </q-card>
</template>

<style scoped></style>