update wrokflow

src/components/Workflow/Main.vue

@@ -23,6 +23,7 @@ const { id, sysName } = defineProps({
 
 const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
+const dataUserComment = ref<any>();
 
 const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
 const permission = ref<Permission>({
@@ -47,8 +48,12 @@ async function fetchCheckState() {
     .then(async (res) => {
       await fetchData();
       const data = await res.data.result;
+
       stateId.value = data.stateId;
-      state.value = data.stateNo === 4 ? 5 : data.stateNo;
+      state.value =
+        data.stateNo === itemState.value.length
+          ? data.stateNo + 1
+          : data.stateNo;
       permission.value = {
         isChangeState: data.can_change_state,
         isOperate: data.can_operate,
@@ -112,11 +117,6 @@ defineExpose({
     <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 />
-      <q-btn
-        @click.prevent="modalApprove = true"
-        label="DialogApprove"
-        color="public"
-      />
     </div>
     <div class="col-12"><q-separator /></div>
     <q-card-section>
@@ -154,10 +154,7 @@ defineExpose({
             >
               <div v-if="step.stateUserComments.length !== 0">
                 <q-list bordered separator style="min-width: 20vw">
-                  <q-item
-                    v-for="(item, index) in step.stateUserComments"
-                    :key="index"
-                  >
+                  <q-item v-for="item in step.stateUserComments">
                     <q-item-section>
                       <q-item-label>
                         {{ `${item.prefix}${item.firstName} ${item.lastName}` }}
@@ -169,19 +166,32 @@ defineExpose({
                     </q-item-section>
 
                     <q-item-section side top>
-                      <q-item-label class="text-green">
+                      <q-item-label
+                        :class="!item.isApprove ? 'text-red' : 'text-green'"
+                      >
                         {{
                           item.isAcceptSetting
                             ? item.isAccept
                               ? "รับทราบ"
                               : ""
                             : item.isApproveSetting
-                            ? item.isApprove
+                            ? item.isApprove === true
                               ? "อนุมันติ"
+                              : item.isApprove === false
+                              ? "ไม่อนุมันติ"
                               : ""
                             : ""
-                        }}</q-item-label
-                      >
+                        }}
+                      </q-item-label>
+
+                      <q-btn
+                        v-if="item.isComment && state === index + 1"
+                        @click.prevent="
+                          (dataUserComment = item), (modalApprove = true)
+                        "
+                        label="แสดงความเห็น"
+                        color="public"
+                      />
                     </q-item-section>
                   </q-item>
                 </q-list>
@@ -215,5 +225,9 @@ defineExpose({
     :fetch-data="fetchCheckState"
   />
 
-  <DialogApprove v-model:modal="modalApprove" :state-id="stateId" />
+  <DialogApprove
+    v-model:modal="modalApprove"
+    :data-user-comment="dataUserComment"
+    :fetch-data="fetchCheckState"
+  />
 </template>