สิทธิ tab

src/modules/05_placement/components/probation/MainDetail.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
-import { ref, defineAsyncComponent, onMounted } from "vue";
+import { ref, defineAsyncComponent, onMounted, reactive } from "vue";
 import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useQuasar } from "quasar";
+
 const DataStore = useProbationDataStore();
 
 const ProbationFormAssign = defineAsyncComponent(
@@ -42,9 +49,24 @@ const SummaryScore = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/SummaryScore.vue")
 );
 
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+
 const router = useRouter();
 const route = useRoute();
 const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
+
+const assignId = ref<string>(route.params.form as string);
 const drawer = ref<boolean>(true);
 const activeTab = ref<string>("");
 const personalId = ref<string>(route.params.personalId.toString());
@@ -66,8 +88,22 @@ function clickBack() {
   DataStore.mainTab = "tab1";
 }
 
+async function getPermissions() {
+  await http
+    .get(config.API.permissionsCheck(assignId.value))
+    .then(async (res) => {
+      const data = await res.data.data;
+      DataStore.dataPermissions = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
 /** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
-onMounted(() => {
+onMounted(async () => {
+  await getPermissions();
   if (DataStore.mainTab) {
     activeTab.value = DataStore.mainTab;
   } else activeTab.value = "tab1";
@@ -120,6 +156,7 @@ onMounted(() => {
               v-ripple
               :active="activeTab == 'tab1'"
               @click="changeTab('tab1')"
+              :disable="DataStore.dataPermissions?.tab1.isView == false"
             >
               <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
             </q-item>
@@ -132,6 +169,7 @@ onMounted(() => {
               v-ripple
               :active="activeTab == 'tab2'"
               @click="changeTab('tab2')"
+              :disable="DataStore.dataPermissions?.tab2.isView == false"
             >
               <q-item-section>
                 แบบบันทึกผล
@@ -139,6 +177,7 @@ onMounted(() => {
                 <div class="text-caption text-grey-7">(ผู้ดูแล)</div>
               </q-item-section>
             </q-item>
+
             <q-item
               dense
               class="q-py-sm"
@@ -147,6 +186,7 @@ onMounted(() => {
               v-ripple
               :active="activeTab == 'tab8'"
               @click="changeTab('tab8')"
+              :disable="DataStore.dataPermissions?.tab3.isView == false"
             >
               <q-item-section>
                 แบบบันทึกผล
@@ -163,6 +203,7 @@ onMounted(() => {
               v-ripple
               :active="activeTab == 'tab3'"
               @click="changeTab('tab3')"
+              :disable="DataStore.dataPermissions?.tab4.isView == false"
             >
               <q-item-section>
                 แบบประเมินผล<br />
@@ -178,6 +219,7 @@ onMounted(() => {
               v-ripple
               :active="activeTab == 'tab4'"
               @click="changeTab('tab4')"
+              :disable="DataStore.dataPermissions?.tab5.isView == false"
             >
               <q-item-section>
                 แบบประเมินผล<br />
@@ -193,6 +235,7 @@ onMounted(() => {
               v-ripple
               :active="activeTab == 'tab5'"
               @click="changeTab('tab5')"
+              :disable="DataStore.dataPermissions?.tab6.isView == false"
             >
               <q-item-section> แบบรายงาน<br />การประเมินฯ </q-item-section>
             </q-item>
@@ -205,6 +248,7 @@ onMounted(() => {
               v-ripple
               :active="activeTab == 'tab6'"
               @click="changeTab('tab6')"
+              :disable="DataStore.dataPermissions?.tab7.isView == false"
             >
               <q-item-section> ผลการประเมินการ ฯ </q-item-section>
             </q-item>