Ui ออกคำสั่งบรรจุ

src/modules/05_placement/components/OrderReplace/addOrderReplace.vue

@@ -0,0 +1,181 @@
+<!-- page:detail page รายการสอบทั้งหมด -->
+<template>
+  <q-toolbar class="q-pa-sm text-center">
+    <q-toolbar-title class="text-dark">
+      {{ tittle }}
+      {{ `ครั้งที่${round}/${yearly == null ? "" : yearly + 543}` }}
+    </q-toolbar-title>
+  </q-toolbar>
+  <q-stepper
+    v-model="step"
+    ref="stepper"
+    alternative-labels
+    header-nav
+    animated
+    done-icon="check"
+    :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
+  >
+    <q-step
+      :done="step > 2"
+      :disable="stepRaw < 2"
+      :name="2"
+      title="รายละเอียดการออกคำสั่ง"
+      :icon="
+        stepRaw >= 2
+          ? stepRaw == 2
+            ? 'mdi-pencil'
+            : 'mdi-check-bold'
+          : 'mdi-account'
+      "
+    >
+      <q-card bordered class="q-pa-lg">
+        <q-card-actions
+          v-if="status === 'rejectRegister'"
+          class="q-pa-md q-mb-md text-left row bg-red-2"
+        >
+          <div class="col-12 text-red-12">
+            <li>{{ rejectMessage }}</li>
+          </div>
+        </q-card-actions>
+        <ExamForm :fetchStep="fetchStep" :status="status" />
+      </q-card>
+    </q-step>
+    <q-step
+      :done="step > 3"
+      :disable="stepRaw < 3"
+      :name="3"
+      title="เลือกรายชื่อ"
+      :icon="
+        stepRaw >= 3
+          ? stepRaw == 3
+            ? 'mdi-pencil'
+            : 'mdi-check-bold'
+          : 'mdi-receipt'
+      "
+      v-if="stepPayment"
+    >
+      <q-card bordered class="q-pa-lg">
+        <ExamPayment :fetchStep="fetchStep" :status="status" />
+      </q-card>
+    </q-step>
+    <q-step
+      :done="step > 4"
+      :disable="stepRaw < 4"
+      :name="4"
+      title="เลือก"
+      :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
+    >
+      <q-card bordered class="q-pa-lg">
+        <ExamFinished :fetchStep="fetchStep" :status="status" />
+      </q-card>
+    </q-step>
+    <q-step
+      :done="step > 5"
+      :disable="stepRaw < 5"
+      :name="5"
+      title="รายละเอียดคำสั่งและแนบท้าย"
+      :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
+    >
+      <q-card bordered class="q-pa-lg">
+        <ExamFinished :fetchStep="fetchStep" :status="status" />
+      </q-card>
+    </q-step>
+  </q-stepper>
+  <q-dialog :model-value="modalConsend" persistent>
+    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
+      <Consendform :ok="consendOk" />
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { modalError, messageError } = mixin;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const step = ref<number>(1);
+const stepRaw = ref<number>(1);
+const tittle = ref<string>("");
+const route = useRoute();
+const status = ref<string>("register");
+const modalConsend = ref<boolean>(false);
+const stepPayment = ref<boolean>(true);
+const rejectMessage = ref<string>("");
+const round = ref<number | null>(null);
+const yearly = ref<number | null>(null);
+
+onMounted(async () => {});
+
+const consenClose = () => {
+  modalConsend.value = false;
+};
+
+const consendOk = () => {
+  modalConsend.value = false;
+};
+</script>
+<style>
+.q-stepper {
+  box-shadow: none;
+  background: transparent !important;
+}
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+.q-stepper__header--alternative-labels .q-stepper__tab {
+  min-height: 0px;
+  padding: 1.5% 0% 1.5% 0%;
+}
+.q-stepper__header--border {
+  border-bottom: none;
+}
+.q-stepper__dot {
+  min-width: 35px;
+  height: 35px;
+  width: 35px;
+  font-size: 20px;
+}
+.q-stepper__title {
+  width: 100px;
+}
+.q-stepper__tab--done .q-stepper__title {
+  color: #62a00b;
+}
+.q-stepper__tab--done .q-stepper__dot {
+  color: #95d710;
+  border: 1px solid #62a00b;
+}
+
+.q-stepper__tab--active .q-stepper__title {
+  color: #318bae;
+}
+.q-stepper__tab--active .q-stepper__dot {
+  color: #1cb4ea;
+  border: 1px solid #218ab393;
+}
+
+.q-stepper__tab--disabled .q-stepper__title {
+  color: #92b4c8;
+}
+.q-stepper__tab--disabled .q-stepper__dot {
+  background: #def2fc !important;
+  border: 1px solid #92b4c876;
+}
+
+.q-stepper__tab--disabled .q-stepper__dot .q-icon {
+  color: #7692a3d0;
+}
+.q-stepper--horizontal .q-stepper__line:before,
+.q-stepper--horizontal .q-stepper__line:after {
+  background: #92b4c847;
+}
+</style>