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 DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
import DialogApprove from "@/components/Workflow/DialogApprove.vue";

const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();

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

const state = ref<number>(1);
const isChangeState = ref<boolean>(false);
const isOperate = ref<boolean>(false);

const rowsOperate = ref<any[]>([
  {
    fullName: "ชื่อนาม - สกุล",
    comment: "ความเห็น",
    position: " บริหาร - ต้น ",
    status: "อนุมัติ",
  },
]);
const modalSelectPerson = ref<boolean>(false);
const modalApprove = ref<boolean>(false);

const itemState = ref<any[]>([
  {
    stateNo: 1,
    stateName: "Darft",
  },
  {
    stateNo: 2,
    stateName: "Operate",
  },
  {
    stateNo: 3,
    stateName: "Finish",
  },
]);

function fetchData() {
  console.log(id, sysName);
  const data = {
    stateNo: 1,
    step: 1,
    can_view: true,
    can_update: true,
    can_operate: true,
    can_change_state: true,
    can_delete: false,
    can_cancel: false,
  };

  state.value = data.stateNo;
  isChangeState.value = data.can_change_state;
  isOperate.value = data.can_operate;
}

function onConfirmDraft() {
  dialogConfirm($q, () => {
    state.value++;
  });
}

onMounted(() => {
  fetchData();
});
</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>
      <q-space />
      <!-- <q-btn
        @click.prevent="modalApprove = true"
        label="DialogApprove"
        color="public"
      /> -->
    </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="step.stateName === 'Darft' && state === 1"
            >
              <div>
                <q-btn
                  v-if="isChangeState"
                  @click.prevent="onConfirmDraft"
                  label="Next Step"
                  color="primary"
                />
              </div>
            </div>

            <!-- Operate -->
            <div
              class="q-col-gutter-sm"
              v-if="step.stateName === 'Operate' && state > 1"
            >
              <div>
                <q-list bordered separator style="min-width: 20vw">
                  <q-item v-for="(item, index) in rowsOperate" :key="index">
                    <q-item-section>
                      <q-item-label
                        >{{ item.fullName }}
                        {{ `(${item.position})` }}</q-item-label
                      >
                      <q-item-label caption lines="2">{{
                        item.comment
                      }}</q-item-label>
                    </q-item-section>

                    <q-item-section side top>
                      <q-item-label class="text-green">
                        {{ item.status }}</q-item-label
                      >
                    </q-item-section>
                  </q-item>
                </q-list>
              </div>

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

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

  <DialogSelectPerson v-model:modal="modalSelectPerson" />

  <DialogApprove v-model:modal="modalApprove" />
</template>