hrms-mgt/src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue

<!-- 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>