ui รายละเอียดคำสั่ง => tab ประมาลผลคำสั่ง

src/modules/18_command/components/Step/0_Main.vue

@@ -1,3 +1,174 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
 
-<template>ประมวลผลคำสั่ง</template>
+import { useCounterMixin } from "@/stores/mixin";
+
+import LiveView from "@/modules/18_command/components/Step/View0_Live.vue";
+import DigitalView from "@/modules/18_command/components/Step/View0_Digital.vue";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, dialogConfirm } =
+  useCounterMixin();
+
+const step = ref<number>(2);
+const isStatus = ref<boolean>(false); //สถานะของคำสั่ง
+const signature = ref<string>(""); //วิธีการลงนาม
+const isSignature = ref<boolean>(false); //การลงนาม
+
+function onConfirmSignature() {
+  dialogConfirm(
+    $q,
+    () => {
+      isSignature.value = true;
+    },
+    "ยืนยันวิธีลงนาม",
+    "เมื่อยืนยันวิธีลงนามแล้วจะไม่สามารถเปลี่ยนวิธีการได้ คุณต้องการยืนยันใช่หรือไม่?"
+  );
+}
+</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" 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 ? 'grey-6' : 'primary'"
+              :done-color="isStatus ? '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="signature"
+                  val="Live"
+                  color="primary"
+                  :disable="isSignature || isStatus"
+                />
+              </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="signature"
+                  val="Digital"
+                  color="primary"
+                  :disable="isSignature || isStatus"
+                />
+              </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">
+            <q-btn
+              label="ยืนยันวิธีการลงนาม"
+              type="submit"
+              :color="signature === '' ? 'grey-5' : 'primary'"
+              :disable="signature === ''"
+              @click.prevent="onConfirmSignature"
+            />
+
+            <span class="q-py-sm q-px-md text-red">
+              *เมื่อยืนยันวิธีลงนามแล้วจะไม่สามารถเปลี่ยนวิธีการได้</span
+            >
+          </div>
+
+          <!-- กรณีลงนามเลือกเซ็นสด -->
+          <div class="col-12" v-if="signature === 'Live' && isSignature">
+            <LiveView />
+          </div>
+
+          <!-- กรณี Digital Signature -->
+          <div
+            class="col-12"
+            v-else-if="signature === 'Digital' && isSignature"
+          >
+            <DigitalView />
+          </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>

src/modules/18_command/components/Step/View0_Digital.vue

