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>