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

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

import { useCounterMixin } from "@/stores/mixin";

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

const step = ref<number>(1); //ขั้นตอนการลงนาม

//แบบร่าง
const isDraft = ref<boolean>(false); //ทำแบบร่างเสร็จสิ้น
const isCheckDraft = ref<boolean>(false); //เช็คทำแบบร่างเสร็จสิ้น

// รอผู้มีอำนาจลงนามอนุมัติ
const isAuthority = ref<boolean>(false); //ผู้มีอำนาจลงนามอนุมัติแล้ว
const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
const isAttachment = ref<boolean>(true); //เช็คบัญชีแนบท้าย
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const orderNo = ref<string>(""); //เลขที่คำสั่ง
const affectDate = ref<Date | null>(null); //วันที่ลงนาม
const excecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล

//รอออกคำสั่ง
const isCheckOrder = ref<boolean>(false); //เช็ครอออกคำสั่ง

/**
 * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
 */
function onConfirmDraft() {
  dialogConfirm(
    $q,
    () => {
      isCheckDraft.value = true;
      step.value++;
    },
    "ยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ",
    "คุณต้องการยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติใช่หรือไม่?"
  );
}

/**
 * ฟังก์ชันยืนยันการส่งออกคำสั่ง
 */
function onConfirmOrder() {
  if (
    orderNo.value !== "" ||
    affectDate.value !== null ||
    excecuteDate.value !== null
  ) {
    dialogConfirm(
      $q,
      () => {
        isCheckAuthority.value = true;
        step.value++;
      },
      "ยืนยันการส่งออกคำสั่ง",
      "คุณต้องการยืนยันการส่งออกคำสั่งใช่หรือไม่?"
    );
  } else {
    dialogMessageNotify(
      $q,
      "ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
    );
  }
}
</script>

<template>
  <div class="q-px-lg q-py-md">
    <q-timeline color="blue-5">
      <!-- แบบร่าง -->
      <q-timeline-entry
        title="แบบร่าง"
        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : ''"
      >
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-checkbox
              v-model="isDraft"
              label="ทำแบบร่างเสร็จสิ้น: Print เอกสารเพื่อส่งเสนอผู้มีอำนาจลงนาม"
              :disable="isCheckDraft"
            />
          </div>

          <div class="col-12" v-if="!isCheckDraft">
            <q-btn
              @click.prevent="onConfirmDraft"
              label="ส่งให้ผู้มีอำนาจลงนามอนุมัติ"
              color="public"
              :disable="!isDraft"
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอผู้มีอำนาจลงนามอนุมัติ -->
      <q-timeline-entry
        title="รอผู้มีอำนาจลงนามอนุมัติ"
        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : ''"
        :color="step < 2 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckDraft">
          <div class="col-12">
            <q-checkbox
              v-model="isAuthority"
              label="ผู้มีอำนาจลงนามอนุมัติแล้ว"
              :disable="step > 2"
            />
          </div>

          <div
            :class="isAttachment ? 'col-12' : 'col-6'"
            style="padding-left: 50px"
            v-if="isAuthority"
          >
            <fieldset class="border q-px-lg q-py-sm">
              <legend class="text-header q-px-sm">
                อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
              </legend>
              <div class="row q-col-gutter-md q-mb-md">
                <!-- คำสั่ง -->
                <div :class="isAttachment ? 'col-6' : 'col-12'">
                  <label class="text-file">คำสั่ง</label>
                  <div class="text-right" v-if="fileOrder">
                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                    </q-btn>
                    <!-- :href="OrderPDFUpload" -->
                    <q-btn
                      rounded
                      type="a"
                      flat
                      dense
                      color="red"
                      icon="mdi-download"
                      target="_blank"
                    >
                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
                    </q-btn>
                  </div>
                  <q-file
                    outlined
                    dense
                    v-model="fileUploadOrder"
                    label="เลือกไฟล์คำสั่ง"
                    hide-bottom-space
                    :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
                    accept=".pdf"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" />
                    </template>
                  </q-file>
                </div>

                <!-- เอกสารแนบท้าย -->
                <div v-if="isAttachment" class="col-6">
                  <label class="text-file">เอกสารแนบท้าย</label>
                  <div class="text-right" v-if="fileTailer">
                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
                      <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
                    </q-btn>
                    <!-- :href="TailerPDFUpload" -->
                    <q-btn
                      type="a"
                      rounded
                      flat
                      dense
                      color="red"
                      icon="mdi-download"
                      target="_blank"
                    >
                      <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                    </q-btn>
                  </div>

                  <q-file
                    outlined
                    dense
                    v-model="fileUploadTailer"
                    label="เลือกไฟล์เอกสารแนบท้าย"
                    hide-bottom-space
                    :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                    accept=".pdf"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" />
                    </template>
                  </q-file>
                </div>
              </div>
            </fieldset>
          </div>

          <div class="col-12" v-if="!isCheckAuthority">
            <q-btn
              @click.prevent="onConfirmOrder"
              label="ยืนยันออกคำสั่ง"
              color="public"
              :disable="
                !isAuthority || fileOrder === null || fileTailer === null
              "
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="รอออกคำสั่ง"
        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : ''"
        :color="step < 3 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckAuthority">
          <div class="col-12">รอออกคำสั่ง</div>
        </div>
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="ออกคำสั่งเสร็จสิ้น"
        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : ''"
        :color="step < 4 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckOrder">
          <div class="col-12">รอออกคำสั่ง</div>
        </div>
      </q-timeline-entry>
    </q-timeline>
  </div>
</template>

<style lang="scss" scoped>
.border {
  border-radius: 10px;
  border: 1px solid #e9eaec;
}

.text-header {
  color: #34373c;
  font-size: 1rem;
  font-weight: 300;
}
</style>