ปรับ workflow

src/components/Workflow/Main.vue

@@ -6,6 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { Permission } from "@/interface/index/workflow/Main";
 import type { DataListState } from "@/interface/response/workflow/Main";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
@@ -23,17 +24,44 @@ const { id, sysName } = defineProps({
 const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
 
-const isChangeState = ref<boolean>(false); //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
-const isOperate = ref<boolean>(true); //เปลี่ยนสถานะ (state) เอกสารได้
-const isView = ref<boolean>(true); //ดูเอกสารได้
-const isUpdate = ref<boolean>(true); //แก้ไขเอกสารได้
-const isDelete = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
-const isCancel = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
+const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
+const permission = ref<Permission>({
+  isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
+  isOperate: false, //เปลี่ยนสถานะ (state) เอกสารได้
+  isView: false, //ดูเอกสารได้
+  isUpdate: false, //แก้ไขเอกสารได้
+  isDelete: false, //ลบเอกสารได้ (ถ้ามี)
+  isCancel: false, //ลบเอกสารได้ (ถ้ามี)
+});
+const itemState = ref<DataListState[]>([]);
 
 const modalSelectPerson = ref<boolean>(false);
 const modalApprove = ref<boolean>(false);
 
-const itemState = ref<DataListState[]>([]);
+async function fetchCheckState() {
+  await http
+    .post(config.API.workflow + `check-user-now`, {
+      refId: id,
+      system: sysName,
+    })
+    .then(async (res) => {
+      await fetchData();
+      const data = await res.data.result;
+      stateId.value = data.stateId;
+      state.value = data.stateNo === 4 ? 5 : data.stateNo;
+      permission.value = {
+        isChangeState: data.can_change_state,
+        isOperate: data.can_operate,
+        isView: data.can_view,
+        isUpdate: data.can_update,
+        isDelete: data.can_delete,
+        isCancel: data.can_cancel,
+      };
+    })
+    .catch(() => {
+      isPermission.value = false;
+    });
+}
 
 async function fetchData() {
   await http
@@ -50,28 +78,6 @@ async function fetchData() {
     });
 }
 
-async function fetchCheckState() {
-  await http
-    .post(config.API.workflow + `check-user-now`, {
-      refId: id,
-      system: sysName,
-    })
-    .then(async (res) => {
-      const data = await res.data.result;
-      stateId.value = data.stateId;
-      state.value = data.stateNo;
-      isChangeState.value = data.can_change_state;
-      isOperate.value = data.can_operate;
-      isView.value = data.can_view;
-      isUpdate.value = data.can_update;
-      isDelete.value = data.can_delete;
-      isCancel.value = data.can_cancel;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 function onChangeState() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -81,7 +87,7 @@ function onChangeState() {
         system: sysName,
       })
       .then(async () => {
-        await Promise.all([fetchData(), fetchCheckState()]);
+        await fetchCheckState();
       })
       .catch((err) => {
         messageError($q, err);
@@ -92,17 +98,17 @@ function onChangeState() {
   });
 }
 
-async function fetchAllFunction() {
-  await Promise.all([fetchData(), fetchCheckState()]);
-}
-
 onMounted(async () => {
-  await fetchAllFunction();
+  await fetchCheckState();
+});
+
+defineExpose({
+  permission,
 });
 </script>
 
 <template>
-  <q-card bordered class="row col-12">
+  <q-card bordered class="row col-12" v-if="isPermission">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center">
       <div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
       <q-space />
@@ -133,7 +139,7 @@ onMounted(async () => {
             <div class="row q-col-gutter-sm" v-if="state === 1 && index === 0">
               <div>
                 <q-btn
-                  v-if="isChangeState"
+                  v-if="permission.isChangeState"
                   @click.prevent="onChangeState"
                   label="Next Step"
                   color="primary"
@@ -181,7 +187,7 @@ onMounted(async () => {
                 </q-list>
               </div>
 
-              <div v-if="isOperate">
+              <div v-if="permission.isOperate && state === index + 1">
                 <q-btn
                   @click.prevent="modalSelectPerson = true"
                   label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
@@ -189,7 +195,7 @@ onMounted(async () => {
                 />
               </div>
 
-              <div v-if="isChangeState">
+              <div v-if="permission.isChangeState && state === index + 1">
                 <q-btn
                   @click.prevent="onChangeState"
                   label="Next Step"
@@ -206,7 +212,7 @@ onMounted(async () => {
   <DialogSelectPerson
     v-model:modal="modalSelectPerson"
     :state-id="stateId"
-    :fetch-data="fetchAllFunction"
+    :fetch-data="fetchCheckState"
   />
 
   <DialogApprove v-model:modal="modalApprove" :state-id="stateId" />