hrms-user/src/components/Workflow/Main.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type { DataListState } from "@/components/Workflow/interface/response/Main";

import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";

const $q = useQuasar();
const { dialogConfirm, showLoader, hideLoader, messageError } =
  useCounterMixin();

const { id, sysName } = defineProps({
  id: { type: String, require: true },
  sysName: { type: String, require: true },
});

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 modalSelectPerson = ref<boolean>(false); //เลือกรายชื่อ ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ
const itemState = ref<DataListState[]>([]);

/** ฟังก์ชันเรียกข้อมูล Workflow ทั้งหมด*/
async function fetchData() {
  await http
    .post(config.API.workflow + `check-state-all`, {
      refId: id,
      system: sysName,
    })
    .then(async (res) => {
      const data = await res.data.result;
      itemState.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** ฟังก์ชันเรียกข้อมูล Workflow ที่อยู่ปัจุบัน*/
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);
    });
}

/** ฟังก์ชันยืนยันการ NextStep*/
function onChangeState() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.workflow + `state-next`, {
        refId: id,
        system: sysName,
      })
      .then(async () => {
        await Promise.all([fetchData(), fetchCheckState()]);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** ฟังก์ชันเรียกใช้งานฟังก์ชัน fetchData, fetchCheckState*/
async function fetchAllFunction() {
  await Promise.all([fetchData(), fetchCheckState()]);
}

onMounted(async () => {
  await fetchAllFunction();
});
</script>

<template>
  <q-card bordered class="row col-12">
    <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>
    </div>
    <div class="col-12"><q-separator /></div>
    <q-card-section>
      <div class="q-px-lg q-py-md">
        <q-timeline color="primary">
          <q-timeline-entry
            v-for="(step, index) in itemState"
            :key="index"
            :title="step.stateName"
            :icon="
              state === index + 1
                ? 'mdi-pencil'
                : state > index + 1
                ? 'done'
                : `mdi-numeric-${index + 1}`
            "
            :color="state < index + 1 ? 'grey-4' : ''"
          >
            <!-- Darft -->
            <div class="row q-col-gutter-sm" v-if="state === 1">
              <div>
                <q-btn
                  v-if="isChangeState"
                  @click.prevent="onChangeState"
                  label="Next Step"
                  color="primary"
                />
              </div>
            </div>

            <!-- Operate -->
            <div
              class="q-col-gutter-sm"
              v-if="index > 0 && index < itemState.length - 1 && state > index"
            >
              <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-section>
                      <q-item-label
                        >{{ item.createdFullName }}
                        <!-- {{ `(${item.position})` }} -->
                      </q-item-label>
                      <q-item-label caption lines="2">{{
                        item.isReasonSetting ? item.reason : ""
                      }}</q-item-label>
                    </q-item-section>

                    <q-item-section side top>
                      <q-item-label class="text-green">
                        {{
                          item.isAcceptSetting
                            ? item.isAccept
                              ? "รับทราบ"
                              : ""
                            : item.isApproveSetting
                            ? item.isApprove
                              ? "อนุมันติ"
                              : ""
                            : ""
                        }}</q-item-label
                      >
                    </q-item-section>
                  </q-item>
                </q-list>
              </div>

              <div v-if="isOperate">
                <q-btn
                  @click.prevent="modalSelectPerson = true"
                  label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
                  color="public"
                />
              </div>

              <div v-if="isChangeState">
                <q-btn
                  @click.prevent="onChangeState"
                  label="Next Step"
                  color="primary"
                />
              </div>
            </div>
          </q-timeline-entry>
        </q-timeline>
      </div>
    </q-card-section>
  </q-card>

  <DialogSelectPerson
    v-model:modal="modalSelectPerson"
    :state-id="stateId"
    :fetch-data="fetchAllFunction"
  />
</template>