fixing

src/modules/01_masterdata/views/competency.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+import ListCompetency from "@/modules/01_masterdata/components/competency/01ListCompetency.vue";
+import ListLinkPosition from "@/modules/01_masterdata/components/competency/02ListLinkPosition.vue";
+import ListLinkGroup from "@/modules/01_masterdata/components/competency/03ListLinkGroup.vue";
+import ListCriteria from "@/modules/01_masterdata/components/competency/04ListCriteria.vue";
+import ListDetail from "@/modules/01_masterdata/components/competency/05ListDetail.vue";
+
+const currentTab = ref<string>("list_competency");
+const tabs = ref<Array<any>>([]);
+
+onMounted(() => {
+  const tab = [
+    { label: "รายการสมรรถนะ", value: "list_competency" },
+    { label: "กลุ่มงาน", value: "list_linkPosition" },
+    { label: "เชื่อมโยงกับกลุ่มงานและตำแหน่ง", value: "list_linkGroup" },
+    { label: "เกณฑ์การประเมิน", value: "list_criteria" },
+    { label: "การประเมินพฤติกรรมการปฏิบัติราชการ", value: "list_detail" },
+  ];
+  tabs.value = tab;
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">สมรรถนะ</div>
+  <q-card flat bordered>
+    <div class="text-subtitle1 text-grey-9">
+      <q-tabs
+        dense
+        v-model="currentTab"
+        align="left"
+        indicator-color="primary"
+        active-color="primary bg-teal-1"
+        inline-label
+        class="text-body2 text-grey-7"
+      >
+        <q-tab
+          v-for="tab in tabs"
+          :key="tab.value"
+          v-on:click="currentTab = tab.value"
+          :label="tab.label"
+          :name="tab.value"
+          class="q-py-xs"
+        />
+      </q-tabs>
+      <q-separator />
+      <!-- person -->
+
+      <q-tab-panels v-model="currentTab" animated>
+        <q-tab-panel name="list_competency">
+          <ListCompetency v-if="currentTab == 'list_competency'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_linkPosition">
+          <ListLinkPosition v-if="currentTab == 'list_linkPosition'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_linkGroup">
+          <ListLinkGroup v-if="currentTab == 'list_linkGroup'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_criteria">
+          <ListCriteria v-if="currentTab == 'list_criteria'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_detail">
+          <ListDetail v-if="currentTab == 'list_detail'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>