update wrokflow

src/components/Workflow/DialogApprove.vue

@@ -13,38 +13,36 @@ const { dialogConfirm, showLoader, hideLoader, messageError } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const { stateId } = defineProps({
-  stateId: { type: String, require: true },
+const props = defineProps({
+  dataUserComment: { type: Object, require: true },
+  fetchData: { type: Function, require: true },
 });
 
 const isAcceptSetting = ref<boolean>(false);
 const isApproveSetting = ref<boolean>(false);
 const isReasonSetting = ref<boolean>(false);
 
+const stateUserCommentId = ref<string>("");
 const isAccept = ref<boolean>(false);
 const isApprove = ref<string>("");
 const reason = ref<string>("");
 
 async function fetchData() {
-  showLoader();
-  await http
-    .post(config.API.workflow + `comment-state-user`, { stateId: stateId })
-    .then(async (res) => {
-      const data = res.data.result;
-      isAcceptSetting.value = data.isAcceptSetting;
-      isApproveSetting.value = data.isApproveSetting;
-      isReasonSetting.value = data.isReasonSetting;
-
-      isAccept.value = data.isAccept;
-      isApprove.value = data.isApprove ? "approve" : "";
-      reason.value = data.reason;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  const data = props.dataUserComment;
+  if (data) {
+    stateUserCommentId.value = data.id;
+    isAcceptSetting.value = data.isAcceptSetting;
+    isApproveSetting.value = data.isApproveSetting;
+    isReasonSetting.value = data.isReasonSetting;
+    isAccept.value = data.isAccept;
+    isApprove.value =
+      data.isApprove === true
+        ? "approve"
+        : data.isApprove === false
+        ? "reject"
+        : "";
+    reason.value = data.reason;
+  }
 }
 
 function onSubmit() {
@@ -52,7 +50,7 @@ function onSubmit() {
     showLoader();
     await http
       .post(config.API.workflow + `comment`, {
-        stateId: stateId,
+        stateUserCommentId: stateUserCommentId.value,
         isAccept: isAcceptSetting.value ? isAccept.value : undefined,
         isApprove: isApproveSetting.value
           ? isApprove.value === "approve"
@@ -62,6 +60,7 @@ function onSubmit() {
         reason: isReasonSetting.value ? reason.value : undefined,
       })
       .then(async () => {
+        await props.fetchData?.();
         onCloseModal();
       })
       .catch((err) => {
@@ -135,6 +134,7 @@ watch(modal, (val) => {
               <div class="q-pa-sm q-gutter-sm">
                 <div class="col-12">
                   <q-input
+                    class="inputgreen"
                     dense
                     outlined
                     label="ความเห็น"

src/components/Workflow/DialogSelectPerson.vue

@@ -15,7 +15,7 @@ const { dialogConfirm, showLoader, hideLoader, messageError } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const { stateId, fetchData } = defineProps({
+const props = defineProps({
   stateId: { type: String, require: true },
   fetchData: { type: Function, require: true },
 });
@@ -89,14 +89,14 @@ function onSubmit() {
     showLoader();
     await http
       .post(config.API.workflow + `add-step`, {
-        stateId: stateId,
+        stateId: props.stateId,
         profileId: selected.value[0].id,
         isAcceptSetting: isAcceptSetting.value,
         isApproveSetting: isApproveSetting.value,
         isReasonSetting: isReasonSetting.value,
       })
       .then(async () => {
-        await fetchData?.();
+        await props.fetchData?.();
         onCloseModal();
       })
       .catch((err) => {
@@ -112,6 +112,9 @@ function onCloseModal() {
   modal.value = false;
   selected.value = [];
   rows.value = [];
+  isAcceptSetting.value = false;
+  isApproveSetting.value = false;
+  isReasonSetting.value = false;
 }
 
 watch(modal, (val) => {

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>