ui k api

src/modules/14_KPI/views/competency.vue

@@ -1,5 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import ListCompetency from "@/modules/14_KPI/components/competency/01ListCompetency.vue";
+import ListLinkPosition from "@/modules/14_KPI/components/competency/02ListLinkPosition.vue";
+import ListLinkGroup from "@/modules/14_KPI/components/competency/03ListLinkGroup.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" },
+  ];
+  tabs.value = tab;
+});
+</script>
+
 <template>
-    <div>
-        สมรรถนะ
+  <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-panels>
     </div>
-</template>
+  </q-card>
+</template>
+
+<style scoped></style>