hrms-mgt/src/modules/18_command/components/Step/0_Main.vue

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

import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import http from "@/plugins/http";
import config from "@/app.config";

import LiveView from "@/modules/18_command/components/Step/View0_Live.vue"; //เซ็นสด
import DigitalView from "@/modules/18_command/components/Step/View0_Digital.vue"; //Digital Signature

const $q = useQuasar();
const route = useRoute();
const store = useCommandDetail();
const { checkStep } = store;
const { showLoader, hideLoader, messageError, dialogConfirm } =
  useCounterMixin();

const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
const step = ref<number>(1); //สถานะของคำสั่ง
const isStatus = ref<string>(""); //สถานะของคำสั่ง
const signaturetype = ref<string>(""); //วิธีการลงนาม
const isSignature = ref<boolean | null>(null);

const isDraft = ref<boolean>(false); //ทำแบบร่าง
const isSign = ref<boolean>(false); //การลงนาม
const isAttachment = ref<boolean>(false); //เอกสารแนบท้าย
const isUploadAttachment = ref<boolean>(false);

/** ฟังก์ชันเรียกข้อมูลสถานะคำสั่ง*/
async function fetchData() {
  showLoader();
  await http
    .get(config.API.commandAction(commandId.value, "tab0"))
    .then(async (res) => {
      const data = res.data.result;
      step.value = data.status && checkStep(data.status);
      isSignature.value = data.isSignature;
      signaturetype.value =
        data.isSignature === true
          ? "Live"
          : data.isSignature === false
          ? "Digital"
          : "";
      isStatus.value = data.status;
      isDraft.value = data.isDraft;
      isSign.value = data.isSign;
      isAttachment.value = data.isAttachment;
      isUploadAttachment.value = data.isUploadAttachment;
      store.isSalary = data.isSalary;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ฟังก์ชันยืนยันวิธีลงนาม*/
function onConfirmSignature() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(config.API.command + `/sign/${commandId.value}`, {
          sign: signaturetype.value === "Live" ? true : false,
        })
        .then(async () => {
          await fetchData();
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันวิธีลงนาม",
    "เมื่อยืนยันวิธีลงนามแล้วจะไม่สามารถเปลี่ยนวิธีการได้ คุณต้องการยืนยันใช่หรือไม่?"
  );
}

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

<template>
  <q-card-section>
    <div class="col-12 q-col-gutter-md">
      <!-- สถานะของคำสั่ง -->
      <div class="col-12">
        <q-card bordered>
          <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
            สถานะของคำสั่ง
            <spen v-if="isStatus === 'CANCEL'" class="text-red"> (ลบ) </spen>
          </div>
          <q-separator />

          <div class="col-12 q-pa-md">
            <q-stepper
              v-model="step"
              color="primary"
              animated
              header-class="bg-grey-1"
              class="step"
              bordered
              :active-color="isStatus === 'CANCEL' ? 'grey-6' : 'primary'"
              :done-color="isStatus === 'CANCEL' ? 'grey-6' : 'primary'"
            >
              <q-step
                :name="1"
                title="แบบร่าง"
                prefix="1"
                :done="step > 1"
                :header-nav="step > 1"
              />
              <q-step
                :name="2"
                title="รอผู้มีอำนาจลงนามอนุมัติ"
                prefix="2"
                :done="step > 2"
                :header-nav="step > 2"
              />
              <q-step
                :name="3"
                title="รอออกคำสั่ง"
                prefix="3"
                :done="step > 3"
                :header-nav="step > 3"
              />
              <q-step
                :name="4"
                title="ออกคำสั่งเสร็จสิ้น"
                prefix="4"
                :done="step > 4"
                :header-nav="step > 4"
              />
            </q-stepper>
          </div>
        </q-card>
      </div>

      <!-- เลือกวิธีการลงนาม -->
      <div class="col-12">
        <q-card bordered class="col-12">
          <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
            เลือกวิธีการลงนาม
          </div>

          <q-list bordered separator>
            <q-item tag="label" v-ripple>
              <q-item-section avatar>
                <q-radio
                  v-model="signaturetype"
                  val="Live"
                  color="primary"
                  :disable="isSignature !== null || store.readonly"
                />
              </q-item-section>
              <q-item-section>
                <q-item-label>เซ็นสด</q-item-label>
                <q-item-label caption
                  >ดาวน์โหลดเอกสารเป็นไฟล์ word หรือ pdf นำไป Print
                  แล้วเสนอผู้มีอำนาจลงนาม
                  จากนั้นสแกนเอกสารและอัปโหลดกลับเข้าสู่ระบบ
                </q-item-label>
              </q-item-section>
            </q-item>

            <q-item tag="label" v-ripple>
              <q-item-section avatar>
                <q-radio
                  v-model="signaturetype"
                  val="Digital"
                  color="primary"
                  :disable="isSignature !== null || store.readonly"
                />
              </q-item-section>
              <q-item-section>
                <q-item-label>Digital Signature</q-item-label>
                <q-item-label caption
                  >เสนอผู้มีอำนาจลงนานด้วยกระบวนการ Digital Signature
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <div class="row q-pa-sm" v-if="isSignature === null">
            <q-btn
              label="ยืนยันวิธีการลงนาม"
              type="submit"
              :color="!signaturetype ? 'grey-5' : 'primary'"
              :disable="!signaturetype"
              @click.prevent="onConfirmSignature"
            />

            <span class="q-py-sm q-px-md text-red">
              *เมื่อยืนยันวิธีลงนามแล้วจะไม่สามารถเปลี่ยนวิธีการได้</span
            >
          </div>

          <!-- กรณีลงนามเลือกเซ็นสด -->
          <div
            class="col-12"
            v-if="signaturetype === 'Live' && isSignature !== null"
          >
            <LiveView
              v-model:step="step"
              v-model:is-draft="isDraft"
              v-model:is-authority="isSign"
              v-model:is-attachment="isUploadAttachment"
              :fetch-data="fetchData"
            />
          </div>

          <!-- กรณี Digital Signature -->
          <div
            class="col-12"
            v-else-if="signaturetype === 'Digital' && isSignature !== null"
          >
            <DigitalView
              v-model:step="step"
              v-model:is-draft="isDraft"
              v-model:is-attachment="isUploadAttachment"
              :fetch-data="fetchData"
            />
          </div>
        </q-card>
      </div>
    </div>
  </q-card-section>
</template>

<style>
.q-stepper {
  box-shadow: none;
}
.q-stepper--horizontal .q-stepper__step-inner {
  padding: 0px;
}

.step .q-stepper__header--standard-labels .q-stepper__tab {
  min-height: 60px;
}
</style>