@@ -0,0 +1,504 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/18_command/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm, dialogMessageNotify } = useCounterMixin();
+
+const step = ref<number>(4); //ขั้นตอนการลงนาม
+
+//แบบร่าง
+const isDraft = ref<boolean>(false); //ทำแบบร่างเสร็จสิ้น
+
+// แบบร่าง
+const isCheckDraft = ref<boolean>(true); //เช็คทำแบบร่างเสร็จสิ้น
+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 modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
+const typeFilter = ref<string>("firstname");
+const search = ref<string>("");
+const typeFilterOp = ref<DataOption[]>([
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+  { id: "firstname", name: "ชื่อ" },
+  { id: "lastname", name: "นามสกุล" },
+]);
+const rows = ref<any[]>([
+  {
+    citizenId: "6796519798790",
+    firstName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
+  },
+]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
+const selected = ref<any[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+//รอผู้มีอำนาจลงนามอนุมัติ
+const rowsAuthority = ref<any[]>([
+  {
+    fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
+    comment: "ความคิดเห็น",
+    position: "หัวหน้าสำนัก",
+  },
+  {
+    fullName: "นายศรัณย์ ศิลาดี",
+    comment: "",
+    position: "ผู้อำนวนการ",
+  },
+]); //รายชื่อผู้อำนาจลงนามอนุมัติ
+const modalComment = ref<boolean>(false); //popup แสดงความเห็น
+const reason = ref<string>("");
+
+//รอออกคำสั่ง
+const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง
+
+/**
+ * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
+ */
+function onConfirmDraft() {
+  if (
+    orderNo.value !== "" ||
+    affectDate.value !== null ||
+    excecuteDate.value !== null
+  ) {
+  } else {
+    dialogMessageNotify(
+      $q,
+      "ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
+    );
+  }
+}
+
+function onSearchData() {}
+
+function onConfirmSendToCommander() {
+  dialogConfirm(
+    $q,
+    () => {
+      step.value++;
+      isCheckDraft.value = true;
+      onCloseDialog();
+    },
+    "ยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ",
+    "คุณต้องการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจใช่หรือไม่?"
+  );
+}
+
+function updateSelect() {
+  search.value = "";
+}
+
+function onComment() {
+  modalComment.value = true;
+}
+
+function onSubmitComment() {
+  dialogConfirm($q, () => {
+    rowsAuthority.value[1].comment = reason.value;
+    onCloseDialog();
+  });
+}
+
+function onCloseDialog() {
+  modalSelect.value = false;
+  modalComment.value = false;
+}
+</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="isAttachment ? 'col-12' : 'col-6'">
+            <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="!isCheckDraft">
+            <q-btn
+              @click.prevent="onConfirmDraft"
+              label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
+              color="public"
+              :disable="fileOrder === null || fileTailer === null"
+            />
+          </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="">
+            <q-list bordered separator>
+              <q-item v-for="(item, index) in rowsAuthority" :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
+                  v-if="
+                    index === rowsAuthority.length - 1 && item.comment === ''
+                  "
+                >
+                  <q-item-label caption>
+                    <q-btn
+                      flat
+                      dense
+                      color="info"
+                      icon="info"
+                      round
+                      @click.prevent="onComment"
+                    >
+                      <q-tooltip>แสดงความเห็น </q-tooltip>
+                    </q-btn>
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+
+          <div
+            class="col-12"
+            v-if="rowsAuthority[rowsAuthority.length - 1].comment !== ''"
+          >
+            <q-btn
+              @click.prevent="onConfirmDraft"
+              label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
+              color="public"
+            />
+          </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="q-pa-md q-gutter-sm">
+            <q-btn
+              color="blue-5"
+              icon-right="mdi-download"
+              label="ดาวน์โหลดคำสั่งที่เซ็นต์แล้ว"
+            />
+            <q-btn
+              color="blue-5"
+              icon-right="mdi-download"
+              label="ดาวน์โหลดบัญชีแนบท้ายที่เซ็นต์แล้ว"
+            />
+          </div>
+        </div>
+      </q-timeline-entry>
+    </q-timeline>
+  </div>
+
+  <!-- เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง -->
+  <q-dialog v-model="modalSelect" persistent>
+    <q-card style="min-width: 70%">
+      <DialogHeader
+        :tittle="'เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง'"
+        :close="onCloseDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="col-12 q-col-gutter-sm">
+          <div class="col-12 row q-col-gutter-md items-start">
+            <div class="col-12 col-sm-6 col-md-3">
+              <q-select
+                label="ค้นหาจาก"
+                v-model="typeFilter"
+                :options="typeFilterOp"
+                emit-value
+                dense
+                @update:model-value="updateSelect"
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+              />
+            </div>
+
+            <div class="col-12 col-sm-6 col-md-6">
+              <q-input
+                v-model="search"
+                outlined
+                clearable
+                hide-bottom-space
+                dense
+                label="คำค้น"
+                @clear="search = ''"
+              />
+            </div>
+
+            <div class="col-12 col-sm-6 col-md-3">
+              <q-btn
+                color="primary"
+                icon="search"
+                label="ค้นหา"
+                class="full-width q-pa-sm"
+                @click.prevent="onSearchData"
+              >
+              </q-btn>
+            </div>
+          </div>
+
+          <div class="col-12">
+            <d-table
+              flat
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              dense
+              selection="single"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.checkBox"
+                />
+              </template>
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th class="text-center"> </q-th>
+
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td class="text-center">
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div>
+                      {{ col.value ?? "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          :disable="selected.length === 0"
+          @click.prevent="onConfirmSendToCommander"
+          label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- แสดงความเห็น -->
+  <q-dialog v-model="modalComment" persistent>
+    <q-card style="min-width: 40%">
+      <q-form greedy @submit.prevent @validation-success="onSubmitComment">
+        <DialogHeader :tittle="'แสดงความเห็น'" :close="onCloseDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                v-model="reason"
+                label="ความเห็น"
+                type="textarea"
+                :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกความเห็น'}`]"
+                hide-bottom-space
+                lazy-rules
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn color="secondary" label="บันทึกความเห็น" type="onSubmit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.border {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+}
+
+.text-header {
+  color: #34373c;
+  font-size: 1rem;
+  font-weight: 300;
+}
+</style>

src/modules/18_command/components/Step/View0_Live.vue

@@ -0,0 +1,249 @@
+<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>